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

v3-ui #98

Merged
Vishnu merged 51 commits from v3-ui into main 2025-06-10 06:46:08 +00:00
Conversation 0 Commits 51 Files Changed 178 +381 -263
11 changed files with 381 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6884ffd562 - Show all commits

6
app/src/components/layout/sidebarRight/analysis/Analysis.tsx
View File

@ -14,9 +14,9 @@ const Analysis: React.FC = () => {
const AnalysisPresets: AnalysisPresetsType = {
"Throughput time": [
{ type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
{ type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
{ type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
// { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
// { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
// { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
],
"Production capacity": [
{ type: "default", inputs: { label: "Shift length", activeOption: "hr" } },

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

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
type Props = {};
@ -26,6 +27,7 @@ const BarChartInput = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0];
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
@ -92,6 +94,25 @@ const BarChartInput = (props: Props) => {
inputDuration: any,
inputName: any
) => {
// const userId = localStorage.getItem("userId");
// let newWidget = {
// id: selectedChartId.id,
// panel: selectedChartId.panel,
// widgetName: inputName,
// Data: {
// measurements: inputMeasurement,
// duration: inputDuration,
// }
// }
// const adding3dWidget = {
// organization: organization,
// widget: newWidget,
// zoneUuid: selectedZone.zoneUuid,
// projectId, userId
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
// }
try {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

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

@ -124,6 +124,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
type Props = {};
@ -142,6 +143,7 @@ const LineGrapInput = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0];
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
const fetchZoneData = async () => {
@ -207,6 +209,25 @@ const LineGrapInput = (props: Props) => {
inputDuration: any,
inputName: any
) => {
// const userId = localStorage.getItem("userId");
// let newWidget = {
// id: selectedChartId.id,
// panel: selectedChartId.panel,
// widgetName: inputName,
// Data: {
// measurements: inputMeasurement,
// duration: inputDuration,
// }
// }
// const adding3dWidget = {
// organization: organization,
// widget: newWidget,
// zoneUuid: selectedZone.zoneUuid,
// projectId, userId
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
// }
try {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

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

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
type Props = {};
@ -26,6 +27,7 @@ const PieChartInput = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0];
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
@ -92,6 +94,26 @@ const PieChartInput = (props: Props) => {
inputDuration: any,
inputName: any
) => {
// const userId = localStorage.getItem("userId");
// let newWidget = {
// id: selectedChartId.id,
// panel: selectedChartId.panel,
// widgetName: inputName,
// Data: {
// measurements: inputMeasurement,
// duration: inputDuration,
// },
// }
// const adding3dWidget = {
// organization: organization,
// widget: newWidget,
// zoneUuid: selectedZone.zoneUuid,
// projectId, userId
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
// }
try {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

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

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
type Props = {};
@ -26,6 +27,7 @@ const Progress1Input = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0];
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
@ -92,6 +94,25 @@ const Progress1Input = (props: Props) => {
inputDuration: any,
inputName: any
) => {
// const userId = localStorage.getItem("userId");
// let newWidget = {
// id: selectedChartId.id,
// panel: selectedChartId.panel,
// widgetName: inputName,
// Data: {
// measurements: inputMeasurement,
// duration: inputDuration,
// },
// }
// const adding3dWidget = {
// organization: organization,
// widget: newWidget,
// zoneUuid: selectedZone.zoneUuid,
// projectId, userId
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
// }
try {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

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

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
type Props = {};
@ -26,6 +27,7 @@ const Progress2Input = (props: Props) => {
const organization = email?.split("@")[1]?.split(".")[0];
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
@ -92,6 +94,25 @@ const Progress2Input = (props: Props) => {
inputDuration: any,
inputName: any
) => {
// const userId = localStorage.getItem("userId");
// let newWidget = {
// id: selectedChartId.id,
// panel: selectedChartId.panel,
// widgetName: inputName,
// Data: {
// measurements: inputMeasurement,
// duration: inputDuration,
// }
// }
// const adding3dWidget = {
// organization: organization,
// widget: newWidget,
// zoneUuid: selectedZone.zoneUuid,
// projectId, userId
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
// }
try {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

9
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

@ -91,7 +91,8 @@ const ThroughputSummary: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (productionCapacityData >= 0) {
// console.log('productionCapacityData > 0: ', productionCapacityData > 0);
if (productionCapacityData > 0) {
setIsLoading(false);
console.log("productionCapacityData: ", productionCapacityData);
} else {
@ -100,7 +101,8 @@ const ThroughputSummary: React.FC = () => {
}, [productionCapacityData]);
return (
<div className="production analysis-card">
<>
{!isLoading && <div className="production analysis-card">
<div className="production-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
@ -184,7 +186,8 @@ const ThroughputSummary: React.FC = () => {
<SkeletonUI type={"default"} />
)}
</div>
</div>
</div>}
</>
);
};

17
app/src/components/ui/analysis/ROISummary.tsx
View File

@ -83,16 +83,22 @@ const ROISummary = ({
const [isLoading, setIsLoading] = useState(false);
const { roiSummary } = useROISummaryData();
useEffect(() => {
if (roiSummary && typeof roiSummary === "object") {
setIsLoading(false); // Data loaded
if (roiSummary.productName) {
// If productName is set, assume data is loaded
setIsLoading(false);
} else {
setIsLoading(true); // Show skeleton while loading
// If productName is empty, assume still loading
setIsLoading(true);
}
}, [roiSummary]);
return (
<div className="roiSummary-container analysis-card">
<>
{
!isLoading && <div className="roiSummary-container analysis-card">
<div className="roiSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
@ -238,7 +244,8 @@ const ROISummary = ({
// <div> No Data</div>
)}
</div>
</div>
</div>}
</>
);
};

13
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@ -30,18 +30,24 @@ const ProductionCapacity = ({
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (throughputData >= 0) {
console.log('typeof throughputData:', typeof throughputData);
console.log('throughputData > 0: ', throughputData > 0);
if (throughputData > 0) {
// console.log('machineActiveTime: ', machineActiveTime);
// console.log('materialCycleTime: ', materialCycleTime);
// console.log('throughputData: ', throughputData);
// console.log('productionCapacityData: ', productionCapacityData);
setIsLoading(false);
} else {
setIsLoading(true);
}
}, [throughputData])
return (
<div className="throughtputSummary-container analysis-card">
<>
{!isLoading && <div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
@ -95,7 +101,8 @@ const ProductionCapacity = ({
<SkeletonUI type={"default"} />
)}
</div>
</div>
</div>}
</>
);
};

2
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@ -165,7 +165,7 @@ const SimulationPlayer: React.FC = () => {
<div className="icon">
<HourlySimulationIcon />
</div>
<div className="label">Hourly Simulation</div>
<div className="label">ThroughPut Data</div>
</div>
<div className="progress-wrapper">
<div

7
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@ -361,10 +361,7 @@ export default function Dropped3dWidgets() {
}
}, [rightSelect, rightClickSelected]);
function isPointInPolygon(
point: [number, number],
polygon: Array<[number, number]>
): boolean {
function isPointInPolygon(point: [number, number], polygon: Array<[number, number]>): boolean {
const [x, z] = point;
let inside = false;
@ -434,8 +431,6 @@ export default function Dropped3dWidgets() {
}
}
};
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedzoneUuid = Object.keys(zoneWidgetData).find(