initial frontend pages

frontend/src/App.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
+import { provide } from 'vue';
+
+const websocket = useWebsocket();
+provide(WEBSOCKET_SYMBOL, websocket);
 </script>
 
 <template>

frontend/src/composables/telemetry.ts

@@ -7,6 +7,26 @@ export interface TelemetryDefinition {
     data_type: string;
 }
 
+export function useAllTelemetry() {
+    const data = ref<TelemetryDefinition[] | null>(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const error = ref<any | null>(null);
+
+    watchEffect(async () => {
+        try {
+            const res = await fetch(`/api/tlm/info`);
+            data.value = await res.json();
+            error.value = null;
+        } catch (e) {
+            data.value = null;
+            error.value = e;
+        }
+    });
+
+    return { data, error };
+}
+
+
 export function useTelemetry(name: MaybeRefOrGetter<string>) {
     const data = ref<TelemetryDefinition | null>(null);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

frontend/src/router/index.ts

@@ -8,6 +8,16 @@ const router = createRouter({
             name: 'home',
             component: () => import('../views/HomeView.vue'),
         },
+        {
+            path: '/graph',
+            name: 'graph',
+            component: () => import('../views/GraphView.vue'),
+        },
+        {
+            path: '/list',
+            name: 'list',
+            component: () => import('../views/TelemetryListView.vue'),
+        },
     ],
 });
 

frontend/src/views/GraphView.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import Axis from '@/components/GraphAxis.vue';
+import Line from '@/components/TelemetryLine.vue';
+import { GraphSide } from '@/graph/graph';
+import SvgGraph from '@/components/SvgGraph.vue';
+</script>
+
+<template>
+    <div style="width: 100vw; height: 50vh">
+        <SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
+            <Axis>
+                <Line data="simple_producer/time_offset"></Line>
+                <Line data="simple_producer/publish_offset"></Line>
+                <Line data="simple_producer/await_offset"></Line>
+            </Axis>
+        </SvgGraph>
+    </div>
+    <div style="width: 100vw; height: 50vh">
+        <SvgGraph
+            :initial_duration="60 * 1000 * 10"
+            :legend="GraphSide.Right"
+            right_axis
+        >
+            <Axis>
+                <Line data="simple_producer/sin"></Line>
+                <Line data="simple_producer/cos4"></Line>
+                <Line data="simple_producer/sin2"></Line>
+                <Line data="simple_producer/cos"></Line>
+                <Line data="simple_producer/sin3"></Line>
+                <Line data="simple_producer/cos2"></Line>
+                <Line data="simple_producer/sin4"></Line>
+                <Line data="simple_producer/cos3"></Line>
+            </Axis>
+        </SvgGraph>
+    </div>
+</template>
+
+<style lang="scss">
+@use '@/assets/variables';
+</style>

frontend/src/views/HomeView.vue

@@ -1,43 +1,14 @@
 <script setup lang="ts">
-import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
-import { provide } from 'vue';
-import Axis from '@/components/GraphAxis.vue';
-import Line from '@/components/TelemetryLine.vue';
-import { GraphSide } from '@/graph/graph';
-import SvgGraph from '@/components/SvgGraph.vue';
-
-const websocket = useWebsocket();
-provide(WEBSOCKET_SYMBOL, websocket);
 </script>
 
 <template>
-    <div style="width: 100vw; height: 50vh">
-        <SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
-            <Axis>
-                <Line data="simple_producer/time_offset"></Line>
-                <Line data="simple_producer/publish_offset"></Line>
-                <Line data="simple_producer/await_offset"></Line>
-            </Axis>
-        </SvgGraph>
-    </div>
-    <div style="width: 100vw; height: 50vh">
-        <SvgGraph
-            :initial_duration="60 * 1000 * 10"
-            :legend="GraphSide.Right"
-            right_axis
-        >
-            <Axis>
-                <Line data="simple_producer/sin"></Line>
-                <Line data="simple_producer/cos4"></Line>
-                <Line data="simple_producer/sin2"></Line>
-                <Line data="simple_producer/cos"></Line>
-                <Line data="simple_producer/sin3"></Line>
-                <Line data="simple_producer/cos2"></Line>
-                <Line data="simple_producer/sin4"></Line>
-                <Line data="simple_producer/cos3"></Line>
-            </Axis>
-        </SvgGraph>
-    </div>
+    <RouterLink :to="{ name: 'graph' }">
+        Graph
+    </RouterLink>
+
+    <RouterLink :to="{ name: 'list' }">
+        Tlm List
+    </RouterLink>
 </template>
 
 <style lang="scss">

frontend/src/views/TelemetryListView.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+import { useAllTelemetry } from '@/composables/telemetry';
+
+const { data: telemetry_data } = useAllTelemetry();
+</script>
+
+<template>
+    <div v-if="telemetry_data">
+        <div>
+            <div v-for="entry in telemetry_data" :key="entry.uuid">
+                <span>
+                    {{ entry.name }}
+                </span>
+                <span>
+                    {{ entry.data_type }}
+                </span>
+            </div>
+        </div>
+    </div>
+    <div v-else>
+        No Telemetry Data
+    </div>
+</template>
+
+<style lang="scss">
+@use '@/assets/variables';
+</style>