adds initial user defined panels

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>