added marketplace cards
This commit is contained in:
commit
f070fb96ac
File diff suppressed because it is too large
Load Diff
|
@ -3,6 +3,8 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@react-three/csg": "^3.2.0",
|
"@react-three/csg": "^3.2.0",
|
||||||
"@react-three/drei": "^9.113.0",
|
"@react-three/drei": "^9.113.0",
|
||||||
"@react-three/fiber": "^8.17.7",
|
"@react-three/fiber": "^8.17.7",
|
||||||
|
|
|
@ -30,6 +30,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
|
||||||
type={type}
|
type={type}
|
||||||
onChange={(e) => onChange(e.target.value)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
|
@ -39,6 +40,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
|
||||||
type={type}
|
type={type}
|
||||||
onChange={(e) => onChange(e.target.value)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
disabled
|
||||||
min={0}
|
min={0}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,6 +51,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
|
||||||
type={type}
|
type={type}
|
||||||
onChange={(e) => onChange(e.target.value)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,15 +1,37 @@
|
||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import RenameInput from "../../../ui/inputs/RenameInput";
|
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||||
import Vector3Input from "../customInput/Vector3Input";
|
import Vector3Input from "../customInput/Vector3Input";
|
||||||
|
|
||||||
const ZoneProperties = () => {
|
const ZoneProperties: React.FC = () => {
|
||||||
|
const [Edit, setEdit] = useState(false);
|
||||||
|
|
||||||
|
function handleSetView() {
|
||||||
|
setEdit(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEditView() {
|
||||||
|
if (Edit) {
|
||||||
|
setEdit(false);
|
||||||
|
} else {
|
||||||
|
setEdit(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="zone-properties-container">
|
<div className="zone-properties-container">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<RenameInput value="Selected Zone Name" />
|
<RenameInput value="Selected Zone Name" />
|
||||||
|
<div className="button" onClick={handleEditView}>
|
||||||
|
{Edit ? "Cancel" : "Edit"}
|
||||||
</div>
|
</div>
|
||||||
<Vector3Input onChange={()=>{}} header="Target"/>
|
</div>
|
||||||
<Vector3Input onChange={()=>{}} header="Position"/>
|
<Vector3Input onChange={() => {}} header="Viewport Target" />
|
||||||
|
<Vector3Input onChange={() => {}} header="Viewport Position" />
|
||||||
|
{Edit && (
|
||||||
|
<div className="button-save" onClick={handleSetView}>
|
||||||
|
Set View
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -109,6 +109,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update the selectedZone state
|
// Update the selectedZone state
|
||||||
|
console.log('updatedZone: ', updatedZone);
|
||||||
setSelectedZone(updatedZone);
|
setSelectedZone(updatedZone);
|
||||||
} else {
|
} else {
|
||||||
// If the panel is not active, activate it
|
// If the panel is not active, activate it
|
||||||
|
@ -121,6 +122,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update the selectedZone state
|
// Update the selectedZone state
|
||||||
|
console.log('updatedZone: ', updatedZone);
|
||||||
setSelectedZone(updatedZone);
|
setSelectedZone(updatedZone);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -146,8 +148,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
||||||
<div className="extra-Bs">
|
<div className="extra-Bs">
|
||||||
{/* Hide Panel */}
|
{/* Hide Panel */}
|
||||||
<div
|
<div
|
||||||
className={`icon ${
|
className={`icon ${hiddenPanels.includes(side) ? "active" : ""
|
||||||
hiddenPanels.includes(side) ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
title={
|
title={
|
||||||
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
|
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
|
||||||
|
@ -170,8 +171,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
||||||
|
|
||||||
{/* Lock/Unlock Panel */}
|
{/* Lock/Unlock Panel */}
|
||||||
<div
|
<div
|
||||||
className={`icon ${
|
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
|
||||||
selectedZone.lockedPanels.includes(side) ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
title={
|
title={
|
||||||
selectedZone.lockedPanels.includes(side)
|
selectedZone.lockedPanels.includes(side)
|
||||||
|
@ -180,13 +180,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
||||||
}
|
}
|
||||||
onClick={() => toggleLockPanel(side)}
|
onClick={() => toggleLockPanel(side)}
|
||||||
>
|
>
|
||||||
<LockIcon
|
<LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
|
||||||
fill={
|
|
||||||
selectedZone.lockedPanels.includes(side)
|
|
||||||
? "#ffffff"
|
|
||||||
: "#1D1E21"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -152,21 +152,29 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
className={`zoon-wrapper ${
|
className={`zoon-wrapper ${selectedZone.activeSides.includes("bottom") && "bottom"
|
||||||
selectedZone.activeSides.includes("bottom") && "bottom"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{Object.keys(zonesData).map((zoneName, index) => (
|
{Object.keys(zonesData).map((zoneName, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className={`zone ${
|
className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
|
||||||
selectedZone.zoneName === zoneName ? "active" : ""
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
console.log('zoneName: ', zoneName);
|
||||||
|
|
||||||
setSelectedZone({
|
setSelectedZone({
|
||||||
zoneName,
|
zoneName,
|
||||||
...zonesData[zoneName],
|
activeSides: zonesData[zoneName].activeSides || [],
|
||||||
});
|
panelOrder: zonesData[zoneName].panelOrder || [],
|
||||||
|
lockedPanels: zonesData[zoneName].lockedPanels || [],
|
||||||
|
widgets: zonesData[zoneName].widgets || [],
|
||||||
|
})
|
||||||
|
// setSelectedZone({
|
||||||
|
// zoneName,
|
||||||
|
// ...zonesData[zoneName],
|
||||||
|
// });
|
||||||
|
console.log(selectedZone);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{zoneName}
|
{zoneName}
|
||||||
|
|
|
@ -10,11 +10,13 @@ import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphCompone
|
||||||
export const DraggableWidget = ({
|
export const DraggableWidget = ({
|
||||||
widget,
|
widget,
|
||||||
hiddenPanels, // Add this prop to track hidden panels
|
hiddenPanels, // Add this prop to track hidden panels
|
||||||
|
index, onReorder
|
||||||
}: {
|
}: {
|
||||||
widget: any;
|
widget: any;
|
||||||
hiddenPanels: string[]; // Array of hidden panel names
|
hiddenPanels: string[]; // Array of hidden panel names
|
||||||
|
index: number; onReorder: (fromIndex: number, toIndex: number) => void
|
||||||
}) => {
|
}) => {
|
||||||
console.log("widget: ", widget.type);
|
|
||||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||||
|
|
||||||
const handlePointerDown = () => {
|
const handlePointerDown = () => {
|
||||||
|
@ -26,14 +28,39 @@ export const DraggableWidget = ({
|
||||||
// Determine if the widget's panel is hidden
|
// Determine if the widget's panel is hidden
|
||||||
const isPanelHidden = hiddenPanels.includes(widget.panel);
|
const isPanelHidden = hiddenPanels.includes(widget.panel);
|
||||||
|
|
||||||
|
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
|
||||||
|
};
|
||||||
|
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
event.preventDefault(); // Allow drop
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
event.preventDefault(); // Allow drop
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
|
||||||
|
const toIndex = index; // The index of the widget where the drop occurred
|
||||||
|
if (fromIndex !== toIndex) {
|
||||||
|
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
|
draggable
|
||||||
key={widget.id}
|
key={widget.id}
|
||||||
className={`chart-container ${
|
className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
|
||||||
selectedChartId?.id === widget.id && "activeChart"
|
|
||||||
}`}
|
}`}
|
||||||
onPointerDown={handlePointerDown}
|
onPointerDown={handlePointerDown}
|
||||||
|
onDragStart={handleDragStart}
|
||||||
|
onDragEnter={handleDragEnter}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDrop={handleDrop}
|
||||||
style={{
|
style={{
|
||||||
opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
|
opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
|
||||||
pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
|
pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useWidgetStore } from "../../../store/useWidgetStore";
|
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||||
import { DraggableWidget } from "./DraggableWidget";
|
import { DraggableWidget } from "./DraggableWidget";
|
||||||
|
import { arrayMove } from "@dnd-kit/sortable";
|
||||||
|
|
||||||
type Side = "top" | "bottom" | "left" | "right";
|
type Side = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
|
@ -62,8 +63,7 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
case "top":
|
case "top":
|
||||||
case "bottom":
|
case "bottom":
|
||||||
return {
|
return {
|
||||||
width: `calc(100% - ${
|
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
||||||
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
|
||||||
}px)`,
|
}px)`,
|
||||||
height: `${panelSize - 5}px`,
|
height: `${panelSize - 5}px`,
|
||||||
left: leftActive ? `${panelSize}px` : "0",
|
left: leftActive ? `${panelSize}px` : "0",
|
||||||
|
@ -74,8 +74,7 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
case "right":
|
case "right":
|
||||||
return {
|
return {
|
||||||
width: `${panelSize - 5}px`,
|
width: `${panelSize - 5}px`,
|
||||||
height: `calc(100% - ${
|
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
||||||
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
|
||||||
}px)`,
|
}px)`,
|
||||||
top: topActive ? `${panelSize}px` : "0",
|
top: topActive ? `${panelSize}px` : "0",
|
||||||
bottom: bottomActive ? `${panelSize}px` : "0",
|
bottom: bottomActive ? `${panelSize}px` : "0",
|
||||||
|
@ -99,6 +98,8 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
|
|
||||||
if (currentWidgetsCount >= maxCapacity) return;
|
if (currentWidgetsCount >= maxCapacity) return;
|
||||||
|
|
||||||
|
console.log('draggedAsset: ', draggedAsset);
|
||||||
|
console.log('panel: ', panel);
|
||||||
addWidgetToPanel(draggedAsset, panel);
|
addWidgetToPanel(draggedAsset, panel);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -165,6 +166,34 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
};
|
};
|
||||||
}, [selectedZone.activeSides]);
|
}, [selectedZone.activeSides]);
|
||||||
|
|
||||||
|
const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
|
||||||
|
if (!selectedZone) return; // Ensure selectedZone is not null
|
||||||
|
console.log('selectedZone: ', selectedZone);
|
||||||
|
|
||||||
|
setSelectedZone((prev) => {
|
||||||
|
if (!prev) return prev; // Ensure prev is not null
|
||||||
|
|
||||||
|
// Filter widgets for the specified panel
|
||||||
|
const widgetsInPanel = prev.widgets.filter((w) => w.panel === panel);
|
||||||
|
|
||||||
|
// Reorder widgets within the same panel
|
||||||
|
const reorderedWidgets = arrayMove(widgetsInPanel, fromIndex, toIndex);
|
||||||
|
|
||||||
|
// Merge the reordered widgets back into the full list while preserving the order
|
||||||
|
const updatedWidgets = prev.widgets
|
||||||
|
.filter((widget) => widget.panel !== panel) // Keep widgets from other panels
|
||||||
|
.concat(reorderedWidgets); // Add the reordered widgets for the specified panel
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
widgets: updatedWidgets,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{selectedZone.activeSides.map((side) => (
|
{selectedZone.activeSides.map((side) => (
|
||||||
|
@ -193,11 +222,15 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
>
|
>
|
||||||
{selectedZone.widgets
|
{selectedZone.widgets
|
||||||
.filter((w) => w.panel === side)
|
.filter((w) => w.panel === side)
|
||||||
.map((widget) => (
|
.map((widget, index) => (
|
||||||
<DraggableWidget
|
<DraggableWidget
|
||||||
hiddenPanels={hiddenPanels}
|
hiddenPanels={hiddenPanels}
|
||||||
widget={widget}
|
widget={widget}
|
||||||
key={widget.id}
|
key={widget.id}
|
||||||
|
index={index}
|
||||||
|
onReorder={(fromIndex, toIndex) =>
|
||||||
|
handleReorder(fromIndex, toIndex, side)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -208,3 +241,5 @@ const Panel: React.FC<PanelProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Panel;
|
export default Panel;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -6,69 +6,93 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||||||
import DisplayZone from "./DisplayZone";
|
import DisplayZone from "./DisplayZone";
|
||||||
import Scene from "../../../modules/scene/scene";
|
import Scene from "../../../modules/scene/scene";
|
||||||
import useModuleStore from "../../../store/useModuleStore";
|
import useModuleStore from "../../../store/useModuleStore";
|
||||||
|
import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
|
||||||
|
|
||||||
|
|
||||||
type Side = "top" | "bottom" | "left" | "right";
|
type Side = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
interface Widget {
|
type FormattedZoneData = Record<
|
||||||
|
string,
|
||||||
|
{
|
||||||
|
activeSides: Side[];
|
||||||
|
panelOrder: Side[];
|
||||||
|
lockedPanels: Side[];
|
||||||
|
zoneCentrePoint: number[];
|
||||||
|
widgets: Widget[];
|
||||||
|
}
|
||||||
|
>;
|
||||||
|
type Widget = {
|
||||||
id: string;
|
id: string;
|
||||||
type: string;
|
type: string;
|
||||||
title: string;
|
title: string;
|
||||||
panel: Side;
|
panel: Side;
|
||||||
data: any;
|
data: any;
|
||||||
}
|
};
|
||||||
|
type Zone = {
|
||||||
|
zoneId: string;
|
||||||
|
zoneName: string;
|
||||||
|
points: number[][];
|
||||||
|
layer: number;
|
||||||
|
};
|
||||||
|
|
||||||
const RealTimeVisulization: React.FC = () => {
|
const RealTimeVisulization: React.FC = () => {
|
||||||
const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
|
const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
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 { isPlaying } = usePlayButtonStore();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
|
|
||||||
|
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setZonesData((prev) => ({
|
async function GetZoneData() {
|
||||||
|
try {
|
||||||
|
const response: { data: Zone[] } | undefined = await getZonesApi(
|
||||||
|
"hexrfactory"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response || !response.data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const formattedData = response?.data?.reduce<FormattedZoneData>(
|
||||||
|
(acc, zone) => {
|
||||||
|
acc[zone.zoneName] = {
|
||||||
|
activeSides: [],
|
||||||
|
panelOrder: [],
|
||||||
|
lockedPanels: [],
|
||||||
|
zoneCentrePoint: [],
|
||||||
|
widgets: [],
|
||||||
|
};
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
setZonesData(formattedData);
|
||||||
|
} catch (error) { }
|
||||||
|
}
|
||||||
|
GetZoneData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
console.log('zonesData: ', zonesData);
|
||||||
|
}, [zonesData]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setZonesData((prev) => {
|
||||||
|
if (!selectedZone) return prev;
|
||||||
|
|
||||||
|
return {
|
||||||
...prev,
|
...prev,
|
||||||
[selectedZone.zoneName]: selectedZone,
|
[selectedZone.zoneName]: {
|
||||||
}));
|
...prev[selectedZone.zoneName], // Keep existing properties
|
||||||
|
activeSides: selectedZone.activeSides || [],
|
||||||
|
panelOrder: selectedZone.panelOrder || [],
|
||||||
|
lockedPanels: selectedZone.lockedPanels || [],
|
||||||
|
widgets: selectedZone.widgets || [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
}, [selectedZone]);
|
}, [selectedZone]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -87,8 +111,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
style={{
|
style={{
|
||||||
height: "100%",
|
height: "100%",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
borderRadius:
|
borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
|
||||||
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Scene />
|
<Scene />
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import List from "./List";
|
import List from "./List";
|
||||||
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
||||||
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
||||||
|
import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
|
||||||
|
|
||||||
interface DropDownListProps {
|
interface DropDownListProps {
|
||||||
value?: string; // Value to display in the DropDownList
|
value?: string; // Value to display in the DropDownList
|
||||||
|
@ -33,6 +34,19 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
const handleToggle = () => {
|
const handleToggle = () => {
|
||||||
setIsOpen((prev) => !prev); // Toggle the state
|
setIsOpen((prev) => !prev); // Toggle the state
|
||||||
};
|
};
|
||||||
|
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function GetZoneData() {
|
||||||
|
const response = await getZonesApi("hexrfactory")
|
||||||
|
console.log('response: ', response.data);
|
||||||
|
setZoneDataList([{ id: "1", name: "zone1" },
|
||||||
|
{ id: "2", name: "Zone 2" },])
|
||||||
|
}
|
||||||
|
|
||||||
|
GetZoneData()
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dropdown-list-container">
|
<div className="dropdown-list-container">
|
||||||
|
@ -79,7 +93,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
value="Zones"
|
value="Zones"
|
||||||
showKebabMenu={false}
|
showKebabMenu={false}
|
||||||
showAddIcon={false}
|
showAddIcon={false}
|
||||||
items={[]}
|
items={zoneDataList}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -8,6 +8,7 @@ interface ListProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const List: React.FC<ListProps> = ({ items = [] }) => {
|
const List: React.FC<ListProps> = ({ items = [] }) => {
|
||||||
|
console.log('items: ', items);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{items.length > 0 ? (
|
{items.length > 0 ? (
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
let url_Backend_dwinzo = `http://185.100.212.76:5000`;
|
||||||
|
|
||||||
|
export const getZonesApi = async (organization: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${url_Backend_dwinzo}/api/v2/findZones/${organization}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// if (!response.ok) {
|
||||||
|
// throw new Error("Failed to get Zones");
|
||||||
|
// }
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
throw new Error(error.message);
|
||||||
|
} else {
|
||||||
|
throw new Error("An unknown error occurred");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -25,7 +25,7 @@ interface SelectedZoneStore {
|
||||||
|
|
||||||
export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
|
export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
|
||||||
selectedZone: {
|
selectedZone: {
|
||||||
zoneName: "Manufacturing unit",
|
zoneName: "",
|
||||||
activeSides: [],
|
activeSides: [],
|
||||||
panelOrder: [],
|
panelOrder: [],
|
||||||
lockedPanels: [],
|
lockedPanels: [],
|
||||||
|
|
|
@ -733,6 +733,7 @@
|
||||||
.asset-properties-container,
|
.asset-properties-container,
|
||||||
.zone-properties-container {
|
.zone-properties-container {
|
||||||
.header {
|
.header {
|
||||||
|
@include flex-space-between;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border-top: 1px solid var(--highlight-accent-color);
|
border-top: 1px solid var(--highlight-accent-color);
|
||||||
border-bottom: 1px solid var(--highlight-accent-color);
|
border-bottom: 1px solid var(--highlight-accent-color);
|
||||||
|
@ -758,7 +759,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.optimize-button,
|
.optimize-button,
|
||||||
.generate-report-button {
|
.generate-report-button,
|
||||||
|
.button-save {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
|
|
|
@ -48,7 +48,6 @@
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
max-width: calc(100% - 450px);
|
max-width: calc(100% - 450px);
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue