optimize subscription model bug fixes

lift version
add automatic localhost and local ip for allowOrigin
2025-07-12 23:29:44 +02:00 · 2025-06-29 21:26:56 +02:00 · 2025-06-29 21:26:16 +02:00
26 changed files with 688 additions and 463 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ node_modules
 /src-cordova/www

 # Capacitor related directories and files
+/src-capacitor
 /src-capacitor/www
 /src-capacitor/node_modules

@@ -38,3 +39,6 @@ yarn-error.log*

 # local .log files
 *.log
+
+# golang quasar websever executable
+backend/server-linux-arm64
--- a/backend/main.go
+++ b/backend/main.go
@@ -48,6 +48,10 @@ func main() {
 		Debug:       *debug,
 		TerminalOut: true,
 	})
+	if err != nil {
+		logger.Error("main new logger", err.Error())
+		panic(err)
+	}

 	//new login manager
 	loginManager, err := login.NewLoginManager(".")
@@ -62,8 +66,20 @@ func main() {
 	// new server
 	s := server.NewServer()

+	//get local ip
+	origins := []string{"http://localhost:9000"}
+	origins = append(origins, "http://localhost:9500")
+
+	localIP, err := utils.GetLocalIP()
+	if err != nil {
+		logger.Error("main", fmt.Sprintf("get local ip : %s", err.Error()))
+	} else {
+		origins = append(origins, fmt.Sprintf("http://%s:9000", localIP))
+		origins = append(origins, fmt.Sprintf("http://%s:9500", localIP))
+	}
+	fmt.Println(123, origins)
 	s.Routes.Use(cors.New(cors.Config{
-		AllowOrigins:     []string{"http://localhost:9000"},
+		AllowOrigins:     origins,
 		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
 		AllowHeaders:     []string{"Origin", "Content-Type"},
 		AllowCredentials: true,
@@ -104,7 +120,6 @@ func main() {
 			logger.Error("main", fmt.Sprintf("starting browser error : %s", err.Error()))
 		}
 	}()
-	fmt.Println(3, *ip, *port)
 	// start http server
 	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
 	if err := s.ServeHttp(*ip, *port); err != nil {
--- a/backend/utils/ip.go
+++ b/backend/utils/ip.go
@@ -0,0 +1,22 @@
+package utils
+
+import (
+	"fmt"
+	"net"
+)
+
+func GetLocalIP() (string, error) {
+	addrs, err := net.InterfaceAddrs()
+	if err != nil {
+		return "", err
+	}
+
+	for _, addr := range addrs {
+		if ipNet, ok := addr.(*net.IPNet); ok && !ipNet.IP.IsLoopback() {
+			if ipNet.IP.To4() != nil {
+				return ipNet.IP.String(), nil
+			}
+		}
+	}
+	return "", fmt.Errorf("no local IP address found")
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lightcontrol",
-  "version": "0.0.16",
+  "version": "0.0.18",
  "description": "A Tecamino App",
  "productName": "Light Control",
  "author": "A. Zuercher",
--- a/src/boot/websocket.ts
+++ b/src/boot/websocket.ts
@@ -4,8 +4,8 @@ import { initWebSocket } from 'src/services/websocket';

 export default boot(({ app }) => {
  const $q = app.config.globalProperties.$q as QVueGlobals;
-  const host = window.location.hostname; // gets current domain or IP
-  const port = 8100; // your WebSocket port
+  const host = window.location.hostname;
+  const port = 8100;

  const randomId = Math.floor(Math.random() * 10001); // random number from 0 to 10000
  const ws = initWebSocket(`ws://${host}:${port}/ws?id=q${randomId}`, $q);
--- a/src/components/dbm/AddDatapoint.vue
+++ b/src/components/dbm/AddDatapoint.vue
--- a/src/components/dbm/DBMTree.vue
+++ b/src/components/dbm/DBMTree.vue
@@ -16,101 +16,56 @@
          <template v-slot:[`default-header`]="props">
            <div
              class="row items-center text-blue"
-              @contextmenu.prevent.stop="openContextMenu($event, props.node)"
+              @contextmenu.prevent.stop="openSubMenu($event, props.node.key)"
            >
              <div class="row items-center text-blue"></div>
              <div>{{ props.node.path }}</div>
            </div>
-            <q-popup-edit
-              v-if="props.node.value !== undefined && props.node.value !== ''"
-              v-model="props.node.value"
-              class="q-ml-xl bg-grey text-white"
-              @save="(val) => onValueEdit(val, props.node)"
-            >
-              <template v-slot="scope">
-                <q-input
-                  dark
-                  color="white"
-                  v-model="scope.value"
-                  dense
-                  autofocus
-                  counter
-                  @keyup.enter="scope.set"
-                >
-                  <template v-slot:append>
-                    <q-icon name="edit" />
-                  </template>
-                </q-input>
-              </template>
-            </q-popup-edit>
          </template>
        </q-tree>
-        <sub-menu :node="selectedNode"></sub-menu>
+        <!-- not implemented yet <sub-menu ref="subMenuRef"></sub-menu> -->
      </q-card-section>
-      <DataTable :rows="Subscriptions" class="col-8" />
+      <dataTable class="col-8" :rows="getRows()" />
    </div>
  </q-card>
 </template>

 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import DataTable from './dataTable.vue';
-import type { TreeNode } from 'src/composables/dbm/dbmTree';
 import {
-  dbmData,
+  type TreeNode,
  buildTree,
-  getSubscriptionsByUuid,
-  addChildrentoTree,
-  getAllSubscriptions,
+  dbmData,
+  removeSubtreeByParentKey,
 } from 'src/composables/dbm/dbmTree';
+import DataTable from './DataTable.vue';
 import { useQuasar } from 'quasar';
-import { openContextMenu } from 'src/composables/dbm/useContextMenu';
 import { NotifyResponse } from 'src/composables/notify';
-import SubMenu from 'src/components/dbm/SubMenu.vue';
 import { QCard } from 'quasar';
-import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
+import { subscribe, unsubscribe } from 'src/services/websocket';
 import { onBeforeRouteLeave } from 'vue-router';
 import { api } from 'boot/axios';
-import type { Subs } from 'src/models/Subscribe';
-import { reactive } from 'vue';
+// not implemented yet import SubMenu from './SubMenu.vue';
+import { type Subs, type RawSubs, convertToSubscribes } from 'src/models/Subscribe';
+import { addSubscriptions, getRows, removeAllSubscriptions } from 'src/models/Subscriptions';

 const $q = useQuasar();
 const expanded = ref<string[]>([]);
-const selectedNode = ref<TreeNode | null>(null);
 const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
-const Subscriptions = reactive<Subs>([]);
 let lastExpanded: string[] = [];
+const postQuery = '/json_data';

 onMounted(() => {
-  const payload = {
-    get: [
-      {
-        path: '.*',
-        query: { depth: 1 },
-      },
-    ],
-  };
  api
-    .post('/json_data', payload)
+    .post(postQuery, { get: [{ path: '.*', query: { depth: 1 } }] })
    .then((res) => {
-      if (res.data.get) {
-        dbmData.splice(0, dbmData.length, ...buildTree(res.data.get));
-      }
+      if (res.data.get) buildTree(convertToSubscribes(res.data.get as RawSubs));
    })
-    .catch((err) => {
-      NotifyResponse($q, err, 'error');
-    });
+    .catch((err) => NotifyResponse($q, err, 'error'));
 });

 onBeforeRouteLeave(() => {
-  unsubscribe([
-    {
-      path: '.*',
-      depth: 0,
-    },
-  ]).catch((err) => {
-    NotifyResponse($q, err, 'error');
-  });
+  unsubscribe([{ path: '.*', depth: 0 }]).catch((err) => NotifyResponse($q, err, 'error'));
 });

 function onLazyLoad({
@@ -122,47 +77,11 @@ function onLazyLoad({
  done: (children: TreeNode[]) => void;
  fail: () => void;
 }): void {
-  //first unsubsrice nodes
-  unsubscribe([
-    {
-      path: '.*',
-      depth: 0,
-    },
-  ])
-    .then(() => {
-      Subscriptions.length = 0;
-    })
-    .catch((err) => {
-      NotifyResponse($q, err, 'error');
-    });
-
-  // now subscribe nodes
-  subscribe([
-    {
-      uuid: node.key ?? ZERO_UUID,
-      path: '',
-      depth: 2,
-    },
-  ])
+  api
+    .post(postQuery, { get: [{ uuid: node.key ?? ZERO_UUID, path: '', query: { depth: 2 } }] })
    .then((resp) => {
-      if (resp?.subscribe) {
-        // Optional: update your internal store too
-        addChildrentoTree(resp?.subscribe);
-
-        const toRemove = new Set(
-          resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
-        );
-
-        Subscriptions.splice(
-          0,
-          Subscriptions.length,
-          ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
-        );
-
-        done(dbmData);
-      } else {
-        done([]); // no children returned
-      }
+      if (resp?.data.get) done(buildTree(convertToSubscribes(resp?.data.get as RawSubs)));
+      else done([]); // no children returned
    })
    .catch((err) => {
      NotifyResponse($q, err, 'error');
@@ -170,87 +89,61 @@ function onLazyLoad({
    });
 }

-function onValueEdit(newValue: undefined, node: TreeNode) {
-  console.log(node.value, node.value === undefined);
-  if (!node.key) return;
-  const sub = getSubscriptionsByUuid(node.key);
-  if (sub) {
-    setValues([
-      {
-        path: sub.value?.path ?? '',
-        value: newValue,
-      },
-    ]).catch((err) => {
-      NotifyResponse($q, err, 'error');
-    });
-  }
-}
-
-function onExpandedChange(newExpanded: readonly string[]) {
+async function onExpandedChange(newExpanded: readonly string[]) {
  const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
  const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));

-  if (collapsed.length) {
-    collapsed.forEach((key: string) => {
-      subscribe([
-        {
-          uuid: key,
-          path: '',
-          depth: 2,
-        },
-      ])
-        .then((resp) => {
-          if (resp?.subscribe) {
-            // Optional: update your internal store too
-            addChildrentoTree(resp?.subscribe);
+  try {
+    await unsubscribe([{ path: '.*', depth: 0 }])
+      .then(() => {
+        removeAllSubscriptions();
+      })
+      .catch((err) => NotifyResponse($q, err, 'error'));

-            const toRemove = new Set(
-              resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
-            );
+    if (collapsed.length) {
+      collapsed.forEach((key) => {
+        removeSubtreeByParentKey(key);
+        api
+          .post(postQuery, { get: [{ uuid: key, path: '', query: { depth: 2 } }] })
+          .then((resp) => {
+            if (resp?.data.get) {
+              buildTree(resp?.data.get as Subs);
+              subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) =>
+                NotifyResponse($q, err, 'error'),
+              );
+              addSubscriptions(resp?.data.get as RawSubs);
+            }
+          })
+          .catch((err) => NotifyResponse($q, err, 'error'));
+      });
+    }
+    if (newlyExpanded.length) {
+      newlyExpanded.forEach((key) => {
+        api
+          .post(postQuery, { get: [{ uuid: key, path: '', query: { depth: 2 } }] })
+          .then((resp) => {
+            if (resp?.data.get) {
+              buildTree(resp?.data.get as Subs);
+              subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) =>
+                NotifyResponse($q, err, 'error'),
+              );
+              addSubscriptions(resp?.data.get as RawSubs);
+            }
+          })
+          .catch((err) => NotifyResponse($q, err, 'error'));
+      });
+    }

-            Subscriptions.splice(
-              0,
-              Subscriptions.length,
-              ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
-            );
-          }
-        })
-        .catch((err) => {
-          NotifyResponse($q, err, 'error');
-        });
-    });
-  } else if (newlyExpanded.length) {
-    newlyExpanded.forEach((key: string) => {
-      subscribe([
-        {
-          uuid: key,
-          path: '',
-          depth: 2,
-        },
-      ])
-        .then((resp) => {
-          if (resp?.subscribe) {
-            // Optional: update your internal store too
-            addChildrentoTree(resp?.subscribe);
-
-            const toRemove = new Set(
-              resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
-            );
-
-            Subscriptions.splice(
-              0,
-              Subscriptions.length,
-              ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
-            );
-          }
-        })
-        .catch((err) => {
-          NotifyResponse($q, err, 'error');
-        });
-    });
+    lastExpanded = [...newExpanded];
+  } catch {
+    console.error('error in expand function');
  }
+}

-  lastExpanded = [...newExpanded];
+const subMenuRef = ref();
+
+function openSubMenu(event: MouseEvent, uuid: string) {
+  subMenuRef.value?.open(event, uuid);
 }
 </script>

--- a/src/components/dbm/SubMenu.vue
+++ b/src/components/dbm/SubMenu.vue
@@ -4,50 +4,49 @@
      <q-item clickable v-close-popup @click="handleAction('Add')">
        <q-item-section>Add Datapoint</q-item-section>
      </q-item>
-      <q-item clickable v-close-popup @click="handleAction('Delete')">
+      <q-item
+        :class="disable ? 'text-grey-5' : ''"
+        :clickable="!disable"
+        v-close-popup
+        @click="handleAction('Delete')"
+      >
        <q-item-section>Delete Datapoint</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
+  <AddDialog :dialogLabel="label" width="700px" button-ok-label="Add" ref="addDialog" />
 </template>

 <script setup lang="ts">
-//import { useQuasar } from 'quasar';
-//import { NotifyResponse, NotifyError } from 'src/composables/notify';
-import { contextMenuState, contextMenuRef } from 'src/composables/dbm/useContextMenu';
-//import AddDatapoint from 'src/components/dbm/AddDatapoint.vue';
-//import { send } from 'src/services/websocket';
+import AddDialog from 'src/components/dialog/AddDatapoint.vue';
+import { ref } from 'vue';

-//const $q = useQuasar();
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+const addDialog = ref();
+const datapointUuid = ref('');
+const contextMenuRef = ref();
+const label = ref('');
+const disable = ref(false);

 function handleAction(action: string) {
-  console.log(`Action '${action}' on node:`, contextMenuState.value);
-
-  // Add your actual logic here
  switch (action) {
    case 'Add':
-      // send({
-      //   set: [
-      //     {
-      //       uuid: contextMenuState.value?.key,
-      //       path: 'New',
-      //       type: 'BIT',
-      //       value: true,
-      //       create: true,
-      //     },
-      //   ],
-      // })
-      //   .then((response) => {
-      //     if (response?.set) {
-      //       console.log(response);
-      //     } else {
-      //       NotifyResponse($q, response);
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     NotifyError($q, err);
-      //   });
-      console.log(4);
+      label.value = 'Add New Datapoint';
+      addDialog.value?.open(datapointUuid.value);
+      break;
+    case 'Delete':
+      label.value = 'Remove Datapoint';
+      addDialog.value?.open(datapointUuid.value);
+      break;
  }
 }
+
+const open = (event: MouseEvent, uuid: string) => {
+  if (uuid === ZERO_UUID) disable.value = true;
+  event.preventDefault();
+  datapointUuid.value = uuid;
+  contextMenuRef.value?.show(event);
+};
+
+defineExpose({ open });
 </script>
--- a/src/components/dbm/UpdateValue.vue
+++ b/src/components/dbm/UpdateValue.vue
@@ -1,13 +0,0 @@
-<template>
-  <QCard v-if="props.display"> Test </QCard>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  display: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
-});
-</script>
--- a/src/components/dbm/dataTable.vue
+++ b/src/components/dbm/dataTable.vue
@@ -14,21 +14,42 @@
    >
      <template v-slot:body-cell-value="props">
        <q-td :props="props" @click="openDialog(props.row)">
-          <span :class="['cursor-pointer', open ? 'text-green' : '']"> {{ props.row.value }}</span>
+          <div :class="['cursor-pointer', 'q-mx-sm']">
+            {{ props.row.value }}
+          </div>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-drivers="props">
+        <q-td :props="props" @click="openDialog(props.row, 'driver')">
+          <div v-if="props.row.type !== 'none'" :class="['cursor-pointer']">
+            <q-icon size="sm" name="cell_tower" :color="props.row.drivers ? 'blue-5' : 'grey-4'" />
+          </div>
        </q-td>
      </template>
    </q-table>
-    <Dialog dialogLabel="Update Value" :show-dialog="open" />
+    <UpdateDialog
+      dialogLabel="Update Value"
+      width="400px"
+      button-ok-label="Write"
+      ref="updateDialog"
+      v-model:datapoint="dialogValue"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import Dialog from 'src/components/dialog/UpdateValueDialog.vue';
+import UpdateDialog from 'src/components/dialog/UpdateValueDialog.vue';
 import type { QTableProps } from 'quasar';
-import type { Subs, Subscribe } from 'src/models/Subscribe';
+import type { Subscribe } from 'src/models/Subscribe';
 import { computed, ref } from 'vue';
+import type { Subs } from 'src/models/Subscribe';

-const open = ref(false);
+const updateDialog = ref();
+const dialogValue = ref();
+
+const openDialog = (sub: Subscribe, type?: string) => {
+  updateDialog.value?.open(sub, type);
+};

 // we generate lots of rows here
 const props = defineProps<{
@@ -39,22 +60,23 @@ const tableRows = computed(() => [...props.rows]);

 const columns = [
  { name: 'path', label: 'Path', field: 'path', align: 'left' },
+  {
+    name: 'type',
+    label: 'Type',
+    field: 'type',
+    align: 'left',
+  },
  {
    name: 'value',
    label: 'Value',
    field: 'value',
    align: 'left',
  },
-  {
-    name: 'test',
-    label: '',
-    field: 'test',
-    align: 'left',
-  },
+  // {.   not implemented yet
+  //   name: 'drivers',
+  //   label: 'Drivers',
+  //   field: 'drivers',
+  //   align: 'center',
+  // },
 ] as QTableProps['columns'];
-
-function openDialog(item: Subscribe) {
-  console.log(77, item);
-  open.value = true;
-}
 </script>
--- a/src/components/dialog/AddDatapoint.vue
+++ b/src/components/dialog/AddDatapoint.vue
@@ -0,0 +1,101 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+      >{{ props.dialogLabel }}
+    </q-card-section>
+    <q-form ref="addForm" @submit="onSubmit" class="q-gutter-md">
+      <q-input
+        class="q-pa-md"
+        filled
+        v-model="path"
+        label=""
+        :rules="[(val) => !!val || 'Path is required']"
+      >
+        <template #prepend>
+          <div class="column">
+            <span class="text-caption text-primary non-editable-prefix">Path *</span>
+            <span class="text-body2 text-grey-6 non-editable-prefix">{{ staticPrefix }}</span>
+          </div>
+        </template>
+      </q-input>
+      <DataTypes class="q-ma-md" flat></DataTypes>
+      <q-btn no-caps class="q-ma-lg" type="submit" color="primary">{{ props.buttonOkLabel }}</q-btn>
+    </q-form>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { ref } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { api } from 'boot/axios';
+import { NotifyResponse } from 'src/composables/notify';
+import DataTypes from 'src/vueLib/buttons/DataTypes.vue';
+//import datatype from 'src/vueLib/buttons/DataType.vue';
+
+const $q = useQuasar();
+const Dialog = ref();
+const path = ref('');
+const staticPrefix = ref('');
+//const radio = ref('bool');
+const addForm = ref();
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+function validate() {
+  addForm.value.validate().then((success: undefined) => {
+    if (success) {
+      console.log(909);
+      // yay, models are correct
+    } else {
+      console.log(910);
+      // oh no, user has filled in
+      // at least one invalid value
+    }
+  });
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+function onSubmit() {
+  validate();
+  console.log('submit', props);
+}
+
+function getDatapoint(uuid: string) {
+  api
+    .post('/json_data', { get: [{ uuid: uuid, query: { depth: 1 } }] })
+    .then((resp) => {
+      if (resp.data.get) {
+        staticPrefix.value = resp.data.get[0].path;
+        if (staticPrefix.value !== '') staticPrefix.value += ':';
+      }
+    })
+    .catch((err) => NotifyResponse($q, err, 'error'));
+}
+
+defineExpose({ open });
+</script>
--- a/src/components/dialog/UpdateValueDialog.vue
+++ b/src/components/dialog/UpdateValueDialog.vue
@@ -1,42 +1,61 @@
 <template>
-  <q-dialog v-model="internalShowDialog">
-    <q-card :style="'width:' + props.width">
-      <q-card-section
-        v-if="props.dialogLabel"
-        class="text-h6 text-center"
-        :class="'text-' + props.labelColor"
-        >{{ props.dialogLabel }}</q-card-section
+  <DialogFrame ref="Dialog" :width="props.width">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+      >{{ props.dialogLabel + ': ' + props.datapoint?.path }}</q-card-section
+    >
+    <q-card-section>
+      <q-input
+        class="q-px-md q-ma-sm"
+        label="current value"
+        dense
+        filled
+        readonly
+        v-model="inputValue as string | number"
+      ></q-input>
+      <q-input
+        class="q-px-md q-mx-sm"
+        label="new value"
+        dense
+        filled
+        @keyup.enter="write"
+        v-model="writeValue as string | number"
+      ></q-input>
+    </q-card-section>
+    <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
+      props.text
+    }}</q-card-section>
+    <q-card-actions align="left" class="text-primary">
+      <q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
+      </q-btn>
+      <q-btn
+        class="q-mb-xl q-ml-lg q-mt-none"
+        v-if="props.buttonOkLabel"
+        color="primary"
+        :label="props.buttonOkLabel"
+        @click="write"
      >
-      <q-card-section>
-        <q-input v-model="inputValue"></q-input>
-      </q-card-section>
-      <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
-        props.text
-      }}</q-card-section>
-      <q-card-actions align="right" class="text-primary">
-        <q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
-        </q-btn>
-        <q-btn
-          v-if="props.buttonOkLabel"
-          flat
-          :label="props.buttonOkLabel"
-          v-close-popup
-          @click="closeDialog"
-        >
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+      </q-btn>
+    </q-card-actions>
+  </DialogFrame>
 </template>

 <script setup lang="ts">
 import { ref, watch } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import type { Subscribe } from 'src/models/Subscribe';
+import type { PropType } from 'vue';
+import { setValues } from 'src/services/websocket';
+import { NotifyResponse } from 'src/composables/notify';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
+const Dialog = ref();
+const writeValue = ref();

 const props = defineProps({
-  showDialog: {
-    type: Boolean,
-    required: true,
-  },
  buttonOkLabel: {
    type: String,
    default: 'OK',
@@ -61,41 +80,47 @@ const props = defineProps({
    type: String,
    default: '300px',
  },
-  value: {
-    type: [String, Number],
-  },
+  datapoint: Object as PropType<Subscribe>,
 });

-const inputValue = ref(props.value);
+const inputValue = ref(props.datapoint?.value);

-const emit = defineEmits(['update:showDialog', 'update:value', 'confirmed', 'cancel']);
-const internalShowDialog = ref(props.showDialog);
-
-watch(inputValue, (val) => {
-  emit('update:value', val);
-});
+const open = (sub: Subscribe, type?: string) => {
+  Dialog.value?.open();
+  switch (type) {
+    case 'driver':
+      console.log(9, sub.drivers);
+      writeValue.value = sub.drivers;
+      break;
+    default:
+      writeValue.value = sub.value;
+  }
+};

 watch(
-  () => props.showDialog,
-  (newValue) => {
-    console.log('watch showDialog', newValue);
-    internalShowDialog.value = newValue;
+  () => props.datapoint?.value,
+  (newVal) => {
+    inputValue.value = newVal;
  },
 );
-watch(internalShowDialog, (newValue) => {
-  console.log('watch internalShowDialog', newValue);
-  emit('update:showDialog', newValue);
-  if (!newValue) {
-    console.log('emit cancel');
-    emit('cancel');
-  } else {
-    console.log('emit confirmed');
-    emit('confirmed');
-  }
-});

-function closeDialog() {
-  internalShowDialog.value = false;
-  emit('update:showDialog', false);
+function write() {
+  setValues([{ uuid: props.datapoint?.uuid ?? '', value: writeValue.value ?? undefined }])
+    .then((resp) => {
+      if (resp?.set) {
+        resp.set.forEach((set) => {
+          inputValue.value = set.value;
+        });
+      }
+    })
+    .catch((err) => NotifyResponse($q, err));
 }
+
+defineExpose({ open });
 </script>
+
+<style scoped>
+.outercard {
+  border-radius: 10px;
+}
+</style>
--- a/src/components/lights/LightBarCBL.vue
+++ b/src/components/lights/LightBarCBL.vue
@@ -69,43 +69,30 @@
 import { useQuasar } from 'quasar';
 import LightSlider from './LightSlider.vue';
 import { ref, onMounted, onUnmounted } from 'vue';
-import { subscribe, unsubscribe } from 'src/services/websocket';
+import { unsubscribe, subscribeToPath } from 'src/services/websocket';
 import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
 import { NotifyResponse } from 'src/composables/notify';
-import { updateValue, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
+import { updateValue } from 'src/composables/dbm/dbmTree';
+import { removeAllSubscriptions } from 'src/models/Subscriptions';

 const $q = useQuasar();
 const settings = ref(false);
 const brightness = updateValue('LightBar:Brightness', $q);
 const state = updateValue('LightBar:State', $q);
 onMounted(() => {
-  subscribe([
-    {
-      path: 'LightBar:.*',
-      depth: 0,
-    },
-  ])
-    .then((response) => {
-      if (response?.subscribe) {
-        dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
-      } else {
-        NotifyResponse($q, response);
-      }
-    })
-    .catch((err) => {
-      NotifyResponse($q, err, 'error');
-    });
+  subscribeToPath($q, 'LightBar:.*');
 });

 onUnmounted(() => {
  unsubscribe([
    {
-      path: '.*',
+      path: 'LightBar',
      depth: 0,
    },
  ]).catch((err) => {
    NotifyResponse($q, err, 'error');
  });
+  removeAllSubscriptions();
 });

 function changeState() {
--- a/src/components/lights/MovingHead.vue
+++ b/src/components/lights/MovingHead.vue
@@ -107,10 +107,11 @@ import { NotifyResponse } from 'src/composables/notify';
 import { onBeforeUpdate, computed, onMounted, onUnmounted, ref } from 'vue';
 import { subscribeToPath, unsubscribe, setValues } from 'src/services/websocket';
 import { LocalStorage } from 'quasar';
-import { getSubscriptionsByPath, updateValue } from 'src/composables/dbm/dbmTree';
+import { updateValue } from 'src/composables/dbm/dbmTree';
 import DragPad from 'src/components/lights/DragPad.vue';
 import SettingDialog from './SettingMovingHead.vue';
 import type { Settings } from 'src/models/MovingHead';
+import { findSubscriptionByPath, removeAllSubscriptions } from 'src/models/Subscriptions';

 const $q = useQuasar();
 const brightness = updateBrightnessValue('MovingHead:Brightness');
@@ -141,31 +142,29 @@ onUnmounted(() => {
  ]).catch((err) => {
    NotifyResponse($q, err, 'error');
  });
+  removeAllSubscriptions();
 });

 function changeState() {
-  console.log(55, brightness.value);
-  console.log(56, state.value);
  if (brightness.value === 0) {
    if (state.value === 0) {
      brightness.value = 255;
      return;
    }
    brightness.value = state.value;
-    console.log(57, brightness.value);
    return;
  }
  state.value = brightness.value;
-  console.log(58, state.value);
  brightness.value = 0;
 }

 function updateBrightnessValue(path: string) {
  return computed({
    get() {
-      const sub = getSubscriptionsByPath(path);
+      const sub = findSubscriptionByPath(path);
+      if (!sub) return 0;
      if (!sub.value) return 0;
-      return Number(sub.value.value);
+      return Number(sub.value);
    },
    set(val) {
      const setPaths = [{ path, value: val }];
--- a/src/components/scenes/ScenesPage.vue
+++ b/src/components/scenes/ScenesPage.vue
@@ -133,9 +133,12 @@ const newScene = reactive<Scene>({
 });

 const scenes = ref<Scene[]>([]);
+const host = window.location.hostname;
+const port = 9500;
+const baseURL = `http://${host}:${port}`;

 const quasarApi = axios.create({
-  baseURL: `http://localhost:9500`,
+  baseURL: baseURL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
@@ -150,7 +153,9 @@ onMounted(() => {
        scenes.value = resp.data;
      }
    })
-    .catch((err) => NotifyResponse($q, err.response.data.error, 'error'));
+    .catch((err) => {
+      NotifyResponse($q, err.response.data.error, 'error');
+    });
 });

 function removeScene(name: string) {
--- a/src/composables/dbm/dbmTree.ts
+++ b/src/composables/dbm/dbmTree.ts
@@ -1,110 +1,76 @@
-import type { Subs, Subscribe } from 'src/models/Subscribe';
-import type { Ref } from 'vue';
-import { nextTick, computed, reactive, ref } from 'vue';
-import { setValues } from 'src/services/websocket';
-import { NotifyResponse } from 'src/composables/notify';
+import { reactive, computed, type Ref } from 'vue';
 import type { QVueGlobals } from 'quasar';
-
-const Subscriptions = reactive<Record<string, Subscribe>>({});
+import type { Subs } from 'src/models/Subscribe';
+import { NotifyResponse } from '../notify';
+import { setValues } from 'src/services/websocket';
+import { findSubscriptionByPath } from 'src/models/Subscriptions';

 export const dbmData = reactive<TreeNode[]>([]);
+//export const reactiveValues = new Map<string, Ref<string | number | boolean | null>>();

-export interface TreeNode {
+export type TreeNode = {
  path: string | undefined;
  key?: string; // optional: useful for QTree's node-key
-  value?: string | number | boolean | undefined;
  lazy: boolean;
  children?: TreeNode[];
-}
+};
+
+type TreeMap = {
+  [key: string]: {
+    __children: TreeMap;
+    uuid?: string;
+    value?: string | number | boolean | null;
+    lazy: boolean;
+  };
+};
+
+const root: TreeMap = {};

 export function buildTree(subs: Subs): TreeNode[] {
-  type TreeMap = {
-    [key: string]: {
-      __children: TreeMap;
-      uuid?: string;
-      value?: string | undefined;
-      lazy: boolean;
-    };
-  };
+  for (const { path, uuid, value, hasChild } of subs) {
+    if (!path) continue;

-  const root: TreeMap = {};
-
-  for (const item of subs) {
-    if (item.path) {
-      addNewSubscription(item);
-    }
-    const pathParts = item.path?.split(':') ?? [];
+    const parts = path.split(':');
    let current = root;

-    for (let i = 0; i < pathParts.length; i++) {
-      const part = pathParts[i];
-
-      if (!part) continue;
+    parts.forEach((part, idx) => {
+      if (!part) return;

      if (!current[part]) {
        current[part] = { __children: {}, lazy: true };
      }

-      // 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[part].lazy = item.hasChild ?? false;
+      if (idx === parts.length - 1 && uuid) {
+        if (current[part].uuid === uuid) return;
+
+        current[part].uuid = uuid;
+        current[part].value = value?.value ?? null;
+        current[part].lazy = hasChild ?? false;
      }
+
      current = current[part].__children;
-    }
+    });
  }

-  function convert(map: TreeMap): TreeNode[] {
-    return reactive(
-      Object.entries(map).map(([path, node]) => ({
-        path,
-        key: node.uuid ?? path, // `key` is used by QTree
-        value: node.value,
-        lazy: node.lazy,
-        children: convert(node.__children),
-      })),
-    );
+  function mapToTree(map: TreeMap): TreeNode[] {
+    return Object.entries(map).map(([key, node]) => ({
+      path: key,
+      key: node.uuid ?? key,
+      value: node.value,
+      lazy: node.lazy,
+      children: mapToTree(node.__children),
+    }));
  }

-  return [
+  const newTree = [
    {
      path: 'DBM',
      key: '00000000-0000-0000-0000-000000000000',
      lazy: true,
-      children: convert(root),
+      children: mapToTree(root),
    },
  ];
-}
-
-export function getTreeElementByPath(path: string) {
-  const sub = dbmData.find((s) => s.path === path);
-  return ref(sub);
-}
-
-export function getSubscriptionsByUuid(uid: string) {
-  const sub = Object.values(Subscriptions).find((sub) => sub.uuid === uid);
-  return ref(sub);
-}
-
-export function addChildrentoTree(subs: Subs) {
-  const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
-  const existingIds = new Set(Object.values(Subscriptions).map((sub) => sub.uuid));
-  const newSubs = subs
-    .filter((sub) => sub.uuid !== ZERO_UUID) // Skip UUIDs with all zeroes
-    .filter((sub) => !existingIds.has(sub.uuid));
-
-  for (const sub of newSubs) {
-    if (sub.path !== undefined) {
-      Subscriptions[sub.path] = sub;
-    } else {
-      console.warn('Skipping sub with undefined path', sub);
-    }
-  }
-
-  void nextTick(() => {
-    dbmData.splice(0, dbmData.length, ...buildTree(Object.values(Subscriptions)));
-  });
+  return dbmData.splice(0, dbmData.length, ...newTree);
 }

 export function removeSubtreeByParentKey(parentKey: string) {
@@ -122,23 +88,9 @@ export function removeSubtreeByParentKey(parentKey: string) {
    }
    return false;
  }
-
  removeChildrenAndMarkLazy(dbmData, parentKey);
 }

-export function getSubscriptionsByPath(path: string) {
-  return ref(Subscriptions[path]);
-}
-
-export function addNewSubscription(sub: Subscribe) {
-  if (!sub.path) return;
-  Subscriptions[sub.path] = sub;
-}
-
-export function getAllSubscriptions() {
-  return Object.values(Subscriptions);
-}
-
 export function updateValue(
  path1: string,
  $q: QVueGlobals,
@@ -149,8 +101,8 @@ export function updateValue(
 ) {
  return computed({
    get() {
-      const sub = getSubscriptionsByPath(toggle?.value && path2 ? path2 : path1);
-      return sub?.value ? Number(sub.value.value ?? 0) : 0;
+      const sub = findSubscriptionByPath(toggle?.value && path2 ? path2 : path1);
+      return sub?.value ? Number(sub.value ?? 0) : 0;
    },
    set(val) {
      const baseValue = val;
--- a/src/composables/dbm/useContextMenu.ts
+++ b/src/composables/dbm/useContextMenu.ts
@@ -1,12 +0,0 @@
-import { ref } from 'vue';
-import type { TreeNode } from './dbmTree';
-
-export const contextMenuRef = ref();
-
-export const contextMenuState = ref<TreeNode | undefined>();
-
-export function openContextMenu(event: MouseEvent, node: undefined) {
-  event.preventDefault();
-  contextMenuState.value = node;
-  contextMenuRef.value?.show(event);
-}
--- a/src/models/Publish.ts
+++ b/src/models/Publish.ts
@@ -3,6 +3,14 @@ export type Publish = {
  uuid: string;
  path: string;
  type: string;
-  value: undefined;
+  value: string | number | boolean | null;
 };
 export type Pubs = Publish[];
+
+import { updateSubscriptionValue } from './Subscriptions';
+
+export function publishToSubscriptions(pubs: Pubs) {
+  pubs.forEach((pub) => {
+    updateSubscriptionValue(pub.uuid, pub.value);
+  });
+}
--- a/src/models/Response.ts
+++ b/src/models/Response.ts
@@ -1,13 +1,13 @@
 import type { Gets } from './Get';
 import type { Sets } from './Set';
-import type { Subs } from './Subscribe';
+import type { RawSubs } from './Subscribe';
 import type { Pubs } from './Publish';

 export type Response = {
  get?: Gets;
  set?: Sets;
-  subscribe?: Subs;
-  unsubscribe?: Subs;
+  subscribe?: RawSubs;
+  unsubscribe?: RawSubs;
  publish?: Pubs;
  error?: boolean;
  message?: string;
--- a/src/models/Set.ts
+++ b/src/models/Set.ts
@@ -1,6 +1,6 @@
 export type Set = {
  uuid?: string | undefined;
-  path: string;
+  path?: string;
  type?: string;
  value: string | number | boolean | undefined;
  create?: boolean;
--- a/src/models/Subscribe.ts
+++ b/src/models/Subscribe.ts
@@ -1,10 +1,46 @@
-// API type (from backend)
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+
 export type Subscribe = {
  uuid?: string;
  path?: string;
  depth?: number;
-  value?: string | number | boolean;
+  type?: string;
+  drivers?: object | undefined;
+  value?: Ref<string | number | boolean | null | undefined>;
  hasChild?: boolean;
 };

 export type Subs = Subscribe[];
+
+export type RawSubscribe = {
+  uuid?: string;
+  path?: string;
+  depth?: number;
+  value?: string | number | boolean | null;
+  hasChild?: boolean;
+};
+
+export type RawSubs = RawSubscribe[];
+
+export function convertToSubscribe(raw: RawSubscribe): Subscribe {
+  return {
+    ...raw,
+    value: ref(raw.value ?? null),
+  };
+}
+
+export function convertToSubscribes(rawList: RawSubs): Subs {
+  const subs = rawList.map(convertToSubscribe);
+  return subs as Subs;
+}
+
+export function convertToRaw(sub: Subscribe): RawSubscribe {
+  return {
+    ...(sub.uuid !== undefined ? { uuid: sub.uuid } : {}),
+    ...(sub.path !== undefined ? { path: sub.path } : {}),
+    ...(sub.depth !== undefined ? { depth: sub.depth } : {}),
+    ...(sub.value?.value !== undefined ? { value: sub.value.value } : {}),
+    ...(sub.hasChild !== undefined ? { hasChild: sub.hasChild } : {}),
+  };
+}
--- a/src/models/Subscriptions.ts
+++ b/src/models/Subscriptions.ts
@@ -0,0 +1,67 @@
+import type { Ref } from 'vue';
+import { reactive, ref } from 'vue';
+import { convertToSubscribe } from 'src/models/Subscribe';
+import type { Subs, Subscribe, RawSubs } from 'src/models/Subscribe';
+
+const EMPTYUUID = '00000000-0000-0000-0000-000000000000';
+export const Subscriptions = reactive<Record<string, Subscribe>>({});
+
+export type TableSubscription = {
+  path: string;
+  value: Ref<string | number | boolean | null | undefined>;
+};
+
+export function getRows(): Subs {
+  return Object.values(Subscriptions).map((sub) => {
+    sub.path = sub.path?.split(':').pop() ?? '';
+    if (!sub.type) sub.type = 'None';
+    else sub.type = sub.type.toLowerCase();
+    return sub;
+  });
+}
+
+export function addSubscriptions(subs: RawSubs) {
+  subs.forEach((sub) => addSubscription(convertToSubscribe(sub)));
+}
+
+function addSubscription(sub: Subscribe) {
+  if (EMPTYUUID === sub.uuid) {
+    sub.path = 'DBM';
+  }
+  if (!sub.uuid) return;
+  Subscriptions[sub.uuid] = sub;
+}
+
+export function updateSubscription(sub: Subscribe) {
+  if (!sub.uuid) return;
+  Subscriptions[sub.uuid] = sub;
+}
+
+export function updateSubscriptionValue(
+  uuid: string,
+  value: string | number | boolean | null | undefined,
+) {
+  if (!uuid) return;
+  if (!Subscriptions[uuid]) return;
+  Subscriptions[uuid].value = ref(value);
+}
+
+export function removeSubscriptions(subs: RawSubs) {
+  subs.forEach((sub) => {
+    removeSubscription(sub.path);
+  });
+}
+
+export function removeAllSubscriptions() {
+  Object.keys(Subscriptions).forEach((key) => delete Subscriptions[key]);
+}
+
+function removeSubscription(uuid: string | undefined) {
+  if (uuid === undefined) return;
+  if (!Subscriptions || Subscriptions[uuid] === undefined) return;
+  delete Subscriptions[uuid];
+}
+
+export function findSubscriptionByPath(path: string): Subscribe | undefined {
+  return Object.values(Subscriptions).find((sub) => sub.path === path);
+}
--- a/src/services/websocket.ts
+++ b/src/services/websocket.ts
@@ -1,19 +1,13 @@
 import type { Response } from 'src/models/Response';
-import type { Publish } from 'src/models/Publish';
+import { publishToSubscriptions } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
-import {
-  buildTree,
-  dbmData,
-  getSubscriptionsByPath,
-  getAllSubscriptions,
-} from 'src/composables/dbm/dbmTree';
 import { ref } from 'vue';
-import type { Subs } from 'src/models/Subscribe';
+import { NotifyResponse } from 'src/composables/notify';
+import { type Subs } from 'src/models/Subscribe';
 import type { Sets } from 'src/models/Set';
 import type { PongMessage } from 'src/models/Pong';
-import { NotifyResponse } from 'src/composables/notify';
-
+import { addSubscriptions } from 'src/models/Subscriptions';
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
 //const lastKnownValues: Record<string, string> = reactive({});

@@ -91,13 +85,7 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
        }

        if (message.publish) {
-          (message.publish as Publish[]).forEach((pub) => {
-            const sub = getSubscriptionsByPath(pub.path);
-            if (sub.value && pub.value) {
-              sub.value.value = pub.value;
-            }
-            dbmData.splice(0, dbmData.length, ...buildTree(getAllSubscriptions())); // rebuild reactive tree
-          });
+          publishToSubscriptions(message.publish);
        }
      }
    };
@@ -139,10 +127,6 @@ function waitForSocketConnection(): Promise<void> {
  });
 }

-export function subscribe(data: Subs): Promise<Response | undefined> {
-  return send({ subscribe: data });
-}
-
 export function subscribeToPath(q: QVueGlobals, path: string) {
  subscribe([
    {
@@ -151,9 +135,8 @@ export function subscribeToPath(q: QVueGlobals, path: string) {
    },
  ])
    .then((response) => {
-      console.log(response);
      if (response?.subscribe) {
-        dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
+        addSubscriptions(response.subscribe);
      } else {
        NotifyResponse(q, response);
      }
@@ -163,6 +146,10 @@ export function subscribeToPath(q: QVueGlobals, path: string) {
    });
 }

+export function subscribe(data: Subs): Promise<Response | undefined> {
+  return send({ subscribe: data });
+}
+
 export function unsubscribe(data: Subs): Promise<Response | undefined> {
  return send({ unsubscribe: data });
 }
--- a/src/vueLib/buttons/DataTypes.vue
+++ b/src/vueLib/buttons/DataTypes.vue
@@ -0,0 +1,32 @@
+<template>
+  <q-card>
+    <div class="text-primary q-ma-md">Datatypes *</div>
+    <div>
+      <div class="row q-gutter-sm q-ml-sm">
+        <q-card-section class="items-between">
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="None" hint="none">
+          </RadioButton>
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="String" hint="Text">
+          </RadioButton>
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="Bool" hint="On / Off">
+          </RadioButton>
+        </q-card-section>
+        <RadioButton v-model:opt="datatype" text="Uint8" hint="0 - 255"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Uint16" hint="0 - 65535"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Uint32" hint="0 - 429496..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int8" hint="-128 - 127"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int16" hint="-32768 - 3..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int32" hint="-21474836..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int32" hint="-2^63 - (2^...)"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="double" hint="1.7E 1/- 3..."> </RadioButton>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import RadioButton from './RadioButton.vue';
+import { ref } from 'vue';
+
+const datatype = ref('none');
+</script>
--- a/src/vueLib/buttons/RadioButton.vue
+++ b/src/vueLib/buttons/RadioButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-btn style="border-radius: 8px" no-caps
+    ><q-radio v-model="opt" :val="props.text"></q-radio>
+    <div class="column items-start q-mx-md">
+      <div class="text-body1 text-black">{{ props.text }}</div>
+      <div class="text-caption text-grey">{{ props.hint }}</div>
+    </div>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+
+const opt = defineModel('opt');
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  hint: {
+    type: String,
+  },
+});
+
+const localOption = ref('');
+
+const emit = defineEmits(['update:option']);
+
+watch(localOption, (val) => emit('update:option', val));
+</script>
--- a/src/vueLib/dialog/DialogFrame.vue
+++ b/src/vueLib/dialog/DialogFrame.vue
@@ -0,0 +1,65 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    :maximized="minMaxState"
+    :full-width="minMaxState"
+    :no-focus="!minMaxState"
+    :no-refocus="!minMaxState"
+    :seamless="!minMaxState"
+  >
+    <q-card class="layout" :style="cardStyle" v-touch-pan.mouse.prevent.stop="handlePan">
+      <div class="row justify-end q-mx-sm q-mt-xs">
+        <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
+        <q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
+      </div>
+      <q-separator color="black" class="q-my-none" />
+      <slot />
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const dialogRef = ref();
+const open = () => dialogRef.value?.show();
+
+const minMaxIcon = ref('fullscreen');
+const minMaxState = ref(false);
+function minMax() {
+  if (minMaxState.value) {
+    minMaxIcon.value = 'fullscreen';
+  } else {
+    minMaxIcon.value = 'fullscreen_exit';
+  }
+  minMaxState.value = !minMaxState.value;
+}
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const position = ref({ x: 0, y: 0 });
+
+// This makes the dialog draggable
+const handlePan = (details: { delta: { x: number; y: number } }) => {
+  position.value.x += details.delta.x;
+  position.value.y += details.delta.y;
+};
+
+const cardStyle = computed(() => ({
+  width: props.width,
+  transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+}));
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+.layout {
+  border-radius: 10px;
+}
+</style>
Author	SHA1	Message	Date
Adrian Zuercher	ffb8e4994e	optimize subscription model bug fixes	2025-07-12 23:29:44 +02:00
Adrian Zuercher	5b905bac24	lift version	2025-06-29 21:26:56 +02:00
Adrian Zuercher	e320156a47	add automatic localhost and local ip for allowOrigin	2025-06-29 21:26:16 +02:00