remove dead file from pull

bug fix of file name

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: Build Quasar SPA and Go Backend for lightController
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
 
 jobs:
@@ -36,7 +36,7 @@ jobs:
 
       - name: Build Quasar SPA
         run: quasar build
-          
+
       - name: Set up Go
         uses: actions/setup-go@v5
         with:
@@ -57,9 +57,9 @@ jobs:
         working-directory: ./backend
         run: |
           if [ "${{ matrix.goos }}" == "windows" ]; then
-            GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -o ../server-${{ matrix.goos }}-${{ matrix.goarch }}.exe main.go
+            GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -ldflags="-s -w" -trimpath -o ../server-${{ matrix.goos }}-${{ matrix.goarch }}.exe main.go
           else
-            GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
+            GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -ldflags="-s -w" -trimpath -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
           fi
 
       - name: Upload build artifacts

backend/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"backend/login"
+	"backend/models"
 	secenes "backend/scenes"
 	"backend/server"
 	"backend/utils"
@@ -20,6 +21,11 @@ import (
 )
 
 func main() {
+
+	var allowOrigins models.StringSlice
+
+	flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
+
 	spa := flag.String("spa", "./dist/spa", "quasar spa files")
 	workingDir := flag.String("workingDirectory", ".", "quasar spa files")
 	ip := flag.String("ip", "0.0.0.0", "server listening ip")
@@ -32,7 +38,7 @@ func main() {
 		fmt.Println(1, *workingDir)
 		os.Chdir(*workingDir)
 	}
-	fmt.Println(1.1, *workingDir)
+
 	wd, err := os.Getwd()
 	if err != nil {
 		log.Fatalf("Could not get working directory: %v", err)
@@ -67,19 +73,17 @@ func main() {
 	s := server.NewServer()
 
 	//get local ip
-	origins := []string{"http://localhost:9000"}
+	allowOrigins = append(allowOrigins, "http://localhost:9000", "http://localhost:9500")
-	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))
+		allowOrigins = append(allowOrigins, fmt.Sprintf("http://%s:9000", localIP), fmt.Sprintf("http://%s:9500", localIP))
-		origins = append(origins, fmt.Sprintf("http://%s:9500", localIP))
 	}
-	fmt.Println(123, origins)
+
 	s.Routes.Use(cors.New(cors.Config{
-		AllowOrigins:     origins,
+		AllowOrigins:     allowOrigins,
 		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
 		AllowHeaders:     []string{"Origin", "Content-Type"},
 		AllowCredentials: true,

backend/models/stringSlice.go

@@ -0,0 +1,14 @@
+package models
+
+import "strings"
+
+type StringSlice []string
+
+func (s *StringSlice) String() string {
+	return strings.Join(*s, ",")
+}
+
+func (s *StringSlice) Set(value string) error {
+	*s = append(*s, value)
+	return nil
+}

backend/scenes/scenes.go

@@ -204,12 +204,10 @@ func (sh *ScenesHandler) LoadScene(c *gin.Context) {
 			return
 		}
 		c.JSON(http.StatusOK, scene)
-		break
-	}
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"error": fmt.Errorf("scene '%s' not found", scene.Name),
-		})
 		return
 	}
+
+	c.JSON(http.StatusBadRequest, gin.H{
+		"error": fmt.Errorf("scene '%s' not found", scene.Name),
+	})
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightcontrol",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "A Tecamino App",
   "productName": "Light Control",
   "author": "A. Zuercher",

src/boot/axios.ts

@@ -7,7 +7,7 @@ const baseURL = `http://${host}:${port}`;
 
 const api = axios.create({
   baseURL: baseURL,
-  timeout: 10000,
+  timeout: 30000,
   headers: {
     'Content-Type': 'application/json',
   },

src/boot/websocket.ts

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import type { QVueGlobals } from 'quasar';
-import { initWebSocket } from 'src/services/websocket';
+import { initWebSocket } from '../vueLib/services/websocket';
 
 export default boot(({ app }) => {
   const $q = app.config.globalProperties.$q as QVueGlobals;

src/components/dbm/DBMTree.vue

@@ -1,180 +0,0 @@
-<template>
-  <q-card>
-    <div class="row">
-      <q-card-section class="col-4 scroll tree-container">
-        <q-tree
-          class="text-blue text-bold"
-          dense
-          :nodes="dbmData"
-          node-key="key"
-          no-transition
-          :default-expand-all="false"
-          v-model:expanded="expanded"
-          @update:expanded="onExpandedChange"
-          @lazy-load="onLazyLoad"
-        >
-          <template v-slot:[`default-header`]="props">
-            <div
-              class="row items-center text-blue"
-              @contextmenu.prevent.stop="openSubMenu($event, props.node.key)"
-            >
-              <div class="row items-center text-blue"></div>
-              <div>{{ props.node.path }}</div>
-            </div>
-          </template>
-        </q-tree>
-        <!-- not implemented yet <sub-menu ref="subMenuRef"></sub-menu> -->
-      </q-card-section>
-      <dataTable class="col-8" :rows="getRows()" />
-    </div>
-  </q-card>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import {
-  type TreeNode,
-  buildTree,
-  dbmData,
-  removeSubtreeByParentKey,
-} from 'src/composables/dbm/dbmTree';
-import DataTable from './DataTable.vue';
-import { useQuasar } from 'quasar';
-import { NotifyResponse } from 'src/composables/notify';
-import { QCard } from 'quasar';
-import { subscribe, unsubscribe } from 'src/services/websocket';
-import { onBeforeRouteLeave } from 'vue-router';
-import { api } from 'boot/axios';
-// 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 ZERO_UUID = '00000000-0000-0000-0000-000000000000';
-let lastExpanded: string[] = [];
-const postQuery = '/json_data';
-
-onMounted(() => {
-  api
-    .post(postQuery, { get: [{ path: '.*', query: { depth: 1 } }] })
-    .then((res) => {
-      if (res.data.get) buildTree(convertToSubscribes(res.data.get as RawSubs));
-    })
-    .catch((err) => NotifyResponse($q, err, 'error'));
-});
-
-onBeforeRouteLeave(() => {
-  unsubscribe([{ path: '.*', depth: 0 }]).catch((err) => NotifyResponse($q, err, 'error'));
-});
-
-function onLazyLoad({
-  node,
-  done,
-  fail,
-}: {
-  node: TreeNode;
-  done: (children: TreeNode[]) => void;
-  fail: () => void;
-}): void {
-  api
-    .post(postQuery, { get: [{ uuid: node.key ?? ZERO_UUID, path: '', query: { depth: 2 } }] })
-    .then((resp) => {
-      if (resp?.data.get) done(buildTree(convertToSubscribes(resp?.data.get as RawSubs)));
-      else done([]); // no children returned
-    })
-    .catch((err) => {
-      NotifyResponse($q, err, 'error');
-      fail(); // trigger the fail handler
-    });
-}
-
-async function onExpandedChange(newExpanded: readonly string[]) {
-  const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
-  const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
-
-  try {
-    await unsubscribe([{ path: '.*', depth: 0 }])
-      .then(() => {
-        removeAllSubscriptions();
-      })
-      .catch((err) => NotifyResponse($q, err, 'error'));
-
-    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'));
-      });
-    }
-
-    lastExpanded = [...newExpanded];
-  } catch {
-    console.error('error in expand function');
-  }
-}
-
-const subMenuRef = ref();
-
-function openSubMenu(event: MouseEvent, uuid: string) {
-  subMenuRef.value?.open(event, uuid);
-}
-</script>
-
-<style scoped>
-.tree-container {
-  overflow-y: auto;
-}
-
-@media (max-width: 599px) {
-  .tree-container {
-    max-height: 50vh;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023px) {
-  .tree-container {
-    max-height: 60vh;
-  }
-}
-@media (min-width: 1024px) and (max-width: 1439px) {
-  .tree-container {
-    max-height: 70vh;
-  }
-}
-@media (min-width: 1440px) and (max-width: 1919px) {
-  .tree-container {
-    max-height: 80vh;
-  }
-}
-@media (min-width: 1920px) {
-  .tree-container {
-    max-height: 90vh;
-  }
-}
-</style>

src/components/dbm/SubMenu.vue

@@ -1,52 +0,0 @@
-<template>
-  <q-menu ref="contextMenuRef" context-menu>
-    <q-list>
-      <q-item clickable v-close-popup @click="handleAction('Add')">
-        <q-item-section>Add Datapoint</q-item-section>
-      </q-item>
-      <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 AddDialog from 'src/components/dialog/AddDatapoint.vue';
-import { ref } from 'vue';
-
-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) {
-  switch (action) {
-    case 'Add':
-      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>

src/components/dbm/dataTable.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="q-pa-md">
-    <q-table
-      v-if="tableRows.length > 0"
-      style="height: 600px"
-      flat
-      bordered
-      :title="props.rows[0]?.path"
-      :rows="rows"
-      :columns="columns"
-      row-key="path"
-      virtual-scroll
-      :rows-per-page-options="[0]"
-    >
-      <template v-slot:body-cell-value="props">
-        <q-td :props="props" @click="openDialog(props.row)">
-          <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>
-    <UpdateDialog
-      dialogLabel="Update Value"
-      width="400px"
-      button-ok-label="Write"
-      ref="updateDialog"
-      v-model:datapoint="dialogValue"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import UpdateDialog from 'src/components/dialog/UpdateValueDialog.vue';
-import type { QTableProps } from 'quasar';
-import type { Subscribe } from 'src/models/Subscribe';
-import { computed, ref } from 'vue';
-import type { Subs } from 'src/models/Subscribe';
-
-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<{
-  rows: Subs;
-}>();
-
-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',
-  },
-  // {.   not implemented yet
-  //   name: 'drivers',
-  //   label: 'Drivers',
-  //   field: 'drivers',
-  //   align: 'center',
-  // },
-] as QTableProps['columns'];
-</script>

src/components/dialog/AddDatapoint.vue

@@ -1,101 +0,0 @@
-<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>

src/components/dialog/UpdateValueDialog.vue

@@ -1,126 +0,0 @@
-<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 + ': ' + 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-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({
-  buttonOkLabel: {
-    type: String,
-    default: 'OK',
-  },
-  labelColor: {
-    type: String,
-    default: 'primary',
-  },
-  dialogLabel: {
-    type: String,
-    default: '',
-  },
-  text: {
-    type: String,
-    default: '',
-  },
-  buttonCancelLabel: {
-    type: String,
-    default: '',
-  },
-  width: {
-    type: String,
-    default: '300px',
-  },
-  datapoint: Object as PropType<Subscribe>,
-});
-
-const inputValue = ref(props.datapoint?.value);
-
-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.datapoint?.value,
-  (newVal) => {
-    inputValue.value = newVal;
-  },
-);
-
-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>

src/components/lights/DomeLight.vue

@@ -105,14 +105,14 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar';
 import { watch, reactive, ref } from 'vue';
 import type { Light } from 'src/models/Light';
-import { setValues } from 'src/services/websocket';
+import { setValues } from 'src/vueLib/services/websocket';
 import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
-import { NotifyResponse } from 'src/composables/notify';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { catchError } from 'src/vueLib/models/error';
 
