websocket to web

frontend/src/views/HomeView.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
 import { useTelemetry } from '@/composables/telemetry'
+import { useWebsocket } from '@/composables/websocket'
 
 const { data: sin_data, error: sin_error } = useTelemetry("simple_producer/sin");
 const { data: cos_data, error: cos_error } = useTelemetry("simple_producer/cos");
+
+const websocket = useWebsocket();
+
+let sin_value = websocket.value.listen_to_telemetry(sin_data);
+let cos_value = websocket.value.listen_to_telemetry(cos_data);
+
 </script>
 
 <template>
   <main>
-    <div v-if="sin_data">
-      {{ sin_data.name }} ({{ sin_data.uuid }}): {{ sin_data.data_type }}
+    <div v-if="sin_value">
+      {{ sin_data.name }} ({{ sin_data.data_type }}) = {{ sin_value[sin_data.data_type] }}
     </div>
     <div v-if="sin_error">
       {{ sin_error }}
     </div>
-    <div v-if="cos_data">
-      {{ cos_data.name }} ({{ cos_data.uuid }}): {{ cos_data.data_type }}
+    <div v-if="cos_value">
+      {{ cos_data.name }} ({{ cos_data.data_type }}) = {{ cos_value[cos_data.data_type] }}
     </div>
     <div v-if="cos_error">
       {{ cos_error }}