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

Browse Source
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
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

54
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,7 +238,6 @@ 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}`}>
@@ -298,12 +274,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
`} `}
> >
{/* Hide Panel */} {/* Hide Panel */}
<div <button
className={`icon ${ className={`icon ${
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active" ? "active"
: "" : ""
}`} }`}
id="hide-panel-visulization"
title={ title={
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel" ? "Show Panel"
@@ -318,12 +295,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
: "var(--text-color)" : "var(--text-color)"
} }
/> />
</div> </button>
{/* Clean Panel */} {/* Clean Panel */}
<div <button
className="icon" className="icon"
title="Clean Panel" title="Clean Panel"
id="clean-panel-visulization"
onClick={() => cleanPanel(side)} onClick={() => cleanPanel(side)}
style={{ style={{
cursor: cursor:
@@ -334,13 +312,14 @@ const AddButtons: React.FC<ButtonsProps> = ({
}} }}
> >
<CleanPannel /> <CleanPannel />
</div> </button>
{/* Lock/Unlock Panel */} {/* Lock/Unlock Panel */}
<div <button
className={`icon ${ className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : "" selectedZone.lockedPanels.includes(side) ? "active" : ""
}`} }`}
id="lock-panel-visulization"
title={ title={
selectedZone.lockedPanels.includes(side) selectedZone.lockedPanels.includes(side)
? "Unlock Panel" ? "Unlock Panel"
@@ -355,13 +334,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
: "var(--text-color)" : "var(--text-color)"
} }
/> />
</div> </button>
</div> </div>
)} )}
</div> </div>
))} ))}
</div> </div>
</>
); );
}; };