[PhotonClient] Vite and Typescript complete refactor (#884)

2026-06-24 01:31:44 +00:00 · 2023-08-21 01:51:35 -04:00
parent 8397b43bef
commit f623e4a1cc
119 changed files with 11821 additions and 19318 deletions
--- a/photon-client/src/stores/StateStore.ts
+++ b/photon-client/src/stores/StateStore.ts
@@ -0,0 +1,125 @@
+import { defineStore } from "pinia";
+import type { LogMessage } from "@/types/SettingTypes";
+import type { AutoReconnectingWebsocket } from "@/lib/AutoReconnectingWebsocket";
+import type { PipelineResult } from "@/types/PhotonTrackingTypes";
+import type {
+    WebsocketCalibrationData,
+    WebsocketLogMessage,
+    WebsocketNTUpdate,
+    WebsocketPipelineResultUpdate
+} from "@/types/WebsocketDataTypes";
+
+export interface NTConnectionStatus {
+    connected: boolean,
+    address?: string,
+    clients?: number
+}
+
+interface StateStore {
+    backendConnected: boolean,
+    websocket?: AutoReconnectingWebsocket,
+    ntConnectionStatus: NTConnectionStatus,
+    showLogModal: boolean,
+    sidebarFolded: boolean,
+    logMessages: LogMessage[]
+    currentCameraIndex: number,
+
+    pipelineResults?: PipelineResult,
+
+    colorPickingMode: boolean,
+
+    calibrationData: {
+        imageCount: number,
+        videoFormatIndex: number,
+        minimumImageCount: number,
+        hasEnoughImages: boolean
+    },
+
+    snackbarData: {
+        show: boolean,
+        message: string,
+        color: string,
+        timeout: number
+    }
+}
+
+export const useStateStore = defineStore("state", {
+    state: (): StateStore => {
+        return {
+            backendConnected: false,
+            websocket: undefined,
+            ntConnectionStatus: {
+                connected: false
+            },
+            showLogModal: false,
+            // Ignored if the display is too small
+            sidebarFolded: localStorage.getItem("sidebarFolded") === null ? false : localStorage.getItem("sidebarFolded") === "true",
+            logMessages: [],
+            currentCameraIndex: 0,
+
+            pipelineResults: undefined,
+
+            colorPickingMode: false,
+
+            calibrationData: {
+                imageCount: 0,
+                videoFormatIndex: 0,
+                minimumImageCount: 12,
+                hasEnoughImages: false
+            },
+
+            snackbarData: {
+                show: false,
+                message: "No Message",
+                color: "info",
+                timeout: 2000
+            }
+        };
+    },
+    actions: {
+        setSidebarFolded(value: boolean) {
+            this.sidebarFolded = value;
+            localStorage.setItem("sidebarFolded", Boolean(value).toString());
+        },
+        addLogFromWebsocket(data: WebsocketLogMessage) {
+            this.logMessages.push({
+                level: data.logMessage.logLevel,
+                message: data.logMessage.logMessage
+            });
+        },
+        updateNTConnectionStatusFromWebsocket(data: WebsocketNTUpdate) {
+            this.ntConnectionStatus = {
+                    connected: data.connected,
+                    address: data.address,
+                    clients: data.clients
+                };
+        },
+        updatePipelineResultsFromWebsocket(data: WebsocketPipelineResultUpdate) {
+            for(const cameraIndex in data) {
+                if(parseInt(cameraIndex) === this.currentCameraIndex) {
+                    this.pipelineResults = data[cameraIndex];
+                }
+            }
+        },
+        updateCalibrationStateValuesFromWebsocket(data: WebsocketCalibrationData) {
+            this.calibrationData = {
+                imageCount: data.count,
+                videoFormatIndex: data.videoModeIndex,
+                minimumImageCount: data.minCount,
+                hasEnoughImages: data.hasEnough
+            };
+        },
+        showSnackbarMessage(data: {
+            message: string,
+            color: string,
+            timeout?: number
+        }) {
+            this.snackbarData = {
+                show: true,
+                message: data.message,
+                color: data.color,
+                timeout: data.timeout || 2000
+            };
+        }
+    }
+});