From a059d282ed2d7cf83728afa7e95bba17485a9bb3 Mon Sep 17 00:00:00 2001
From: Adrian Zuercher <adrianzuercher@MacBook-Air-von-Adrian.local>
Date: Tue, 6 May 2025 05:33:54 +0200
Subject: [PATCH] move websocket globally and modify mainn page

---
 quasar.config.ts                              |   2 +-
 src/boot/websocket.ts                         |  21 ++
 src/components/DBMTree.vue                    |   5 +-
 src/components/LightComponent.vue             |  10 +-
 src/components/MovingHead.vue                 | 203 ++++++++++++------
 src/components/SubMenu.vue                    |   3 +-
 src/models/Set.ts                             |   2 +-
 src/pages/IndexPage.vue                       |   2 -
 .../useWebSocket.ts => services/websocket.ts} |  29 ++-
 9 files changed, 176 insertions(+), 101 deletions(-)
 create mode 100644 src/boot/websocket.ts
 rename src/{composables/useWebSocket.ts => services/websocket.ts} (85%)

diff --git a/quasar.config.ts b/quasar.config.ts
index d9de8b2..581162d 100644
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -11,7 +11,7 @@ export default defineConfig((/* ctx */) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [],
+    boot: ['websocket'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: ['app.scss'],
diff --git a/src/boot/websocket.ts b/src/boot/websocket.ts
new file mode 100644
index 0000000..99b8e9d
--- /dev/null
+++ b/src/boot/websocket.ts
@@ -0,0 +1,21 @@
+import { boot } from 'quasar/wrappers';
+import type { QVueGlobals } from 'quasar';
+import { initWebSocket } from 'src/services/websocket';
+
+export default boot(({ app }) => {
+  const $q = app.config.globalProperties.$q as QVueGlobals;
+
+  const ws = initWebSocket('ws://127.0.0.1:8100/ws?id=quasar', $q);
+  app.config.globalProperties.$socket = ws;
+  ws.connect();
+});
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $socket: {
+      connect: () => void;
+      close: () => void;
+      socket: WebSocket | null;
+    };
+  }
+}
diff --git a/src/components/DBMTree.vue b/src/components/DBMTree.vue
index ca6ba22..6b6b1f5 100644
--- a/src/components/DBMTree.vue
+++ b/src/components/DBMTree.vue
@@ -57,17 +57,14 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
 import type { TreeNode } from 'src/composables/dbmTree';
 import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
 import { openContextMenu } from 'src/composables/useContextMenu';
 import SubMenu from 'src/components/SubMenu.vue';
 import { QCard } from 'quasar';
