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-15 18:35:25 +05:30
parent 5b42bd9c40 e2fd4ef15d
commit fa6404d86c
14 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,14 +21,17 @@ const BarChartInput = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false);
} else {
console.log("Unexpected response:", response);
}
@ -148,6 +151,7 @@ const BarChartInput = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const FleetEfficiencyInputComponent = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
setLoading(true)
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -149,6 +152,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const FlotingWidgetInput = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false);
} else {
console.log("Unexpected response:", response);
}
@ -149,6 +152,7 @@ const FlotingWidgetInput = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -140,14 +140,17 @@ const LineGrapInput = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -267,6 +270,7 @@ const LineGrapInput = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const PieChartInput = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -148,6 +151,7 @@ const PieChartInput = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const Progress1Input = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -142,6 +145,7 @@ const Progress1Input = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const Progress2Input = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -142,6 +145,7 @@ const Progress2Input = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const WarehouseThroughputInputComponent = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -149,6 +152,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const Widget2InputCard3D = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -147,6 +150,7 @@ const Widget2InputCard3D = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -19,14 +19,17 @@ const Widget3InputCard3D = () => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/getinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -140,6 +143,7 @@ const Widget3InputCard3D = () => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -21,14 +21,17 @@ const Widget4InputCard3D = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchZoneData = async () => {
try {
setLoading(true)
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
setLoading(false)
} else {
console.log("Unexpected response:", response);
}
@ -147,6 +150,7 @@ const Widget4InputCard3D = (props: Props) => {
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
isLoading={isLoading}
/>
<div className="icon">
<AddIcon />

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

@ -203,6 +203,7 @@ interface MultiLevelDropdownProps {
onSelect: (selectedData: { name: string; fields: string }) => void;
onUnselect: () => void;
selectedValue?: { name: string; fields: string };
isLoading?: boolean;
}
// Main Multi-Level Dropdown Component
@ -211,6 +212,7 @@ const MultiLevelDropdown = ({
onSelect,
onUnselect,
selectedValue,
isLoading = false,
}: MultiLevelDropdownProps) => {
const [open, setOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
@ -261,19 +263,22 @@ const MultiLevelDropdown = ({
<div className="dropdown-content ">
{/* loading list */}
{/* <div className="loading" /> */}
{/* Unselect Option */}
<DropdownItem label="Unselect" onClick={handleItemUnselect} />
{/* Nested Dropdown Items */}
{Object.entries(data).map(([key, value]) => (
{
isLoading ? <div className="loading" /> :
Object.entries(data).map(([key, value]) => (
<NestedDropdown
key={key}
label={key}
fields={Object.keys(value)}
onSelect={handleItemSelect}
/>
))}
))
}
</div>
</div>
)}

17
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@ -100,6 +100,8 @@ export const DraggableWidget = ({
const deleteSelectedChart = async () => {
try {
console.log("delete");
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteWidget = {
@ -109,7 +111,9 @@ export const DraggableWidget = ({
};
if (visualizationSocket) {
setSelectedChartId(null)
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
console.log("delete widget",selectedChartId);
}
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
@ -120,7 +124,6 @@ export const DraggableWidget = ({
widgets: updatedWidgets,
}));
setOpenKebabId(null);
// const response = await deleteWidgetApi(widget.id, organization);
// if (response?.message === "Widget deleted successfully") {
// const updatedWidgets = selectedZone.widgets.filter(
@ -175,6 +178,7 @@ export const DraggableWidget = ({
const duplicatedWidget: Widget = {
...widget,
title: name === '' ? widget.title : name,
Data: {
duration: duration,
measurements: { ...measurements },
@ -187,6 +191,7 @@ export const DraggableWidget = ({
zoneId: selectedZone.zoneId,
widget: duplicatedWidget,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
}
@ -306,7 +311,10 @@ export const DraggableWidget = ({
: undefined,
}}
ref={chartWidget}
onClick={() => setSelectedChartId(widget)}
onClick={() => {setSelectedChartId(widget)
console.log('click');
}}
>
{/* Kebab Icon */}
<div className="icon kebab" onClick={handleKebabClick}>
@ -327,7 +335,10 @@ export const DraggableWidget = ({
</div>
<div className="label">Duplicate</div>
</div>
<div className="edit btn" onClick={deleteSelectedChart}>
<div className="edit btn" onClick={(e)=>{
e.stopPropagation()
deleteSelectedChart();
}}>
<div className="icon">
<DeleteIcon />
</div>

2
app/src/store/useDroppedObjectsStore.ts
View File

@ -101,6 +101,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
let visualizationSocket = socketState.visualizationSocket;
let iotMeasurements = iotData.flotingMeasurements;
let iotDuration = iotData.flotingDuration;
let iotHeader = iotData.header
if (!zone) return;
@ -117,6 +118,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
measurements: iotMeasurements,
duration: iotDuration,
},
header: iotHeader,
id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
position: {
...originalObject.position,