initial frontend

frontend/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>

frontend/src/assets/main.scss

@@ -0,0 +1,17 @@
+
+$light-gray: #d0d1d0;
+$dark-gray: #303031;
+
+$text-color: $light-gray;
+$background-color: $dark-gray;
+
+body {
+  color: $text-color;
+  background-color: $background-color;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  min-height: 100vh;
+}

frontend/src/composables/telemetry.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue'
+
+export function useTelemetry(name: string) {
+  const data = ref<any | null>(null);
+  const error = ref<any | null>(null);
+
+  fetch(`/api/tlm/${name}`)
+    .then((res) => res.json())
+    .then((json) => (data.value = json))
+    .catch((err) => (error.value = err));
+
+  return { data, error };
+}

frontend/src/main.ts

@@ -0,0 +1,11 @@
+import './assets/main.scss'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

frontend/src/router/index.ts

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../views/HomeView.vue'),
+    },
+  ],
+})
+
+export default router

frontend/src/views/HomeView.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useTelemetry } from '@/composables/telemetry'
+
+const { data: sin_data, error: sin_error } = useTelemetry("simple_producer/sin");
+const { data: cos_data, error: cos_error } = useTelemetry("simple_producer/cos");
+</script>
+
+<template>
+  <main>
+    <div v-if="sin_data">
+      {{ sin_data.name }} ({{ sin_data.uuid }}): {{ 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>
+    <div v-if="cos_error">
+      {{ cos_error }}
+    </div>
+  </main>
+</template>