-
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 onMounted(() => {
-  connect();
   send({
     subscribe: [
       {
diff --git a/src/components/LightComponent.vue b/src/components/LightComponent.vue
index b0b394a..52b65d4 100644
--- a/src/components/LightComponent.vue
+++ b/src/components/LightComponent.vue
@@ -101,11 +101,9 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, reactive } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
+import { watch, reactive } from 'vue';
 import type { Light } from 'src/models/Light';
-
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 const light = reactive<Light>({
   State: false,
@@ -118,10 +116,6 @@ const light = reactive<Light>({
   Purple: 0,
 });
 
-onMounted(() => {
-  connect();
-});
-
 watch(light, (newVal: Light) => {
   send({
     set: [
diff --git a/src/components/MovingHead.vue b/src/components/MovingHead.vue
index 5402721..b2fab67 100644
--- a/src/components/MovingHead.vue
+++ b/src/components/MovingHead.vue
@@ -10,7 +10,7 @@ select
   <div class="q-pa-md">
     <q-card>
       <q-card-section class="q-mt-md q-mr-sm row items-start">
-        <div class="column justify-center q-mr-lg" style="height: 200px">
+        <div class="column justify-center q-ma-lg" style="height: 200px">
           <q-btn
             @click="light.State = !light.State"
             round
@@ -22,7 +22,7 @@ select
         <q-item-label class="text-bold">Dimmer</q-item-label>
         <q-slider
           label
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.Brightness"
@@ -34,7 +34,7 @@ select
         />
         <q-item-label class="text-bold">Red</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.Red"
@@ -47,7 +47,7 @@ select
         />
         <q-item-label class="text-bold">Green</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.Green"
@@ -60,7 +60,7 @@ select
         />
         <q-item-label class="text-bold">Blue</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.Blue"
@@ -71,9 +71,9 @@ select
           color="blue"
           style="opacity: 0.8"
         />
-        <q-item-label class="text-bold">White</q-item-label>
+        <q-item-label class="text-bold items-center">White</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.White"
@@ -86,7 +86,7 @@ select
         />
         <q-item-label class="text-bold">Zoom</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
           v-model="light.Zoom"
@@ -97,44 +97,13 @@ select
           color="black"
           style="opacity: 1"
         />
-        <q-item-label class="text-bold">Tilt</q-item-label>
-        <q-slider
-          class="q-mr-sm"
-          vertical
-          reverse
-          v-model="light.Tilt"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="black"
-          style="opacity: 1"
-        />
-        <div class="column items-center q-ml-sm">
-          <div
-            class="bg-grey-3"
-            style="
-              width: 200px;
-              height: 200px;
-              position: relative;
-              border: 1px solid #ccc;
-              border-radius: 8px;
-            "
-            @mousedown="startDrag"
-            @mousemove="onDrag"
-            @mouseup="stopDrag"
-            @mouseleave="stopDrag"
-            @touchstart="startTouch"
-            @touchmove="onTouch"
-            @touchend="stopDrag"
-            ref="pad"
-          >
-            <div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
-          </div>
-          <q-item-label class="text-bold">Pan</q-item-label>
+        <div class="row q-ma-sm">
+          <q-item-label class="text-bold">Tilt</q-item-label>
           <q-slider
-            class="q-ml-sm"
-            v-model="light.Pan"
+            class="q-mr-sm"
+            vertical
+            reverse
+            v-model="light.Tilt"
             :min="0"
             :max="100"
             :step="1"
@@ -142,6 +111,39 @@ select
             color="black"
             style="opacity: 1"
           />
+          <div class="column items-center q-ml-sm">
+            <div
+              class="bg-grey-3"
+              style="
+                width: 200px;
+                height: 200px;
+                position: relative;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+              "
+              @mousedown="startDrag"
+              @mousemove="onDrag"
+              @mouseup="stopDrag"
+              @mouseleave="stopDrag"
+              @touchstart="startTouch"
+              @touchmove="onTouch"
+              @touchend="stopDrag"
+              ref="pad"
+            >
+              <div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
+            </div>
+            <q-item-label class="text-bold">Pan</q-item-label>
+            <q-slider
+              class="q-ml-sm"
+              v-model="light.Pan"
+              :min="0"
+              :max="100"
+              :step="1"
+              label
+              color="black"
+              style="opacity: 1"
+            />
+          </div>
         </div>
       </q-card-section>
     </q-card>
@@ -149,11 +151,11 @@ select
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive, computed } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
+import { ref, watch, reactive, computed, onMounted } from 'vue';
 import type { MovingHead } from 'src/models/MovingHead';
+import { send } from 'src/services/websocket';
+import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
 
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
 const pad = ref<HTMLElement | null>(null);
 const dragging = ref(false);
 
@@ -169,10 +171,6 @@ const light = reactive<MovingHead>({
   Tilt: 50,
 });
 
-onMounted(() => {
-  connect();
-});
-
 const markerStyle = computed(() => ({
   position: 'absolute' as const,
   top: `${2 * (100 - light.Tilt)}px`,
@@ -186,6 +184,71 @@ const markerStyle = computed(() => ({
   transform: 'translate(-50%, -50%)',
 }));
 
+onMounted(() => {
+  LoadData();
+});
+
+function LoadData() {
+  send({
+    subscribe: [
+      {
+        path: 'MovingHead',
+        depth: 2,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        subs.value = response.subscribe;
+        dbmData.value = buildTree(subs.value);
+      } else {
+        console.log('Response from server:', response);
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching data:', err);
+    });
+  send({
+    get: [
+      {
+        path: 'MovingHead',
+        query: { depth: 2 },
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.get) {
+        const pathToLightKey: Record<string, keyof typeof light> = {
+          'MovingHead:Dimmer': 'Brightness',
+          'MovingHead:State': 'State',
+          'MovingHead:Red': 'Red',
+          'MovingHead:Green': 'Green',
+          'MovingHead:Blue': 'Blue',
+          'MovingHead:White': 'White',
+          'MovingHead:Zoom': 'Zoom',
+          'MovingHead:Pan': 'Pan',
+          'MovingHead:Tilt': 'Tilt',
+        };
+
+        Object.entries(pathToLightKey).forEach(([path, key]) => {
+          const sub = subs.value.find((s) => s.path === path);
+          if (sub) {
+            if (key === 'State') {
+              light[key] = Boolean(sub.value);
+            } else {
+              light[key] = Math.round((100 / 255) * Number(sub.value));
+            }
+          }
+        });
+      } else {
+        console.log('Response from server:', response);
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching data:', err);
+    });
+}
+
 function startDrag(e: MouseEvent) {
   dragging.value = true;
   updatePosition(e);
@@ -222,85 +285,89 @@ function updatePosition(e: MouseEvent | Touch) {
 
   light.Pan = Math.round((newX / rect.width) * 100);
   light.Tilt = Math.round(100 - (newY / rect.height) * 100);
-  console.log(light.Pan, light.Tilt);
 }
 
 watch(light, (newVal: MovingHead) => {
   send({
     set: [
+      {
+        // State
+        path: 'MovingHead:State',
+        value: Number(newVal.State),
+      },
       {
         // Red
-        path: 'MovingHead:001:Red',
+        path: 'MovingHead:Red',
         value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
       },
       {
         //Red fine
-        path: 'MovingHead:001:RedFine',
+        path: 'MovingHead:RedFine',
         value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
       },
       {
         // Green
-        path: 'MovingHead:001:Green',
+        path: 'MovingHead:Green',
         value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
       },
       {
         // Green fine
-        path: 'MovingHead:001:GreenFine',
+        path: 'MovingHead:GreenFine',
         value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
       },
       {
         // Blue
-        path: 'MovingHead:001:Blue',
+        path: 'MovingHead:Blue',
         value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
       },
       {
         // Blue fine
-        path: 'MovingHead:001:BlueFine',
+        path: 'MovingHead:BlueFine',
         value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
       },
       {
         // White
-        path: 'MovingHead:001:White',
+        path: 'MovingHead:White',
         value: Math.round((255 / 100) * newVal.White * Number(newVal.State)),
       },
       {
         // White fine
-        path: 'MovingHead:001:WhiteFine',
+        path: 'MovingHead:WhiteFine',
         value: Math.round((255 / 100) * newVal.White * newVal.Brightness * Number(newVal.State)),
       },
       {
         // Dimmer
-        path: 'MovingHead:001:Dimmer',
+        path: 'MovingHead:Brightness',
         value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
       },
       {
         // Dimmer fine
-        path: 'MovingHead:001:DimmerFine',
+        path: 'MovingHead:BrightnessFine',
         value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
       },
       {
         // Zoom
-        path: 'MovingHead:001:Zoom',
+        path: 'MovingHead:Zoom',
         value: Math.round((255 / 100) * newVal.Zoom),
       },
       {
         // Pan
-        path: 'MovingHead:001:Pan',
+        path: 'MovingHead:Pan',
         value: Math.round((255 / 100) * newVal.Pan),
       },
       {
         // Pan fine
-        path: 'MovingHead:001:PanFine',
+        path: 'MovingHead:PanFine',
         value: Math.round((255 / 100) * newVal.Pan),
       },
       {
         // Tilt
-        path: 'MovingHead:001:Tilt',
+        path: 'MovingHead:Tilt',
         value: Math.round((255 / 100) * newVal.Tilt),
       },
       {
         // Tilt fine
-        path: 'MovingHead:001:TiltFine',
+        path: 'MovingHead:TiltFine',
         value: Math.round((255 / 100) * newVal.Tilt),
       },
     ],
diff --git a/src/components/SubMenu.vue b/src/components/SubMenu.vue
index c1ea6f7..7e03dbd 100644
--- a/src/components/SubMenu.vue
+++ b/src/components/SubMenu.vue
@@ -13,8 +13,7 @@
 
 <script setup lang="ts">
 import { contextMenu } from 'src/composables/useContextMenu';
-import { useWebSocket } from 'src/composables/useWebSocket';
-const { send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 function handleAction(action: string) {
   console.log(`Action '${action}' on node:`, contextMenu.value.node);
diff --git a/src/models/Set.ts b/src/models/Set.ts
index 9563bab..b846bc6 100644
--- a/src/models/Set.ts
+++ b/src/models/Set.ts
@@ -1,4 +1,4 @@
-type Set = {
+export type Set = {
   path: string;
   value: number | undefined;
 };
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index ef4f8f5..d506255 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,11 +1,9 @@
 <template>
   <q-page>
-    <light-component />
     <moving-head></moving-head>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import LightComponent from 'src/components/LightComponent.vue';
 import MovingHead from 'src/components/MovingHead.vue';
 </script>
diff --git a/src/composables/useWebSocket.ts b/src/services/websocket.ts
similarity index 85%
rename from src/composables/useWebSocket.ts
rename to src/services/websocket.ts
index de2ca4d..79c49a7 100644
--- a/src/composables/useWebSocket.ts
+++ b/src/services/websocket.ts
@@ -1,18 +1,16 @@
 import type { Response } from 'src/models/Response';
 import type { Publish } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
+import type { QVueGlobals } from 'quasar';
 import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
-import { onBeforeUnmount, ref } from 'vue';
-import { useQuasar } from 'quasar';
+import { ref } from 'vue';
 
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
 
-let socket: WebSocket | null = null;
+export let socket: WebSocket | null = null;
 const isConnected = ref(false);
 
-export function useWebSocket(url: string) {
-  const $q = useQuasar();
-
+export function initWebSocket(url: string, $q?: QVueGlobals) {
   const connect = () => {
     socket = new WebSocket(url);
 
@@ -22,22 +20,24 @@ export function useWebSocket(url: string) {
     };
     socket.onclose = () => {
       isConnected.value = false;
-      $q.notify({
+      console.log('WebSocket disconnected');
+      $q?.notify({
         message: 'WebSocket disconnected',
         color: 'orange',
         position: 'bottom-right',
         icon: 'warning',
-        timeout: 5000,
+        timeout: 10000,
       });
     };
     socket.onerror = (err) => {
+      console.log(`WebSocket error: ${err.type}`);
       isConnected.value = false;
-      $q.notify({
+      $q?.notify({
         message: `WebSocket error: ${err.type}`,
         color: 'red',
         position: 'bottom-right',
         icon: 'error',
-        timeout: 5000,
+        timeout: 10000,
       });
     };
     socket.onmessage = (event) => {
@@ -67,13 +67,12 @@ export function useWebSocket(url: string) {
     }
   };
 
-  onBeforeUnmount(() => {
-    close();
-  });
+  // onBeforeUnmount(() => {
+  //   close();
+  // });
 
   return {
     connect,
-    send,
     close,
     socket,
   };
@@ -102,7 +101,7 @@ function waitForSocketConnection(): Promise<void> {
   });
 }
 
-function send(data: Request): Promise<Response | undefined> {
+export function send(data: Request): Promise<Response | undefined> {
   const id = generateId();
   const payload = { ...data, id };