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" && ( {activeModule === "simulation" && (
<> <>
<button <button
id="sidebar-action-list-properties" id="sidebar-action-list-simulation"
className={`sidebar-action-list ${ className={`sidebar-action-list ${
subModule === "simulations" ? "active" : "" subModule === "simulations" ? "active" : ""
}`} }`}
@ -96,7 +96,7 @@ const SideBarRight: React.FC = () => {
<SimulationIcon isActive={subModule === "simulations"} /> <SimulationIcon isActive={subModule === "simulations"} />
</button> </button>
<button <button
id="sidebar-action-list-properties" id="sidebar-action-list-mechanics"
className={`sidebar-action-list ${ className={`sidebar-action-list ${
subModule === "mechanics" ? "active" : "" subModule === "mechanics" ? "active" : ""
}`} }`}
@ -109,7 +109,7 @@ const SideBarRight: React.FC = () => {
<MechanicsIcon isActive={subModule === "mechanics"} /> <MechanicsIcon isActive={subModule === "mechanics"} />
</button> </button>
<button <button
id="sidebar-action-list-properties" id="sidebar-action-list-analysis"
className={`sidebar-action-list ${ className={`sidebar-action-list ${
subModule === "analysis" ? "active" : "" 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"> <div className="list-container">
{multipleAction && {multipleAction &&
selectedPointData && selectedPointData?.actions?.map((action: any) => (
selectedPointData.actions.map((action: any) => (
<div <div
key={action.actionUuid} key={action.actionUuid}
className={`list-item ${ className={`list-item ${
@ -106,7 +105,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
onRename={(value) => handleRenameAction(value)} onRename={(value) => handleRenameAction(value)}
/> />
</button> </button>
{selectedPointData.actions.length > 1 && ( {selectedPointData?.actions?.length > 1 && (
<button <button
id="remove-action-button" id="remove-action-button"
className="remove-button" className="remove-button"
@ -121,7 +120,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
)} )}
</div> </div>
))} ))}
{!multipleAction && selectedPointData && ( {!multipleAction && selectedPointData?.action && (
<div <div
key={selectedPointData.action.actionUuid} key={selectedPointData.action.actionUuid}
className={`list-item active`} className={`list-item active`}

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

@ -102,6 +102,7 @@ const VersionHistory = () => {
<button <button
key={version.versionName} key={version.versionName}
className="saved-version" className="saved-version"
id={`${version.versionName}-${index}`}
onClick={() => handleSelectVersion(version)} onClick={() => handleSelectVersion(version)}
> >
<div className="version-name">{version.versionName}</div> <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) => ( {["cursor", "free-hand", "delete"].map((option) => (
<button <button
key={option} key={option}
id={option} id={`${option}-tool`}
className="option-list" className="option-list"
onClick={() => { onClick={() => {
setActiveTool(option); 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"> <div className="list-item">
<button <button
id="asset-name" id={`${asset.name}-${asset.id}`}
className="value" className="value"
onClick={() => handleAssetClick(asset)} onClick={() => handleAssetClick(asset)}
> >

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

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

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

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

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

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

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

@ -14,7 +14,7 @@ const Templates = () => {
useEffect(() => { useEffect(() => {
async function templateData() { async function templateData() {
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let response = await getTemplateData(organization); let response = await getTemplateData(organization);
setTemplates(response); setTemplates(response);
@ -33,8 +33,7 @@ const Templates = () => {
) => { ) => {
try { try {
e.stopPropagation(); e.stopPropagation();
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let deleteTemplate = { let deleteTemplate = {
organization: organization, organization: organization,
@ -56,7 +55,7 @@ const Templates = () => {
const handleLoadTemplate = async (template: any) => { const handleLoadTemplate = async (template: any) => {
try { try {
if (selectedZone.zoneName === "") return; if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let loadingTemplate = { let loadingTemplate = {
@ -110,7 +109,6 @@ const Templates = () => {
)} )}
<div className="template-details"> <div className="template-details">
<div className="template-name"> <div className="template-name">
{/* {`Template ${index + 1}`} */}
<RenameInput value={`Template ${index + 1}`} /> <RenameInput value={`Template ${index + 1}`} />
</div> </div>
<button <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 { import {
CleanPannel, CleanPannel,
EyeIcon, EyeIcon,
@ -95,8 +95,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to toggle lock/unlock a panel // Function to toggle lock/unlock a panel
const toggleLockPanel = async (side: Side) => { 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 const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
//add api //add api
const newLockedPanels = selectedZone.lockedPanels.includes(side) const newLockedPanels = selectedZone.lockedPanels.includes(side)
@ -118,12 +117,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
} }
setSelectedZone(updatedZone); 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 // Function to clean all widgets from a panel
@ -136,7 +129,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
) )
return; return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
let clearPanel = { let clearPanel = {
@ -155,23 +148,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
widgets: cleanedWidgets, widgets: cleanedWidgets,
}; };
// Update the selectedZone state // Update the selectedZone state
// console.log('updatedZone: ', updatedZone);
setSelectedZone(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 // Function to handle "+" button click
@ -186,8 +163,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
setTimeout(() => { setTimeout(() => {
console.log("Removing after wait..."); console.log("Removing after wait...");
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] || ""; const organization = email?.split("@")[1]?.split(".")[0] ?? "";
// Remove widgets for that side // Remove widgets for that side
const cleanedWidgets = selectedZone.widgets.filter( const cleanedWidgets = selectedZone.widgets.filter(
@ -229,8 +206,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
} else { } else {
// Panel does not exist: Add it // Panel does not exist: Add it
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] || ""; const organization = email?.split("@")[1]?.split(".")[0] ?? "";
const newActiveSides = selectedZone.activeSides.includes(side) const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides] ? [...selectedZone.activeSides]
@ -261,33 +238,32 @@ const AddButtons: React.FC<ButtonsProps> = ({
}; };
return ( return (
<> <div>
<div> {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
{(["top", "right", "bottom", "left"] as Side[]).map((side) => ( <div key={side} className={`side-button-container ${side}`}>
<div key={side} className={`side-button-container ${side}`}> {/* "+" Button */}
{/* "+" Button */}
<button <button
id="panel-add-button" id="panel-add-button"
className={`side-button ${side}${ className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : "" selectedZone.activeSides.includes(side) ? " active" : ""
}`} }`}
onClick={() => handlePlusButtonClick(side)} onClick={() => handlePlusButtonClick(side)}
title={ title={
selectedZone.activeSides.includes(side) selectedZone.activeSides.includes(side)
? `Remove all items and close ${side} panel` ? `Remove all items and close ${side} panel`
: `Activate ${side} panel` : `Activate ${side} panel`
} }
> >
<div className="add-icon"> <div className="add-icon">
<AddIcon /> <AddIcon />
</div> </div>
</button> </button>
{/* Extra Buttons */} {/* Extra Buttons */}
{selectedZone.activeSides.includes(side) && ( {selectedZone.activeSides.includes(side) && (
<div <div
className={`extra-Bs className={`extra-Bs
${waitingPanels === side ? "extra-Bs-addclosing" : ""} ${waitingPanels === side ? "extra-Bs-addclosing" : ""}
${ ${
!hiddenPanels[selectedZone.zoneId]?.includes(side) && !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 */} <EyeIcon
<div fill={
className={`icon ${
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active" ? "var(--icon-default-color-active)"
: "" : "var(--text-color)"
}`}
title={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel"
: "Hide Panel"
} }
onClick={() => toggleVisibility(side)} />
> </button>
<EyeIcon
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "var(--icon-default-color-active)"
: "var(--text-color)"
}
/>
</div>
{/* Clean Panel */} {/* Clean Panel */}
<div <button
className="icon" className="icon"
title="Clean Panel" title="Clean Panel"
onClick={() => cleanPanel(side)} id="clean-panel-visulization"
style={{ onClick={() => cleanPanel(side)}
cursor: style={{
hiddenPanels[selectedZone.zoneId]?.includes(side) || cursor:
selectedZone.lockedPanels.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side) ||
? "not-allowed"
: "pointer",
}}
>
<CleanPannel />
</div>
{/* Lock/Unlock Panel */}
<div
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side) selectedZone.lockedPanels.includes(side)
? "Unlock Panel" ? "not-allowed"
: "Lock Panel" : "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)} />
> </button>
<LockIcon </div>
fill={ )}
selectedZone.lockedPanels.includes(side) </div>
? "var(--icon-default-color-active)" ))}
: "var(--text-color)" </div>
}
/>
</div>
</div>
)}
</div>
))}
</div>
</>
); );
}; };