Push priorities for when connections open on component setup

PhotonVision · Jul 18, 2023 · ba7526d · ba7526d
1 parent 8b1827f
commit ba7526d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 40 deletions.
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
@@ -3,50 +3,48 @@ import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { AutoReconnectingWebsocket } from "@/lib/AutoReconnectingWebsocket";
-import { inject, onMounted } from "vue";
+import { inject } from "vue";
 import PhotonSidebar from "@/components/app/photon-sidebar.vue";
 import PhotonLogView from "@/components/app/photon-log-view.vue";
 import PhotonErrorSnackbar from "@/components/app/photon-error-snackbar.vue";
 
-onMounted(() => {
-  const websocket = new AutoReconnectingWebsocket(
-      `ws://${inject("backendAddress")}/websocket_data`,
-      () => {
-        useStateStore().$patch({ backendConnected: true });
-      },
-      (data) => {
-        if(data.log !== undefined) {
-          useStateStore().addLogFromWebsocket(data.log);
-        }
-        if(data.settings !== undefined) {
-          useSettingsStore().updateGeneralSettingsFromWebsocket(data.settings);
-        }
-        if(data.cameraSettings !== undefined) {
-          useCameraSettingsStore().updateCameraSettingsFromWebsocket(data.cameraSettings);
-        }
-        if(data.ntConnectionInfo !== undefined) {
-          useStateStore().updateNTConnectionStatusFromWebsocket(data.ntConnectionInfo);
-        }
-        if(data.metrics !== undefined) {
-          useSettingsStore().updateMetricsFromWebsocket(data.metrics);
-        }
-        if(data.updatePipelineResult !== undefined) {
-          useStateStore().updatePipelineResultsFromWebsocket(data.updatePipelineResult);
-        }
-        if(data.mutatePipeline !== undefined) {
-          useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipeline);
-        }
-        if(data.calibrationData !== undefined) {
-          useStateStore().updateCalibrationStateValuesFromWebsocket(data.calibrationData);
-        }
-      },
-      () => {
-        useStateStore().$patch({ backendConnected: false });
+const websocket = new AutoReconnectingWebsocket(
+    `ws://${inject("backendAddress")}/websocket_data`,
+    () => {
+      useStateStore().$patch({ backendConnected: true });
+    },
+    (data) => {
+      if(data.log !== undefined) {
+        useStateStore().addLogFromWebsocket(data.log);
       }
-  );
+      if(data.settings !== undefined) {
+        useSettingsStore().updateGeneralSettingsFromWebsocket(data.settings);
+      }
+      if(data.cameraSettings !== undefined) {
+        useCameraSettingsStore().updateCameraSettingsFromWebsocket(data.cameraSettings);
+      }
+      if(data.ntConnectionInfo !== undefined) {
+        useStateStore().updateNTConnectionStatusFromWebsocket(data.ntConnectionInfo);
+      }
+      if(data.metrics !== undefined) {
+        useSettingsStore().updateMetricsFromWebsocket(data.metrics);
+      }
+      if(data.updatePipelineResult !== undefined) {
+        useStateStore().updatePipelineResultsFromWebsocket(data.updatePipelineResult);
+      }
+      if(data.mutatePipeline !== undefined) {
+        useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipeline);
+      }
+      if(data.calibrationData !== undefined) {
+        useStateStore().updateCalibrationStateValuesFromWebsocket(data.calibrationData);
+      }
+    },
+    () => {
+      useStateStore().$patch({ backendConnected: false });
+    }
+);
 
-  useStateStore().$patch({ websocket: websocket });
-});
+useStateStore().$patch({ websocket: websocket });
 </script>
 
 <template>

diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import { onMounted, computed } from "vue";
+import {onMounted, computed, onBeforeMount} from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import CvIcon from "@/components/common/cv-icon.vue";
+import {onBeforeRouteLeave} from "vue-router/composables";
 
 interface MetricItem {
   header: string,
@@ -75,7 +76,7 @@ const fetchMetrics = () => {
       });
 };
 
-onMounted(() => {
+onBeforeMount(() => {
   fetchMetrics();
 });
 </script>