-const $q = useQuasar();
+const { NotifyResponse } = useNotify();
 const settings = ref(false);
 
 const light = reactive<Light>({
@@ -154,10 +154,10 @@ watch(light, (newVal: Light) => {
     },
   ])
     .then((response) => {
-      NotifyResponse($q, response);
+      NotifyResponse(response);
     })
     .catch((err) => {
-      NotifyResponse($q, err, 'error');
+      NotifyResponse(catchError(err), 'error');
     });
 });
 </script>

src/components/lights/DragPad.vue

@@ -109,8 +109,8 @@
 <script lang="ts" setup>
 import { addOne, substractOne } from 'src/utils/number-helpers';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { updateValue } from 'src/composables/dbm/dbmTree';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
-import { useQuasar } from 'quasar';
+import { useNotify } from 'src/vueLib/general/useNotify';
 
 const props = defineProps({
   reversePan: {
@@ -141,16 +141,15 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
+const { NotifyResponse } = useNotify();
-
 const togglePan = ref(false);
 const toggleTilt = ref(false);
 const pad = ref<HTMLElement | null>(null);
 const dragging = ref(false);
 const containerSize = ref(0);
 
-const pan = updateValue(props.panPath, $q, togglePan, props.panPath2);
+const pan = updateValue(NotifyResponse, props.panPath, togglePan, props.panPath2);
-const tilt = updateValue(props.tiltPath, $q, toggleTilt, props.tiltPath2);
+const tilt = updateValue(NotifyResponse, props.tiltPath, toggleTilt, props.tiltPath2);
 
 const scaleFactor = computed(() => containerSize.value / 255);
 // 200px → 2, 400px → 4, etc.
@@ -202,7 +201,7 @@ function stopDrag() {
 }
 
 function startTouch(e: TouchEvent) {
-  e.preventDefault(); // ✅ block scroll
+  e.preventDefault();
   const touch = e.touches[0];
   if (!touch) return;
   dragging.value = true;

src/components/lights/LightBarCBL.vue

@@ -66,21 +66,21 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar';
 import LightSlider from './LightSlider.vue';
 import { ref, onMounted, onUnmounted } from 'vue';
-import { unsubscribe, subscribeToPath } from 'src/services/websocket';
+import { unsubscribe, subscribeToPath } from 'src/vueLib/services/websocket';
 import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
-import { NotifyResponse } from 'src/composables/notify';
+import { useNotify } from 'src/vueLib/general/useNotify';
-import { updateValue } from 'src/composables/dbm/dbmTree';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
-import { removeAllSubscriptions } from 'src/models/Subscriptions';
+import { removeAllSubscriptions } from 'src/vueLib/models/Subscriptions';
+import { catchError } from 'src/vueLib/models/error';
 
-const $q = useQuasar();
+const { NotifyResponse } = useNotify();
 const settings = ref(false);
-const brightness = updateValue('LightBar:Brightness', $q);
+const brightness = updateValue(NotifyResponse, 'LightBar:Brightness');
-const state = updateValue('LightBar:State', $q);
+const state = updateValue(NotifyResponse, 'LightBar:State');
 onMounted(() => {
-  subscribeToPath($q, 'LightBar:.*');
+  subscribeToPath(NotifyResponse, 'LightBar:.*');
 });
 
 onUnmounted(() => {
@@ -90,7 +90,7 @@ onUnmounted(() => {
       depth: 0,
     },
   ]).catch((err) => {
-    NotifyResponse($q, err, 'error');
+    NotifyResponse(catchError(err), 'error');
   });
   removeAllSubscriptions();
 });

src/components/lights/LightSlider.vue

@@ -45,11 +45,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useQuasar } from 'quasar';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
-import { updateValue } from 'src/composables/dbm/dbmTree';
 import { addOne, substractOne } from 'src/utils/number-helpers';
-
+import { useNotify } from 'src/vueLib/general/useNotify';
-const $q = useQuasar();
 
 const props = defineProps({
   toggleHighLow: {
@@ -123,10 +121,11 @@ const props = defineProps({
   },
 });
 
+const { NotifyResponse } = useNotify();
 const toggle = ref(false);
 const localValue = updateValue(
+  NotifyResponse,
   props.dbmPath,
-  $q,
   toggle,
   props.dbmPath2,
   props.dbmPath3,

src/components/lights/MovingHead.vue

@@ -101,21 +101,21 @@ select
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar';
 import LightSlider from './LightSlider.vue';
-import { NotifyResponse } from 'src/composables/notify';
+import { useNotify } from 'src/vueLib/general/useNotify';
 import { onBeforeUpdate, computed, onMounted, onUnmounted, ref } from 'vue';
-import { subscribeToPath, unsubscribe, setValues } from 'src/services/websocket';
+import { subscribeToPath, unsubscribe, setValues } from 'src/vueLib/services/websocket';
 import { LocalStorage } from 'quasar';
-import { updateValue } from 'src/composables/dbm/dbmTree';
+import { updateValue } from 'src/vueLib/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';
+import { findSubscriptionByPath, removeAllSubscriptions } from 'src/vueLib/models/Subscriptions';
+import { catchError } from 'src/vueLib/models/error';
 
-const $q = useQuasar();
+const { NotifyResponse } = useNotify();
 const brightness = updateBrightnessValue('MovingHead:Brightness');
-const state = updateValue('MovingHead:State', $q);
+const state = updateValue(NotifyResponse, 'MovingHead:State');
 const settings = ref<Settings>({
   show: false,
   reversePan: false,
@@ -126,11 +126,11 @@ const settings = ref<Settings>({
 onMounted(() => {
   settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
   settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
-  subscribeToPath($q, 'MovingHead:.*');
+  subscribeToPath(NotifyResponse, 'MovingHead:.*');
 });
 
 onBeforeUpdate(() => {
-  subscribeToPath($q, 'MovingHead:.*');
+  subscribeToPath(NotifyResponse, 'MovingHead:.*');
 });
 
 onUnmounted(() => {
@@ -140,7 +140,7 @@ onUnmounted(() => {
       depth: 0,
     },
   ]).catch((err) => {
-    NotifyResponse($q, err, 'error');
+    NotifyResponse(catchError(err), 'error');
   });
   removeAllSubscriptions();
 });
@@ -172,7 +172,7 @@ function updateBrightnessValue(path: string) {
       setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
 
       setValues(setPaths)
-        .then((response) => NotifyResponse($q, response))
+        .then((response) => NotifyResponse(response))
         .catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
     },
   });

src/components/scenes/ScenesPage.vue

@@ -1,13 +1,14 @@
 <template>
   <!-- new edit scene dialog-->
-  <q-dialog v-model="showDialog" persistent>
+  <DialogFrame ref="sceneDialog" width="350px">
-    <q-card style="min-width: 350px">
+    <q-card>
       <q-card-section>
         <div class="text-primary text-h6">{{ dialogLabel }}</div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
         <q-input
+          :readonly="dialog === 'load'"
           class="q-mb-md"
           dense
           v-model="newScene.name"
@@ -17,6 +18,7 @@
           @keyup.enter="saveScene"
         />
         <q-input
+          :readonly="dialog === 'load'"
           dense
           v-model="newScene.description"
           placeholder="Description"
@@ -32,11 +34,10 @@
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
-        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat :label="dialogLabel" v-close-popup @click="saveScene()" />
-        <q-btn flat :label="dialogLabel" @click="saveScene()" />
       </q-card-actions>
     </q-card>
-  </q-dialog>
+  </DialogFrame>
   <Dialog
     dialogLabel="Duplicate Scene"
     :text="`Scene '${newScene.name}' exists already`"
@@ -110,18 +111,19 @@
 </template>
 
 <script setup lang="ts">
-import { NotifyDialog } from 'src/composables/notify';
 import { onMounted, reactive, ref } from 'vue';
-import { useQuasar } from 'quasar';
 import type { Scene } from 'src/models/Scene';
-import type { Set } from 'src/models/Set';
+import type { Set } from 'src/vueLib/models/Set';
 import axios from 'axios';
-import { api } from 'boot/axios';
+import { api } from 'src/boot/axios';
-import { NotifyResponse } from 'src/composables/notify';
+import { useNotify } from 'src/vueLib/general/useNotify';
 import Dialog from 'src/components/dialog/OkDialog.vue';
-import { setValues } from 'src/services/websocket';
+import { setValues } from 'src/vueLib/services/websocket';
-const $q = useQuasar();
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-const showDialog = ref(false);
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse, NotifyDialog } = useNotify();
+const sceneDialog = ref();
 const dialog = ref('');
 const existsAlready = ref(false);
 const editIndex = ref(-1);
@@ -154,13 +156,13 @@ onMounted(() => {
       }
     })
     .catch((err) => {
-      NotifyResponse($q, err.response.data.error, 'error');
+      NotifyResponse(catchError(err), 'error');
     });
 });
 
 function removeScene(name: string) {
   dialog.value = '';
-  NotifyDialog($q, 'Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
+  NotifyDialog('Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
     .then((res) => {
       if (res) {
         scenes.value = scenes.value.filter((s) => s.name !== name);
@@ -171,15 +173,15 @@ function removeScene(name: string) {
           })
           .then((res) => {
             if (res.data) {
-              NotifyResponse($q, res.data, 'warning');
+              NotifyResponse(res.data, 'warning');
             }
           })
           .catch((err) => {
-            NotifyResponse($q, err.response.data.error, 'error');
+            NotifyResponse(catchError(err), 'error');
           });
       }
     })
-    .catch((err) => NotifyResponse($q, err.resp, 'warning'));
+    .catch((err) => NotifyResponse(catchError(err), 'warning'));
 }
 
 function openDialog(dialogType: string, scene?: Scene, index?: number) {
@@ -190,7 +192,6 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
       newScene.name = '';
       newScene.movingHead = true;
       newScene.lightBar = true;
-      showDialog.value = true;
       break;
     case 'edit':
       if (!scene) return;
@@ -199,7 +200,6 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
       dialogLabel.value = 'Update Scene';
       editIndex.value = index;
       Object.assign(newScene, JSON.parse(JSON.stringify(scene)));
-      showDialog.value = true;
       break;
     case 'load':
       if (!scene) return;
@@ -210,15 +210,12 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
         .then((res) => {
           if (res.data) {
             Object.assign(newScene, JSON.parse(JSON.stringify(res.data)));
-            showDialog.value = true;
           }
         })
-        .catch((err) => NotifyResponse($q, err.response.data.error, 'error'));
+        .catch((err) => NotifyResponse(catchError(err), 'error'));
-      break;
-    default:
-      showDialog.value = false;
       break;
   }
+  sceneDialog.value.open();
 }
 
 const saveScene = async () => {
@@ -258,7 +255,7 @@ const saveScene = async () => {
           const res = await api.post('/json_data', { get: sendValues });
           newScene.values = res.data.get;
         } catch (err) {
-          NotifyResponse($q, err as Error, 'error');
+          NotifyResponse(err as Error, 'error');
         }
       } else {
         newScene.values = [];
@@ -273,14 +270,15 @@ const saveScene = async () => {
         .post('/api/saveScene', JSON.stringify(newScene))
         .then((res) => {
           if (res.data) {
-            NotifyResponse($q, res.data);
+            NotifyResponse(res.data);
           }
         })
         .catch((err) => {
-          NotifyResponse($q, err.response.data.error, 'error');
+          NotifyResponse(catchError(err), 'error');
         });
       scenes.value = [...scenes.value];
       break;
+
     case 'edit':
       if (exists) {
         existsAlready.value = true;
@@ -306,7 +304,7 @@ const saveScene = async () => {
           const res = await api.post('/json_data', { get: sendValues });
           newScene.values = res.data.get;
         } catch (err) {
-          NotifyResponse($q, err as Error, 'error');
+          NotifyResponse(err as Error, 'error');
         }
       } else {
         newScene.values = [];
@@ -319,43 +317,41 @@ const saveScene = async () => {
         .post('/api/saveScene', JSON.stringify(newScene))
         .then((res) => {
           if (res.data) {
-            NotifyResponse($q, res.data);
+            NotifyResponse(res.data);
           }
         })
         .catch((err) => {
-          NotifyResponse($q, err.response.data.error, 'error');
+          NotifyResponse(catchError(err), 'error');
         });
       scenes.value = [...scenes.value];
       break;
+
     case 'load':
       {
         const setPaths = <Set[]>[];
 
-        if (newScene.movingHead) {
+        newScene.values?.forEach((element) => {
-          newScene.values?.forEach((element) => {
+          if (!element.path) return;
-            if (element.path && element.path.includes('MovingHead')) {
+
-              setPaths.push({ path: element.path, value: element.value });
+          if (newScene.movingHead && element.path.includes('MovingHead'))
-            }
+            setPaths.push({ uuid: element.uuid, path: element.path, value: element.value });
-          });
+
-        }
+          if (newScene.lightBar && element.path.includes('LightBar'))
+            setPaths.push({ uuid: element.uuid, path: element.path, value: element.value });
+        });
 
-        if (newScene.lightBar) {
-          newScene.values?.forEach((element) => {
-            if (element.path && element.path.includes('LightBar')) {
-              setPaths.push({ path: element.path, value: element.value });
-            }
-          });
-        }
         setValues(setPaths)
           .then((response) => {
-            NotifyResponse($q, response);
+            NotifyResponse(response);
           })
-          .catch((err) => console.error(`Failed to load scene ${newScene.name}`, err));
+          .catch((err) => {
+            NotifyResponse(`Failed to load scene ${newScene.name}`, 'warning');
+            NotifyResponse(catchError(err), 'error');
+          });
       }
       break;
   }
 
   dialog.value = '';
-  showDialog.value = false;
 };
 </script>

src/composables/dbm/dbmTree.ts

@@ -1,131 +0,0 @@
-import { reactive, computed, type Ref } from 'vue';
-import type { QVueGlobals } from 'quasar';
-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 type TreeNode = {
-  path: string | undefined;
-  key?: string; // optional: useful for QTree's node-key
-  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[] {
-  for (const { path, uuid, value, hasChild } of subs) {
-    if (!path) continue;
-
-    const parts = path.split(':');
-    let current = root;
-
-    parts.forEach((part, idx) => {
-      if (!part) return;
-
-      if (!current[part]) {
-        current[part] = { __children: {}, lazy: true };
-      }
-
-      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 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),
-    }));
-  }
-
-  const newTree = [
-    {
-      path: 'DBM',
-      key: '00000000-0000-0000-0000-000000000000',
-      lazy: true,
-      children: mapToTree(root),
-    },
-  ];
-  return dbmData.splice(0, dbmData.length, ...newTree);
-}
-
-export function removeSubtreeByParentKey(parentKey: string) {
-  function removeChildrenAndMarkLazy(nodes: TreeNode[], targetKey: string): boolean {
-    for (const node of nodes) {
-      if (node.key === targetKey) {
-        delete node.children;
-        node.lazy = true;
-        return true;
-      }
-      if (node.children) {
-        const found = removeChildrenAndMarkLazy(node.children, targetKey);
-        if (found) return true;
-      }
-    }
-    return false;
-  }
-  removeChildrenAndMarkLazy(dbmData, parentKey);
-}
-
-export function updateValue(
-  path1: string,
-  $q: QVueGlobals,
-  toggle?: Ref<boolean>,
-  path2?: string,
-  path3?: string,
-  value3?: number,
-) {
-  return computed({
-    get() {
-      const sub = findSubscriptionByPath(toggle?.value && path2 ? path2 : path1);
-      return sub?.value ? Number(sub.value ?? 0) : 0;
-    },
-    set(val) {
-      const baseValue = val;
-      const setPaths = [];
-      if (toggle?.value && path2) {
-        setPaths.push({ path: path2, value: baseValue });
-      } else {
-        setPaths.push({ path: path1, value: baseValue });
-      }
-
-      if (path3) {
-        setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
-      }
-
-      setValues(setPaths)
-        .then((response) => NotifyResponse($q, response))
-        .catch((err) => {
-          NotifyResponse(
-            $q,
-            `Failed to update [${path1 + ' ' + path2 + ' ' + path3}]: ${err}`,
-            'error',
-          );
-        });
-    },
-  });
-}

src/composables/notify.ts

@@ -1,67 +0,0 @@
-import type { Response } from 'src/models/Response';
-import type { QVueGlobals } from 'quasar';
-
-export function NotifyResponse(
-  $q: QVueGlobals,
-  response: Response | string | undefined,
-  type?: 'warning' | 'error',
-  timeout: number = 5000,
-) {
-  let color = 'green';
-  let icon = 'check_circle';
-
-  switch (type) {
-    case 'warning':
-      color = 'orange';
-      icon = 'warning';
-      break;
-    case 'error':
-      color = 'red';
-      icon = 'error';
-      break;
-  }
-
-  if (response) {
-    const message = typeof response === 'string' ? response : (response.message ?? '');
-    if (message === '') {
-      return;
-    }
-
-    color = typeof response === 'string' ? color : response?.error ? 'red' : color;
-    icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
-    $q?.notify({
-      message: message,
-      color: color,
-      position: 'bottom-right',
-      icon: icon,
-      timeout: timeout,
-    });
-  }
-}
-
-export function NotifyDialog(
-  $q: QVueGlobals,
-  title: string,
-  text: string,
-  okText?: string,
-  cancelText?: string,
-) {
-  return new Promise((resolve) => {
-    $q.dialog({
-      title: title,
-      message: text,
-      persistent: true,
-      ok: okText ?? 'OK',
-      cancel: cancelText ?? 'CANCEL',
-    })
-      .onOk(() => {
-        resolve(true);
-      })
-      .onCancel(() => {
-        resolve(false);
-      })
-      .onDismiss(() => {
-        resolve(false);
-      });
-  });
-}

src/models/Publish.ts

@@ -1,16 +0,0 @@
-export type Publish = {
-  event: string;
-  uuid: string;
-  path: string;
-  type: string;
-  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);
-  });
-}

