add new websocket http rest and notify components

2025-05-28 21:54:43 +02:00
parent 491ca72140
commit d7565ed09c
10 changed files with 217 additions and 42 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
  "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "lightcontrol",
-      "version": "0.0.1",
+      "version": "0.0.5",
      "hasInstallScript": true,
      "dependencies": {
        "@quasar/extras": "^1.16.4",
+        "axios": "^1.9.0",
        "quasar": "^2.16.0",
        "vue": "^3.4.18",
        "vue-router": "^4.0.12"
@@ -2266,6 +2267,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.21",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -2304,6 +2311,17 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/b4a": {
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -2571,7 +2589,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -2839,6 +2856,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -3125,6 +3154,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -3206,7 +3244,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.1",
@@ -3284,7 +3321,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3294,7 +3330,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3304,7 +3339,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0"
@@ -3313,6 +3347,21 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.25.3",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.3.tgz",
@@ -4045,6 +4094,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/foreground-child": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -4062,6 +4131,21 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4130,7 +4214,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@@ -4150,7 +4233,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.2",
@@ -4175,7 +4257,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "dunder-proto": "^1.0.1",
@@ -4236,7 +4317,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4273,7 +4353,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4282,11 +4361,25 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/hasown": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "function-bind": "^1.1.2"
@@ -4890,7 +4983,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4977,7 +5069,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "mime-db": "1.52.0"
@@ -4990,7 +5081,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.6"
@@ -5620,6 +5710,12 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.4",
  "description": "A Quasar Project",
  "productName": "Light Control",
  "author": "A. Zuercher",
@@ -16,28 +16,29 @@
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
+    "axios": "^1.9.0",
    "quasar": "^2.16.0",
    "vue": "^3.4.18",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@types/node": "^20.5.9",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.4.0",
+    "autoprefixer": "^10.4.2",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "globals": "^15.12.0",
-    "vue-tsc": "^2.0.29",
-    "@vue/eslint-config-typescript": "^14.4.0",
-    "vite-plugin-checker": "^0.9.0",
-    "@vue/eslint-config-prettier": "^10.1.0",
    "prettier": "^3.3.3",
-    "@types/node": "^20.5.9",
-    "@quasar/app-vite": "^2.1.0",
-    "autoprefixer": "^10.4.2",
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.3",
+    "vite-plugin-checker": "^0.9.0",
+    "vue-tsc": "^2.0.29"
  },
  "engines": {
    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
-}
+}
--- 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: ['websocket'],
+    boot: ['websocket', 'axios'],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
    css: ['app.scss'],
@@ -35,6 +35,7 @@ export default defineConfig((/* ctx */) => {
      target: {
        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
        node: 'node20',
+        publicPath: '/',
      },

      typescript: {
@@ -98,7 +99,7 @@ export default defineConfig((/* ctx */) => {
      // directives: [],

      // Quasar plugins
-      plugins: ['Notify'],
+      plugins: ['Notify', 'Dialog'],
    },

    // animations: 'all', // --- includes all animations
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -0,0 +1,21 @@
+import { boot } from 'quasar/wrappers';
+import axios from 'axios';
+
+const host = window.location.hostname;
+const port = 8100;
+const baseURL = `http://${host}:${port}`;
+
+const api = axios.create({
+  baseURL: baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios;
+  app.config.globalProperties.$api = api;
+});
+
+export { axios, api };
--- a/src/composables/notify.ts
+++ b/src/composables/notify.ts
@@ -0,0 +1,39 @@
+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 = 'orange';
+      icon = 'error';
+      break;
+  }
+
+  if (response) {
+    const message = typeof response === 'string' ? response : (response.message ?? '');
+    if (message === '') {
+      return;
+    }
+    color = typeof response === 'string' ? response : response?.error ? 'red' : color;
+    icon = typeof response === 'string' ? response : response?.error ? 'error' : icon;
+    $q?.notify({
+      message: message,
+      color: color,
+      position: 'bottom-right',
+      icon: icon,
+      timeout: timeout,
+    });
+  }
+}
--- a/src/models/Get.ts
+++ b/src/models/Get.ts
@@ -9,6 +9,7 @@ type Get = {
  rights?: string;
  value?: undefined;
  query?: Query;
+  hasChild?: boolean;
 };

 export type Gets = Get[];
--- a/src/models/Response.ts
+++ b/src/models/Response.ts
@@ -9,4 +9,6 @@ export type Response = {
  subscribe?: Subs;
  unsubscribe?: Subs;
  publish?: Pubs;
+  error?: boolean;
+  message?: string;
 };
--- a/src/models/Set.ts
+++ b/src/models/Set.ts
@@ -1,6 +1,9 @@
 export type Set = {
+  uuid?: string | undefined;
  path: string;
+  type?: string;
  value: number | boolean | undefined;
+  create?: boolean;
 };

 export type Sets = Set[];
--- a/src/models/Subscribe.ts
+++ b/src/models/Subscribe.ts
@@ -3,6 +3,7 @@ export type Subscribe = {
  path?: string | undefined;
  depth?: number;
  value?: string | number | boolean | undefined;
+  hasChild?: boolean;
 };

 export type Subs = Subscribe[];
--- a/src/services/websocket.ts
+++ b/src/services/websocket.ts
@@ -4,11 +4,13 @@ import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
 import {
  getAllSubscriptions,
-  getSubscriptionsByPath,
  buildTree,
  dbmData,
-} from 'src/composables/dbmTree';
+  getSubscriptionsByUuid,
+} from 'src/composables/dbm/dbmTree';
 import { ref, reactive } from 'vue';
+import type { Subs } from 'src/models/Subscribe';
+import type { Sets } from 'src/models/Set';

 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
 export const lastKnownValues = reactive(new Map<string, string>());
@@ -60,22 +62,22 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
        let changed = false;

        (message.publish as Publish[]).forEach((pub) => {
-          const path = pub.path;
+          const uuid = pub.uuid;
          const value = pub.value ?? '';

-          if (path === undefined) {
+          if (uuid === undefined) {
            return;
          }

-          const oldValue = lastKnownValues.get(path);
+          const oldValue = lastKnownValues.get(String(uuid));
          if (oldValue !== value) {
-            lastKnownValues.set(path, value); // this is now reactive
+            lastKnownValues.set(uuid, value); // this is now reactive

-            const existing = getSubscriptionsByPath(path);
+            const existing = getSubscriptionsByUuid(pub.uuid);
            if (existing) {
              existing.value = value;
            } else {
-              getAllSubscriptions().push({ path, value, uuid: pub.uuid });
+              getAllSubscriptions()?.push({ value, uuid: uuid });
            }

            changed = true;
@@ -125,8 +127,20 @@ function waitForSocketConnection(): Promise<void> {
  });
 }

-export function send(data: Request): Promise<Response | undefined> {
-  const id = generateId();
+export function subscribe(data: Subs): Promise<Response | undefined> {
+  return send({ subscribe: data });
+}
+
+export function unsubscribe(data: Subs): Promise<Response | undefined> {
+  return send({ unsubscribe: data });
+}
+
+export function setValues(data: Sets): Promise<Response | undefined> {
+  return send({ set: data });
+}
+
+function send(data: Request): Promise<Response | undefined> {
+  const id = Math.random().toString(36).substring(2, 9); // simple unique ID;
  const payload = { ...data, id };

  return new Promise((resolve) => {
@@ -142,7 +156,3 @@ export function send(data: Request): Promise<Response | undefined> {
      });
  });
 }
-
-function generateId(): string {
-  return Math.random().toString(36).substring(2, 9); // simple unique ID
-}