adds charts panel

frontend/src/composables/document.ts

@@ -0,0 +1,24 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+export function onDocumentVisibilityChange(
+    handler: (visible: boolean) => void,
+) {
+    const handlerRef = ref(() => {
+        handler(!document.hidden);
+    });
+
+    onMounted(() => {
+        document.addEventListener('visibilitychange', handlerRef.value);
+    });
+    onUnmounted(() => {
+        document.removeEventListener('visibilitychange', handlerRef.value);
+    });
+}
+
+export function onDocumentShown(handler: () => void) {
+    onDocumentVisibilityChange((visible) => {
+        if (visible) {
+            handler();
+        }
+    });
+}

frontend/src/composables/websocket.ts

@@ -11,6 +11,7 @@ import {
     watch,
 } from 'vue';
 import type { TelemetryDefinition } from '@/composables/telemetry';
+import { onDocumentVisibilityChange } from '@/composables/document.ts';
 
 export interface TelemetryDataItem {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,12 +28,14 @@ export class WebsocketHandle {
     websocket: WebSocket | null;
     should_be_connected: boolean;
     connected: Ref<boolean>;
+    enabled: Ref<boolean>;
     on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>>;
 
     constructor() {
         this.websocket = null;
         this.should_be_connected = false;
         this.connected = ref(false);
+        this.enabled = ref(true);
         this.on_telem_value = new Map();
     }
 
@@ -119,9 +122,9 @@ export class WebsocketHandle {
         const is_live = computed(() => toValue(live));
 
         watch(
-            [uuid, this.connected, minimum_separation, is_live],
-            ([uuid_value, connected, min_sep, live_value]) => {
-                if (connected && uuid_value && live_value) {
+            [uuid, this.connected, this.enabled, minimum_separation, is_live],
+            ([uuid_value, connected, enabled, min_sep, live_value]) => {
+                if (connected && enabled && uuid_value && live_value) {
                     this.websocket?.send(
                         JSON.stringify({
                             RegisterTlmListener: {
@@ -160,6 +163,14 @@ export class WebsocketHandle {
 
         return value_result;
     }
+
+    pause() {
+        this.enabled.value = false;
+    }
+
+    resume() {
+        this.enabled.value = true;
+    }
 }
 
 export const WEBSOCKET_SYMBOL = Symbol();
@@ -170,6 +181,13 @@ export function useWebsocket() {
     onMounted(() => {
         handle.value.connect();
     });
+    onDocumentVisibilityChange((visible) => {
+        if (visible) {
+            handle.value.resume();
+        } else {
+            handle.value.pause();
+        }
+    });
     onUnmounted(() => {
         handle.value.disconnect();
     });