104 lines
2.4 KiB
TypeScript
104 lines
2.4 KiB
TypeScript
|
import React, { useEffect, useState, useRef } from "react";
|
||
|
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||
|
|
import Panel from "./Panel";
|
||
|
|
import AddButtons from "./AddButtons";
|
||
|
|
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||
|
|
import DisplayZone from "./DisplayZone";
|
||
|
|
|
||
|
|
type Side = "top" | "bottom" | "left" | "right";
|
||
|
|
|
||
|
|
interface Widget {
|
||
|
|
id: string;
|
||
|
|
type: string;
|
||
|
|
title: string;
|
||
|
|
panel: Side;
|
||
|
|
data: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
const RealTimeVisulization: React.FC = () => {
|
||
|
|
const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const [zonesData, setZonesData] = useState<{
|
||
|
|
[key: string]: {
|
||
|
|
activeSides: Side[];
|
||
|
|
panelOrder: Side[];
|
||
|
|
lockedPanels: Side[];
|
||
|
|
widgets: Widget[];
|
||
|
|
};
|
||
|
|
}>({
|
||
|
|
"Manufacturing unit": {
|
||
|
|
activeSides: [],
|
||
|
|
panelOrder: [],
|
||
|
|
lockedPanels: [],
|
||
|
|
widgets: [],
|
||
|
|
},
|
||
|
|
"Assembly unit": {
|
||
|
|
activeSides: [],
|
||
|
|
panelOrder: [],
|
||
|
|
lockedPanels: [],
|
||
|
|
widgets: [],
|
||
|
|
},
|
||
|
|
"Packing unit": {
|
||
|
|
activeSides: [],
|
||
|
|
panelOrder: [],
|
||
|
|
lockedPanels: [],
|
||
|
|
widgets: [],
|
||
|
|
},
|
||
|
|
Warehouse: {
|
||
|
|
activeSides: [],
|
||
|
|
panelOrder: [],
|
||
|
|
lockedPanels: [],
|
||
|
|
widgets: [],
|
||
|
|
},
|
||
|
|
Inventory: {
|
||
|
|
activeSides: [],
|
||
|
|
panelOrder: [],
|
||
|
|
lockedPanels: [],
|
||
|
|
widgets: [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const { isPlaying } = usePlayButtonStore();
|
||
|
|
|
||
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||
|
|
useEffect(() => {
|
||
|
|
setZonesData((prev) => ({
|
||
|
|
...prev,
|
||
|
|
[selectedZone.zoneName]: selectedZone,
|
||
|
|
}));
|
||
|
|
}, [selectedZone]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={containerRef}
|
||
|
|
id="real-time-vis-canvas"
|
||
|
|
className="realTime-viz canvas"
|
||
|
|
style={{
|
||
|
|
height: isPlaying ? "100vh" : "",
|
||
|
|
width: isPlaying ? "100%" : "",
|
||
|
|
left: isPlaying ? "0%" : "",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DisplayZone
|
||
|
|
zonesData={zonesData}
|
||
|
|
selectedZone={selectedZone}
|
||
|
|
setSelectedZone={setSelectedZone}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{!isPlaying && (
|
||
|
|
<AddButtons
|
||
|
|
hiddenPanels={hiddenPanels}
|
||
|
|
setHiddenPanels={setHiddenPanels}
|
||
|
|
selectedZone={selectedZone}
|
||
|
|
setSelectedZone={setSelectedZone}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RealTimeVisulization;
|
||
|
|
|