src/models/Request.ts

@@ -1,10 +0,0 @@
-import type { Gets } from './Get';
-import type { Sets } from './Set';
-import type { Subs } from './Subscribe';
-
-export type Request = {
-  get?: Gets;
-  set?: Sets;
-  subscribe?: Subs;
-  unsubscribe?: Subs;
-};

src/models/Scene.ts

@@ -1,4 +1,4 @@
-import type { Value } from './Value';
+import type { Value } from '../vueLib/models/Value';
 
 export interface Scene {
   name: string;

src/pages/DataPage.vue

@@ -4,17 +4,17 @@
 </template>
 
 <script setup lang="ts">
-import DBMTree from 'src/components/dbm/DBMTree.vue';
+import DBMTree from 'src/vueLib/dbm/DBMTree.vue';
 import { api } from 'src/boot/axios';
-import { NotifyResponse } from 'src/composables/notify';
+import { useNotify } from 'src/vueLib/general/useNotify';
-import { useQuasar } from 'quasar';
+import { catchError } from 'src/vueLib/models/error';
 
-const $q = useQuasar();
+const { NotifyResponse } = useNotify();
 
 function saveDBM() {
   api
     .get('saveData')
-    .then((resp) => NotifyResponse($q, resp.data))
+    .then((resp) => NotifyResponse(resp.data))
-    .catch((err) => NotifyResponse($q, err));
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
 }
 </script>

src/vueLib/buttons/DataTypes.vue

@@ -3,22 +3,90 @@
     <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">
+        <div>
-          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="None" hint="none">
+          <div class="text-grey text-bold">General</div>
+          <RadioButton
+            class="q-my-xs q-px-lg q-mr-sm"
+            v-model:opt="datatype"
+            text="None"
+            hint="none"
+          >
           </RadioButton>
-          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="String" hint="Text">
+          <RadioButton
+            class="q-my-xs q-px-lg q-mr-sm"
+            v-model:opt="datatype"
+            text="String"
+            hint="Text"
+          >
           </RadioButton>
-          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="Bool" hint="On / Off">
+          <RadioButton class="q-my-xs q-px-lg" v-model:opt="datatype" text="Bool" hint="On / Off">
           </RadioButton>
-        </q-card-section>
+        </div>
-        <RadioButton v-model:opt="datatype" text="Uint8" hint="0 - 255"> </RadioButton>
+        <div>
-        <RadioButton v-model:opt="datatype" text="Uint16" hint="0 - 65535"> </RadioButton>
+          <div class="text-grey text-bold">Numbers</div>
-        <RadioButton v-model:opt="datatype" text="Uint32" hint="0 - 429496..."> </RadioButton>
+          <div>
-        <RadioButton v-model:opt="datatype" text="Int8" hint="-128 - 127"> </RadioButton>
+            <RadioButton
-        <RadioButton v-model:opt="datatype" text="Int16" hint="-32768 - 3..."> </RadioButton>
+              class="q-my-xs q-px-lg q-mr-sm"
-        <RadioButton v-model:opt="datatype" text="Int32" hint="-21474836..."> </RadioButton>
+              v-model:opt="datatype"
-        <RadioButton v-model:opt="datatype" text="Int32" hint="-2^63 - (2^...)"> </RadioButton>
+              text="Uint8"
-        <RadioButton v-model:opt="datatype" text="double" hint="1.7E 1/- 3..."> </RadioButton>
+              hint="0 - 255"
+            >
+            </RadioButton>
+            <RadioButton
+              class="q-my-xs q-px-lg q-mr-sm"
+              v-model:opt="datatype"
+              text="Uint16"
+              hint="0 - 65535"
+            >
+            </RadioButton>
+            <RadioButton
+              class="q-my-xs q-px-sm"
+              v-model:opt="datatype"
+              text="Uint32"
+              hint="0 - 429496..."
+            >
+            </RadioButton>
+          </div>
+          <div>
+            <RadioButton
+              class="q-my-xs q-mr-sm"
+              v-model:opt="datatype"
+              text="Int8"
+              hint="-128 - 127"
+            >
+            </RadioButton>
+            <RadioButton
+              class="q-my-xs q-mr-sm"
+              v-model:opt="datatype"
+              text="Int16"
+              hint="-32768 - 3..."
+            >
+            </RadioButton>
+            <RadioButton
+              class="q-my-xs q-px-sm"
+              v-model:opt="datatype"
+              text="Int32"
+              hint="-21474836..."
+            >
+            </RadioButton>
+          </div>
+          <div>
+            <RadioButton
+              class="q-my-xs q-px-sm q-mr-sm"
+              v-model:opt="datatype"
+              text="Int"
+              hint="-2^63 - (2^...)"
+            >
+            </RadioButton>
+            <RadioButton
+              class="q-my-xs q-px-md"
+              v-model:opt="datatype"
+              text="Double"
+              hint="1.7E 1/- 3..."
+            >
+            </RadioButton>
+          </div>
+        </div>
       </div>
     </div>
   </q-card>
@@ -26,7 +94,10 @@
 
 <script setup lang="ts">
 import RadioButton from './RadioButton.vue';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
-const datatype = ref('none');
+const emit = defineEmits(['update:datatype']);
+const datatype = ref('None');
+
+watch(datatype, (newVal) => emit('update:datatype', newVal));
 </script>

src/vueLib/buttons/RadioButton.vue

@@ -1,7 +1,7 @@
 <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="column items-start q-mx-sm">
       <div class="text-body1 text-black">{{ props.text }}</div>
       <div class="text-caption text-grey">{{ props.hint }}</div>
     </div>

src/vueLib/dbm/DBMTree.vue

@@ -0,0 +1,125 @@
+<template>
+  <q-card>
+    <div class="row">
+      <q-card-section class="col-4 scroll tree-container">
+        <q-tree
+          class="text-blue text-bold"
+          dense
+          :nodes="dbmData"
+          node-key="key"
+          no-transition
+          :default-expand-all="false"
+          v-model:expanded="expanded"
+          @update:expanded="onExpandedChange(expanded)"
+          @lazy-load="onLazyLoad"
+        >
+          <template v-slot:[`default-header`]="props">
+            <div
+              class="row items-center text-blue"
+              @contextmenu.prevent.stop="openSubMenu($event, props.node)"
+            >
+              <div class="row items-center text-blue"></div>
+              <div>{{ props.node.path }}</div>
+            </div>
+          </template>
+        </q-tree>
+        <sub-menu ref="subMenuRef"></sub-menu>
+      </q-card-section>
+      <dataTable class="col-8" />
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import {
+  type TreeNode,
+  dbmData,
+  onExpandedChange,
+  expanded,
+  buildTree,
+} from '../../vueLib/dbm/dbmTree';
+import DataTable from './DataTable.vue';
+import { useNotify } from '../general/useNotify';
+import { QCard } from 'quasar';
+import { unsubscribe } from '../services/websocket';
+import { onBeforeRouteLeave } from 'vue-router';
+import SubMenu from './SubMenu.vue';
+import { convertToSubscribes, type RawSubs } from '../models/Subscribe';
+import { getRequest } from '../models/Request';
+import { catchError } from '../models/error';
+
+const { NotifyResponse } = useNotify();
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+
+onMounted(() => {
+  getRequest('', '.*', 1)
+    .then((res) => {
+      const test = res;
+      if (res) buildTree(convertToSubscribes(test as RawSubs));
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+});
+
+onBeforeRouteLeave(() => {
+  unsubscribe([{ path: '.*', depth: 0 }]).catch((err) => NotifyResponse(catchError(err), 'error'));
+});
+
+function onLazyLoad({
+  node,
+  done,
+  fail,
+}: {
+  node: TreeNode;
+  done: (children: TreeNode[]) => void;
+  fail: () => void;
+}) {
+  getRequest(node.key ?? ZERO_UUID, '', 2)
+    .then((resp) => {
+      if (resp) done(buildTree(convertToSubscribes(resp as RawSubs)));
+      else done([]); // no children returned
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+      fail(); // trigger the fail handler
+    });
+}
+
+const subMenuRef = ref();
+
+function openSubMenu(event: MouseEvent, uuid: string) {
+  subMenuRef.value?.open(event, uuid);
+}
+</script>
+
+<style scoped>
+.tree-container {
+  overflow-y: auto;
+}
+
+@media (max-width: 599px) {
+  .tree-container {
+    max-height: 50vh;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023px) {
+  .tree-container {
+    max-height: 60vh;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .tree-container {
+    max-height: 70vh;
+  }
+}
+@media (min-width: 1440px) and (max-width: 1919px) {
+  .tree-container {
+    max-height: 80vh;
+  }
+}
+@media (min-width: 1920px) {
+  .tree-container {
+    max-height: 90vh;
+  }
+}
+</style>

src/vueLib/dbm/DataTable.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      v-if="tableRows.length > 0"
+      style="height: 600px"
+      flat
+      bordered
+      :title="tableRows[0]?.path"
+      :rows="tableRows"
+      :columns="columns"
+      row-key="path"
+      virtual-scroll
+      :rows-per-page-options="[0]"
+    >
+      <template v-slot:body-cell-path="props">
+        <q-td :props="props" @click="openDialog(props.row, 'rename')">
+          <div
+            :class="[
+              'text-left',
+              !props.row.path.includes('System') && props.row.path !== 'DBM'
+                ? 'cursor-pointer'
+                : '',
+              'q-mx-sm',
+            ]"
+          >
+            {{ props.row.path?.split(':').pop() ?? '' }}
+          </div>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-type="props">
+        <q-td :props="props" @click="openDialog(props.row, 'type')">
+          <div
+            :class="[
+              'text-center',
+              !props.row.path.includes('System') && props.row.path !== 'DBM'
+                ? 'cursor-pointer'
+                : '',
+              'q-mx-sm',
+            ]"
+          >
+            {{ convertFromType(props.row.type) }}
+          </div>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-value="props">
+        <q-td :props="props" @click="openDialog(props.row)">
+          <div :class="['text-center', '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>
+    <RenameDialog width="400px" button-ok-label="Rename" ref="renameDialog" />
+    <UpdateDialog width="400px" button-ok-label="Write" ref="updateDialog" />
+    <UpdateDatatype
+      width="400px"
+      button-ok-label="Update"
+      ref="updateDatatype"
+      dialog-label="Update Datatype"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UpdateDialog from './dialog/UpdateValueDialog.vue';
+import RenameDialog from './dialog/RenameDatapoint.vue';
+import UpdateDatatype from './dialog/UpdateDatatype.vue';
+import type { QTableProps } from 'quasar';
+import type { Subscribe } from '../models/Subscribe';
+import { computed, ref } from 'vue';
+import { TableSubs } from '../dbm/updateTable';
+import { convertFromType } from './Datapoint';
+
+const renameDialog = ref();
+const updateDialog = ref();
+const updateDatatype = ref();
+
+const openDialog = (sub: Subscribe, type?: string) => {
+  if (sub.path?.includes('System') || sub.path === 'DBM') return;
+  switch (type) {
+    case 'type':
+      updateDatatype.value.open(sub.uuid);
+      break;
+    case 'rename':
+      renameDialog.value.open(sub.uuid);
+      break;
+    default:
+      if (sub.type === 'none') return;
+      updateDialog.value?.open(ref(sub), type);
+      break;
+  }
+};
+
+const tableRows = computed(() => [...(TableSubs.value ?? [])]);
+
+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: 'drivers',
+    label: 'Drivers',
+    field: 'drivers',
+    align: 'center',
+  },
+] as QTableProps['columns'];
+</script>

src/vueLib/dbm/Datapoint.ts

@@ -0,0 +1,72 @@
+import type { Gets } from '../models/Get';
+import type { Sets } from '../models/Set';
+
+export function datapointRequestForCopy(response: Gets, oldPath: string, newPath: string): Sets {
+  const copySet = <Sets>[];
+
+  response.forEach((get) => {
+    copySet.push({
+      path: typeof get.path === 'string' ? get.path.replace(oldPath, newPath) : '',
+      type: get.type ? get.type : '',
+      value: get.value,
+      rights: get.rights ? get.rights : '',
+    });
+  });
+  return copySet;
+}
+
+export function convertFromType(type: string): string {
+  switch (type) {
+    case 'STR':
+      return 'string';
+    case 'BIT':
+      return 'bool';
+    case 'BYU':
+      return 'uint8';
+    case 'WOU':
+      return 'uint16';
+    case 'DWU':
+      return 'uint32';
+    case 'BYS':
+      return 'int8';
+    case 'WOS':
+      return 'int16';
+    case 'DWS':
+      return 'int32';
+    case 'LOU':
+      return 'uint64';
+    case 'LOS':
+      return 'int64';
+    case 'F64':
+      return 'double';
+    default:
+      return 'none';
+  }
+}
+
+export function convertToType(type: string): string {
+  switch (type) {
+    case 'String':
+      return 'STR';
+    case 'Bool':
+      return 'BIT';
+    case 'Uint8':
+      return 'BYU';
+    case 'Int8':
+      return 'BYS';
+    case 'Uint16':
+      return 'WOU';
+    case 'Int16':
+      return 'WOS';
+    case 'Uint32':
+      return 'DWU';
+    case 'Int32':
+      return 'DWS';
+    case 'Int':
+      return 'LOS';
+    case 'Double':
+      return 'F64';
+    default:
+      return 'NONE';
+  }
+}

src/vueLib/dbm/SubMenu.vue

@@ -0,0 +1,179 @@
+<template>
+  <q-menu ref="contextMenuRef" context-menu>
+    <q-list>
+      <q-item :clickable="!disableAll" v-close-popup @click="handleAction('Add')">
+        <q-item-section>
+          <div class="row">
+            <div class="col-5">
+              <q-icon
+                :color="disableAll ? 'grey-5' : 'primary'"
+                class="q-pr-sm"
+                name="add"
+                size="xs"
+                left
+              />
+            </div>
+            <div :class="['col-7', disableAll ? 'text-grey-5' : 'text-primary']">Add</div>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item
+        :class="disable ? 'text-grey-5' : ''"
+        :clickable="!disable"
+        v-close-popup
+        @click="handleAction('Rename')"
+        ><q-item-section>
+          <div class="row">
+            <div class="col-5">
+              <q-icon
+                :color="disable ? 'grey-5' : 'primary'"
+                class="q-pr-sm"
+                name="edit"
+                size="xs"
+                left
+              />
+            </div>
+            <div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Rename</div>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item
+        :class="disable ? 'text-grey-5' : ''"
+        :clickable="!disable"
+        v-close-popup
+        @click="handleAction('Delete')"
+        ><q-item-section>
+          <div class="row">
+            <div class="col-5">
+              <q-icon
+                :color="disable ? 'grey-5' : 'primary'"
+                class="q-pr-sm"
+                name="delete"
+                size="xs"
+                left
+              />
+            </div>
+            <div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Delete</div>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item
+        :color="disable ? 'grey-5' : 'primary'"
+        :clickable="!disable"
+        v-close-popup
+        @click="handleAction('Copy')"
+      >
+        <q-item-section>
+          <div class="row">
+            <div class="col-5">
+              <q-icon
+                :color="disable ? 'grey-5' : 'primary'"
+                class="q-pr-sm"
+                name="content_copy"
+                size="xs"
+                left
+              />
+            </div>
+            <div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Copy</div>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item
+        :color="disable ? 'grey-5' : 'primary'"
+        :clickable="!disable"
+        v-close-popup
+        @click="handleAction('Datatype')"
+      >
+        <q-item-section>
+          <div class="row">
+            <div class="col-5">
+              <q-icon
+                :color="disable ? 'grey-5' : 'primary'"
+                class="q-pr-sm"
+                name="text_fields"
+                size="xs"
+                left
+              />
+            </div>
+            <div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Datatype</div>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-menu>
+  <RenameDatapoint :dialogLabel="label" width="700px" button-ok-label="Rename" ref="renameDialog" />
+  <AddDialog :dialogLabel="label" width="700px" button-ok-label="Add" ref="addDialog" />
+  <RemoveDialog :dialogLabel="label" width="350px" button-ok-label="Remove" ref="removeDialog" />
+  <CopyDialog :dialogLabel="label" width="300px" button-ok-label="Copy" ref="copyDialog" />
+  <UpdateDatapoint
+    :dialogLabel="label"
+    width="300px"
+    button-ok-label="Update"
+    ref="datatypeDialog"
+  />
+</template>
+
+<script setup lang="ts">
+import AddDialog from './dialog/AddDatapoint.vue';
+import RemoveDialog from './dialog/RemoveDatapoint.vue';
+import CopyDialog from './dialog/CopyDatapoint.vue';
+import UpdateDatapoint from './dialog/UpdateDatatype.vue';
+import { ref } from 'vue';
+import { type TreeNode } from '../dbm/dbmTree';
+import { findSubscriptionByUuid } from '../models/Subscriptions';
+import RenameDatapoint from './dialog/RenameDatapoint.vue';
+
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+const renameDialog = ref();
+const addDialog = ref();
+const removeDialog = ref();
+const copyDialog = ref();
+const datatypeDialog = ref();
+const datapointUuid = ref('');
+const contextMenuRef = ref();
+const label = ref('');
+const disable = ref(false);
+const disableAll = ref(false);
+
+function handleAction(action: string) {
+  switch (action) {
+    case 'Rename':
+      label.value = 'Rename Datapoint';
+      renameDialog.value?.open(datapointUuid.value);
+      break;
+    case 'Add':
+      label.value = 'Add New Datapoint';
+      addDialog.value?.open(datapointUuid.value);
+      break;
+    case 'Delete':
+      label.value = 'Remove Datapoint';
+      removeDialog.value.open(datapointUuid.value);
+      break;
+    case 'Copy':
+      label.value = 'Copy Datapoint';
+      copyDialog.value.open(datapointUuid.value);
+      break;
+    case 'Datatype':
+      label.value = 'Update Datatype';
+      datatypeDialog.value.open(datapointUuid.value);
+      break;
+  }
+}
+
+const open = (event: MouseEvent, sub: TreeNode) => {
+  disable.value = false;
+  disableAll.value = false;
+
+  if (findSubscriptionByUuid(sub.key ?? '')?.path?.includes('System')) {
+    disable.value = true;
+    disableAll.value = true;
+  }
+  if (sub.key === ZERO_UUID) disable.value = true;
+
+  event.preventDefault();
+  datapointUuid.value = sub.key ?? '';
+  contextMenuRef.value?.show(event);
+};
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dbmTree.ts

@@ -0,0 +1,264 @@
+import { ref, computed, type Ref } from 'vue';
+import { convertToSubscribes, type Subs } from '../models/Subscribe';
+import { setValues, subscribe, unsubscribe } from '../services/websocket';
+import {
+  findSubscriptionByPath,
+  addRawSubscriptions,
+  removeAllSubscriptions,
+} from '../models/Subscriptions';
+import { UpdateTable } from '..//dbm/updateTable';
+import type { Response } from '..//models/Response';
+import type { RawSubs } from '..//models/Subscribe';
+import { getRequest } from '../models/Request';
+import type { Pubs } from '../models/Publish';
+
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+
+export const dbmData = ref<TreeNode[]>([]);
+export const expanded = ref<string[]>([]);
+
+let lastExpanded: string[] = [];
+
+export type TreeNode = {
+  path?: string;
+  key?: string;
+  lazy: boolean;
+  children?: TreeNode[];
+};
+
+type TreeMap = {
+  [key: string]: {
+    __children: TreeMap;
+    uuid?: string;
+    value?: string | number | boolean | null;
+    lazy: boolean;
+  };
+};
+
+const root: TreeMap = {};
+
+export function buildTreeWithRawSubs(subs: RawSubs): TreeNode[] {
+  return buildTree(convertToSubscribes(subs));
+}
+
+export function buildTree(subs: Subs | null): TreeNode[] {
+  if (subs) {
+    for (const { path, uuid, value, hasChild } of subs) {
+      if (!path) continue;
+      const parts = path.split(':');
+      let current = root;
+
+      parts.forEach((part, idx) => {
+        if (!part) return;
+        if (!current[part]) current[part] = { __children: {}, lazy: true };
+
+        if (idx === parts.length - 1 && uuid) {
+          current[part].uuid = uuid;
+          current[part].value = value?.value ?? null;
+          current[part].lazy = !!hasChild;
+        }
+
+        current = current[part].__children;
+      });
+    }
+  }
+
+  const toTreeNodes = (map: TreeMap): TreeNode[] =>
+    Object.entries(map)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, node]) => ({
+        path: key,
+        key: node.uuid ?? key,
+        value: node.value,
+        lazy: node.lazy,
+        children: toTreeNodes(node.__children),
+      }));
+
+  const newTree = [
+    {
+      path: 'DBM',
+      key: ZERO_UUID,
+      lazy: true,
+      children: toTreeNodes(root),
+    },
+  ];
+
+  dbmData.value.splice(0, dbmData.value.length, ...newTree);
+  return newTree;
+}
+
+export function removeNodes(pubs: Pubs) {
+  pubs.forEach((pub) => {
+    removeNode(pub.uuid);
+  });
+}
+
+export function removeNode(uuid: string) {
+  removeFromTreeMap(root, uuid);
+  removeFromTree(dbmData.value, uuid);
+  collapseNode(uuid);
+}
+
+function removeFromTreeMap(tree: TreeMap, uuid: string): boolean {
+  for (const [key, node] of Object.entries(tree)) {
+    if (node.uuid === uuid) {
+      delete tree[key];
+      return true;
+    }
+    if (removeFromTreeMap(node.__children, uuid)) return true;
+  }
+  return false;
+}
+
+function removeFromTree(nodes: TreeNode[], uuid: string): boolean {
+  const index = nodes.findIndex((n) => n.key === uuid);
+  if (index !== -1) {
+    nodes.splice(index, 1);
+    return true;
+  }
+
+  for (const node of nodes) {
+    if (node.children && removeFromTree(node.children, uuid)) {
+      if (node.children.length === 0) {
+        delete node.children;
+        node.lazy = true;
+      }
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function removeSubtreeByParentKey(parentKey: string) {
+  const recurse = (nodes: TreeNode[]): boolean => {
+    for (const node of nodes) {
+      if (node.key === parentKey) {
+        delete node.children;
+        node.lazy = true;
+        return true;
+      }
+      if (node.children && recurse(node.children)) return true;
+    }
+    return false;
+  };
+  recurse(dbmData.value);
+}
+
+function collapseNode(uuid: string) {
+  const idx = expanded.value.indexOf(uuid);
+  if (idx !== -1) {
+    expanded.value.splice(idx, 1);
+    const lastIdx = lastExpanded.indexOf(uuid);
+    if (lastIdx !== -1) lastExpanded.splice(lastIdx, 1);
+    onExpandedChange([...expanded.value]).catch(console.error);
+  }
+}
+
+export function updateValue(
+  NotifyResponse: (
+    response: Response | string | undefined,
+    type?: 'warning' | 'error',
+    timeout?: 5000,
+  ) => void,
+  path1: string,
+  toggle?: Ref<boolean>,
+  path2?: string,
+  path3?: string,
+  value3?: number,
+) {
+  return computed({
+    get() {
+      const path = toggle?.value && path2 ? path2 : path1;
+      return Number(findSubscriptionByPath(path)?.value ?? 0);
+    },
+    set(val) {
+      const baseValue = val;
+      const updates = [
+        { path: toggle?.value && path2 ? path2 : path1, value: baseValue },
+        ...(path3 ? [{ path: path3, value: value3 ?? baseValue }] : []),
+      ];
+
+      setValues(updates)
+        .then((response) => NotifyResponse(response))
+        .catch((err) =>
+          NotifyResponse(`Failed to update [${[path1, path2, path3].join(' ')}]: ${err}`, 'error'),
+        );
+    },
+  });
+}
+
+export async function onExpandedChange(newExpanded: readonly string[]) {
+  const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
+  const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
+
+  try {
+    await unsubscribe([{ path: '.*', depth: 0 }]).then(removeAllSubscriptions);
+
+    for (const key of collapsed) {
+      removeSubtreeByParentKey(key);
+      fetchAndUpdateNode(key);
+    }
+
+    for (const key of newlyExpanded) {
+      fetchAndUpdateNode(key);
+    }
+
+    lastExpanded = [...newExpanded];
+  } catch (err) {
+    console.error('error in expand function', err);
+  }
+}
+
+function fetchAndUpdateNode(key: string) {
+  getRequest(key, '', 2)
+    .then((resp) => {
+      if (resp) {
+        buildTreeWithRawSubs(resp);
+        subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) => console.error(err));
+        addRawSubscriptions(resp);
+      }
+      UpdateTable(key);
+    })
+    .catch((err) => console.error(err));
+}
+
+export function findParentKey(
+  childKey: string,
+  parentKey: string | null = null,
+  nodes?: TreeNode[],
+): string | null {
+  if (!nodes) nodes = dbmData.value;
+  for (const node of nodes) {
+    if (node.key === childKey) return parentKey;
+    if (node.children) {
+      const found = findParentKey(childKey, node.key ?? null, node.children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function getNodeUuidByPath(path: string, nodes?: TreeNode[]): string {
+  if (!nodes) nodes = dbmData.value;
+  for (const node of nodes) {
+    if (node.path === path) return node.key ?? '';
+    if (node.children) {
+      const found = getNodeUuidByPath(path, node.children);
+      if (found !== '') return found;
+    }
+  }
+  return '';
+}
+
+export function pathIsExpanded(path: string): boolean {
+  if (!path.includes(':')) {
+    return true;
+  }
+  let p = path.replace(/:.+$/, '');
+  if (expanded.value.includes(getNodeUuidByPath(p))) {
+    return true;
+  }
+  p = path.replace(/:.+$/, '');
+  return expanded.value.includes(getNodeUuidByPath(p));
+}

src/vueLib/dbm/dialog/AddDatapoint.vue

@@ -0,0 +1,144 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+    >
+    </q-card-section>
+    <q-form ref="addForm" class="q-gutter-md">
+      <q-input
+        class="q-mt-lg q-mb-none q-pl-lg q-pr-xl"
+        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"
+              >{{ prefix }}{{ staticPrefix }}</span
+            >
+          </div>
+        </template>
+      </q-input>
+      <DataTypes class="q-mt-lg q-pl-md q-pr-xl" flat v-model:datatype="datatype"></DataTypes>
+      <div class="q-pl-lg">
+        <div class="text-grey text-bold">Read Write Access</div>
+        <q-checkbox v-model="read">Read</q-checkbox>
+        <q-checkbox v-model="write">Write</q-checkbox>
+      </div>
+      <q-input
+        :type="valueType"
+        stack-label
+        label="Value"
+        class="q-pl-md q-pr-xl"
+        filled
+        v-model="value"
+      ></q-input>
+      <q-btn no-caps class="q-mb-xl q-mx-xl q-px-lg" @click="onSubmit" color="primary">{{
+        props.buttonOkLabel
+      }}</q-btn>
+    </q-form>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import { useNotify } from '../../general/useNotify';
+import DataTypes from '../../buttons/DataTypes.vue';
+import { addRawSubscription } from '../../models/Subscriptions';
+import { UpdateTable } from '../../dbm/updateTable';
+import { getRequest, setRequest } from 'src/vueLib/models/Request';
+import { convertToType } from '../Datapoint';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const path = ref('');
+const staticPrefix = ref('');
+const value = ref('');
+const valueType = ref<'text' | 'number'>('text');
+const read = ref(true);
+const write = ref(true);
+const datatype = ref('None');
+const addForm = ref();
+const prefix = 'DBM:';
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+watch(datatype, (newVal) => {
+  if (newVal === 'String') valueType.value = 'text';
+  else valueType.value = 'number';
+});
+
+function onSubmit() {
+  let type = 'NONE';
+  let access = '';
+  addForm.value.validate().then((success: undefined) => {
+    if (success) {
+      type = convertToType(datatype.value);
+
+      if (read.value) access = 'R';
+      if (write.value) access += 'W';
+      if (access == '') access = 'R';
+
+      setRequest(staticPrefix.value + path.value, type, value.value, access)
+        .then((respond) => {
+          if (respond) {
+            respond.forEach((set) => {
+              NotifyResponse("Datapoint '" + prefix + set.path + "' added");
+            });
+            addRawSubscription(respond[0]);
+            UpdateTable();
+          }
+        })
+        .catch((err) => {
+          NotifyResponse(catchError(err), 'error');
+        });
+    } else {
+      if (path.value === '') {
+        NotifyResponse("Field 'Path' is requierd", 'error');
+        return;
+      } else NotifyResponse('Form not validated', 'error');
+    }
+  });
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+function getDatapoint(uuid: string) {
+  getRequest(uuid, '', 1)
+    .then((resp) => {
+      if (resp[0]) {
+        staticPrefix.value = resp[0].path ?? '';
+        if (staticPrefix.value !== '') staticPrefix.value += ':';
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dialog/CopyDatapoint.vue

@@ -0,0 +1,131 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+    >
+    </q-card-section>
+    <q-form ref="copyForm" class="q-gutter-md">
+      <q-input
+        class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
+        filled
+        v-model="path"
+        label="Current Path"
+        label-color="primary"
+        readonly
+      >
+      </q-input>
+      <q-input
+        class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
+        filled
+        v-model="copyPath"
+        label="New Path *"
+        label-color="primary"
+        @keyup.enter="onSubmit"
+        :rules="[(val) => !!val || 'Path is required']"
+      >
+      </q-input>
+      <div class="q-mx-sm">
+        <q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
+          props.buttonOkLabel
+        }}</q-btn>
+      </div>
+    </q-form>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import { useNotify } from '../../general/useNotify';
+import { getRequest, setsRequest } from 'src/vueLib/models/Request';
+import { datapointRequestForCopy } from '../Datapoint';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const path = ref('');
+const copyPath = ref('');
+const copyForm = ref();
+const prefix = 'DBM:';
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+function onSubmit() {
+  copyForm.value.validate().then((success: undefined) => {
+    if (success) {
+      if (copyPath.value === path.value) {
+        NotifyResponse('copy path can not be the same as current path', 'error');
+        return;
+      }
+
+      const absolutePath = path.value.slice(prefix.length);
+      const absolutecopyPath = copyPath.value.slice(prefix.length);
+
+      getRequest('', absolutecopyPath, 1)
+        .then((response) => {
+          if (response?.length > 0) {
+            NotifyResponse("path '" + copyPath.value + "' already exists", 'warning');
+            return;
+          }
+        })
+        .catch((err) => {
+          if (err instanceof Error && err.message === 'No data returned') {
+            getRequest('', absolutePath, 0)
+              .then((response) => {
+                setsRequest(
+                  datapointRequestForCopy(response, absolutePath, absolutecopyPath),
+                ).catch((err) => console.error(err));
+                NotifyResponse(copyPath.value + ' copied');
+              })
+              .catch((err) => NotifyResponse(catchError(err), 'error'));
+          } else {
+            NotifyResponse(catchError(err), 'error');
+          }
+          return;
+        });
+    } else {
+      if (copyPath.value === '') {
+        NotifyResponse("Field 'New Path' is requierd", 'error');
+        return;
+      } else NotifyResponse('Form not validated', 'error');
+    }
+  });
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+function getDatapoint(uuid: string) {
+  getRequest(uuid)
+    .then((resp) => {
+      if (resp[0]) {
+        path.value = prefix + resp[0].path;
+        copyPath.value = prefix + resp[0].path;
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dialog/RemoveDatapoint.vue

@@ -0,0 +1,102 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+    >
+    </q-card-section>
+    <div class="text-center text-bold text-primary">
+      Do you want to remove Datapoint
+      <br />
+      '{{ datapoint.path ?? '' }}'
+    </div>
+    <q-btn no-caps class="q-ma-md" filled color="negative" @click="remove">{{
+      props.buttonOkLabel
+    }}</q-btn>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import { useNotify } from '../../general/useNotify';
+import { subscribe } from '../../services/websocket';
+import { findParentKey, buildTree } from '../../dbm/dbmTree';
+import { addRawSubscriptions } from '../../models/Subscriptions';
+import { UpdateTable } from '../../dbm/updateTable';
+import { convertToSubscribes } from '../../models/Subscribe';
+import { deleteRequest, getRequest } from 'src/vueLib/models/Request';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const datapoint = ref();
+const prefix = 'DBM:';
+
+const open = (uuid: string) => {
+  getDatapoint(uuid)
+    .then(() => Dialog.value?.open())
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+};
+
+function remove() {
+  deleteRequest(datapoint.value.uuid)
+    .then((respond) => {
+      const sub = respond[respond.length - 1];
+      if (sub) NotifyResponse("Datapoint '" + prefix + sub.path + "' removed", 'warning');
+
+      Dialog.value.close();
+      {
+        const parentKey = findParentKey(datapoint.value.uuid);
+
+        if (parentKey) {
+          subscribe([{ uuid: parentKey, path: '', depth: 2 }])
+            .then((res) => {
+              if (res?.subscribe) {
+                addRawSubscriptions(res.subscribe);
+                buildTree(convertToSubscribes(res.subscribe));
+                UpdateTable();
+              }
+            })
+            .catch((err) => NotifyResponse('Subscribe failed ' + catchError(err), 'error'));
+        }
+      }
+    })
+    .catch((err) => {
+      if (err.response) {
+        NotifyResponse(err.response.data.message, 'error');
+      } else console.error(err);
+    });
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+async function getDatapoint(uuid: string) {
+  await getRequest(uuid, '', 1)
+    .then((resp) => {
+      if (resp) {
+        datapoint.value = resp[0];
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+defineExpose({ open, close });
+</script>

src/vueLib/dbm/dialog/RenameDatapoint.vue

@@ -0,0 +1,141 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+    >
+    </q-card-section>
+    <q-form ref="copyForm" class="q-gutter-md">
+      <q-input
+        class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
+        filled
+        v-model="path"
+        label="Current Path"
+        label-color="primary"
+        readonly
+      >
+      </q-input>
+      <q-input
+        class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
+        filled
+        v-model="newPath"
+        label="New Path *"
+        label-color="primary"
+        @keyup.enter="onSubmit"
+        :rules="[(val) => !!val || 'Path is required']"
+      >
+      </q-input>
+      <div class="q-mx-sm">
+        <q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
+          props.buttonOkLabel
+        }}</q-btn>
+      </div>
+    </q-form>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import { useNotify } from '../../general/useNotify';
+import { getRequest, setRequest } from 'src/vueLib/models/Request';
+import { catchError } from 'src/vueLib/models/error';
+import { convertToSubscribes, type RawSubs } from 'src/vueLib/models/Subscribe';
+import { UpdateTable } from '../updateTable';
+import { addRawSubscriptions } from 'src/vueLib/models/Subscriptions';
+import { buildTree } from '../dbmTree';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const datapoint = ref();
+const path = ref('');
+const newPath = ref('');
+const copyForm = ref();
+const prefix = 'DBM:';
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+function onSubmit() {
+  copyForm.value.validate().then((success: undefined) => {
+    if (success) {
+      if (newPath.value === path.value) {
+        NotifyResponse('same name', 'warning');
+        return;
+      }
+
+      getRequest('', newPath.value.slice(prefix.length), 1)
+        .then((response) => {
+          console.log(10, response);
+          if (response?.length > 0) {
+            NotifyResponse("path '" + response[0]?.path + "' already exists", 'warning');
+            return;
+          }
+        })
+        .catch((err) => {
+          const error = catchError(err);
+          if (error !== 'No data returned') {
+            NotifyResponse(error, 'error');
+            return;
+          }
+
+          setRequest(
+            newPath.value.slice(prefix.length),
+            datapoint.value.type,
+            datapoint.value.value,
+            datapoint.value.rights,
+            datapoint.value.uuid,
+            true,
+          )
+            .then((res) => {
+              addRawSubscriptions(res as RawSubs);
+              buildTree(convertToSubscribes(res as RawSubs));
+              UpdateTable();
+            })
+            .catch((err) => NotifyResponse(err, 'error'));
+        });
+    } else {
+      if (newPath.value === '') {
+        NotifyResponse("Field 'New Path' is requierd", 'error');
+        return;
+      } else NotifyResponse('Form not validated', 'error');
+    }
+  });
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+function getDatapoint(uuid: string) {
+  getRequest(uuid)
+    .then((resp) => {
+      if (resp[0]) {
+        datapoint.value = resp[0];
+        path.value = prefix + resp[0].path;
+        newPath.value = prefix + resp[0].path;
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dialog/UpdateDatatype.vue

@@ -0,0 +1,140 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
+    <q-card-section
+      v-if="props.dialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+      >DBM:{{ datapoint.path }}
+    </q-card-section>
+    <q-form ref="datatypeForm" class="q-gutter-md">
+      <q-input
+        class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
+        filled
+        dense
+        v-model="currentDatatype"
+        label="Current Path"
+        label-color="primary"
+        readonly
+      >
+      </q-input>
+      <q-select
+        class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
+        popup-content-class="small-dropdown"
+        filled
+        dense
+        v-model="selectedDatatype"
+        :options="options"
+        option-label="label"
+      >
+      </q-select>
+      <div class="q-mx-sm">
+        <q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
+          props.buttonOkLabel
+        }}</q-btn>
+      </div>
+    </q-form>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import { useNotify } from '../../general/useNotify';
+import { getRequest, setRequest } from 'src/vueLib/models/Request';
+import { UpdateTable } from '../updateTable';
+import { updateSubscription } from 'src/vueLib/models/Subscriptions';
+import { convertToSubscribe } from 'src/vueLib/models/Subscribe';
+import { convertFromType } from '../Datapoint';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const datapoint = ref();
+const currentDatatype = ref('');
+const datatypeForm = ref();
+const selectedDatatype = ref({ label: 'None', value: 'NONE' });
+const options = [
+  { label: 'None', value: 'NONE' },
+  { label: 'String (Text)', value: 'STR' },
+  { label: 'Bool (On/Off)', value: 'BIT' },
+  { label: 'Uint8 (0 - 256)', value: 'BYU' },
+  { label: 'Uint16 (0 - 65535)', value: 'WOU' },
+  { label: 'Uint32 (0 - 429496...)', value: 'DWU' },
+  { label: 'Int8 (-128 - 127)', value: 'BYS' },
+  { label: 'Int16 (-32768 -3...)', value: 'WOS' },
+  { label: 'Int32 (-21474836...)', value: 'DWS' },
+  { label: 'Int64 (-2^63 -(2^...))', value: 'DWS' },
+  { label: 'Double (1.7E 1/-3...)', value: 'F64' },
+];
+
+const open = async (uuid: string) => {
+  await getDatapoint(uuid);
+  Dialog.value?.open();
+};
+
+async function onSubmit() {
+  const success = await datatypeForm.value.validate();
+  if (!success) {
+    NotifyResponse('Form not validated', 'error');
+    return;
+  }
+
+  const datatype = options.find((s) => s.label === selectedDatatype.value.label)?.value;
+  if (datatype === undefined) return;
+  try {
+    const response = await setRequest(datapoint.value.path, datatype, datapoint.value.value);
+    if (response[0]) updateSubscription(convertToSubscribe(response[0]));
+    NotifyResponse(
+      'new datatype: ' +
+        convertFromType(response[0]?.type ?? '') +
+        ' for datapoint :DBM:' +
+        response[0]?.path,
+    );
+    UpdateTable();
+    return;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+async function getDatapoint(uuid: string) {
+  await getRequest(uuid)
+    .then((resp) => {
+      if (resp[0]) {
+        datapoint.value = resp[0];
+        const type = options.find((s) => s.value === (resp[0]?.type ?? 'NONE'))?.label ?? 'None';
+        currentDatatype.value = type;
+        selectedDatatype.value.value = type;
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style scope>
+.small-dropdown .q-item {
+  min-height: 28px; /* default is 48px */
+  padding: 4px 8px;
+}
+</style>

src/vueLib/dbm/dialog/UpdateValueDialog.vue

@@ -0,0 +1,159 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="datapoint?.path">
+    <q-card-section
+      v-if="props.dialogLabel || localDialogLabel"
+      class="text-bold text-left q-mb-none q-pb-none"
+      :class="'text-' + props.labelColor"
+      >{{ props.dialogLabel ? props.dialogLabel : localDialogLabel }}</q-card-section
+    >
+    <q-card-section v-if="drivers && drivers.length == 0">
+      <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
+        :readonly="onlyRead"
+        @keyup.enter="write"
+        :type="writeType"
+        v-model="writeValue as string | number"
+      ></q-input>
+    </q-card-section>
+    <q-card-section v-else>
+      <q-table
+        flat
+        dense
+        virtual-scroll
+        :rows-per-page-options="[0]"
+        :rows="drivers"
+        :columns="columns"
+      >
+      </q-table>
+    </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"
+        no-caps
+        :label="props.buttonOkLabel"
+        @click="write"
+      >
+      </q-btn>
+    </q-card-actions>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import type { Subscribe } from '../../models/Subscribe';
+import type { Ref } from 'vue';
+import { setValues } from '../../services/websocket';
+import { useNotify } from '../../general/useNotify';
+import type { QTableProps } from 'quasar';
+import type { Driver } from '../../models/Drivers';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const writeValue = ref();
+const onlyRead = ref(false);
+const writeType = ref<'text' | 'number'>('text');
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  buttonCancelLabel: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const datapoint = ref();
+const inputValue = ref(datapoint?.value);
+const localDialogLabel = ref('');
+const drivers = ref<Driver[]>([]);
+const columns = [
+  { name: 'type', label: 'Driver Name', field: 'type', align: 'left' },
+  { name: 'bus', label: 'Bus Name', field: 'bus', align: 'center' },
+  { name: 'address', label: 'Address', field: 'address', align: 'center' },
+] as QTableProps['columns'];
+
+const open = (sub: Ref<Subscribe>, type?: string) => {
+  datapoint.value = sub.value;
+  if (datapoint.value.rights == 'R') onlyRead.value = true;
+  drivers.value = [];
+  switch (type) {
+    case 'driver':
+      localDialogLabel.value = 'Update Drivers';
+      if (sub.value.drivers) drivers.value = Object.values(sub.value.drivers);
+      writeValue.value = sub.value.drivers;
+      break;
+    default:
+      localDialogLabel.value = 'Update Value';
+      if (sub.value.type === 'STR') writeType.value = 'text';
+      else if (sub.value.type === 'BIT') writeType.value = 'text';
+      else writeType.value = 'number';
+      writeValue.value = sub.value.value;
+  }
+  Dialog.value?.open();
+};
+
+watch(
+  () => datapoint.value?.value,
+  (newVal) => {
+    inputValue.value = newVal;
+  },
+);
+
+function write() {
+  setValues([{ uuid: datapoint.value?.uuid ?? '', value: writeValue.value ?? undefined }])
+    .then((resp) => {
+      if (resp?.set) {
+        resp.set.forEach((set) => {
+          inputValue.value = set.value;
+        });
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+.outercard {
+  border-radius: 10px;
+}
+</style>

src/vueLib/dbm/updateTable.ts

@@ -0,0 +1,22 @@
+import type { Subs } from '../models/Subscribe';
+import { Subscriptions } from '../models/Subscriptions';
+import { ref } from 'vue';
+
+export const TableSubs = ref<Subs>();
+
+export function UpdateTable(targetUuid?: string) {
+  TableSubs.value = Object.values(Subscriptions)
+    .map((sub) => {
+      sub.type = sub.type ?? 'none';
+      return sub;
+    })
+    .sort((a, b) => {
+      if (targetUuid) {
+        if (a.uuid === targetUuid) return -1; // move `a` to front
+        if (b.uuid === targetUuid) return 1; // move `b` to front
+      }
+      const aPath = a.path ?? '';
+      const bPath = b.path ?? '';
+      return aPath.localeCompare(bPath);
+    });
+}

src/vueLib/dialog/DialogFrame.vue

@@ -8,12 +8,17 @@
     :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">
+      <div :class="props.headerTitle ? 'row items-center justify-between' : ''">
-        <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
+        <div v-if="headerTitle" class="q-mx-sm q-mt-xs text-left text-bold text-caption">
-        <q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
+          {{ props.headerTitle }}
+        </div>
+        <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>
       </div>
       <q-separator color="black" class="q-my-none" />
-      <slot />
+      <div class="scrollArea"><slot /></div>
     </q-card>
   </q-dialog>
 </template>
@@ -23,6 +28,7 @@ import { ref, computed } from 'vue';
 
 const dialogRef = ref();
 const open = () => dialogRef.value?.show();
+const close = () => dialogRef.value?.hide();
 
 const minMaxIcon = ref('fullscreen');
 const minMaxState = ref(false);
@@ -36,6 +42,10 @@ function minMax() {
 }
 
 const props = defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
   width: {
     type: String,
     default: '300px',
@@ -55,11 +65,18 @@ const cardStyle = computed(() => ({
   transform: `translate(${position.value.x}px, ${position.value.y}px)`,
 }));
 
-defineExpose({ open });
+defineExpose({ open, close });
 </script>
 
 <style scoped>
 .layout {
   border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.scrollArea {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 </style>

src/vueLib/general/useNotify.ts

@@ -0,0 +1,67 @@
+import type { Response } from '../models/Response';
+import { useQuasar } from 'quasar';
+
+export function useNotify() {
+  const $q = useQuasar();
+  function NotifyResponse(
+    response: Response | string | undefined,
+    type?: 'warning' | 'error',
+    timeout: number = 5000,
+  ) {
+    let color = 'green';
+    let icon = 'check_circle';
+
+    switch (type) {
+      case 'warning':
+        color = 'orange';
+        icon = 'warning';
+        break;
+      case 'error':
+        color = 'red';
+        icon = 'error';
+        break;
+    }
+
+    if (response) {
+      const message = typeof response === 'string' ? response : (response.message ?? '');
+      if (message === '') {
+        return;
+      }
+
+      color = typeof response === 'string' ? color : response?.error ? 'red' : color;
+      icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
+      $q?.notify({
+        message: message,
+        color: color,
+        position: 'bottom-right',
+        icon: icon,
+        timeout: timeout,
+      });
+    }
+  }
+
+  function NotifyDialog(title: string, text: string, okText?: string, cancelText?: string) {
+    return new Promise((resolve) => {
+      $q.dialog({
+        title: title,
+        message: text,
+        persistent: true,
+        ok: okText ?? 'OK',
+        cancel: cancelText ?? 'CANCEL',
+      })
+        .onOk(() => {
+          resolve(true);
+        })
+        .onCancel(() => {
+          resolve(false);
+        })
+        .onDismiss(() => {
+          resolve(false);
+        });
+    });
+  }
+  return {
+    NotifyDialog,
+    NotifyResponse,
+  };
+}

src/vueLib/models/Drivers.ts

@@ -0,0 +1,5 @@
+export interface Driver {
+  type: string;
+  addess: number;
+  value: number;
+}

src/vueLib/models/Get.ts

@@ -7,7 +7,7 @@ type Get = {
   path?: string;
   type?: string;
   rights?: string;
-  value?: undefined;
+  value?: string | number | boolean | null;
   query?: Query;
   hasChild?: boolean;
 };

src/vueLib/models/Publish.ts

@@ -0,0 +1,50 @@
+export type Publish = {
+  event: string;
+  uuid: string;
+  path: string;
+  type: string;
+  value: string | number | boolean | null;
+  hasChild: boolean;
+};
+export type Pubs = Publish[];
+
+import { updateSubscriptionValue, removeRawSubscriptions } from './Subscriptions';
+import { buildTree, buildTreeWithRawSubs, removeNodes } from '../dbm/dbmTree';
+import type { RawSubs, RawSubscribe } from '../models/Subscribe';
+import { ref } from 'vue';
+import { UpdateTable } from '../dbm/updateTable';
+import { pathIsExpanded } from '../dbm/dbmTree';
+
+export function publishToSubscriptions(pubs: Pubs) {
+  let event = '';
+  const rawSubs = ref<RawSubs>([]);
+  pubs.forEach((pub) => {
+    switch (pub.event) {
+      case 'onCreate':
+        event = 'onCreate';
+        if (!pathIsExpanded(pub.path)) break;
+        pub.hasChild = pubs.length > 0;
+        rawSubs.value.push(pub as RawSubscribe);
+        break;
+      case 'onChange':
+        break;
+      case 'onDelete':
+        event = 'onDelete';
+        rawSubs.value.push(pub as RawSubscribe);
+        break;
+    }
+    updateSubscriptionValue(pub.uuid, pub.value);
+  });
+
+  switch (event) {
+    case 'onCreate':
+      buildTreeWithRawSubs(rawSubs.value);
+      break;
+    case 'onDelete':
+      buildTree(null);
+      removeRawSubscriptions(rawSubs.value);
+      UpdateTable();
+      removeNodes(pubs);
+      break;
+  }
+}

src/vueLib/models/Request.ts

@@ -0,0 +1,121 @@
+import type { Gets } from './Get';
+import type { Sets } from './Set';
+import type { Subs } from './Subscribe';
+import { api } from 'src/boot/axios';
+
+export type Request = {
+  get?: Gets;
+  set?: Sets;
+  subscribe?: Subs;
+  unsubscribe?: Subs;
+};
+
+const query = '/json_data';
+
+export async function getRequest(
+  uuid: string,
+  path: string = '',
+  depth: number = 1,
+): Promise<Gets> {
+  let payload = {};
+  if (uuid !== '') {
+    payload = { uuid: uuid, path: path, query: { depth: depth } };
+  } else {
+    payload = { path: path, query: { depth: depth } };
+  }
+
+  const resp = await api.post(query, {
+    get: [payload],
+  });
+
+  if (resp.data.get && resp.data.get.length > 0) {
+    return resp.data.get;
+  } else {
+    throw new Error('No data returned');
+  }
+}
+
+export async function getRequests(gets: Gets): Promise<Gets> {
+  const resp = await api.post(query, {
+    get: gets,
+  });
+
+  if (resp.data.get && resp.data.get.length > 0) {
+    return resp.data.get;
+  } else {
+    throw new Error('No data returned');
+  }
+}
+
+export async function rawSetsRequest(sets: Sets): Promise<Sets> {
+  const resp = await api.post(query, {
+    set: sets,
+  });
+
+  if (resp.data.set && resp.data.set.length > 0) {
+    return resp.data.set;
+  } else {
+    throw new Error('No data returned');
+  }
+}
+
+export async function setRequest(
+  path: string,
+  type: string,
+  value: string | number | boolean,
+  rights?: string,
+  uuid?: string,
+  rename?: boolean,
+): Promise<Sets> {
+  const payload = {
+    path: path,
+    type: type,
+    value: value,
+    rights: rights,
+    uuid: uuid,
+    rename: rename,
+  };
+
+  const resp = await api.post(query, {
+    set: [payload],
+  });
+
+  if (resp.data.set && resp.data.set.length > 0) {
+    return resp.data.set;
+  } else {
+    throw new Error('No data returned');
+  }
+}
+
+export async function setsRequest(sets: Sets): Promise<Sets> {
+  const resp = await api.post(query, {
+    set: sets,
+  });
+
+  if (resp.data.set && resp.data.set.length > 0) {
+    return resp.data.set;
+  } else {
+    throw new Error('No data returned');
+  }
+}
+
+export async function deleteRequest(uuid?: string, path?: string, rename?: boolean): Promise<Sets> {
+  let payload = {};
+  if (uuid) {
+    payload = { uuid: uuid, rename: rename };
+  } else if (path) {
+    payload = { path: path };
+  }
+
+  const resp = await api.delete('/json_data', {
+    data: {
+      set: [payload],
+    },
+  });
+
+  if (resp.data.set && resp.data.set.length > 0) {
+    return resp.data.set;
+  } else {
+    throw new Error('No data returned');
+  }
+}

src/vueLib/models/Set.ts

@@ -2,8 +2,10 @@ export type Set = {
   uuid?: string | undefined;
   path?: string;
   type?: string;
-  value: string | number | boolean | undefined;
+  value: string | number | boolean | null | undefined;
+  rights?: string;
   create?: boolean;
+  hasChild?: boolean;
 };
 
 export type Sets = Set[];

src/vueLib/models/Subscribe.ts

@@ -1,12 +1,14 @@
 import { ref } from 'vue';
 import type { Ref } from 'vue';
+import type { Driver } from './Drivers';
+import type { Set } from './Set';
 
 export type Subscribe = {
   uuid?: string;
   path?: string;
   depth?: number;
   type?: string;
-  drivers?: object | undefined;
+  drivers?: Record<string, Driver>;
   value?: Ref<string | number | boolean | null | undefined>;
   hasChild?: boolean;
 };
@@ -18,20 +20,26 @@ export type RawSubscribe = {
   path?: string;
   depth?: number;
   value?: string | number | boolean | null;
+  rights?: string;
   hasChild?: boolean;
 };
 
 export type RawSubs = RawSubscribe[];
 
-export function convertToSubscribe(raw: RawSubscribe): Subscribe {
+export function convertToSubscribe(raw: RawSubscribe | Set): Subscribe {
   return {
     ...raw,
+    uuid: raw.uuid ?? '',
     value: ref(raw.value ?? null),
   };
 }
 
 export function convertToSubscribes(rawList: RawSubs): Subs {
-  const subs = rawList.map(convertToSubscribe);
+  const subs = rawList.map(convertToSubscribe).sort((a, b) => {
+    const aPath = a.path ?? '';
+    const bPath = b.path ?? '';
+    return aPath.localeCompare(bPath);
+  });
   return subs as Subs;
 }
 

src/vueLib/models/Subscriptions.ts

@@ -1,7 +1,8 @@
 import type { Ref } from 'vue';
 import { reactive, ref } from 'vue';
-import { convertToSubscribe } from 'src/models/Subscribe';
+import { convertToSubscribe } from '../models/Subscribe';
-import type { Subs, Subscribe, RawSubs } from 'src/models/Subscribe';
+import type { Subscribe, RawSubs, RawSubscribe } from '../models/Subscribe';
+import type { Set } from './Set';
 
 const EMPTYUUID = '00000000-0000-0000-0000-000000000000';
 export const Subscriptions = reactive<Record<string, Subscribe>>({});
@@ -11,16 +12,12 @@ export type TableSubscription = {
   value: Ref<string | number | boolean | null | undefined>;
 };
 
-export function getRows(): Subs {
+export function addRawSubscription(sub: RawSubscribe | Set | undefined) {
-  return Object.values(Subscriptions).map((sub) => {
+  if (sub === undefined) return;
-    sub.path = sub.path?.split(':').pop() ?? '';
+  addSubscription(convertToSubscribe(sub as RawSubscribe));
-    if (!sub.type) sub.type = 'None';
-    else sub.type = sub.type.toLowerCase();
-    return sub;
-  });
 }
 
-export function addSubscriptions(subs: RawSubs) {
+export function addRawSubscriptions(subs: RawSubs) {
   subs.forEach((sub) => addSubscription(convertToSubscribe(sub)));
 }
 
@@ -46,9 +43,13 @@ export function updateSubscriptionValue(
   Subscriptions[uuid].value = ref(value);
 }
 
-export function removeSubscriptions(subs: RawSubs) {
+export function removeRawSubscription(sub: RawSubscribe | string) {
+  removeSubscription(typeof sub === 'string' ? sub : sub.uuid);
+}
+
+export function removeRawSubscriptions(subs: RawSubs) {
   subs.forEach((sub) => {
-    removeSubscription(sub.path);
+    removeSubscription(sub.uuid);
   });
 }
 
@@ -56,7 +57,7 @@ export function removeAllSubscriptions() {
   Object.keys(Subscriptions).forEach((key) => delete Subscriptions[key]);
 }
 
-function removeSubscription(uuid: string | undefined) {
+export function removeSubscription(uuid: string | undefined) {
   if (uuid === undefined) return;
   if (!Subscriptions || Subscriptions[uuid] === undefined) return;
   delete Subscriptions[uuid];
@@ -65,3 +66,8 @@ function removeSubscription(uuid: string | undefined) {
 export function findSubscriptionByPath(path: string): Subscribe | undefined {
   return Object.values(Subscriptions).find((sub) => sub.path === path);
 }
+
+export function findSubscriptionByUuid(uuid: string): Subscribe | undefined {
+  if (!Subscriptions[uuid]) return;
+  return Subscriptions[uuid];
+}

src/vueLib/models/error.ts

@@ -0,0 +1,13 @@
+import type { Response } from './Response';
+
+export function catchError(data: Error | Response): string {
+  if (data instanceof Response) {
+    if (data.message) return data.message;
+    else console.error(data);
+  } else if (data instanceof Error) {
+    return data.message;
+  } else {
+    console.error(data);
+  }
+  return '';
+}

src/vueLib/services/websocket.ts

@@ -1,42 +1,16 @@
-import type { Response } from 'src/models/Response';
+import type { Response } from '../models/Response';
-import { publishToSubscriptions } from 'src/models/Publish';
+import { publishToSubscriptions } from '../models/Publish';
-import type { Request } from 'src/models/Request';
+import type { Request } from '../models/Request';
 import type { QVueGlobals } from 'quasar';
 import { ref } from 'vue';
-import { NotifyResponse } from 'src/composables/notify';
+import { type Subs } from '../models/Subscribe';
-import { type Subs } from 'src/models/Subscribe';
+import type { Sets } from '../models/Set';
-import type { Sets } from 'src/models/Set';
+import { addRawSubscriptions } from '../models/Subscriptions';
-import type { PongMessage } from 'src/models/Pong';
-import { addSubscriptions } from 'src/models/Subscriptions';
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
-//const lastKnownValues: Record<string, string> = reactive({});
 
 export let socket: WebSocket | null = null;
+
 const isConnected = ref(false);
-let lastPongTime = Date.now();
-
-function pingLoop(interval: number = 5000) {
-  // Start sending ping every 5 seconds
-  setInterval(() => {
-    if (!socket || socket.readyState !== WebSocket.OPEN) return;
-
-    // If no pong received in last 10 seconds, close
-    if (Date.now() - lastPongTime > interval + 10000) {
-      console.warn('No pong response, closing socket...');
-      socket.close();
-      return;
-    }
-    socket.send(JSON.stringify({ type: 'ping' }));
-  }, interval);
-}
-
-function isPong(msg: PongMessage | undefined | null) {
-  if (msg?.type === 'pong') {
-    lastPongTime = Date.now();
-    return true;
-  }
-  return false;
-}
 
 export function initWebSocket(url: string, $q?: QVueGlobals) {
   const connect = () => {
@@ -45,9 +19,8 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
     socket.onopen = () => {
       console.log('WebSocket connected');
       isConnected.value = true;
-      // Start sending ping every 5 seconds
-      pingLoop(5000);
     };
+
     socket.onclose = () => {
       isConnected.value = false;
       console.log('WebSocket disconnected');
@@ -74,9 +47,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
       if (typeof event.data === 'string') {
         const message = JSON.parse(event.data);
 
-        // Handle pong
-        if (isPong(message)) return;
-
         const id = message.id;
         if (id && pendingResponses.has(id)) {
           pendingResponses.get(id)?.(message); // resolve the promise
@@ -127,7 +97,14 @@ function waitForSocketConnection(): Promise<void> {
   });
 }
 
-export function subscribeToPath(q: QVueGlobals, path: string) {
+export function subscribeToPath(
+  NotifyResponse: (
+    resp: Response | string | undefined,
+    type?: 'warning' | 'error',
+    timeout?: 5000,
+  ) => void,
+  path: string,
+) {
   subscribe([
     {
       path: path,
@@ -136,13 +113,13 @@ export function subscribeToPath(q: QVueGlobals, path: string) {
   ])
     .then((response) => {
       if (response?.subscribe) {
-        addSubscriptions(response.subscribe);
+        addRawSubscriptions(response.subscribe);
       } else {
-        NotifyResponse(q, response);
+        NotifyResponse(response);
       }
     })
     .catch((err) => {
-      NotifyResponse(q, err, 'error');
+      NotifyResponse(err, 'error');
     });
 }