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

Merge branch 'realTimeVisulization' into simulation

This commit is contained in:
Jerald-Golden-B 2025-04-16 18:31:21 +05:30
parent 8e491a0002 16cf1b96cc
commit cc074a5913
13 changed files with 74 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
View File

@ -62,7 +62,7 @@ const BarChartInput = (props: Props) => {
fetchSavedInputes();
}, [selectedChartId.id]);
}, [selectedChartId]);
// Sync Zustand state when component mounts
useEffect(() => {
@ -138,7 +138,7 @@ const BarChartInput = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
</div>
{[...Array(3)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -152,6 +152,7 @@ const BarChartInput = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

7
app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
View File

@ -23,6 +23,10 @@ const FleetEfficiencyInputComponent = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
const isSelected = () => {
}
useEffect(() => {
const fetchZoneData = async () => {
try {
@ -139,7 +143,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
</div>
{[...Array(1)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -153,6 +157,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
View File

@ -139,7 +139,7 @@ const FlotingWidgetInput = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
</div>
{[...Array(6)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -153,6 +153,7 @@ const FlotingWidgetInput = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
View File

@ -257,7 +257,7 @@ const LineGrapInput = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
</div>
{[...Array(4)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -271,6 +271,7 @@ const LineGrapInput = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
View File

@ -138,7 +138,7 @@ const PieChartInput = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
</div>
{[...Array(2)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -152,6 +152,7 @@ const PieChartInput = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
View File

@ -132,7 +132,7 @@ const Progress1Input = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
</div>
{[...Array(1)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -146,6 +146,7 @@ const Progress1Input = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
View File

@ -132,7 +132,7 @@ const Progress2Input = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
</div>
{[...Array(2)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -146,6 +146,7 @@ const Progress2Input = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

3
app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
View File

@ -139,7 +139,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
<RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
</div>
{[...Array(1)].map((_, index) => {
const inputKey = `input${index + 1}`;
@ -153,6 +153,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

1
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
View File

@ -151,6 +151,7 @@ const Widget2InputCard3D = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

1
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
View File

@ -144,6 +144,7 @@ const Widget3InputCard3D = () => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

1
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
View File

@ -151,6 +151,7 @@ const Widget4InputCard3D = (props: Props) => {
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
allSelections={selections}
/>
<div className="icon">
<AddIcon />

218
app/src/components/ui/inputs/MultiLevelDropDown.tsx
View File

@ -1,145 +1,3 @@
// import React, { useState, useRef, useEffect } from "react";
// // Dropdown Item Component
// const DropdownItem = ({
// label,
// href,
// onClick,
// }: {
// label: string;
// href?: string;
// onClick?: () => void;
// }) => (
// <a
// href={href || "#"}
// className="dropdown-item"
// onClick={(e) => {
// e.preventDefault();
// onClick?.();
// }}
// >
// {label}
// </a>
// );
// // Nested Dropdown Component
// const NestedDropdown = ({
// label,
// children,
// onSelect,
// }: {
// label: string;
// children: React.ReactNode;
// onSelect: (selectedLabel: string) => void;
// }) => {
// const [open, setOpen] = useState(false);
// return (
// <div className="nested-dropdown">
// {/* Dropdown Trigger */}
// <div
// className={`dropdown-trigger ${open ? "open" : ""}`}
// onClick={() => setOpen(!open)} // Toggle submenu on click
// >
// {label} <span className="icon">{open ? "▼" : "▶"}</span>
// </div>
// {/* Submenu */}
// {open && (
// <div className="submenu">
// {React.Children.map(children, (child) => {
// if (React.isValidElement(child)) {
// // Clone the element and pass the `onSelect` prop only if it's expected
// return React.cloneElement(child as React.ReactElement<any>, { onSelect });
// }
// return child; // Return non-element children as-is
// })}
// </div>
// )}
// </div>
// );
// };
// // Recursive Function to Render Nested Data
// const renderNestedData = (
// data: Record<string, any>,
// onSelect: (selectedLabel: string) => void
// ) => {
// return Object.entries(data).map(([key, value]) => {
// if (typeof value === "object" && !Array.isArray(value)) {
// // If the value is an object, render it as a nested dropdown
// return (
// <NestedDropdown key={key} label={key} onSelect={onSelect}>
// {renderNestedData(value, onSelect)}
// </NestedDropdown>
// );
// } else if (Array.isArray(value)) {
// // If the value is an array, render each item as a dropdown item
// return value.map((item, index) => (
// <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
// ));
// } else {
// // If the value is a simple string, render it as a dropdown item
// return (
// <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
// );
// }
// });
// };
// // Main Multi-Level Dropdown Component
// const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
// const [open, setOpen] = useState(false);
// const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
// const dropdownRef = useRef<HTMLDivElement>(null);
// // Handle outer click to close the dropdown
// useEffect(() => {
// const handleClickOutside = (event: MouseEvent) => {
// if (
// dropdownRef.current &&
// !dropdownRef.current.contains(event.target as Node)
// ) {
// setOpen(false);
// }
// };
// document.addEventListener("mousedown", handleClickOutside);
// return () => {
// document.removeEventListener("mousedown", handleClickOutside);
// };
// }, []);
// // Handle selection of an item
// const handleSelect = (selectedLabel: string) => {
// setSelectedLabel(selectedLabel); // Update the dropdown trigger text
// setOpen(false); // Close the dropdown
// };
// return (
// <div className="multi-level-dropdown" ref={dropdownRef}>
// {/* Dropdown Trigger Button */}
// <button
// className={`dropdown-button ${open ? "open" : ""}`}
// onClick={() => setOpen(!open)} // Toggle main menu on click
// >
// {selectedLabel} <span className="icon">▾</span>
// </button>
// {/* Dropdown Menu */}
// {open && (
// <div className="dropdown-menu">
// <div className="dropdown-content">
// {renderNestedData(data, handleSelect)}
// </div>
// </div>
// )}
// </div>
// );
// };
// export default MultiLevelDropdown;
import React, { useState, useRef, useEffect } from "react";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
@ -147,11 +5,19 @@ import { ArrowIcon } from "../../icons/ExportCommonIcons";
const DropdownItem = ({
label,
onClick,
disabled = false,
}: {
label: string;
onClick: () => void;
disabled?: boolean;
}) => (
<div className="dropdown-item" onClick={onClick}>
<div
className={`dropdown-item ${disabled ? "disabled" : ""}`}
onClick={() => {
if (!disabled) onClick();
}}
style={{ cursor: disabled ? "not-allowed": "default", opacity: disabled ? 0.5 : 1 }}
>
{label}
</div>
);
@ -161,10 +27,12 @@ const NestedDropdown = ({
label,
fields,
onSelect,
disabledFields = [],
}: {
label: string;
fields: string[];
onSelect: (selectedData: { name: string; fields: string }) => void;
disabledFields?: string[];
}) => {
const [open, setOpen] = useState(false);
@ -184,13 +52,17 @@ const NestedDropdown = ({
</div>
{open && (
<div className="submenu">
{fields.map((field) => (
<DropdownItem
key={field}
label={field}
onClick={() => onSelect({ name: label, fields: field })}
/>
))}
{fields.map((field) => {
const isDisabled = disabledFields.includes(`${label}-${field}`);
return (
<DropdownItem
key={field}
label={field}
onClick={() => onSelect({ name: label, fields: field })}
disabled={isDisabled}
/>
);
})}
</div>
)}
</div>
@ -203,6 +75,7 @@ interface MultiLevelDropdownProps {
onSelect: (selectedData: { name: string; fields: string }) => void;
onUnselect: () => void;
selectedValue?: { name: string; fields: string };
allSelections?: Record<string, { name: string; fields: string }>;
isLoading?: boolean;
}
@ -212,6 +85,7 @@ const MultiLevelDropdown = ({
onSelect,
onUnselect,
selectedValue,
allSelections = {},
isLoading = false,
}: MultiLevelDropdownProps) => {
const [open, setOpen] = useState(false);
@ -249,6 +123,14 @@ const MultiLevelDropdown = ({
? `${selectedValue.name} - ${selectedValue.fields}`
: "Dropdown trigger";
// Build list of disabled selections
const disabledFieldsList = Object.values(allSelections)
.filter(
(sel) =>
!(sel.name === selectedValue?.name && sel.fields === selectedValue?.fields)
)
.map((sel) => `${sel.name}-${sel.fields}`);
return (
<div className="multi-level-dropdown" ref={dropdownRef}>
<button
@ -260,25 +142,23 @@ const MultiLevelDropdown = ({
</button>
{open && (
<div className="dropdown-menu">
<div className="dropdown-content ">
{/* loading list */}
{/* Unselect Option */}
<DropdownItem label="Unselect" onClick={handleItemUnselect} />
{/* Nested Dropdown Items */}
{
isLoading ? <div className="loading" /> :
Object.entries(data).map(([key, value]) => (
<NestedDropdown
key={key}
label={key}
fields={Object.keys(value)}
onSelect={handleItemSelect}
/>
))
}
<div className="dropdown-content">
{isLoading ? (
<div className="loading" />
) : (
<>
<DropdownItem label="Unselect" onClick={handleItemUnselect} />
{Object.entries(data).map(([key, value]) => (
<NestedDropdown
key={key}
label={key}
fields={Object.keys(value)}
onSelect={handleItemSelect}
disabledFields={disabledFieldsList}
/>
))}
</>
)}
</div>
</div>
)}

2
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@ -558,7 +558,7 @@ const DroppedObjects: React.FC = () => {
return (
<div
key={`${zoneName}-${index}`}
key={obj.id}
className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart"
} `}