adds initial user defined panels

frontend/src/panels/panel.ts

@@ -1,4 +1,5 @@
 import type { RouteLocationRaw } from 'vue-router';
+import { ref, type Ref, watchEffect } from 'vue';
 
 export enum PanelHeirarchyType {
     LEAF = 'leaf',
@@ -22,31 +23,57 @@ export type PanelHeirarchyChildren = (
     | PanelHeirarchyLeaf
 )[];
 
-export function getPanelHeirarchy(): PanelHeirarchyChildren {
-    const result: PanelHeirarchyChildren = [];
+export function usePanelHeirarchy(): Ref<PanelHeirarchyChildren> {
+    const internal: PanelHeirarchyFolder = {
+        name: 'Internal',
+        children: [
+            {
+                name: 'Graph Test',
+                to: { name: 'graph' },
+                type: PanelHeirarchyType.LEAF,
+            },
+            {
+                name: 'Telemetry Elements',
+                to: { name: 'list' },
+                type: PanelHeirarchyType.LEAF,
+            },
+            {
+                name: 'Chart',
+                to: { name: 'chart' },
+                type: PanelHeirarchyType.LEAF,
+            },
+            {
+                name: 'Panel Editor',
+                to: { name: 'panel_editor' },
+                type: PanelHeirarchyType.LEAF,
+            },
+        ],
+        type: PanelHeirarchyType.FOLDER,
+    };
 
-    result.push({
-        name: 'Graph Test',
-        to: { name: 'graph' },
-        type: PanelHeirarchyType.LEAF,
-    });
+    const result: Ref<PanelHeirarchyChildren> = ref([internal]);
 
-    result.push({
-        name: 'Telemetry Elements',
-        to: { name: 'list' },
-        type: PanelHeirarchyType.LEAF,
-    });
+    watchEffect(async () => {
+        try {
+            const res = await fetch(`/api/panel`);
+            const data = await res.json();
 
-    result.push({
-        name: 'Chart',
-        to: { name: 'chart' },
-        type: PanelHeirarchyType.LEAF,
-    });
+            const server_panels: PanelHeirarchyFolder = {
+                name: 'Server Panels',
+                children: [],
+                type: PanelHeirarchyType.FOLDER,
+            };
 
-    result.push({
-        name: 'Panel Test',
-        to: { name: 'panel_test' },
-        type: PanelHeirarchyType.LEAF,
+            for (const entry of data) {
+                server_panels.children.push({
+                    name: entry['name'],
+                    to: { name: 'panel', params: { id: entry['id'] } },
+                    type: PanelHeirarchyType.LEAF,
+                });
+            }
+
+            result.value = [internal, server_panels];
+        } catch {}
     });
 
     return result;