adds telemetry list

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>