first commit

src/composables/dbmTree.ts

@@ -0,0 +1,65 @@
+import type { Subs } from 'src/models/Subscribe';
+import { ref } from 'vue';
+
+export const dbmData = ref<TreeNode[]>(buildTree([]));
+
+export const subs = ref<Subs>([]);
+
+export interface TreeNode {
+  path: string;
+  key?: string; // optional: useful for QTree's node-key
+  value?: string | undefined;
+  children?: TreeNode[];
+}
+
+export function buildTree(subs: Subs): TreeNode[] {
+  type TreeMap = {
+    [key: string]: {
+      __children: TreeMap;
+      uuid?: string;
+      value?: string | undefined;
+    };
+  };
+
+  const root: TreeMap = {};
+
+  for (const item of subs) {
+    const pathParts = item.path?.split(':') ?? [];
+    let current = root;
+
+    for (let i = 0; i < pathParts.length; i++) {
+      const part = pathParts[i];
+
+      if (!part) continue;
+
+      if (!current[part]) {
+        current[part] = { __children: {} };
+      }
+
+      // Optionally attach uuid only at the final part
+      if (i === pathParts.length - 1 && item.uuid) {
+        current[part].uuid = item.uuid;
+        current[part].value = item.value !== undefined ? String(item.value) : '';
+      }
+
+      current = current[part].__children;
+    }
+  }
+
+  function convert(map: TreeMap): TreeNode[] {
+    return Object.entries(map).map(([path, node]) => ({
+      path,
+      key: node.uuid ?? path, // `key` is used by QTree
+      value: node.value,
+      children: convert(node.__children),
+    }));
+  }
+
+  return [
+    {
+      path: 'DBM',
+      key: 'DBM',
+      children: convert(root),
+    },
+  ];
+}

src/composables/useContextMenu.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+
+export const contextMenu = ref({
+  show: false,
+  x: 0,
+  y: 0,
+  anchor: 'top left',
+  self: 'top left',
+  node: null,
+});
+
+export function openContextMenu(event: MouseEvent, node: undefined) {
+  contextMenu.value = {
+    show: true,
+    x: event.clientX,
+    y: event.clientY,
+    anchor: 'top left',
+    self: 'top left',
+    node: node ?? null,
+  };
+}

src/composables/useWebSocket.ts

@@ -0,0 +1,126 @@
+import type { Response } from 'src/models/Response';
+import type { Publish } from 'src/models/Publish';
+import type { Request } from 'src/models/Request';
+import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
+import { onBeforeUnmount, ref } from 'vue';
+import { useQuasar } from 'quasar';
+
+const pendingResponses = new Map<string, (data: Response | undefined) => void>();
+
+let socket: WebSocket | null = null;
+const isConnected = ref(false);
+
+export function useWebSocket(url: string) {
+  const $q = useQuasar();
+
+  const connect = () => {
+    socket = new WebSocket(url);
+
+    socket.onopen = () => {
+      console.log('WebSocket connected');
+      isConnected.value = true;
+    };
+    socket.onclose = () => {
+      isConnected.value = false;
+      $q.notify({
+        message: 'WebSocket disconnected',
+        color: 'orange',
+        position: 'bottom-right',
+        icon: 'warning',
+        timeout: 5000,
+      });
+    };
+    socket.onerror = (err) => {
+      isConnected.value = false;
+      $q.notify({
+        message: `WebSocket error: ${err.type}`,
+        color: 'red',
+        position: 'bottom-right',
+        icon: 'error',
+        timeout: 5000,
+      });
+    };
+    socket.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      const id = message.id;
+
+      if (id && pendingResponses.has(id)) {
+        pendingResponses.get(id)?.(message); // resolve the promise
+        pendingResponses.delete(id);
+      } else if (message.publish) {
+        message.publish.forEach((pub: Publish) => {
+          const target = subs.value.find((s) => s.path === pub.path);
+          if (target) {
+            target.value = pub.value ?? '';
+            dbmData.value = buildTree(subs.value);
+          }
+        });
+      } else {
+        console.warn('Unmatched message:', message);
+      }
+    };
+  };
+
+  const close = () => {
+    if (socket) {
+      socket.close();
+    }
+  };
+
+  onBeforeUnmount(() => {
+    close();
+  });
+
+  return {
+    connect,
+    send,
+    close,
+    socket,
+  };
+}
+
+function waitForSocketConnection(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const maxWait = 5000; // timeout after 5 seconds
+    const interval = 50;
+    let waited = 0;
+
+    const check = () => {
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        resolve();
+      } else {
+        waited += interval;
+        if (waited >= maxWait) {
+          reject(new Error('WebSocket connection timeout'));
+        } else {
+          setTimeout(check, interval);
+        }
+      }
+    };
+
+    check();
+  });
+}
+
+function send(data: Request): Promise<Response | undefined> {
+  const id = generateId();
+  const payload = { ...data, id };
+
+  return new Promise((resolve) => {
+    pendingResponses.set(id, resolve);
+
+    waitForSocketConnection()
+      .then(() => {
+        socket?.send(JSON.stringify(payload));
+      })
+      .catch((err) => {
+        console.warn('WebSocket send failed:', err);
+        pendingResponses.delete(id);
+        resolve(undefined); // or reject(err) if strict failure is desired
+      });
+  });
+}
+
+function generateId(): string {
+  return Math.random().toString(36).substr(2, 9); // simple unique ID
+}