updated realTime vis panel smooth transition
This commit is contained in:
Nalvazhuthi
parent
9829899aec
commit
6a51fbca61
|
|
@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -624,15 +624,15 @@ export const DailyProductionIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M13.4564 6.96778C13.3816 6.81906 13.2232 6.72864 13.0596 6.74287L12.5621 6.77922C12.0226 4.82899 10.2365 3.39063 8.11668 3.39063C5.57103 3.39059 3.5 5.46179 3.5 8.00724C3.5 10.5529 5.57103 12.6239 8.11664 12.6239C9.59017 12.6239 10.9876 11.911 11.8549 10.7172C11.988 10.5335 11.947 10.2772 11.7637 10.1437C11.5801 10.0105 11.3235 10.0519 11.1904 10.2347C10.477 11.2167 9.328 11.8032 8.11645 11.8032C6.02331 11.8032 4.32065 10.1003 4.32065 8.00737C4.32065 5.91438 6.02334 4.21163 8.11648 4.21163C9.80226 4.21163 11.2333 5.3171 11.7269 6.84049L11.4679 6.85944C11.3024 6.87139 11.1604 6.98234 11.1083 7.13969C11.0559 7.29735 11.104 7.47084 11.2294 7.57934L11.9746 8.22285C12.0471 8.33961 12.1753 8.41774 12.3224 8.41774C12.3301 8.41774 12.3373 8.41599 12.3449 8.41564C12.3474 8.41564 12.3493 8.4167 12.3516 8.4167C12.3614 8.4167 12.3714 8.41654 12.3816 8.41564C12.4901 8.40757 12.5909 8.35682 12.6622 8.27447L13.3998 7.42041C13.5087 7.2949 13.5308 7.11596 13.4564 6.96778Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5.94531 9.43859V9.04L6.30878 8.71149C6.92314 8.16192 7.22165 7.84585 7.23024 7.51715C7.23024 7.28766 7.09188 7.1061 6.76706 7.1061C6.52494 7.1061 6.31281 7.2269 6.16567 7.33979L5.97956 6.86783C6.19166 6.70822 6.52036 6.57812 6.90122 6.57812C7.53737 6.57812 7.88783 6.95018 7.88783 7.46078C7.88783 7.9324 7.54615 8.30903 7.1393 8.67234L6.87962 8.88866V8.89708H7.9398V9.43823H5.94531V9.43859Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M9.51199 9.43788V8.76696H8.26587V8.33889L9.33028 6.625H10.1352V8.27375H10.4726V8.76696H10.1352V9.43788H9.51199ZM9.51199 8.27375V7.65077C9.51199 7.48187 9.52061 7.30909 9.53359 7.12718H9.51638C9.42525 7.30909 9.35168 7.47344 9.25671 7.65077L8.88026 8.26513V8.27375H9.51199Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -649,7 +649,7 @@ export const MonthlyROI = () => {
|
|||
>
|
||||
<path
|
||||
d="M3.78955 11.9997V4.84175H4.84219V4.21016C4.84221 3.97761 5.03071 3.7891 5.26325 3.7891H6.10535C6.33789 3.7891 6.52639 3.97761 6.52641 4.21012V4.84175H9.47381L9.47379 4.21012C9.47379 3.97756 9.66231 3.78906 9.89485 3.78906H10.737C10.9695 3.78906 11.158 3.97756 11.158 4.21012V4.84175H12.2107V11.9997H3.78955ZM4.42113 11.3681H11.5791V6.52599H4.42113V11.3681ZM4.84219 9.89443H6.10535V10.9471H4.84219V9.89443ZM6.52641 9.89443H7.78957V10.9471H6.52641V9.89443ZM8.21063 9.89443H9.47379V10.9471H8.21063V9.89443ZM9.89485 9.89443H11.158V10.9471H9.89485V9.89443ZM4.84219 8.42073H6.10535V9.47337H4.84219V8.42073ZM6.52641 8.42073H7.78957V9.47337H6.52641V8.42073ZM8.21063 8.42073H9.47379V9.47337H8.21063V8.42073ZM9.89485 8.42073H11.158V9.47337H9.89485V8.42073ZM6.52641 6.94707H7.78957V7.99971H6.52641V6.94707ZM8.21063 6.94707H9.47379V7.99971H8.21063V6.94707ZM9.89485 6.94707H11.158V7.99971H9.89485V6.94707ZM10.2106 4.21019C10.0362 4.21019 9.89485 4.35156 9.89485 4.52598V5.15756C9.89485 5.33198 10.0362 5.47335 10.2106 5.47335H10.4212C10.5956 5.47335 10.737 5.33198 10.737 5.15756V4.52598C10.737 4.35156 10.5956 4.21019 10.4212 4.21019H10.2106ZM5.57904 4.21016C5.40462 4.21016 5.26325 4.35156 5.26325 4.52598V5.15756C5.26325 5.33195 5.40462 5.47335 5.57904 5.47335H5.78956C5.96398 5.47335 6.10535 5.33195 6.10535 5.15756V4.52598C6.10535 4.35156 5.96398 4.21016 5.78956 4.21016H5.57904ZM6.73695 8.63125V9.26285H7.57905V8.63125H6.73695ZM5.05271 8.63125V9.26285H5.89483V8.63125H5.05271ZM8.42117 8.63125V9.26285H9.26327V8.63125H8.42117ZM10.1054 8.63125V9.26283H10.9475V8.63125H10.1054Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -666,15 +666,15 @@ export const ExpandIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M16 5.32324C16 5.09668 15.8018 4.89844 15.5752 4.89844H3.96387C3.7373 4.89844 3.53906 5.09668 3.53906 5.32324V6.17285C3.53906 6.39941 3.7373 6.59766 3.96387 6.59766H15.5752C15.8018 6.59766 16 6.39941 16 6.17285V5.32324Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M16 13.8232C16 13.5967 15.8018 13.3984 15.5752 13.3984H3.96387C3.7373 13.3984 3.53906 13.5967 3.53906 13.8232V14.6729C3.53906 14.8994 3.7373 15.0977 3.96387 15.0977H15.5752C15.8018 15.0977 16 14.8994 16 14.6729V13.8232Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M12.1768 10.8477C12.4033 10.8477 12.6016 10.6494 12.6016 10.4229V9.57324C12.6016 9.34668 12.4033 9.14844 12.1768 9.14844H7.3623C7.13574 9.14844 6.9375 9.34668 6.9375 9.57324V10.4229C6.9375 10.6494 7.13574 10.8477 7.3623 10.8477H12.1768Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -691,21 +691,21 @@ export const StartIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M10.8542 7.58594V10.5918"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.05078 3.97656H12.6578"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -734,21 +734,21 @@ export const EndIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M10.8542 7.58594V10.5918"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.05078 3.97656H12.6578"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -756,7 +756,7 @@ export const EndIcon = () => {
|
|||
/>
|
||||
<path
|
||||
d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -779,11 +779,12 @@ export const SpeedIcon = () => {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// export const DublicateIcon = () => {
|
||||
// return (
|
||||
// <svg
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export function ProductionCapacityIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z"
|
||||
fill="white"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|||
import { ProductionCapacityIcon } from "../../icons/analysis";
|
||||
|
||||
const ProductionCapacity = ({
|
||||
progressPercent = 10,
|
||||
progressPercent = 50,
|
||||
avgProcessTime = "28.4 Secs/unit",
|
||||
machineUtilization = "78%",
|
||||
throughputValue = 128,
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
|
||||
const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
|
||||
const totalSegments = intervals.length;
|
||||
const progress = 80; // percent (example)
|
||||
const progress = 20; // percent (example)
|
||||
|
||||
const processPlayerRef = useRef<HTMLDivElement>(null);
|
||||
const processWrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -294,7 +294,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
Speed
|
||||
</div>
|
||||
<div className="slider-container" ref={sliderRef}>
|
||||
<div className="speed-label mix-value">0X</div>
|
||||
<div className="speed-label mix-value">0.5X</div>
|
||||
<div className="marker marker-10"></div>
|
||||
<div className="marker marker-20"></div>
|
||||
<div className="marker marker-30"></div>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,7 @@ import {
|
|||
useDroppedObjectsStore,
|
||||
useFloatingWidget,
|
||||
} from "../../store/visualization/useDroppedObjectsStore";
|
||||
import {
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
} from "../../store/store";
|
||||
import { useSocketStore, useWidgetSubOption } from "../../store/store";
|
||||
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
|
|
@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
|
||||
const { setRightSelect } = useRightSelected();
|
||||
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
|
||||
const { editWidgetOptions, setEditWidgetOptions } =
|
||||
useEditWidgetOptionsStore();
|
||||
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
|
||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||
const { setFloatingWidget } = useFloatingWidget();
|
||||
const { widgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
const [waitingPanels, setWaitingPanels] = useState(null);
|
||||
|
||||
console.log("waitingPanels: ", waitingPanels);
|
||||
|
||||
OuterClick({
|
||||
contextClassName: [
|
||||
|
|
@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => {
|
|||
setHiddenPanels={setHiddenPanels}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
waitingPanels={waitingPanels}
|
||||
setWaitingPanels={setWaitingPanels}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
setSelectedZone={setSelectedZone}
|
||||
hiddenPanels={hiddenPanels}
|
||||
setZonesData={setZonesData}
|
||||
waitingPanels={waitingPanels}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
CleanPannel,
|
||||
EyeIcon,
|
||||
|
|
@ -57,6 +57,8 @@ interface ButtonsProps {
|
|||
>;
|
||||
hiddenPanels: HiddenPanels; // Updated prop type
|
||||
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
|
||||
waitingPanels: any;
|
||||
setWaitingPanels: any;
|
||||
}
|
||||
|
||||
const AddButtons: React.FC<ButtonsProps> = ({
|
||||
|
|
@ -64,6 +66,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
setSelectedZone,
|
||||
setHiddenPanels,
|
||||
hiddenPanels,
|
||||
waitingPanels,
|
||||
setWaitingPanels,
|
||||
}) => {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
|
|
@ -174,65 +178,62 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
|
||||
// Function to handle "+" button click
|
||||
const handlePlusButtonClick = async (side: Side) => {
|
||||
const zoneId = selectedZone.zoneId;
|
||||
|
||||
if (selectedZone.activeSides.includes(side)) {
|
||||
console.log("open");
|
||||
// Panel already exists: Remove widgets from that side and update activeSides
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
|
||||
// Already active: Schedule removal
|
||||
|
||||
// Remove all widgets associated with the side and update active sides
|
||||
const cleanedWidgets = selectedZone.widgets.filter(
|
||||
(widget) => widget.panel !== side
|
||||
);
|
||||
const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
|
||||
setWaitingPanels(side); // Mark as waiting
|
||||
|
||||
const updatedZone = {
|
||||
...selectedZone,
|
||||
widgets: cleanedWidgets,
|
||||
activeSides: newActiveSides,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
setTimeout(() => {
|
||||
console.log("Removing after wait...");
|
||||
|
||||
let deletePanel = {
|
||||
organization: organization,
|
||||
panelName: side,
|
||||
zoneId: selectedZone.zoneId,
|
||||
};
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
|
||||
}
|
||||
setSelectedZone(updatedZone);
|
||||
|
||||
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
|
||||
setHiddenPanels((prev) => ({
|
||||
...prev,
|
||||
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
|
||||
(s) => s !== side
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
// if(hiddenPanels[selectedZone.zoneId].includes(side))
|
||||
|
||||
// API call to delete the panel
|
||||
// try {
|
||||
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
|
||||
//
|
||||
// if (response.message === "Panel deleted successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
// } catch (error) {
|
||||
//
|
||||
// }
|
||||
} else {
|
||||
// Panel does not exist: Create panel
|
||||
try {
|
||||
// Get email and organization safely with a default fallback
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
||||
|
||||
// Remove widgets for that side
|
||||
const cleanedWidgets = selectedZone.widgets.filter(
|
||||
(widget) => widget.panel !== side
|
||||
);
|
||||
const newActiveSides = selectedZone.activeSides.filter(
|
||||
(s) => s !== side
|
||||
);
|
||||
|
||||
const updatedZone = {
|
||||
...selectedZone,
|
||||
widgets: cleanedWidgets,
|
||||
activeSides: newActiveSides,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
|
||||
const deletePanel = {
|
||||
organization,
|
||||
panelName: side,
|
||||
zoneId,
|
||||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
|
||||
}
|
||||
|
||||
setSelectedZone(updatedZone);
|
||||
|
||||
if (hiddenPanels[zoneId]?.includes(side)) {
|
||||
setHiddenPanels((prev) => ({
|
||||
...prev,
|
||||
[zoneId]: prev[zoneId].filter((s) => s !== side),
|
||||
}));
|
||||
}
|
||||
|
||||
// Remove from waiting state
|
||||
setWaitingPanels(null);
|
||||
}, 500); // Wait for 2 seconds
|
||||
} else {
|
||||
// Panel does not exist: Add it
|
||||
try {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
||||
|
||||
// Prevent duplicate side entries
|
||||
const newActiveSides = selectedZone.activeSides.includes(side)
|
||||
? [...selectedZone.activeSides]
|
||||
: [...selectedZone.activeSides, side];
|
||||
|
|
@ -242,32 +243,31 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
activeSides: newActiveSides,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
let addPanel = {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
|
||||
const addPanel = {
|
||||
organization,
|
||||
zoneId,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:add", addPanel);
|
||||
}
|
||||
setSelectedZone(updatedZone);
|
||||
// API call to create panels
|
||||
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
|
||||
//
|
||||
|
||||
// if (response.message === "Panels created successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
} catch (error) {}
|
||||
setSelectedZone(updatedZone);
|
||||
} catch (error) {
|
||||
console.error("Error adding panel:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
|
||||
<div key={side} className={`side-button-container ${side}`}>
|
||||
{/* "+" Button */}
|
||||
|
||||
<button
|
||||
className={`side-button ${side}${
|
||||
selectedZone.activeSides.includes(side) ? " active" : ""
|
||||
|
|
@ -286,7 +286,17 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
|
||||
{/* Extra Buttons */}
|
||||
{selectedZone.activeSides.includes(side) && (
|
||||
<div className="extra-Bs">
|
||||
<div
|
||||
className={`extra-Bs
|
||||
${waitingPanels === side ? "extra-Bs-addclosing" : ""}
|
||||
${
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
|
||||
waitingPanels !== side
|
||||
? "extra-Bs-addopening"
|
||||
: ""
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Hide Panel */}
|
||||
<div
|
||||
className={`icon ${
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ interface PanelProps {
|
|||
>;
|
||||
hiddenPanels: any;
|
||||
setZonesData: React.Dispatch<React.SetStateAction<any>>;
|
||||
waitingPanels: any;
|
||||
}
|
||||
|
||||
const generateUniqueId = () =>
|
||||
|
|
@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
setSelectedZone,
|
||||
hiddenPanels,
|
||||
setZonesData,
|
||||
waitingPanels,
|
||||
}) => {
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
|
||||
|
|
@ -108,8 +110,9 @@ const Panel: React.FC<PanelProps> = ({
|
|||
case "bottom":
|
||||
return {
|
||||
minWidth: "170px",
|
||||
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
||||
}px)`,
|
||||
width: `calc(100% - ${
|
||||
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
||||
}px)`,
|
||||
minHeight: "170px",
|
||||
height: `${panelSize}px`,
|
||||
left: leftActive ? `${panelSize}px` : "0",
|
||||
|
|
@ -122,8 +125,9 @@ const Panel: React.FC<PanelProps> = ({
|
|||
minWidth: "170px",
|
||||
width: `${panelSize}px`,
|
||||
minHeight: "170px",
|
||||
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
||||
}px)`,
|
||||
height: `calc(100% - ${
|
||||
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
||||
}px)`,
|
||||
top: topActive ? `${panelSize}px` : "0",
|
||||
bottom: bottomActive ? `${panelSize}px` : "0",
|
||||
[side]: "0",
|
||||
|
|
@ -149,7 +153,6 @@ const Panel: React.FC<PanelProps> = ({
|
|||
const currentWidgetsCount = getCurrentWidgetCount(panel);
|
||||
const maxCapacity = calculatePanelCapacity(panel);
|
||||
|
||||
|
||||
if (currentWidgetsCount < maxCapacity) {
|
||||
addWidgetToPanel(draggedAsset, panel);
|
||||
}
|
||||
|
|
@ -283,8 +286,9 @@ const Panel: React.FC<PanelProps> = ({
|
|||
<div
|
||||
key={side}
|
||||
id="panel-wrapper"
|
||||
className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
|
||||
}`}
|
||||
className={`panel ${side}-panel absolute ${
|
||||
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
|
||||
}`}
|
||||
style={getPanelStyle(side)}
|
||||
onDrop={(e) => handleDrop(e, side)}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
|
|
@ -297,11 +301,18 @@ const Panel: React.FC<PanelProps> = ({
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className={`panel-content ${isPlaying && "fullScreen"}`}
|
||||
className={`panel-content
|
||||
${waitingPanels === side ? `${side}-closing` : ""}
|
||||
${
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
|
||||
? `${side}-opening`
|
||||
: ""
|
||||
}
|
||||
${isPlaying ? "fullScreen" : ""}`}
|
||||
style={{
|
||||
pointerEvents:
|
||||
selectedZone.lockedPanels.includes(side) ||
|
||||
hiddenPanels[selectedZone.zoneId]?.includes(side)
|
||||
hiddenPanels[selectedZone.zoneId]?.includes(side)
|
||||
? "none"
|
||||
: "auto",
|
||||
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
|
|||
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
|
||||
import { useSelectedUserStore } from "../store/useCollabStore";
|
||||
import FollowPerson from "../components/templates/FollowPerson";
|
||||
import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
|
||||
import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
|
||||
import ROISummary from "../components/ui/analysis/ROISummary";
|
||||
|
||||
const Project: React.FC = () => {
|
||||
let navigate = useNavigate();
|
||||
|
|
@ -59,8 +62,10 @@ const Project: React.FC = () => {
|
|||
return (
|
||||
<div className="project-main">
|
||||
{/* <div className="analysis">
|
||||
<ProductionCapacity />
|
||||
<ThroughputSummary />
|
||||
<div className="analysis-wrapper">
|
||||
<ProductionCapacity />
|
||||
<ThroughputSummary />
|
||||
</div>
|
||||
<ROISummary />
|
||||
</div> */}
|
||||
<KeyPressListener />
|
||||
|
|
@ -79,6 +84,7 @@ const Project: React.FC = () => {
|
|||
<RealTimeVisulization />
|
||||
{activeModule !== "market" && <Tools />}
|
||||
{isPlaying && activeModule === "simulation" && <SimulationPlayer />}
|
||||
{/* {<SimulationPlayer />} */}
|
||||
{selectedUser && <FollowPerson />}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -239,25 +239,25 @@
|
|||
height: 125px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
.semi-circle {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transition: background 0.5s ease;
|
||||
}
|
||||
.progress-cover {
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
top: 12.5%;
|
||||
left: 12.5%;
|
||||
background: #000000cc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.semi-circle {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transition: background 0.5s ease;
|
||||
}
|
||||
|
||||
.progress-cover {
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
top: 12.5%;
|
||||
left: 12.5%;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.label-wrapper {
|
||||
.label {
|
||||
|
|
@ -305,14 +305,7 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
background-color: #f4f4f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.net-profit-row {
|
||||
background-color: #dff0d8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
align-items: start;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// pointer-events: none;k
|
||||
// pointer-events: none;
|
||||
z-index: 10000;
|
||||
|
||||
.analysis-wrapper {
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
padding: 8px;
|
||||
|
||||
.analysis-card-wrapper {
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
|
|
@ -66,7 +67,8 @@
|
|||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
// width: 36px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 13px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
width: 70%;
|
||||
|
||||
.simulation-player-container {
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
padding: 7px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
|
|
@ -18,7 +18,10 @@
|
|||
gap: 8px;
|
||||
|
||||
.progresser-wrapper {
|
||||
background-color: var(--highlight-accent-color);
|
||||
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
// background-color: var(--highlight-accent-color);
|
||||
padding: 4px 5px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
|
|
@ -61,7 +64,8 @@
|
|||
height: 8px;
|
||||
border-radius: 5px;
|
||||
// overflow: hidden;
|
||||
background-color: var(--highlight-accent-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
|
||||
.progress {
|
||||
border-radius: 5px;
|
||||
|
|
@ -82,7 +86,8 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
path {
|
||||
|
|
@ -94,7 +99,7 @@
|
|||
|
||||
.speed-control-container {
|
||||
@include flex-center;
|
||||
gap: 18px;
|
||||
gap: 32px;
|
||||
padding: 5px 16px;
|
||||
// background: var(--background-color);
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
|
@ -122,7 +127,8 @@
|
|||
.speed-label {
|
||||
font-size: var(--font-size-tiny);
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
bottom: -7px;
|
||||
transform: translate(-50%, -0%);
|
||||
|
||||
&:first-child {
|
||||
left: 0;
|
||||
|
|
@ -171,13 +177,14 @@
|
|||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.marker{
|
||||
position: absolute;
|
||||
background-color: var(--text-disabled);
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
border-radius: 1px;
|
||||
top: 8px;
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
background-color: var(--text-disabled);
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
border-radius: 1px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.marker.marker-10 {
|
||||
|
|
@ -239,9 +246,8 @@
|
|||
|
||||
.timeline {
|
||||
padding: 16px;
|
||||
// background: #f5f3fa;
|
||||
background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
|
||||
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -271,9 +277,8 @@
|
|||
background-color: #d3d3e2;
|
||||
|
||||
&.filled {
|
||||
background-color: #8f5cf2;
|
||||
|
||||
border: 4px solid var(--accent-color);
|
||||
background-color: var(--accent-color);
|
||||
border: 4px solid #8f5cf2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -302,7 +307,8 @@
|
|||
.processDisplayer {
|
||||
border-radius: 5px;
|
||||
// overflow: hidden;
|
||||
background-color: var(--highlight-accent-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
padding: 14px 6px;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
min-width: 150px;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -10%);
|
||||
|
||||
transition: transform 0.5s linear;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -183,8 +183,8 @@
|
|||
|
||||
.panel {
|
||||
position: absolute;
|
||||
background: var(--background-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
// background: var(--background-color);
|
||||
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
background: var(--background-color);
|
||||
// background: var(--background-color);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -383,6 +383,10 @@
|
|||
transition: transform 0.3s ease;
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
|
||||
svg {
|
||||
stroke: var(--icon-default-color) !important;
|
||||
}
|
||||
|
||||
.extra-Bs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -422,6 +426,7 @@
|
|||
.add-icon {
|
||||
@include flex-center;
|
||||
transition: rotate 0.2s;
|
||||
|
||||
}
|
||||
|
||||
path {
|
||||
|
|
@ -440,6 +445,8 @@
|
|||
stroke: #f65648;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -662,7 +669,7 @@
|
|||
}
|
||||
|
||||
.distance-line {
|
||||
|
||||
|
||||
position: absolute;
|
||||
border-style: dashed;
|
||||
border-color: var(--accent-color);
|
||||
|
|
@ -801,4 +808,179 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.panel-content {
|
||||
background: var(--background-color);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* RIGHT */
|
||||
.panel-content.right-opening {
|
||||
animation: rightExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@keyframes rightExpand {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content.right-closing {
|
||||
animation: rightCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@keyframes rightCollapse {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* LEFT */
|
||||
.panel-content.left-opening {
|
||||
animation: leftExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@keyframes leftExpand {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.left-closing {
|
||||
animation: leftCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@keyframes leftCollapse {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* TOP */
|
||||
.panel-content.top-opening {
|
||||
animation: topExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@keyframes topExpand {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.top-closing {
|
||||
animation: topCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@keyframes topCollapse {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* BOTTOM */
|
||||
.panel-content.bottom-opening {
|
||||
animation: bottomExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
@keyframes bottomExpand {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-closing {
|
||||
animation: bottomCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
@keyframes bottomCollapse {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Add button
|
||||
|
||||
.extra-Bs {}
|
||||
|
||||
.extra-Bs-addopening {
|
||||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.extra-Bs-addclosing {
|
||||
animation: slideUp 0.3s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue