Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Update element IDs for better clarity and consistency across components

This commit is contained in:
Vishnu 2025-05-15 10:30:37 +05:30
parent 8d555278d2
commit c77b62db19
10 changed files with 108 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@ -83,7 +83,7 @@ const SideBarRight: React.FC = () => {
{activeModule === "simulation" && (
<>
<button
id="sidebar-action-list-properties"
id="sidebar-action-list-simulation"
className={`sidebar-action-list ${
subModule === "simulations" ? "active" : ""
}`}
@ -96,7 +96,7 @@ const SideBarRight: React.FC = () => {
<SimulationIcon isActive={subModule === "simulations"} />
</button>
<button
id="sidebar-action-list-properties"
id="sidebar-action-list-mechanics"
className={`sidebar-action-list ${
subModule === "mechanics" ? "active" : ""
}`}
@ -109,7 +109,7 @@ const SideBarRight: React.FC = () => {
<MechanicsIcon isActive={subModule === "mechanics"} />
</button>
<button
id="sidebar-action-list-properties"
id="sidebar-action-list-analysis"
className={`sidebar-action-list ${
subModule === "analysis" ? "active" : ""
}`}

7
app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
View File

@ -84,8 +84,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
>
<div className="list-container">
{multipleAction &&
selectedPointData &&
selectedPointData.actions.map((action: any) => (
selectedPointData?.actions?.map((action: any) => (
<div
key={action.actionUuid}
className={`list-item ${
@ -106,7 +105,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
onRename={(value) => handleRenameAction(value)}
/>
</button>
{selectedPointData.actions.length > 1 && (
{selectedPointData?.actions?.length > 1 && (
<button
id="remove-action-button"
className="remove-button"
@ -121,7 +120,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
)}
</div>
))}
{!multipleAction && selectedPointData && (
{!multipleAction && selectedPointData?.action && (
<div
key={selectedPointData.action.actionUuid}
className={`list-item active`}

1
app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
View File

@ -102,6 +102,7 @@ const VersionHistory = () => {
<button
key={version.versionName}
className="saved-version"
id={`${version.versionName}-${index}`}
onClick={() => handleSelectVersion(version)}
>
<div className="version-name">{version.versionName}</div>

2
app/src/components/ui/Tools.tsx
View File

@ -345,7 +345,7 @@ const Tools: React.FC = () => {
{["cursor", "free-hand", "delete"].map((option) => (
<button
key={option}
id={option}
id={`${option}-tool`}
className="option-list"
onClick={() => {
setActiveTool(option);

2
app/src/components/ui/list/List.tsx
View File

@ -215,7 +215,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
>
<div className="list-item">
<button
id="asset-name"
id={`${asset.name}-${asset.id}`}
className="value"
onClick={() => handleAssetClick(asset)}
>

2
app/src/modules/market/Card.tsx
View File

@ -103,7 +103,7 @@ const Card: React.FC<CardProps> = ({
</div>
</div>
<button
id="asset-buy"
id={`${AssetID}-asset-buy`}
className="buy-now-button"
onClick={handleCardSelect}
>

2
app/src/modules/market/FilterSearch.tsx
View File

@ -79,7 +79,7 @@ const FilterSearch: React.FC<ModelsProps> = ({
<div className="stars">
{[0, 1, 2, 3, 4].map((i) => (
<button
id="star-button"
id={`${i + 1}-star-button`}
key={i}
onClick={() => handleStarClick(i)}
className={`star-wrapper ${i < rating ? "filled" : "empty"}`}

1
app/src/modules/simulation/compare/compare.tsx
View File

@ -52,6 +52,7 @@ const ComparePopUp = () => {
</div>
<button
className="cancel btn"
id="compare-cancel-btn"
onClick={() => setComparePopUp(false)}
>
Cancel

8
app/src/modules/visualization/template/Templates.tsx
View File

@ -14,7 +14,7 @@ const Templates = () => {
useEffect(() => {
async function templateData() {
try {
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getTemplateData(organization);
setTemplates(response);
@ -33,8 +33,7 @@ const Templates = () => {
) => {
try {
e.stopPropagation();
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteTemplate = {
organization: organization,
@ -56,7 +55,7 @@ const Templates = () => {
const handleLoadTemplate = async (template: any) => {
try {
if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
let loadingTemplate = {
@ -110,7 +109,6 @@ const Templates = () => {
)}
<div className="template-details">
<div className="template-name">
{/* {`Template ${index + 1}`} */}
<RenameInput value={`Template ${index + 1}`} />
</div>
<button

208
app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React from "react";
import {
CleanPannel,
EyeIcon,
@ -95,8 +95,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to toggle lock/unlock a panel
const toggleLockPanel = async (side: Side) => {
// console.log('side: ', side);
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
//add api
const newLockedPanels = selectedZone.lockedPanels.includes(side)
@ -118,12 +117,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
}
setSelectedZone(updatedZone);
// let response = await lockPanel(selectedZone.zoneId, organization, newLockedPanels)
// console.log('response: ', response);
// if (response.message === 'locked panel updated successfully') {
// // Update the selectedZone state
// setSelectedZone(updatedZone);
// }
};
// Function to clean all widgets from a panel
@ -136,7 +129,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
)
return;
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
let clearPanel = {
@ -155,23 +148,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
widgets: cleanedWidgets,
};
// Update the selectedZone state
// console.log('updatedZone: ', updatedZone);
setSelectedZone(updatedZone);
// let response = await clearPanel(selectedZone.zoneId, organization, side)
// console.log('response: ', response);
// if (response.message === 'PanelWidgets cleared successfully') {
// const cleanedWidgets = selectedZone.widgets.filter(
// (widget) => widget.panel !== side
// );
// const updatedZone = {
// ...selectedZone,
// widgets: cleanedWidgets,
// };
// // Update the selectedZone state
// setSelectedZone(updatedZone);
// }
};
// Function to handle "+" button click
@ -186,8 +163,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
setTimeout(() => {
console.log("Removing after wait...");
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
// Remove widgets for that side
const cleanedWidgets = selectedZone.widgets.filter(
@ -229,8 +206,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
} else {
// Panel does not exist: Add it
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
@ -261,33 +238,32 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
return (
<>
<div>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
<div>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
<button
id="panel-add-button"
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
? `Remove all items and close ${side} panel`
: `Activate ${side} panel`
}
>
<div className="add-icon">
<AddIcon />
</div>
</button>
<button
id="panel-add-button"
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
? `Remove all items and close ${side} panel`
: `Activate ${side} panel`
}
>
<div className="add-icon">
<AddIcon />
</div>
</button>
{/* Extra Buttons */}
{selectedZone.activeSides.includes(side) && (
<div
className={`extra-Bs
{/* Extra Buttons */}
{selectedZone.activeSides.includes(side) && (
<div
className={`extra-Bs
${waitingPanels === side ? "extra-Bs-addclosing" : ""}
${
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
@ -296,72 +272,74 @@ const AddButtons: React.FC<ButtonsProps> = ({
: ""
}
`}
>
{/* Hide Panel */}
<button
className={`icon ${
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active"
: ""
}`}
id="hide-panel-visulization"
title={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel"
: "Hide Panel"
}
onClick={() => toggleVisibility(side)}
>
{/* Hide Panel */}
<div
className={`icon ${
<EyeIcon
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active"
: ""
}`}
title={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel"
: "Hide Panel"
? "var(--icon-default-color-active)"
: "var(--text-color)"
}
onClick={() => toggleVisibility(side)}
>
<EyeIcon
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "var(--icon-default-color-active)"
: "var(--text-color)"
}
/>
</div>
/>
</button>
{/* Clean Panel */}
<div
className="icon"
title="Clean Panel"
onClick={() => cleanPanel(side)}
style={{
cursor:
hiddenPanels[selectedZone.zoneId]?.includes(side) ||
selectedZone.lockedPanels.includes(side)
? "not-allowed"
: "pointer",
}}
>
<CleanPannel />
</div>
{/* Lock/Unlock Panel */}
<div
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
{/* Clean Panel */}
<button
className="icon"
title="Clean Panel"
id="clean-panel-visulization"
onClick={() => cleanPanel(side)}
style={{
cursor:
hiddenPanels[selectedZone.zoneId]?.includes(side) ||
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
: "Lock Panel"
? "not-allowed"
: "pointer",
}}
>
<CleanPannel />
</button>
{/* Lock/Unlock Panel */}
<button
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
id="lock-panel-visulization"
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
: "Lock Panel"
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "var(--icon-default-color-active)"
: "var(--text-color)"
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "var(--icon-default-color-active)"
: "var(--text-color)"
}
/>
</div>
</div>
)}
</div>
))}
</div>
</>
/>
</button>
</div>
)}
</div>
))}
</div>
);
};