adds initial user defined panels

frontend/src/views/EmptyPanelView.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import {
     filterHeirarchy,
     getFirstLeaf,
-    getPanelHeirarchy,
+    usePanelHeirarchy,
 } from '@/panels/panel';
 import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
 import router from '@/router';
@@ -14,10 +14,10 @@ import { ScreenType } from '@/composables/ScreenType.ts';
 
 const searchValue = ref('');
 
-const heirarchy = getPanelHeirarchy();
+const heirarchy = usePanelHeirarchy();
 
 const filtered_heirarchy = computed(() =>
-    filterHeirarchy(heirarchy, (leaf) => {
+    filterHeirarchy(heirarchy.value, (leaf) => {
         return leaf.name
             .toLowerCase()
             .includes(searchValue.value.toLowerCase());

frontend/src/views/PanelEditorView.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import DynamicComponent from '@/components/DynamicComponent.vue';
+import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
+import { ref, watchEffect } from 'vue';
+
+const data = ref<OptionalDynamicComponentData>({ type: 'none' });
+
+const panel_id = ref<string | null>(null);
+const panel_name = ref<string>('Untitled Panel');
+const loading = ref(false);
+
+const selected = ref<symbol>();
+const panel_list = ref<{ name: string; id: string }[]>([]);
+const load_screen = ref(true);
+
+const unselect = () => {
+    selected.value = undefined;
+};
+
+async function reload_panel_list() {
+    const res = await fetch(`/api/panel`);
+    panel_list.value = await res.json();
+}
+watchEffect(reload_panel_list);
+
+async function load(id: string) {
+    data.value = { type: 'none' };
+    load_screen.value = false;
+    loading.value = true;
+    const panel_data = await fetch(`/api/panel/${id}`);
+    const panel_json_value = await panel_data.json();
+    data.value = JSON.parse(
+        panel_json_value['data'],
+    ) as OptionalDynamicComponentData;
+    panel_name.value = panel_json_value['name'];
+    panel_id.value = id;
+    loading.value = false;
+}
+async function newPanel() {
+    data.value = { type: 'none' };
+    panel_name.value = 'Untitled Panel';
+    panel_id.value = null;
+    loading.value = false;
+    load_screen.value = false;
+}
+
+async function save() {
+    loading.value = true;
+    const panel_id_value = panel_id.value;
+    if (panel_id_value) {
+        const res = await fetch(`/api/panel/${panel_id_value}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+                name: panel_name.value,
+                data: JSON.stringify(data.value),
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        await res.json();
+    } else {
+        const res = await fetch('/api/panel', {
+            method: 'POST',
+            body: JSON.stringify({
+                name: panel_name.value,
+                data: JSON.stringify(data.value),
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        const uuid = await res.json();
+        panel_id.value = uuid as string;
+    }
+    loading.value = false;
+}
+
+async function showLoadScreen() {
+    load_screen.value = true;
+    await reload_panel_list();
+}
+</script>
+
+<template>
+    <div v-if="load_screen" class="column grow">
+        <div class="row">
+            <button @click.stop.prevent="newPanel">New</button>
+        </div>
+        <div v-for="panel of panel_list" :key="panel.id" class="row">
+            <button @click.stop.prevent="() => load(panel.id)">Load</button>
+            <span>
+                {{ panel.name }}
+            </span>
+        </div>
+    </div>
+    <div v-else class="row grow">
+        <div class="panel-content scroll no-min-height" @click="unselect">
+            <DynamicComponent
+                v-model:data="data"
+                :editable="true"
+                v-model:selection="selected"
+            ></DynamicComponent>
+        </div>
+        <div id="sidebar" class="column">
+            <div class="row">
+                <label>Name:</label>
+                <input :disabled="loading" type="text" v-model="panel_name" />
+            </div>
+            <div class="row">
+                <button :disabled="loading" @click.prevent.stop="save">
+                    {{ panel_id ? 'Save' : 'New' }}
+                </button>
+                <button @click.prevent.stop="showLoadScreen">Load</button>
+            </div>
+            <div id="inspector" class="column"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+
+#sidebar {
+    width: 25%;
+    height: 100vh;
+    background: variables.$dark-background-color;
+}
+</style>

frontend/src/views/PanelTest.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import GridLayout from '@/components/layout/GridLayout.vue';
-import TelemetryValue from '@/components/TelemetryValue.vue';
-</script>
-
-<template>
-    <GridLayout :cols="2" equal_col_width>
-        <span class="justify-right"> simple_producer/cos </span>
-        <TelemetryValue data="simple_producer/cos"></TelemetryValue>
-
-        <span class="justify-right"> simple_producer/sin </span>
-        <TelemetryValue data="simple_producer/sin"></TelemetryValue>
-
-        <span class="justify-right"> simple_producer/cos2 </span>
-        <TelemetryValue data="simple_producer/cos2"></TelemetryValue>
-
-        <span class="justify-right"> simple_producer/sin2 </span>
-        <TelemetryValue data="simple_producer/sin2"></TelemetryValue>
-    </GridLayout>
-</template>
-
-<style scoped lang="scss">
-@use '@/assets/variables';
-
-.justify-right {
-    justify-self: end;
-}
-</style>

frontend/src/views/PanelView.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import DynamicComponent from '@/components/DynamicComponent.vue';
+import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
+import { computed, ref, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const id = computed<string>(() => route.params.id as string);
+
+const panel = ref<OptionalDynamicComponentData>({
+    type: 'none',
+});
+
+watchEffect(async () => {
+    const panel_data = await fetch(`/api/panel/${id.value}`);
+    const panel_json_value = await panel_data.json();
+    panel.value = JSON.parse(
+        panel_json_value['data'],
+    ) as OptionalDynamicComponentData;
+});
+</script>
+
+<template>
+    <DynamicComponent v-model:data="panel" :editable="false"></DynamicComponent>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+</style>