adds telemetry list

frontend/src/views/EmptyPanelView.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+    filterHeirarchy,
+    getFirstLeaf,
+    getPanelHeirarchy,
+} from '@/panels/panel';
+import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
+import router from '@/router';
+import TextInput from '@/components/TextInput.vue';
+
+const searchValue = ref('');
+
+const heirarchy = getPanelHeirarchy();
+
+const filtered_heirarchy = computed(() =>
+    filterHeirarchy(heirarchy, (leaf) => {
+        return leaf.name
+            .toLowerCase()
+            .includes(searchValue.value.toLowerCase());
+    }),
+);
+
+function onEnter() {
+    const leaf = getFirstLeaf(filtered_heirarchy.value);
+    if (leaf != null) {
+        router.push(leaf.to);
+    }
+}
+</script>
+
+<template>
+    <div class="column stretch screen content center no-min-height">
+        <div class="row">
+            <TextInput
+                autofocus
+                class="grow"
+                v-model="searchValue"
+                placeholder="Search"
+                @enter="onEnter"
+            ></TextInput>
+        </div>
+
+        <div class="row grow stretch">
+            <div class="column grow scroll no-min-height">
+                <PanelHeirarchy
+                    :heirarchy="filtered_heirarchy"
+                    v-if="filtered_heirarchy.length > 0"
+                ></PanelHeirarchy>
+                <div v-else>
+                    <span>No Matches Found</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+</style>

frontend/src/views/HomeView.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-    <RouterLink :to="{ name: 'graph' }">
-        Graph
-    </RouterLink>
-
-    <RouterLink :to="{ name: 'list' }">
-        Tlm List
-    </RouterLink>
-</template>
-
-<style lang="scss">
-@use '@/assets/variables';
-</style>

frontend/src/views/TelemetryListView.vue

@@ -1,25 +1,46 @@
 <script setup lang="ts">
+import TextInput from '@/components/TextInput.vue';
+import { ref } from 'vue';
+import TelemetryList from '@/components/TelemetryList.vue';
+import type { TelemetryDefinition } from '@/composables/telemetry';
+import TelemetryInfo from '@/components/TelemetryInfo.vue';
+import FlexDivider from '@/components/FlexDivider.vue';
 
-import { useAllTelemetry } from '@/composables/telemetry';
+const searchValue = ref('');
 
-const { data: telemetry_data } = useAllTelemetry();
+const selectValue = ref<
+    [TelemetryDefinition | null, TelemetryDefinition | null]
+>([null, null]);
 </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 class="row stretch screen content center divider">
+        <div class="column grow2 stretch no-min-height no-basis">
+            <div class="row">
+                <TextInput
+                    autofocus
+                    class="grow"
+                    v-model="searchValue"
+                    placeholder="Search"
+                ></TextInput>
+            </div>
+
+            <div class="row scroll no-min-height">
+                <div class="column grow stretch">
+                    <TelemetryList
+                        :search="searchValue"
+                        @select="(selection) => (selectValue = selection)"
+                    ></TelemetryList>
+                </div>
             </div>
         </div>
-    </div>
-    <div v-else>
-        No Telemetry Data
+        <FlexDivider></FlexDivider>
+        <div class="column grow stretch no-basis">
+            <TelemetryInfo
+                :telemetry_definition="selectValue[0]"
+                :secondary="selectValue[1]"
+            ></TelemetryInfo>
+        </div>
     </div>
 </template>