increment app version

bug fix of file name

.github/workflows/build.yml

@@ -0,0 +1,71 @@
+name: Build Quasar SPA and Go Backend for lightController
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        goos: [linux, windows]
+        goarch: [amd64, arm, arm64]
+        exclude:
+          - goos: windows
+            goarch: arm
+          - goos: windows
+            goarch: arm64
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set ip Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependecies
+        run: npm install
+
+      - name: Install Quasar CLI
+        run: npm install -g @quasar/cli
+
+      - name: Build Quasar SPA
+        run: quasar build
+
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.24.0'
+          cache-dependency-path: backend/go.sum
+
+      - name: Set up Git credentials for private modules
+        run: |
+          git config --global url."https://oauth2:${{ secrets.GH_PAT }}@github.com".insteadOf "https://github.com"
+        env:
+          GH_PAT_FOR_MODULES: ${{ secrets.GH_PAT }}
+
+      - name: Go Mod Tidy & Download
+        working-directory: ./backend
+        run: go mod tidy -v
+
+      - name: Build go backend binary
+        working-directory: ./backend
+        run: |
+          if [ "${{ matrix.goos }}" == "windows" ]; then
+            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 -ldflags="-s -w" -trimpath -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
+          fi
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightcontroller-${{ matrix.goos }}-${{ matrix.goarch }}
+          path: |
+            ./dist/spa
+            server-${{ matrix.goos }}-${{ matrix.goarch }}${{ (matrix.goos == 'windows' && '.exe') || '' }}

.gitignore

@@ -14,6 +14,7 @@ node_modules
 /src-cordova/www
 
 # Capacitor related directories and files
+/src-capacitor
 /src-capacitor/www
 /src-capacitor/node_modules
 
@@ -28,6 +29,16 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+*.scene
 
 # local .env files
 .env.local*
+
+# local .db files
+*.db
+
+# local .log files
+*.log
+
+# golang quasar websever executable
+backend/server-linux-arm64

backend/dbRequest/dbRequest.go

@@ -0,0 +1,35 @@
+package dbRequest
+
+import (
+	"fmt"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+var DBCreate string = `CREATE TABLE IF NOT EXISTS users (
+						id INTEGER PRIMARY KEY AUTOINCREMENT,
+						username TEXT NOT NULL,
+						password TEXT NOT NULL
+						);`
+
+var DBNewUser string = `INSERT INTO users (username, password) VALUES (?, ?)`
+var DBQueryPassword string = `SELECT password FROM users WHERE username = ?`
+var DBUserLookup string = `SELECT EXISTS(SELECT 1 FROM users WHERE username = ?)`
+var DBRemoveUser string = `DELETE FROM users WHERE username = $1`
+
+func CheckDBError(c *gin.Context, username string, err error) bool {
+	if err != nil {
+		if err.Error() == "sql: no rows in result set" {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": fmt.Sprintf("no user '%s' found", username),
+			})
+			return true
+		}
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return true
+	}
+	return false
+}

backend/go.mod

@@ -0,0 +1,53 @@
+module backend
+
+go 1.24.0
+
+toolchain go1.24.3
+
+require (
+	github.com/gin-contrib/cors v1.7.5
+	github.com/gin-gonic/gin v1.10.0
+	github.com/golang-jwt/jwt/v5 v5.2.2
+	github.com/google/uuid v1.6.0
+	github.com/tecamino/tecamino-dbm v0.0.10
+	github.com/tecamino/tecamino-logger v0.2.0
+	golang.org/x/crypto v0.36.0
+	modernc.org/sqlite v1.37.1
+)
+
+require (
+	github.com/bytedance/sonic v1.13.2 // indirect
+	github.com/bytedance/sonic/loader v0.2.4 // indirect
+	github.com/cloudwego/base64x v0.1.5 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
+	github.com/gin-contrib/sse v1.0.0 // indirect
+	github.com/go-playground/locales v0.14.1 // indirect
+	github.com/go-playground/universal-translator v0.18.1 // indirect
+	github.com/go-playground/validator/v10 v10.26.0 // indirect
+	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/json-iterator/go v1.1.12 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.10 // indirect
+	github.com/leodido/go-urn v1.4.0 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
+	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/ncruces/go-strftime v0.1.9 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
+	github.com/ugorji/go/codec v1.2.12 // indirect
+	go.uber.org/multierr v1.10.0 // indirect
+	go.uber.org/zap v1.27.0 // indirect
+	golang.org/x/arch v0.15.0 // indirect
+	golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0 // indirect
+	golang.org/x/net v0.38.0 // indirect
+	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/text v0.23.0 // indirect
+	google.golang.org/protobuf v1.36.6 // indirect
+	gopkg.in/natefinch/lumberjack.v2 v2.2.1 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+	modernc.org/libc v1.65.7 // indirect
+	modernc.org/mathutil v1.7.1 // indirect
+	modernc.org/memory v1.11.0 // indirect
+)

backend/go.sum

@@ -0,0 +1,149 @@
+github.com/bytedance/sonic v1.13.2 h1:8/H1FempDZqC4VqjptGo14QQlJx8VdZJegxs6wwfqpQ=
+github.com/bytedance/sonic v1.13.2/go.mod h1:o68xyaF9u2gvVBuGHPlUVCy+ZfmNNO5ETf1+KgkJhz4=
+github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.4 h1:ZWCw4stuXUsn1/+zQDqeE7JKP+QO47tz7QCNan80NzY=
+github.com/bytedance/sonic/loader v0.2.4/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
+github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
+github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
+github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/gin-contrib/cors v1.7.5 h1:cXC9SmofOrRg0w9PigwGlHG3ztswH6bqq4vJVXnvYMk=
+github.com/gin-contrib/cors v1.7.5/go.mod h1:4q3yi7xBEDDWKapjT2o1V7mScKDDr8k+jZ0fSquGoy0=
+github.com/gin-contrib/sse v1.0.0 h1:y3bT1mUWUxDpW4JLQg/HnTqV4rozuW4tC9eFKTxYI9E=
+github.com/gin-contrib/sse v1.0.0/go.mod h1:zNuFdwarAygJBht0NTKiSi3jRf6RbqeILZ9Sp6Slhe0=
+github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
+github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
+github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
+github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
+github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
+github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
+github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
+github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
+github.com/go-playground/validator/v10 v10.26.0 h1:SP05Nqhjcvz81uJaRfEV0YBSSSGMc/iMaVtFbr3Sw2k=
+github.com/go-playground/validator/v10 v10.26.0/go.mod h1:I5QpIEbmr8On7W0TktmJAumgzX4CA1XNl4ZmDuVHKKo=
+github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
+github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
+github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e h1:ijClszYn+mADRFY17kjQEVQ1XRhq2/JR1M3sGqeJoxs=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
+github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
+github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
+github.com/klauspost/cpuid/v2 v2.2.10 h1:tBs3QSyvjDyFTq3uoc/9xFpCuOsJQFNPiAhYdw2skhE=
+github.com/klauspost/cpuid/v2 v2.2.10/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
+github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
+github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
+github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
+github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
+github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
+github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tecamino/tecamino-dbm v0.0.10 h1:+6OTl7yTsqLuYqE8QVB8ski3x0seI5yBFLnuHdVz99k=
+github.com/tecamino/tecamino-dbm v0.0.10/go.mod h1:8YYOr/jQ9mGVmmNj2NE8HajDvlJAVY3iGOZNfMjd8kA=
+github.com/tecamino/tecamino-logger v0.2.0 h1:NPH/Gg9qRhmVoW8b39i1eXu/LEftHc74nyISpcRG+XU=
+github.com/tecamino/tecamino-logger v0.2.0/go.mod h1:0M1E9Uei/qw3e3WA1x3lBo1eP3H5oeYE7GjYrMahnj8=
+github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
+github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
+github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
+github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
+go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
+go.uber.org/multierr v1.10.0 h1:S0h4aNzvfcFsC3dRF1jLoaov7oRaKqRGC/pUEJ2yvPQ=
+go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
+go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
+go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
+golang.org/x/arch v0.15.0 h1:QtOrQd0bTUnhNVNndMpLHNWrDmYzZ2KDqSrEymqInZw=
+golang.org/x/arch v0.15.0/go.mod h1:JmwW7aLIoRUKgaTzhkiEFxvcEiQGyOg9BMonBJUS7EE=
+golang.org/x/crypto v0.36.0 h1:AnAEvhDddvBdpY+uR+MyHmuZzzNqXSe/GvuDeob5L34=
+golang.org/x/crypto v0.36.0/go.mod h1:Y4J0ReaxCR1IMaabaSMugxJES1EpwhBHhv2bDHklZvc=
+golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0 h1:R84qjqJb5nVJMxqWYb3np9L5ZsaDtB+a39EqjV0JSUM=
+golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0/go.mod h1:S9Xr4PYopiDyqSyp5NjCrhFrqg6A5zA2E/iPHPhqnS8=
+golang.org/x/mod v0.24.0 h1:ZfthKaKaT4NrhGVZHO1/WDTwGES4De8KtWO0SIbNJMU=
+golang.org/x/mod v0.24.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
+golang.org/x/net v0.38.0 h1:vRMAPTMaeGqVhG5QyLJHqNDwecKTomGeqbnfZyKlBI8=
+golang.org/x/net v0.38.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
+golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
+golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
+golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
+golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
+golang.org/x/tools v0.33.0 h1:4qz2S3zmRxbGIhDIAgjxvFutSvH5EfnsYrRBj0UI0bc=
+golang.org/x/tools v0.33.0/go.mod h1:CIJMaWEY88juyUfo7UbgPqbC8rU2OqfAV1h2Qp0oMYI=
+google.golang.org/protobuf v1.36.6 h1:z1NpPI8ku2WgiWnf+t9wTPsn6eP1L7ksHUlkfLvd9xY=
+google.golang.org/protobuf v1.36.6/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
+gopkg.in/natefinch/lumberjack.v2 v2.2.1 h1:bBRl1b0OH9s/DuPhuXpNl+VtCaJXFZ5/uEFST95x9zc=
+gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYskCTPBJVb9jqSc=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+modernc.org/cc/v4 v4.26.1 h1:+X5NtzVBn0KgsBCBe+xkDC7twLb/jNVj9FPgiwSQO3s=
+modernc.org/cc/v4 v4.26.1/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
+modernc.org/ccgo/v4 v4.28.0 h1:rjznn6WWehKq7dG4JtLRKxb52Ecv8OUGah8+Z/SfpNU=
+modernc.org/ccgo/v4 v4.28.0/go.mod h1:JygV3+9AV6SmPhDasu4JgquwU81XAKLd3OKTUDNOiKE=
+modernc.org/fileutil v1.3.1 h1:8vq5fe7jdtEvoCf3Zf9Nm0Q05sH6kGx0Op2CPx1wTC8=
+modernc.org/fileutil v1.3.1/go.mod h1:HxmghZSZVAz/LXcMNwZPA/DRrQZEVP9VX0V4LQGQFOc=
+modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
+modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
+modernc.org/libc v1.65.7 h1:Ia9Z4yzZtWNtUIuiPuQ7Qf7kxYrxP1/jeHZzG8bFu00=
+modernc.org/libc v1.65.7/go.mod h1:011EQibzzio/VX3ygj1qGFt5kMjP0lHb0qCW5/D/pQU=
+modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
+modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
+modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
+modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
+modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
+modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
+modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
+modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
+modernc.org/sqlite v1.37.1 h1:EgHJK/FPoqC+q2YBXg7fUmES37pCHFc97sI7zSayBEs=
+modernc.org/sqlite v1.37.1/go.mod h1:XwdRtsE1MpiBcL54+MbKcaDvcuej+IYSMfLN6gSKV8g=
+modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
+modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=

backend/login/login.go

@@ -0,0 +1,202 @@
+package login
+
+import (
+	"backend/dbRequest"
+	"backend/models"
+	"backend/utils"
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/golang-jwt/jwt/v5"
+	_ "modernc.org/sqlite"
+)
+
+func (lm *LoginManager) AddUser(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	user := models.User{}
+	err = json.Unmarshal(body, &user)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	if !user.IsValid() {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": "user empty",
+		})
+		return
+	}
+
+	db, err := sql.Open(lm.dbType, lm.dbFile)
+	if dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+	defer db.Close()
+
+	var exists bool
+
+	if err := db.QueryRow(dbRequest.DBUserLookup, user.Name).Scan(&exists); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	if exists {
+		c.JSON(http.StatusOK, gin.H{
+			"error": fmt.Sprintf("user '%s' exists already", user.Name),
+		})
+		return
+	}
+
+	hash, err := utils.HashPassword(user.Password)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+	if _, err := db.Exec(dbRequest.DBNewUser, user.Name, hash); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("user '%s' successfully added", user.Name),
+	})
+}
+
+func (lm *LoginManager) RemoveUser(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	user := models.User{}
+	err = json.Unmarshal(body, &user)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	if !user.IsValid() {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": "user empty",
+		})
+		return
+	}
+
+	db, err := sql.Open(lm.dbType, lm.dbFile)
+	if dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+	defer db.Close()
+
+	var storedPassword string
+	if err := db.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&storedPassword); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	if !utils.CheckPassword(user.Password, storedPassword) {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": "wrong password",
+		})
+		return
+	}
+
+	if _, err := db.Exec(dbRequest.DBRemoveUser, user.Name); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("user '%s' successfully removed", user.Name),
+	})
+}
+
+func (lm *LoginManager) Login(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	user := models.User{}
+	err = json.Unmarshal(body, &user)
+	if err != nil {
+		fmt.Println(2)
+
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	if !user.IsValid() {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": "user empty",
+		})
+		return
+	}
+
+	db, err := sql.Open(lm.dbType, lm.dbFile)
+	if dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+	defer db.Close()
+
+	var storedPassword string
+	if err := db.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&storedPassword); dbRequest.CheckDBError(c, user.Name, err) {
+		return
+	}
+
+	if !utils.CheckPassword(user.Password, storedPassword) {
+		fmt.Println(2, user.Password)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": "wrong password",
+		})
+		return
+	}
+
+	// Create token
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"username": user.Name,
+		"exp":      time.Now().Add(time.Hour * 72).Unix(), // expires in 72h
+	})
+
+	secret, err := utils.GenerateJWTSecret(32) // 32 bytes = 256 bits
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": "error generate jwt token"})
+		return
+	}
+
+	// Sign and get the complete encoded token as a string
+	tokenString, err := token.SignedString(secret)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": "Could not generate token"})
+		return
+	}
+
+	c.JSON(http.StatusOK, models.User{
+		Name:  user.Name,
+		Token: tokenString,
+	})
+}

backend/login/manager.go

@@ -0,0 +1,49 @@
+package login
+
+import (
+	"backend/dbRequest"
+	"backend/utils"
+	"database/sql"
+	"fmt"
+	"os"
+)
+
+type LoginManager struct {
+	dbType string
+	dbFile string
+}
+
+func NewLoginManager(dir string) (*LoginManager, error) {
+	if dir == "" {
+		dir = "."
+	}
+
+	var typ string = "sqlite"
+	var file string = fmt.Sprintf("%s/user.db", dir)
+
+	if _, err := os.Stat(file); err != nil {
+		db, err := sql.Open(typ, file)
+		if err != nil {
+			return nil, err
+		}
+		defer db.Close()
+
+		_, err = db.Exec(dbRequest.DBCreate)
+		if err != nil {
+			return nil, err
+		}
+
+		hash, err := utils.HashPassword("tecamino@2025")
+		if err != nil {
+			return nil, err
+		}
+		_, err = db.Exec(dbRequest.DBNewUser, "admin", hash)
+		if err != nil {
+			return nil, err
+		}
+	}
+	return &LoginManager{
+		dbType: typ,
+		dbFile: file,
+	}, nil
+}

backend/main.go

@@ -0,0 +1,132 @@
+package main
+
+import (
+	"backend/login"
+	"backend/models"
+	secenes "backend/scenes"
+	"backend/server"
+	"backend/utils"
+	"flag"
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"time"
+
+	"github.com/gin-contrib/cors"
+	"github.com/gin-gonic/gin"
+	"github.com/tecamino/tecamino-logger/logging"
+)
+
+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")
+	port := flag.Uint("port", 9500, "server listening port")
+	debug := flag.Bool("debug", false, "log debug")
+	flag.Parse()
+
+	//change working directory only if value is given
+	if *workingDir != "." && *workingDir != "" {
+		fmt.Println(1, *workingDir)
+		os.Chdir(*workingDir)
+	}
+
+	wd, err := os.Getwd()
+	if err != nil {
+		log.Fatalf("Could not get working directory: %v", err)
+	}
+
+	folderName := filepath.Base(wd)
+	logFileName := folderName + ".log"
+
+	logger, err := logging.NewLogger(logFileName, &logging.Config{
+		MaxSize:     1,
+		MaxBackup:   3,
+		MaxAge:      28,
+		Debug:       *debug,
+		TerminalOut: true,
+	})
+	if err != nil {
+		logger.Error("main new logger", err.Error())
+		panic(err)
+	}
+
+	//new login manager
+	loginManager, err := login.NewLoginManager(".")
+	if err != nil {
+		logger.Error("main login manager", err.Error())
+		panic(err)
+	}
+
+	//new scenes handler
+	scenesHandler := secenes.NewScenesHandler("")
+
+	// new server
+	s := server.NewServer()
+
+	//get local ip
+	allowOrigins = append(allowOrigins, "http://localhost:9000", "http://localhost:9500")
+
+	localIP, err := utils.GetLocalIP()
+	if err != nil {
+		logger.Error("main", fmt.Sprintf("get local ip : %s", err.Error()))
+	} else {
+		allowOrigins = append(allowOrigins, fmt.Sprintf("http://%s:9000", localIP), fmt.Sprintf("http://%s:9500", localIP))
+	}
+
+	s.Routes.Use(cors.New(cors.Config{
+		AllowOrigins:     allowOrigins,
+		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
+		AllowHeaders:     []string{"Origin", "Content-Type"},
+		AllowCredentials: true,
+	}))
+
+	api := s.Routes.Group("/api")
+	//set routes
+	api.GET("/loadScenes", scenesHandler.LoadScenes)
+	api.POST("/login", loginManager.Login)
+	api.POST("/user/add", loginManager.AddUser)
+	api.POST("/saveScene", scenesHandler.SaveScene)
+	api.POST("/loadScene", scenesHandler.LoadScene)
+	api.DELETE("/user", loginManager.RemoveUser)
+	api.DELETE("/deleteScene", scenesHandler.DeleteScene)
+
+	// Serve static files
+	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(*spa, "assets"), true))
+	s.Routes.NoRoute(func(c *gin.Context) {
+		// Disallow fallback for /api paths
+		if strings.HasPrefix(c.Request.URL.Path, "/api") {
+			c.JSON(http.StatusNotFound, gin.H{"error": "API endpoint not found"})
+			return
+		}
+		// Try to serve file from SPA directory
+		filePath := filepath.Join(*spa, c.Request.URL.Path)
+		if _, err := os.Stat(filePath); err == nil {
+			c.File(filePath)
+			return
+		}
+		// Fallback to index.html for SPA routing
+		c.File(filepath.Join(*spa, "index.html"))
+
+	})
+
+	go func() {
+		time.Sleep(500 * time.Millisecond)
+		if err := utils.OpenBrowser(fmt.Sprintf("http://localhost:%d", *port), logger); err != nil {
+			logger.Error("main", fmt.Sprintf("starting browser error : %s", err.Error()))
+		}
+	}()
+	// start http server
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
+	if err := s.ServeHttp(*ip, *port); err != nil {
+		logger.Error("main", "error http server "+err.Error())
+	}
+}

backend/models/lightBar.go

@@ -0,0 +1,3 @@
+package models
+
+type LightBar []Value

backend/models/movingHead.go

@@ -0,0 +1,3 @@
+package models
+
+type MovingHead []Value

backend/models/scenes.go

@@ -0,0 +1,11 @@
+package models
+
+type Scenes []Scene
+
+type Scene struct {
+	Name       string  `json:"name"`
+	Desciption string  `json:"description,omitempty"`
+	MovingHead bool    `json:"movingHead"`
+	LightBar   bool    `json:"lightBar"`
+	Values     []Value `json:"values,omitempty"`
+}

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/models/user.go

@@ -0,0 +1,11 @@
+package models
+
+type User struct {
+	Name     string `json:"user"`
+	Password string `json:"password,omitempty"`
+	Token    string `json:"token,omitempty"`
+}
+
+func (u *User) IsValid() bool {
+	return u.Name != ""
+}

backend/models/value.go

@@ -0,0 +1,9 @@
+package models
+
+import "github.com/google/uuid"
+
+type Value struct {
+	Uuid  uuid.UUID `json:"uuid"`
+	Path  string    `json:"path"`
+	Value any       `json:"value"`
+}

backend/models/values.go

@@ -0,0 +1,7 @@
+package models
+
+type Values struct {
+	MovingHead *MovingHead `json:"movingHead"`
+	LightBar   *LightBar   `json:"lightBar"`
+	Value      any         `json:"value"`
+}

backend/scenes/scenes.go

@@ -0,0 +1,213 @@
+package secenes
+
+import (
+	"backend/models"
+	"backend/utils"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"path"
+	"path/filepath"
+	"sort"
+
+	"github.com/gin-gonic/gin"
+)
+
+type ScenesHandler struct {
+	dir string
+}
+
+func NewScenesHandler(dir string) *ScenesHandler {
+	if dir == "" {
+		dir = "./scenes"
+	}
+	return &ScenesHandler{
+		dir: dir,
+	}
+}
+
+func (sh *ScenesHandler) SaveScene(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	var scene models.Scene
+	err = json.Unmarshal(body, &scene)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	if _, err := os.Stat(path.Join(sh.dir)); err != nil {
+		err := os.MkdirAll(sh.dir, 0755)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": err.Error(),
+			})
+			return
+		}
+	}
+
+	f, err := os.OpenFile(path.Join(sh.dir, scene.Name+".scene"), os.O_CREATE|os.O_TRUNC|os.O_RDWR, 0644)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+	defer f.Close()
+
+	_, err = f.Write(body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("Scene '%s' saved", scene.Name),
+	})
+}
+
+func (sh *ScenesHandler) DeleteScene(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	var scene models.Scene
+	err = json.Unmarshal(body, &scene)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	err = os.Remove(path.Join(sh.dir, scene.Name+".scene"))
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": fmt.Sprintf("Scene '%s' deleted", scene.Name),
+	})
+}
+
+func (sh *ScenesHandler) LoadScenes(c *gin.Context) {
+	sceneMap := make(map[string]models.Scene)
+
+	files, err := utils.FindAllFiles("./scenes", ".scene")
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	for _, f := range files {
+		content, err := os.ReadFile(f)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": err.Error(),
+			})
+			return
+		}
+		var scene models.Scene
+		err = json.Unmarshal(content, &scene)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": err.Error(),
+			})
+			return
+		}
+		sceneMap[scene.Name] = scene
+	}
+
+	//sort scenes alphabetacally by name
+	keys := make([]string, 0, len(sceneMap))
+	for key := range sceneMap {
+		keys = append(keys, key)
+	}
+
+	// Sort keys alphabetically
+	sort.Strings(keys)
+
+	var scenes []models.Scene
+	//  Iterate over sorted keys
+	for _, key := range keys {
+		scenes = append(scenes, sceneMap[key])
+	}
+
+	c.JSON(http.StatusOK, scenes)
+}
+
+func (sh *ScenesHandler) LoadScene(c *gin.Context) {
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	var scene models.Scene
+
+	err = json.Unmarshal(body, &scene)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	files, err := utils.FindAllFiles("./scenes", ".scene")
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": err.Error(),
+		})
+		return
+	}
+
+	for _, f := range files {
+		if filepath.Base(f) != scene.Name+".scene" {
+			continue
+		}
+		content, err := os.ReadFile(f)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": err.Error(),
+			})
+			return
+		}
+
+		err = json.Unmarshal(content, &scene)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{
+				"error": err.Error(),
+			})
+			return
+		}
+		c.JSON(http.StatusOK, scene)
+		return
+	}
+
+	c.JSON(http.StatusBadRequest, gin.H{
+		"error": fmt.Errorf("scene '%s' not found", scene.Name),
+	})
+}

backend/server/server.go

@@ -0,0 +1,38 @@
+package server
+
+import (
+	"fmt"
+	"sync"
+
+	"github.com/gin-gonic/gin"
+	"github.com/tecamino/tecamino-dbm/cert"
+	"github.com/tecamino/tecamino-logger/logging"
+)
+
+// server model for database manager websocket
+type Server struct {
+	Routes *gin.Engine
+	sync.RWMutex
+	Logger *logging.Logger
+}
+
+// initalizes new dbm server
+func NewServer() *Server {
+	return &Server{
+		Routes: gin.Default(),
+	}
+}
+
+// serve dbm as http
+func (s *Server) ServeHttp(ip string, port uint) error {
+	return s.Routes.Run(fmt.Sprintf("%s:%d", ip, port))
+}
+
+// serve dbm as http
+func (s *Server) ServeHttps(port uint, cert cert.Cert) error {
+	// generate self signed tls certificate
+	if err := cert.GenerateSelfSignedCert(); err != nil {
+		return err
+	}
+	return s.Routes.RunTLS(fmt.Sprintf(":%d", port), cert.CertFile, cert.KeyFile)
+}

backend/utils/hash.go

@@ -0,0 +1,14 @@
+package utils
+
+import "golang.org/x/crypto/bcrypt"
+
+// Hash password
+func HashPassword(password string) (string, error) {
+	b, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
+	return string(b), err
+}
+
+// Check password
+func CheckPassword(password, hash string) bool {
+	return bcrypt.CompareHashAndPassword([]byte(hash), []byte(password)) == nil
+}

backend/utils/ip.go

@@ -0,0 +1,22 @@
+package utils
+
+import (
+	"fmt"
+	"net"
+)
+
+func GetLocalIP() (string, error) {
+	addrs, err := net.InterfaceAddrs()
+	if err != nil {
+		return "", err
+	}
+
+	for _, addr := range addrs {
+		if ipNet, ok := addr.(*net.IPNet); ok && !ipNet.IP.IsLoopback() {
+			if ipNet.IP.To4() != nil {
+				return ipNet.IP.String(), nil
+			}
+		}
+	}
+	return "", fmt.Errorf("no local IP address found")
+}

backend/utils/secret.go

@@ -0,0 +1,14 @@
+package utils
+
+import (
+	"crypto/rand"
+)
+
+func GenerateJWTSecret(length int) ([]byte, error) {
+	bytes := make([]byte, length)
+	_, err := rand.Read(bytes)
+	if err != nil {
+		return nil, err
+	}
+	return bytes, nil
+}

backend/utils/utils.go

@@ -0,0 +1,65 @@
+package utils
+
+import (
+	"fmt"
+	"io/fs"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"runtime"
+
+	"github.com/tecamino/tecamino-logger/logging"
+)
+
+func OpenBrowser(url string, logger *logging.Logger) error {
+	var commands [][]string
+
+	switch runtime.GOOS {
+	case "windows":
+		// Try with Chrome in kiosk mode
+		commands = [][]string{
+			{`C:\Program Files\Google\Chrome\Application\chrome.exe`, "--kiosk", url},
+			{"rundll32", "url.dll,FileProtocolHandler", url}, // fallback
+		}
+	case "darwin":
+		// macOS: open with Chrome in kiosk
+		commands = [][]string{
+			{"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "--kiosk", url},
+			{"open", url}, // fallback
+		}
+	default: // Linux
+		if os.Getenv("DISPLAY") == "" && os.Getenv("WAYLAND_DISPLAY") == "" && os.Getenv("XDG_SESSION_TYPE") != "wayland" {
+
+			return fmt.Errorf("os is running i headless mode do not start browser")
+		}
+		commands = [][]string{
+			{"chromium-browser", "--kiosk", url},
+			{"google-chrome", "--kiosk", url},
+			{"firefox", "--kiosk", url},
+			{"xdg-open", url}, // fallback
+		}
+	}
+
+	for _, cmd := range commands {
+		execCmd := exec.Command(cmd[0], cmd[1:]...)
+		if err := execCmd.Start(); err == nil {
+			return nil
+		} else {
+			logger.Error("utils.OpenBrowser", err)
+		}
+	}
+
+	return fmt.Errorf("could not open browser")
+}
+
+func FindAllFiles(rootDir, fileExtention string) (files []string, err error) {
+	err = filepath.WalkDir(rootDir, func(path string, d fs.DirEntry, err error) error {
+		if d.IsDir() {
+			return nil
+		} else if filepath.Ext(d.Name()) == fileExtention {
+			files = append(files, path)
+		}
+		return err
+	})
+	return
+}

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lightcontrol",
-      "version": "0.0.1",
+      "version": "0.0.14",
       "hasInstallScript": true,
       "dependencies": {
         "@quasar/extras": "^1.16.4",
+        "axios": "^1.10.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.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "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",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.21",
-  "description": "A Quasar Project",
+  "description": "A Tecamino App",
   "productName": "Light Control",
   "author": "A. Zuercher",
   "type": "module",
@@ -16,24 +16,25 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
+    "axios": "^1.10.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",
+    "typescript": "~5.5.3",
-    "@quasar/app-vite": "^2.1.0",
+    "vite-plugin-checker": "^0.9.0",
-    "autoprefixer": "^10.4.2",
+    "vue-tsc": "^2.0.29"
-    "typescript": "~5.5.3"
   },
   "engines": {
     "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",

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

src/assets/LOGO_CF-ICON_color.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="246px" height="246px" viewBox="0 0 246 246" style="enable-background:new 0 0 246 246;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#113A68;}
+	.st1{fill:#9E2D29;}
+	.st2{fill:#9B1515;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M166.6,210.9c-11.6,5-24.4,7.8-37.8,7.8c-52.8,0-95.6-42.8-95.6-95.6c0-2.3,0.1-4.6,0.2-6.8
+		c2.4-1.8,10.8-5.2,31.7-5.2s46.4,3.4,71.6,9.4c-13,22.2-15.9,44.7-7.8,62.2C133.6,192.6,143.9,205.2,166.6,210.9"/>
+	<path class="st0" d="M146.9,103.8C102.4,90.7,61.4,88.5,39.7,88.4c0-0.1,0.1-0.2,0.1-0.2c2.5-1.4,8.9-3.3,22.1-3.3
+		c23.7,0,55.7,5.9,86.9,15.8C148.2,101.7,147.5,102.7,146.9,103.8"/>
+	<path class="st0" d="M168.4,49.9c0.7,7.9-2.7,18.9-10.6,34.4C117.3,69.2,78.9,63.7,55.4,61.7c17.5-21,43.9-34.3,73.4-34.3
+		c7.8,0,15.5,0.9,22.8,2.7l3.8,2.5C164.2,38.3,167.8,43.1,168.4,49.9"/>
+	<path class="st0" d="M209.6,71.8c8.7,13.7,14,29.8,14.7,47c-3.9-2.6-8.2-5.3-13.1-8.3C214,95.5,212.6,82.5,209.6,71.8"/>
+	<path class="st0" d="M206.8,144.8c4.5,2.1,9,4.5,13.2,6.7c-2.2,6.9-5.1,13.5-8.7,19.6c-0.6-4-2.2-7.4-3.5-10.3
+		c-2.5-5.6-4.2-9.3-1.2-15.7C206.8,145,206.8,144.9,206.8,144.8"/>
+	<path class="st0" d="M207.2,125.1c5.4,2.9,11.3,6.2,16.6,9.2c-0.1,1.2-0.3,2.4-0.5,3.7c-5.7-3.5-11.8-7-17.2-9.9
+		C206.4,127.1,206.8,126.1,207.2,125.1"/>
+	<path class="st1" d="M185.2,205.6c41.5-36.8,4.9-39.5,15.9-63.1c-14,12.6-44,47.2-18,64.1C164.7,168.9,207.4,157.8,185.2,205.6"/>
+	<path class="st2" d="M198.1,130.8c9.6,5,24.5,13.5,33.5,20c-9.4-5.4-24.7-13-34.9-17.4c-2,3.9-4.3,7.8-7,11.8
+		c-10.3,15-36.7,44.6-12.5,61.4c-51.2-7.1-57.1-49.2-33.1-86.7c0.8-1.2,1.5-2.4,2.3-3.6c-62.2-16.2-119.6-14.7-119.8,0.3
+		c-14.3-6.8-26.2-20.1-2.1-21.8c9.6-0.7,65.2-2.4,125.1,16.2c3-4.9,5.8-9.6,8.2-13.9c-63.3-21.6-124.4-24-125.5-8.6
+		C18.4,81,7.4,67,31.6,66.7c9.9-0.1,68.5,1.5,129.1,25.3c21.2-39.5,16.4-52.7-2-64.6c21.6,1.5,57.2,37,45.6,86.1
+		c8.8,5.4,22.8,14.1,31,20.7c-8.4-5.5-22.6-13.3-31.7-17.9C202.2,121.1,200.4,125.9,198.1,130.8"/>
+	<path class="st2" d="M185.2,205.6c41.5-36.8,4.9-39.5,15.9-63.1c-14,12.6-44,47.2-18,64.1C164.7,168.9,207.4,157.8,185.2,205.6"/>
+</g>
+</svg>

src/boot/axios.ts

@@ -0,0 +1,20 @@
+import { boot } from 'quasar/wrappers';
+import axios from 'axios';
+
+const host = window.location.hostname;
+const port = 8100;
+
+const api = axios.create({
+  baseURL: `http://${host}:${port}`,
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios;
+  app.config.globalProperties.$api = api;
+});
+
+export { axios, api };

src/boot/websocket.ts

@@ -1,11 +1,12 @@
 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;
 
-  const ws = initWebSocket('ws://127.0.0.1:8100/ws?id=quasar', $q);
+  const ws = initWebSocket(window.location.hostname, 8100, $q);
+
   app.config.globalProperties.$socket = ws;
   ws.connect();
 });

src/components/DBMTree.vue

@@ -1,125 +0,0 @@
-<template>
-  <q-card>
-    <div class="row">
-      <q-card-section class="col-4">
-        <q-tree
-          class="text-blue text-bold"
-          dense
-          :nodes="dbmData"
-          node-key="key"
-          :default-expand-all="true"
-        >
-          <template v-slot:[`default-header`]="props">
-            <div class="row items-center text-blue">
-              <div
-                class="row items-center text-blue"
-                @contextmenu.prevent="openContextMenu($event, props.node)"
-              ></div>
-              <div>{{ props.node.path }}</div>
-              <q-input
-                v-if="props.node.value !== undefined"
-                v-model="props.node.value"
-                dense
-                borderless
-                class="q-ml-sm"
-              />
-            </div>
-            <q-popup-edit
-              v-if="props.node.value !== undefined"
-              v-model="props.node.value"
-              class="q-ml-xl bg-grey text-white"
-              @save="onValueEdit(props.node)"
-            >
-              <template v-if="props.node.value !== undefined" v-slot="scope">
-                <q-input
-                  dark
-                  color="white"
-                  v-model="scope.value"
-                  dense
-                  autofocus
-                  counter
-                  @keyup.enter="scope.set"
-                >
-                  <template v-slot:append>
-                    <q-icon name="edit" />
-                  </template>
-                </q-input>
-              </template>
-            </q-popup-edit>
-          </template>
-        </q-tree>
-        <sub-menu></sub-menu>
-      </q-card-section>
-      <q-card-section class="col-8 text-center"> Test </q-card-section>
-    </div>
-  </q-card>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-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';
-import { send } from 'src/services/websocket';
-
-onMounted(() => {
-  send({
-    subscribe: [
-      {
-        path: '.*',
-        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);
-    });
-});
-
-// function updateValue(uuid: string, newValue: string) {
-//   const target = subs.value.find((s) => s.uuid === uuid);
-//   if (target) {
-//     target.value = newValue;
-//     treeData.value = buildTree(subs.value);
-//   }
-// }
-
-function onValueEdit(node: TreeNode) {
-  console.log(88, node.value);
-
-  const sub = subs.value.find((s) => s.path === node.key);
-  if (sub) {
-    sub.value = node.value;
-    send({
-      set: [
-        {
-          path: sub.path ?? '',
-          value: Number(node.value),
-        },
-      ],
-    })
-      .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);
-      });
-    // Optionally: push to server or log
-  }
-}
-</script>

src/components/MovingHead.vue

@@ -1,382 +0,0 @@
-// channel description // 1 Red // 2 Red fine // 3 Green // 4 Green fine // 5 Blue // 6 Blue fine //
-7 White // 8 White fine // 9 Linear CTO ??? // 10 Macro Color ??? // 11 Strobe // 12 Dimmer // 13
-Dimer fine // 14 Pan // 15 Pan fine // 16 Tilt // 17 Tilt fine // 18 Function // 19 Reset // 20 Zoom
-// 21 Zoom rotation // 22 Shape selection // 23 Shape speed // 24 Shape fade // 25 Shape Red // 26
-Shape Green // 27 Shape Blue // 28 Shape White // 29 Shape Dimmer // 30 Background dimmer // 31
-Shape transition // 32 Shape Offset // 33 Foreground strobe // 34 Background strobe // 35 Background
-select
-
-<template>
-  <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-ma-lg" style="height: 200px">
-          <q-btn
-            @click="light.State = !light.State"
-            round
-            :color="light.State ? 'yellow' : 'blue'"
-            icon="lightbulb"
-            style="position: relative"
-          />
-        </div>
-        <q-item-label class="text-bold">Dimmer</q-item-label>
-        <q-slider
-          label
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.Brightness"
-          :min="0"
-          :max="100"
-          :step="1"
-          color="black"
-          style="opacity: 0.5"
-        />
-        <q-item-label class="text-bold">Red</q-item-label>
-        <q-slider
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.Red"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="red"
-          style="opacity: 0.8"
-        />
-        <q-item-label class="text-bold">Green</q-item-label>
-        <q-slider
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.Green"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="green"
-          style="opacity: 0.8"
-        />
-        <q-item-label class="text-bold">Blue</q-item-label>
-        <q-slider
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.Blue"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="blue"
-          style="opacity: 0.8"
-        />
-        <q-item-label class="text-bold items-center">White</q-item-label>
-        <q-slider
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.White"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="grey"
-          style="opacity: 0.3"
-        />
-        <q-item-label class="text-bold">Zoom</q-item-label>
-        <q-slider
-          class="q-ma-lg"
-          vertical
-          reverse
-          v-model="light.Zoom"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="black"
-          style="opacity: 1"
-        />
-        <div class="row q-ma-sm">
-          <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>
-            <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>
-  </div>
-</template>
-
-<script setup lang="ts">
-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 pad = ref<HTMLElement | null>(null);
-const dragging = ref(false);
-
-const light = reactive<MovingHead>({
-  State: false,
-  Brightness: 0,
-  Red: 0,
-  Green: 0,
-  Blue: 0,
-  White: 0,
-  Zoom: 0,
-  Pan: 50,
-  Tilt: 50,
-});
-
-const markerStyle = computed(() => ({
-  position: 'absolute' as const,
-  top: `${2 * (100 - light.Tilt)}px`,
-  left: `${2 * light.Pan}px`,
-  width: '12px',
-  height: '12px',
-  borderRadius: '50%',
-  background: 'red',
-  border: '2px solid white',
-  cursor: 'pointer',
-  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);
-}
-
-function onDrag(e: MouseEvent) {
-  if (!dragging.value) return;
-  updatePosition(e);
-}
-
-function stopDrag() {
-  dragging.value = false;
-}
-
-function startTouch(e: TouchEvent) {
-  const touch = e.touches[0];
-  if (!touch) return;
-  dragging.value = true;
-  updatePosition(touch);
-}
-
-function onTouch(e: TouchEvent) {
-  if (!dragging.value) return;
-  const touch = e.touches[0];
-  if (!touch) return;
-  updatePosition(touch);
-}
-
-function updatePosition(e: MouseEvent | Touch) {
-  if (!pad.value) return;
-  const rect = pad.value.getBoundingClientRect();
-  const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
-  const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
-
-  light.Pan = Math.round((newX / rect.width) * 100);
-  light.Tilt = Math.round(100 - (newY / rect.height) * 100);
-}
-
-watch(light, (newVal: MovingHead) => {
-  send({
-    set: [
-      {
-        // State
-        path: 'MovingHead:State',
-        value: Number(newVal.State),
-      },
-      {
-        // Red
-        path: 'MovingHead:Red',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        //Red fine
-        path: 'MovingHead:RedFine',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        // Green
-        path: 'MovingHead:Green',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Green fine
-        path: 'MovingHead:GreenFine',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Blue
-        path: 'MovingHead:Blue',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // Blue fine
-        path: 'MovingHead:BlueFine',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // White
-        path: 'MovingHead:White',
-        value: Math.round((255 / 100) * newVal.White * Number(newVal.State)),
-      },
-      {
-        // White fine
-        path: 'MovingHead:WhiteFine',
-        value: Math.round((255 / 100) * newVal.White * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer
-        path: 'MovingHead:Brightness',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer fine
-        path: 'MovingHead:BrightnessFine',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Zoom
-        path: 'MovingHead:Zoom',
-        value: Math.round((255 / 100) * newVal.Zoom),
-      },
-      {
-        // Pan
-        path: 'MovingHead:Pan',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Pan fine
-        path: 'MovingHead:PanFine',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Tilt
-        path: 'MovingHead:Tilt',
-        value: Math.round((255 / 100) * newVal.Tilt),
-      },
-      {
-        // Tilt fine
-        path: 'MovingHead:TiltFine',
-        value: Math.round((255 / 100) * newVal.Tilt),
-      },
-    ],
-  })
-    .then((response) => {
-      console.log('Response from server:', response);
-    })
-    .catch((err) => {
-      console.error('Error fetching data:', err);
-    });
-});
-</script>

src/components/SubMenu.vue

@@ -1,47 +0,0 @@
-<template>
-  <q-menu v-model="contextMenu.show" :offset="[contextMenu.x, contextMenu.y]" 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 clickable v-close-popup @click="handleAction('Delete')">
-        <q-item-section>Delete Datapoint</q-item-section>
-      </q-item>
-    </q-list>
-  </q-menu>
-</template>
-
-<script setup lang="ts">
-import { contextMenu } from 'src/composables/useContextMenu';
-import { send } from 'src/services/websocket';
-
-function handleAction(action: string) {
-  console.log(`Action '${action}' on node:`, contextMenu.value.node);
-  // Add your actual logic here
-  switch (action) {
-    case 'Add':
-      console.log(2);
-      send({
-        get: [
-          {
-            path: '.*',
-            query: {
-              depth: 1,
-            },
-          },
-        ],
-      })
-        .then((response) => {
-          if (response?.get) {
-            console.log(response);
-          } else {
-            console.log('Response from server:', response);
-          }
-        })
-        .catch((err) => {
-          console.error('Error fetching data:', err);
-        });
-      console.log(4);
-  }
-}
-</script>

src/components/dialog/OkDialog.vue

@@ -0,0 +1,85 @@
+<template>
+  <q-dialog v-model="internalShowDialog">
+    <q-card :style="'width:' + props.width">
+      <q-card-section
+        v-if="props.dialogLabel"
+        class="text-h6 text-center"
+        :class="'text-' + props.labelColor"
+        >{{ props.dialogLabel }}</q-card-section
+      >
+      <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
+        props.text
+      }}</q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
+        </q-btn>
+        <q-btn
+          v-if="props.buttonOkLabel"
+          flat
+          :label="props.buttonOkLabel"
+          v-close-popup
+          @click="closeDialog"
+        >
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  showDialog: {
+    type: Boolean,
+    required: true,
+  },
+  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 emit = defineEmits(['update:showDialog', 'confirmed', 'cancel']);
+const internalShowDialog = ref(props.showDialog);
+
+watch(
+  () => props.showDialog,
+  (newValue) => {
+    internalShowDialog.value = newValue;
+  },
+);
+watch(internalShowDialog, (newValue) => {
+  emit('update:showDialog', newValue);
+  if (!newValue) {
+    emit('cancel');
+  } else {
+    emit('confirmed');
+  }
+});
+
+function closeDialog() {
+  internalShowDialog.value = false;
+  emit('update:showDialog', false);
+}
+</script>

src/components/lights/DomeLight.vue

@@ -18,7 +18,7 @@
           reverse
           v-model="light.Brightness"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           color="black"
           style="opacity: 0.5"
@@ -29,7 +29,7 @@
           reverse
           v-model="light.Red"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="red"
@@ -41,7 +41,7 @@
           reverse
           v-model="light.Green"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="green"
@@ -53,7 +53,7 @@
           reverse
           v-model="light.Blue"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="blue"
@@ -65,7 +65,7 @@
           reverse
           v-model="light.White"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="grey"
@@ -77,7 +77,7 @@
           reverse
           v-model="light.Amber"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="amber"
@@ -89,21 +89,31 @@
           reverse
           v-model="light.Purple"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="purple"
           style="opacity: 0.8"
         />
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
+          <SettingDialog :settings-dialog="settings"></SettingDialog>
+        </div>
       </q-card-section>
     </q-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, reactive } from 'vue';
+import { watch, reactive, ref } from 'vue';
 import type { Light } from 'src/models/Light';
-import { send } from 'src/services/websocket';
+import { setValues } from 'src/vueLib/services/websocket';
+import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const settings = ref(false);
 
 const light = reactive<Light>({
   State: false,
@@ -117,39 +127,37 @@ const light = reactive<Light>({
 });
 
 watch(light, (newVal: Light) => {
-  send({
+  setValues([
-    set: [
+    {
-      {
+      path: 'Light:001:001',
-        path: 'Light:001:001',
+      value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+    {
-      {
+      path: 'Light:001:002',
-        path: 'Light:001:002',
+      value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+    {
-      {
+      path: 'Light:001:003',
-        path: 'Light:001:003',
+      value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+    {
-      {
+      path: 'Light:001:004',
-        path: 'Light:001:004',
+      value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+    {
-      {
+      path: 'Light:001:005',
-        path: 'Light:001:005',
+      value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+    {
-      {
+      path: 'Light:001:006',
-        path: 'Light:001:006',
+      value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
-        value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
+    },
-      },
+  ])
-    ],
-  })
     .then((response) => {
-      console.log('Response from server:', response);
+      NotifyResponse(response);
     })
     .catch((err) => {
-      console.error('Error fetching data:', err);
+      NotifyResponse(catchError(err), 'error');
     });
 });
 </script>

src/components/lights/DragPad.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="row items-start" style="height: auto; align-items: flex-start">
+    <div class="row q-ma-xs">
+      <div class="column items-center q-mr-md" :style="{ height: containerSize + 'px' }">
+        <div class="column justify-between items-center" :style="{ height: containerSize + 'px' }">
+          <q-item-label
+            @click="toggleTilt = !toggleTilt"
+            :class="[
+              'cursor-pointer',
+              'text-bold',
+              'clickable-text-effect',
+              'q-mb-none',
+              `text-black`,
+            ]"
+          >
+            {{ toggleTilt ? 'Tilt Fine' : 'Tilt' }}</q-item-label
+          >
+          <q-btn
+            :size="buttonSize"
+            round
+            color="positive"
+            icon="add_circle_outline"
+            class="q-mb-md"
+            @click="reverseTilt ? substractTilt : addTilt"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
+              reverseTilt ? substractTilt : addTilt
+            "
+          />
+          <q-slider
+            vertical
+            :reverse="!props.reverseTilt"
+            v-model="tilt"
+            :min="0"
+            :max="255"
+            :step="1"
+            label
+            class="col"
+            color="black"
+            style="opacity: 1"
+          />
+          <q-btn
+            :size="buttonSize"
+            class="q-mt-sm"
+            round
+            color="negative"
+            icon="remove_circle_outline"
+            @click="reverseTilt ? addTilt : substractTilt"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
+              reverseTilt ? addTilt : substractTilt
+            "
+          />
+        </div>
+      </div>
+      <div class="column items-center q-ml-sm">
+        <div
+          class="bg-grey-3 responsive-box"
+          style="position: relative; border: 1px solid #ccc; border-radius: 8px; touch-action: none"
+          @mousedown="startDrag"
+          @touchstart="startTouch"
+          @touchend="stopTouch"
+          ref="pad"
+        >
+          <div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
+        </div>
+        <q-item-label
+          @click="togglePan = !togglePan"
+          :class="['cursor-pointer', 'text-bold', 'clickable-text-effect', 'q-mt-lg', `text-black`]"
+          >{{ togglePan ? 'Pan Fine' : 'Pan' }}</q-item-label
+        >
+
+        <div class="q-gutter-sm row items-center full-width">
+          <q-btn
+            :size="buttonSize"
+            class="q-mr-sm"
+            round
+            color="negative"
+            icon="remove_circle_outline"
+            @click="reversePan ? addPan : substractPan"
+            v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="
+              reversePan ? addPan : substractPan
+            "
+          />
+          <q-slider
+            class="col"
+            :reverse="props.reversePan"
+            v-model="pan"
+            :min="0"
+            :max="255"
+            :step="1"
+            label
+            color="black"
+            style="opacity: 1"
+          />
+          <q-btn
+            :size="buttonSize"
+            class="q-ml-sm"
+            round
+            color="positive"
+            icon="add_circle_outline"
+            @click="reversePan ? substractPan : addPan"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="reversePan ? substractPan : addPan"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { addOne, substractOne } from 'src/utils/number-helpers';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const props = defineProps({
+  reversePan: {
+    type: Boolean,
+    default: false,
+  },
+  reverseTilt: {
+    type: Boolean,
+    default: false,
+  },
+  panPath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  panPath2: {
+    type: String,
+    default: '',
+  },
+  tiltPath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  tiltPath2: {
+    type: String,
+    default: '',
+  },
+});
+
+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(NotifyResponse, props.panPath, togglePan, props.panPath2);
+const tilt = updateValue(NotifyResponse, props.tiltPath, toggleTilt, props.tiltPath2);
+
+const scaleFactor = computed(() => containerSize.value / 255);
+// 200px → 2, 400px → 4, etc.
+const buttonSize = computed(() => (containerSize.value <= 200 ? 'sm' : 'md'));
+
+onMounted(() => {
+  const updateSize = () => {
+    const el = pad.value;
+    if (el) {
+      containerSize.value = el.offsetWidth;
+    }
+  };
+
+  window.addEventListener('resize', updateSize);
+  updateSize();
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateSize);
+  });
+});
+
+const markerStyle = computed(() => {
+  const scale = scaleFactor.value;
+  return {
+    position: 'absolute' as const,
+    top: `${scale * (props.reverseTilt ? tilt.value : 255 - tilt.value)}px`,
+    left: `${scale * (props.reversePan ? 255 - pan.value : pan.value)}px`,
+    width: '12px',
+    height: '12px',
+    borderRadius: '50%',
+    background: 'red',
+    border: '2px solid white',
+    cursor: 'pointer',
+    transform: 'translate(-50%, -50%)',
+  };
+});
+
+function startDrag(e: MouseEvent) {
+  dragging.value = true;
+  updatePosition(e);
+  window.addEventListener('mousemove', onDrag);
+  window.addEventListener('mouseup', stopDrag);
+}
+
+function stopDrag() {
+  dragging.value = false;
+  window.removeEventListener('mousemove', onDrag);
+  window.removeEventListener('mouseup', stopDrag);
+}
+
+function startTouch(e: TouchEvent) {
+  e.preventDefault();
+  const touch = e.touches[0];
+  if (!touch) return;
+  dragging.value = true;
+  updatePosition(touch);
+  window.addEventListener('touchmove', onTouch, { passive: false });
+  window.addEventListener('touchend', stopTouch);
+}
+
+function onTouch(e: TouchEvent) {
+  e.preventDefault(); // ✅ block scroll
+  if (!dragging.value) return;
+  const touch = e.touches[0];
+  if (!touch) return;
+  updatePosition(touch);
+}
+
+function onDrag(e: MouseEvent) {
+  e.preventDefault(); // optional, for extra safety
+  if (!dragging.value) return;
+  updatePosition(e);
+}
+
+function stopTouch() {
+  dragging.value = false;
+  window.removeEventListener('touchmove', onTouch);
+  window.removeEventListener('touchend', stopTouch);
+}
+
+function updatePosition(e: MouseEvent | Touch) {
+  if (!pad.value) return;
+
+  const rect = pad.value.getBoundingClientRect();
+  const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
+  const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
+
+  pan.value = props.reversePan
+    ? Math.round((1 - newX / rect.width) * 255)
+    : Math.round((newX / rect.width) * 255);
+  tilt.value = props.reverseTilt
+    ? Math.round((newY / rect.height) * 255)
+    : Math.round(255 - (newY / rect.height) * 255);
+}
+
+function addTilt() {
+  addOne(tilt, 255);
+}
+
+function substractTilt() {
+  substractOne(tilt, 0);
+}
+
+function addPan() {
+  addOne(pan, 255);
+}
+
+function substractPan() {
+  substractOne(pan, 0);
+}
+</script>
+
+<style>
+.responsive-box {
+  width: 200px;
+  height: 200px;
+}
+
+@media (min-width: 640px) {
+  .responsive-box {
+    width: 400px;
+    height: 400px;
+  }
+}
+</style>

src/components/lights/LightBarCBL.vue

@@ -0,0 +1,110 @@
+<template>
+  <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">
+          <q-btn
+            @click="changeState"
+            round
+            :color="brightness > 0 ? 'yellow' : 'blue'"
+            icon="lightbulb"
+            style="position: relative"
+          />
+        </div>
+        <LightSlider
+          mainTitle="Dimmer"
+          dbm-path="LightBar:Brightness"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Strobe"
+          dbm-path="LightBar:Strobe"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Program"
+          dbm-path="LightBar:Program"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Program Speed"
+          dbm-path="LightBar:Program:Speed"
+          :opacity="0.8"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Red"
+          dbm-path="LightBar:Red"
+          color="red"
+          :opacity="0.8"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Green"
+          dbm-path="LightBar:Green"
+          :opacity="0.8"
+          color="green"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          mainTitle="Blue"
+          dbm-path="LightBar:Blue"
+          :opacity="0.8"
+          color="blue"
+          class="q-ma-sm"
+        ></LightSlider>
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
+          <SettingDialog :settings-dialog="settings"></SettingDialog>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LightSlider from './LightSlider.vue';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { unsubscribe, subscribeToPath } from 'src/vueLib/services/websocket';
+import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
+import { removeAllSubscriptions } from 'src/vueLib/models/Subscriptions';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const settings = ref(false);
+const brightness = updateValue(NotifyResponse, 'LightBar:Brightness');
+const state = updateValue(NotifyResponse, 'LightBar:State');
+onMounted(() => {
+  subscribeToPath(NotifyResponse, 'LightBar:.*');
+});
+
+onUnmounted(() => {
+  unsubscribe([
+    {
+      path: 'LightBar',
+      depth: 0,
+    },
+  ]).catch((err) => {
+    NotifyResponse(catchError(err), 'error');
+  });
+  removeAllSubscriptions();
+});
+
+function changeState() {
+  if (brightness.value === 0) {
+    if (state.value === 0) {
+      brightness.value = 255;
+      return;
+    }
+    brightness.value = state.value;
+    return;
+  }
+  state.value = brightness.value;
+  brightness.value = 0;
+}
+</script>

src/components/lights/LightSlider.vue

@@ -0,0 +1,156 @@
+<template>
+  <div :class="'column items-center ' + props.class">
+    <q-item-label v-if="!toggleHighLow" :class="['text-bold', `text-${textColor}`]"
+      ><p v-html="mainTitle"></p>
+    </q-item-label>
+    <q-item-label
+      v-else
+      @click="toggle = !toggle"
+      :class="['cursor-pointer', 'text-bold', 'clickable-text-effect', `text-${textColor}`]"
+      ><p v-html="toggle ? secondTitle : mainTitle"></p>
+    </q-item-label>
+    <q-btn
+      size="sm"
+      class="q-mb-md"
+      round
+      color="positive"
+      icon="add_circle_outline"
+      @click="reverse ? add : substract"
+      v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? add : substract"
+    />
+    <div>
+      <q-slider
+        :vertical="vertical"
+        :reverse="reverse"
+        v-model="localValue"
+        :min="props.min"
+        :max="props.max"
+        :step="props.step"
+        :label="props.label"
+        :color="props.color"
+        :style="{ opacity: props.opacity }"
+      />
+    </div>
+    <q-btn
+      size="sm"
+      class="q-my-md"
+      round
+      color="negative"
+      icon="remove_circle_outline"
+      @click="reverse ? substract : add"
+      v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? substract : add"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { updateValue } from 'src/vueLib/dbm/dbmTree';
+import { addOne, substractOne } from 'src/utils/number-helpers';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const props = defineProps({
+  toggleHighLow: {
+    type: Boolean,
+    default: false,
+  },
+  mainTitle: {
+    type: String,
+    default: '',
+  },
+  secondTitle: {
+    type: String,
+    default: '',
+  },
+  dbmPath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  dbmPath2: {
+    type: String,
+    default: '',
+  },
+  dbmPath3: {
+    type: String,
+    default: '',
+  },
+  dbmValue3: {
+    type: Number,
+    default: 0,
+  },
+  textColor: {
+    type: String,
+    default: 'black',
+  },
+  color: {
+    type: String,
+    default: 'black',
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 255,
+  },
+  vertical: {
+    type: Boolean,
+    default: true,
+  },
+  reverse: {
+    type: Boolean,
+    default: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  label: {
+    type: Boolean,
+    default: true,
+  },
+  class: {
+    type: String,
+    default: 'q-mr-sm',
+  },
+  opacity: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const { NotifyResponse } = useNotify();
+const toggle = ref(false);
+const localValue = updateValue(
+  NotifyResponse,
+  props.dbmPath,
+  toggle,
+  props.dbmPath2,
+  props.dbmPath3,
+  props.dbmValue3,
+);
+
+function add() {
+  addOne(localValue, 255);
+}
+
+function substract() {
+  substractOne(localValue, 0);
+}
+</script>
+
+<style>
+.clickable-text-effect {
+  cursor: pointer;
+  color: #040303; /* Static text color */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+  /* Add hover effect here if you want it part of this class */
+  transition: text-shadow 0.2s ease-in-out;
+}
+
+.clickable-text-effect:hover {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+</style>

src/components/lights/MovingHead.vue

@@ -0,0 +1,180 @@
+// channel description // 1 Red // 2 Red fine // 3 Green // 4 Green fine // 5 Blue // 6 Blue fine //
+7 White // 8 White fine // 9 Linear CTO ??? // 10 Macro Color ??? // 11 Strobe // 12 Dimmer // 13
+Dimer fine // 14 Pan // 15 Pan fine // 16 Tilt // 17 Tilt fine // 18 Function // 19 Reset // 20 Zoom
+// 21 Zoom rotation // 22 Shape selection // 23 Shape speed // 24 Shape fade // 25 Shape Red // 26
+Shape Green // 27 Shape Blue // 28 Shape White // 29 Shape Dimmer // 30 Background dimmer // 31
+Shape transition // 32 Shape Offset // 33 Foreground strobe // 34 Background strobe // 35 Background
+select
+
+<template>
+  <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-ma-lg" style="height: 200px">
+          <q-btn
+            @click="changeState"
+            round
+            :color="brightness > 0 ? 'yellow' : 'blue'"
+            icon="lightbulb"
+            style="position: relative"
+          />
+        </div>
+
+        <LightSlider
+          mainTitle="Dimmer"
+          second-title="Dimmer Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Brightness"
+          dbm-path2="MovingHead:BrightnessFine"
+          dbm-path3="MovingHead:Strobe"
+          :dbm-value3="255"
+          :opacity="0.5"
+          class="q-ma-md"
+        />
+        <LightSlider
+          mainTitle="Red"
+          second-title="Red Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Red"
+          dbm-path2="MovingHead:RedFine"
+          :opacity="0.8"
+          color="red"
+          class="q-ma-md"
+        />
+        <LightSlider
+          mainTitle="Green"
+          second-title="Green Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Green"
+          dbm-path2="MovingHead:GreenFine"
+          :opacity="0.8"
+          color="green"
+          class="q-ma-md"
+        />
+        <LightSlider
+          mainTitle="Blue"
+          second-title="Blue Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Blue"
+          dbm-path2="MovingHead:BlueFine"
+          :opacity="0.8"
+          color="blue"
+          class="q-ma-md"
+        />
+        <LightSlider
+          mainTitle="White"
+          second-title="White Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:White"
+          dbm-path2="MovingHead:WhiteFine"
+          :opacity="0.3"
+          color="grey"
+          class="q-ma-md"
+        />
+        <LightSlider
+          mainTitle="Zoom"
+          dbm-path="MovingHead:Zoom"
+          :opacity="1"
+          color="black"
+          class="q-ma-md"
+        />
+        <div>
+          <DragPad
+            class="q-ma-md"
+            pan-path="MovingHead:Pan"
+            pan-path2="MovingHead:PanFine"
+            v-model:reverse-pan="settings.reversePan"
+            tilt-path="MovingHead:Tilt"
+            tilt-path2="MovingHead:TiltFine"
+            v-model:reverse-tilt="settings.reverseTilt"
+          />
+        </div>
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings.show = !settings.show" icon="settings"
+            >Settings</q-btn
+          >
+          <SettingDialog v-model:settings="settings"></SettingDialog>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LightSlider from './LightSlider.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { onBeforeUpdate, computed, onMounted, onUnmounted, ref } from 'vue';
+import { subscribeToPath, unsubscribe, setValues } from 'src/vueLib/services/websocket';
+import { LocalStorage } from 'quasar';
+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/vueLib/models/Subscriptions';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const brightness = updateBrightnessValue('MovingHead:Brightness');
+const state = updateValue(NotifyResponse, 'MovingHead:State');
+const settings = ref<Settings>({
+  show: false,
+  reversePan: false,
+  reverseTilt: false,
+  startAddress: 0,
+});
+
+onMounted(() => {
+  settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
+  settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
+  subscribeToPath(NotifyResponse, 'MovingHead:.*');
+});
+
+onBeforeUpdate(() => {
+  subscribeToPath(NotifyResponse, 'MovingHead:.*');
+});
+
+onUnmounted(() => {
+  unsubscribe([
+    {
+      path: 'MovingHead',
+      depth: 0,
+    },
+  ]).catch((err) => {
+    NotifyResponse(catchError(err), 'error');
+  });
+  removeAllSubscriptions();
+});
+
+function changeState() {
+  if (brightness.value === 0) {
+    if (state.value === 0) {
+      brightness.value = 255;
+      return;
+    }
+    brightness.value = state.value;
+    return;
+  }
+  state.value = brightness.value;
+  brightness.value = 0;
+}
+
+function updateBrightnessValue(path: string) {
+  return computed({
+    get() {
+      const sub = findSubscriptionByPath(path);
+      if (!sub) return 0;
+      if (!sub.value) return 0;
+      return Number(sub.value);
+    },
+    set(val) {
+      const setPaths = [{ path, value: val }];
+      setPaths.push({ path: `${path}Fine`, value: val });
+      setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
+
+      setValues(setPaths)
+        .then((response) => NotifyResponse(response))
+        .catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
+    },
+  });
+}
+</script>

src/components/lights/SettingDomeLight.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-dialog v-model="settingsDialog">
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Settings</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn>Normal</q-btn>
+      </q-card-section>
+      <q-card-section> </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Save" @click="saveSettings" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+const settingsDialog = defineModel<boolean>('settingsDialog', { default: false, required: true });
+
+function saveSettings() {
+  // Save logic here
+  settingsDialog.value = false;
+}
+</script>

src/components/lights/SettingMovingHead.vue

@@ -0,0 +1,58 @@
+<template>
+  <q-dialog v-model="settings.show">
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Settings</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn
+          :icon="!settings.reverseTilt ? 'swap_vert' : undefined"
+          :icon-right="settings.reverseTilt ? 'swap_vert' : undefined"
+          @click="settings.reverseTilt = !settings.reverseTilt"
+          >{{ settings.reverseTilt ? 'Reversed Tilt' : 'Normal Tilt' }}</q-btn
+        >
+      </q-card-section>
+      <q-card-section>
+        <q-btn
+          :icon="!settings.reversePan ? 'swap_vert' : undefined"
+          :icon-right="settings.reversePan ? 'swap_vert' : undefined"
+          @click="settings.reversePan = !settings.reversePan"
+          >{{ settings.reversePan ? 'Reversed Pan' : 'Normal Pan' }}</q-btn
+        >
+      </q-card-section>
+      <q-card-section>
+        <q-input
+          type="number"
+          label="Start Address"
+          v-model:model-value="settings.startAddress"
+        ></q-input>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Save" @click="saveSettings" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { LocalStorage } from 'quasar';
+import type { Settings } from 'src/models/MovingHead';
+
+const settings = defineModel<Settings>('settings', {
+  default: {
+    show: false,
+    reversePan: false,
+    reverseTilt: false,
+    startAddress: 0,
+  },
+  required: true,
+});
+
+function saveSettings() {
+  LocalStorage.set('reversePan', settings.value.reversePan);
+  LocalStorage.set('reverseTilt', settings.value.reverseTilt);
+  settings.value.show = false;
+}
+</script>

src/components/scenes/ScenesPage.vue

@@ -0,0 +1,357 @@
+<template>
+  <!-- new edit scene dialog-->
+  <DialogFrame ref="sceneDialog" 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"
+          placeholder="Name"
+          autofocus
+          :rules="[(val) => !!val || 'Field is required']"
+          @keyup.enter="saveScene"
+        />
+        <q-input
+          :readonly="dialog === 'load'"
+          dense
+          v-model="newScene.description"
+          placeholder="Description"
+          autofocus
+          @keyup.enter="saveScene"
+        />
+        <div class="q-py-md">
+          <div class="q-gutter-sm">
+            <q-checkbox v-model="newScene.movingHead" label="Moving Head" />
+            <q-checkbox v-model="newScene.lightBar" label="Light Bar" />
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat :label="dialogLabel" v-close-popup @click="saveScene()" />
+      </q-card-actions>
+    </q-card>
+  </DialogFrame>
+  <Dialog
+    dialogLabel="Duplicate Scene"
+    :text="`Scene '${newScene.name}' exists already`"
+    :show-dialog="existsAlready"
+    v-on:update:show-dialog="existsAlready = $event"
+  />
+  <q-list
+    bordered
+    v-if="scenes?.length > 0"
+    class="q-mx-auto"
+    style="max-width: 100%; max-width: 500px"
+  >
+    <q-btn
+      rounded
+      color="primary"
+      :class="['q-ma-md', 'text-bold', 'text-white']"
+      @click="openDialog('add')"
+      >Add New Scene</q-btn
+    >
+    <q-item class="row">
+      <q-item-section :class="['text-black', 'text-bold', 'col-5']">Name</q-item-section>
+      <q-item-section :class="['text-black', 'text-left', 'text-bold', 'text-left']"
+        >Description</q-item-section
+      >
+    </q-item>
+    <q-item
+      v-for="(item, index) in scenes"
+      :key="item.name"
+      bordered
+      style="border: 0.1px solid lightgray; border-radius: 5px; margin-bottom: 1px"
+    >
+      <q-item-section
+        @click="openDialog('load', item)"
+        :class="['text-black', 'text-left', 'cursor-pointer']"
+        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+        >{{ item.name }}</q-item-section
+      >
+      <q-item-section
+        @click="openDialog('load', item)"
+        :class="['text-black', 'text-left', 'cursor-pointer']"
+        left
+        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+        >{{ item.description }}</q-item-section
+      >
+      <q-item-section top side>
+        <div class="text-grey-8 q-gutter-xs">
+          <q-btn size="12px" flat dense round icon="delete" @click="removeScene(item.name)" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            round
+            icon="more_vert"
+            @click="openDialog('edit', item, index)"
+          />
+        </div>
+      </q-item-section>
+    </q-item>
+  </q-list>
+  <!-- Fallback if list is empty -->
+  <div v-else class="q-pa-md text-grey text-center">
+    <div>No scenes available</div>
+    <q-btn
+      rounded
+      color="primary"
+      :class="['q-ma-md', 'text-bold', 'text-white']"
+      @click="openDialog('add')"
+      >Add First Scene</q-btn
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import type { Scene } from 'src/models/Scene';
+import type { Set } from 'src/vueLib/models/Set';
+import axios from 'axios';
+import { api } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import Dialog from 'src/components/dialog/OkDialog.vue';
+import { setValues } from 'src/vueLib/services/websocket';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+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);
+const dialogLabel = ref('');
+const newScene = reactive<Scene>({
+  name: '',
+  movingHead: false,
+  lightBar: false,
+});
+
+const scenes = ref<Scene[]>([]);
+const host = window.location.hostname;
+const port = 9500;
+const baseURL = `http://${host}:${port}`;
+
+const quasarApi = axios.create({
+  baseURL: baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+onMounted(() => {
+  quasarApi
+    .get('/api/loadScenes')
+    .then((resp) => {
+      if (resp.data) {
+        scenes.value = resp.data;
+      }
+    })
+    .catch((err) => {
+      NotifyResponse(catchError(err), 'error');
+    });
+});
+
+function removeScene(name: string) {
+  dialog.value = '';
+  NotifyDialog('Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
+    .then((res) => {
+      if (res) {
+        scenes.value = scenes.value.filter((s) => s.name !== name);
+
+        quasarApi
+          .delete('/api/deleteScene', {
+            data: { name },
+          })
+          .then((res) => {
+            if (res.data) {
+              NotifyResponse(res.data, 'warning');
+            }
+          })
+          .catch((err) => {
+            NotifyResponse(catchError(err), 'error');
+          });
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'warning'));
+}
+
+function openDialog(dialogType: string, scene?: Scene, index?: number) {
+  switch (dialogType) {
+    case 'add':
+      dialog.value = 'add';
+      dialogLabel.value = 'Add Scene';
+      newScene.name = '';
+      newScene.movingHead = true;
+      newScene.lightBar = true;
+      break;
+    case 'edit':
+      if (!scene) return;
+      if (index === undefined) return;
+      dialog.value = 'edit';
+      dialogLabel.value = 'Update Scene';
+      editIndex.value = index;
+      Object.assign(newScene, JSON.parse(JSON.stringify(scene)));
+      break;
+    case 'load':
+      if (!scene) return;
+      dialog.value = 'load';
+      dialogLabel.value = 'Load Scene';
+      quasarApi
+        .post('/api/loadScene', scene)
+        .then((res) => {
+          if (res.data) {
+            Object.assign(newScene, JSON.parse(JSON.stringify(res.data)));
+          }
+        })
+        .catch((err) => NotifyResponse(catchError(err), 'error'));
+      break;
+  }
+  sceneDialog.value.open();
+}
+
+const saveScene = async () => {
+  const sendValues = [];
+
+  if (!newScene.name) {
+    return;
+  }
+
+  const exists = scenes.value.some(
+    (item, index) => item.name === newScene.name && index !== editIndex.value,
+  );
+
+  switch (dialog.value) {
+    case 'add':
+      if (exists) {
+        existsAlready.value = true;
+        return;
+      }
+
+      if (newScene.movingHead) {
+        sendValues.push({
+          path: 'MovingHead',
+          query: { depth: 0 },
+        });
+      }
+
+      if (newScene.lightBar) {
+        sendValues.push({
+          path: 'LightBar',
+          query: { depth: 0 },
+        });
+      }
+
+      if (sendValues.length > 0) {
+        try {
+          const res = await api.post('/json_data', { get: sendValues });
+          newScene.values = res.data.get;
+        } catch (err) {
+          NotifyResponse(err as Error, 'error');
+        }
+      } else {
+        newScene.values = [];
+      }
+
+      scenes.value = [...scenes.value, JSON.parse(JSON.stringify(newScene))];
+
+      // Sort alphabetically by scene name
+      scenes.value.sort((a, b) => a.name.localeCompare(b.name));
+
+      quasarApi
+        .post('/api/saveScene', JSON.stringify(newScene))
+        .then((res) => {
+          if (res.data) {
+            NotifyResponse(res.data);
+          }
+        })
+        .catch((err) => {
+          NotifyResponse(catchError(err), 'error');
+        });
+      scenes.value = [...scenes.value];
+      break;
+
+    case 'edit':
+      if (exists) {
+        existsAlready.value = true;
+        return;
+      }
+
+      if (newScene.movingHead) {
+        sendValues.push({
+          path: 'MovingHead',
+          query: { depth: 0 },
+        });
+      }
+
+      if (newScene.lightBar) {
+        sendValues.push({
+          path: 'LightBar',
+          query: { depth: 0 },
+        });
+      }
+
+      if (sendValues.length > 0) {
+        try {
+          const res = await api.post('/json_data', { get: sendValues });
+          newScene.values = res.data.get;
+        } catch (err) {
+          NotifyResponse(err as Error, 'error');
+        }
+      } else {
+        newScene.values = [];
+      }
+      scenes.value.splice(editIndex.value, 1, JSON.parse(JSON.stringify(newScene)));
+      scenes.value.sort((a, b) => a.name.localeCompare(b.name));
+      scenes.value = [...scenes.value];
+
+      quasarApi
+        .post('/api/saveScene', JSON.stringify(newScene))
+        .then((res) => {
+          if (res.data) {
+            NotifyResponse(res.data);
+          }
+        })
+        .catch((err) => {
+          NotifyResponse(catchError(err), 'error');
+        });
+      scenes.value = [...scenes.value];
+      break;
+
+    case 'load':
+      {
+        const setPaths = <Set[]>[];
+
+        newScene.values?.forEach((element) => {
+          if (!element.path) return;
+
+          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 });
+        });
+
+        setValues(setPaths)
+          .then((response) => {
+            NotifyResponse(response);
+          })
+          .catch((err) => {
+            NotifyResponse(`Failed to load scene ${newScene.name}`, 'warning');
+            NotifyResponse(catchError(err), 'error');
+          });
+      }
+      break;
+  }
+
+  dialog.value = '';
+};
+</script>

src/composables/dbmTree.ts

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

src/composables/useContextMenu.ts

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

src/layouts/MainLayout.vue

@@ -2,21 +2,30 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
+        <q-img
+          :src="logo"
+          alt="Logo"
+          style="width: 40px; height: 40px; background-color: var(--q-primary)"
+          class="q-mr-sm"
+        />
         <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
 
         <q-toolbar-title> Light Control </q-toolbar-title>
 
-        <div>Version 0.0.1</div>
+        <div>Version {{ version }}</div>
+        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered>
       <q-list>
-        <q-item to="/" clickable v-ripple>
+        <q-item to="/" exact clickable v-ripple @click="closeDrawer">
           <q-item-section>Home</q-item-section>
         </q-item>
-
+        <q-item to="/scenes" clickable v-ripple @click="closeDrawer">
-        <q-item to="/data" clickable v-ripple>
+          <q-item-section>Scenes</q-item-section>
+        </q-item>
+        <q-item to="/data" clickable v-ripple @click="closeDrawer">
           <q-item-section>Data</q-item-section>
         </q-item>
       </q-list>
@@ -28,11 +37,21 @@
 </template>
 
 <script setup lang="ts">
+import logo from 'src/assets/LOGO_CF-ICON_color.svg';
 import { ref } from 'vue';
+import { version } from '../..//package.json';
 
 const leftDrawerOpen = ref(false);
 
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
+
+function closeDrawer() {
+  leftDrawerOpen.value = false;
+}
+
+function refresh() {
+  window.location.reload();
+}
 </script>

src/models/MovingHead.ts

@@ -9,3 +9,10 @@ export type MovingHead = {
   Pan: number;
   Tilt: number;
 };
+
+export type Settings = {
+  show: boolean;
+  reversePan: boolean;
+  reverseTilt: boolean;
+  startAddress: number;
+};

src/models/Publish.ts

@@ -1,8 +0,0 @@
-export type Publish = {
-  event: string;
-  uuid?: string;
-  path?: string;
-  type?: string;
-  value?: undefined;
-};
-export type Pubs = Publish[];

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

@@ -0,0 +1,9 @@
+import type { Value } from '../vueLib/models/Value';
+
+export interface Scene {
+  name: string;
+  description?: string;
+  movingHead: boolean;
+  lightBar: boolean;
+  values?: Value[];
+}

src/models/Set.ts

@@ -1,6 +0,0 @@
-export type Set = {
-  path: string;
-  value: number | undefined;
-};
-
-export type Sets = Set[];

src/models/Subscribe.ts

@@ -1,8 +0,0 @@
-export type Subscribe = {
-  uuid?: string;
-  path?: string;
-  depth?: number;
-  value?: string | undefined;
-};
-
-export type Subs = Subscribe[];

src/pages/DataPage.vue

@@ -1,8 +1,20 @@
 <template>
-  <h1>Test Page</h1>
+  <q-btn class="q-ma-md" label="Save DBM" color="primary" push @click="saveDBM"></q-btn>
   <DBMTree></DBMTree>
 </template>
 
 <script setup lang="ts">
-import DBMTree from 'src/components/DBMTree.vue';
+import DBMTree from 'src/vueLib/dbm/DBMTree.vue';
+import { api } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+
+function saveDBM() {
+  api
+    .get('saveData')
+    .then((resp) => NotifyResponse(resp.data))
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
 </script>

src/pages/IndexPage.vue

@@ -1,9 +0,0 @@
-<template>
-  <q-page>
-    <moving-head></moving-head>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import MovingHead from 'src/components/MovingHead.vue';
-</script>

src/pages/MainPage.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-page>
+    <q-tabs v-model="tab">
+      <q-tab name="movingHead" label="Moving Head" />
+      <q-tab name="lightBar" label="Light Bar" />
+    </q-tabs>
+    <q-tab-panels v-model="tab" animated class="text-white">
+      <q-tab-panel name="movingHead">
+        <moving-head />
+      </q-tab-panel>
+      <q-tab-panel name="lightBar">
+        <LightBar />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import MovingHead from 'src/components/lights/MovingHead.vue';
+import LightBar from 'src/components/lights/LightBarCBL.vue';
+import { ref, onMounted, watch } from 'vue';
+const tab = ref('movingHead');
+const STORAGE_KEY = 'lastTabUsed';
+
+// Load last tab on mount
+onMounted(() => {
+  const savedTab = sessionStorage.getItem(STORAGE_KEY);
+  if (savedTab) {
+    tab.value = savedTab;
+  }
+});
+
+// Save tab on change
+watch(tab, (newVal) => {
+  sessionStorage.setItem(STORAGE_KEY, newVal);
+});
+</script>

src/router/routes.ts

@@ -5,8 +5,9 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/IndexPage.vue') },
+      { path: '', component: () => import('pages/MainPage.vue') },
       { path: '/data', component: () => import('pages/DataPage.vue') },
+      { path: '/scenes', component: () => import('components/scenes/ScenesPage.vue') },
     ],
   },
 

src/utils/number-helpers.ts

@@ -0,0 +1,50 @@
+import type { Ref } from 'vue';
+
+export function separate16BitUint(value: number): { highByte: number; lowByte: number } {
+  // Ensure the value is treated as a 16-bit unsigned integer
+  // (optional, but good for clarity and safety if 'value' might be outside 0-65535)
+  const normalizedValue = value & 0xffff; // Mask to ensure it's within 16 bits
+
+  // Extract the low byte (least significant 8 bits)
+  // This is simply the value modulo 256, or bitwise AND with 0xFF
+  const lowByte = normalizedValue & 0xff;
+
+  // Extract the high byte (most significant 8 bits)
+  // Right shift by 8 bits to move the high byte into the low byte's position,
+  // then mask with 0xFF to get just those 8 bits.
+  const highByte = (normalizedValue >> 8) & 0xff;
+
+  return { highByte, lowByte };
+}
+
+export function combineBytesTo16BitUint(highByte: number, lowByte: number): number {
+  // Ensure both bytes are within the 0-255 range for safety
+  const safeHighByte = highByte & 0xff;
+  const safeLowByte = lowByte & 0xff;
+
+  // Shift the high byte 8 bits to the left to place it in the higher position.
+  // Example: if highByte is 0xA4 (10100100), after shifting it becomes 0xA400 (1010010000000000).
+  const shiftedHighByte = safeHighByte << 8;
+
+  // Combine the shifted high byte with the low byte using a bitwise OR.
+  // Example: if shiftedHighByte is 0xA400 and lowByte is 0x78 (01111000),
+  // the result is 0xA478 (1010010001111000).
+  const combinedValue = shiftedHighByte | safeLowByte;
+
+  // Optional: Mask the result to ensure it's strictly within the 16-bit unsigned range (0 to 65535).
+  // This is good practice as JavaScript numbers are 64-bit floats, and this ensures
+  // the value wraps correctly if intermediate operations somehow exceeded 16 bits.
+  return combinedValue & 0xffff;
+}
+
+export function addOne(val: Ref<number>, limit: number) {
+  if (val.value < limit) {
+    val.value++;
+  }
+}
+
+export function substractOne(val: Ref<number>, limit: number) {
+  if (val.value > limit) {
+    val.value--;
+  }
+}

src/vueLib/buttons/DataTypes.vue

@@ -0,0 +1,103 @@
+<template>
+  <q-card>
+    <div class="text-primary q-ma-md">Datatypes *</div>
+    <div>
+      <div class="row q-gutter-sm q-ml-sm">
+        <div>
+          <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-my-xs q-px-lg q-mr-sm"
+            v-model:opt="datatype"
+            text="String"
+            hint="Text"
+          >
+          </RadioButton>
+          <RadioButton class="q-my-xs q-px-lg" v-model:opt="datatype" text="Bool" hint="On / Off">
+          </RadioButton>
+        </div>
+        <div>
+          <div class="text-grey text-bold">Numbers</div>
+          <div>
+            <RadioButton
+              class="q-my-xs q-px-lg q-mr-sm"
+              v-model:opt="datatype"
+              text="Uint8"
+              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>
+</template>
+
+<script setup lang="ts">
+import RadioButton from './RadioButton.vue';
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['update:datatype']);
+const datatype = ref('None');
+
+watch(datatype, (newVal) => emit('update:datatype', newVal));
+</script>

src/vueLib/buttons/RadioButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-btn style="border-radius: 8px" no-caps
+    ><q-radio v-model="opt" :val="props.text"></q-radio>
+    <div class="column items-start q-mx-sm">
+      <div class="text-body1 text-black">{{ props.text }}</div>
+      <div class="text-caption text-grey">{{ props.hint }}</div>
+    </div>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+
+const opt = defineModel('opt');
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  hint: {
+    type: String,
+  },
+});
+
+const localOption = ref('');
+
+const emit = defineEmits(['update:option']);
+
+watch(localOption, (val) => emit('update:option', val));
+</script>

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,135 @@
+<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?.split(':')[0] !== '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?.split(':')[0] !== '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, 'value')">
+          <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, 'drivers')">
+          <div
+            v-if="props.row.type !== 'NONE' || props.row.path?.split(':')[0] !== 'System'"
+            :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" />
+    <UpdateDriver width="400px" ref="updateDriverDialog" />
+    <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 UpdateDriver from './dialog/UpdateDriverDialog.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 updateDriverDialog = ref();
+const updateDatatype = ref();
+
+const openDialog = (sub: Subscribe, type?: string) => {
+  console.log(11, sub);
+  if (sub.path?.split(':')[0] === 'System' && sub.path !== 'DBM') return;
+  switch (type) {
+    case 'type':
+      updateDatatype.value.open(sub.uuid);
+      break;
+    case 'rename':
+      renameDialog.value.open(sub.uuid);
+      break;
+    case 'value':
+      if (sub.type === 'NONE') return;
+      updateDialog.value?.open(ref(sub), type);
+      break;
+    case 'drivers':
+      if (sub.type === 'NONE') return;
+      updateDriverDialog.value?.open(sub);
+      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,149 @@
+<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="addingForm.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"
+              >{{ addingForm.prefix }}{{ addingForm.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="addingForm.read">Read</q-checkbox>
+        <q-checkbox v-model="addingForm.write">Write</q-checkbox>
+      </div>
+      <q-input
+        :type="valueType"
+        stack-label
+        label="Value"
+        class="q-pl-md q-pr-xl"
+        filled
+        v-model="addingForm.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 { reactive, 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 addingForm = reactive({
+  path: '',
+  value: '',
+  staticPrefix: '',
+  read: true,
+  write: true,
+  prefix: 'DBM:',
+});
+const Dialog = ref();
+
+const valueType = ref<'text' | 'number'>('text');
+
+const datatype = ref('None');
+const addForm = ref();
+
+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 (addingForm.read) access = 'R';
+      if (addingForm.write) access += 'W';
+      if (access == '') access = 'R';
+
+      setRequest(addingForm.staticPrefix + addingForm.path, type, addingForm.value, access)
+        .then((respond) => {
+          if (respond) {
+            respond.forEach((set) => {
+              NotifyResponse("Datapoint '" + addingForm.prefix + set.path + "' added");
+            });
+            addRawSubscription(respond[0]);
+            UpdateTable();
+          }
+        })
+        .catch((err) => {
+          NotifyResponse(catchError(err), 'error');
+        });
+    } else {
+      if (addingForm.path === '') {
+        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]) {
+        addingForm.staticPrefix = resp[0].path ?? '';
+        if (addingForm.staticPrefix !== '') addingForm.staticPrefix += ':';
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dialog/CopyDatapoint.vue

@@ -0,0 +1,134 @@
+<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="copyData.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="copyData.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 { reactive, 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 copyData = reactive({
+  path: '',
+  copyPath: '',
+  prefix: 'DBM:',
+});
+
+const Dialog = ref();
+const copyForm = ref();
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+function onSubmit() {
+  copyForm.value.validate().then((success: undefined) => {
+    if (success) {
+      if (copyData.copyPath === copyData.path) {
+        NotifyResponse('copy path can not be the same as current path', 'error');
+        return;
+      }
+
+      const absolutePath = copyData.path.slice(copyData.prefix.length);
+      const absolutecopyPath = copyData.copyPath.slice(copyData.prefix.length);
+
+      getRequest('', absolutecopyPath, 1)
+        .then((response) => {
+          if (response?.length > 0) {
+            NotifyResponse("path '" + copyData.copyPath + "' 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(copyData.copyPath + ' copied');
+              })
+              .catch((err) => NotifyResponse(catchError(err), 'error'));
+          } else {
+            NotifyResponse(catchError(err), 'error');
+          }
+          return;
+        });
+    } else {
+      if (copyData.copyPath === '') {
+        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]) {
+        copyData.path = copyData.prefix + resp[0].path;
+        copyData.copyPath = copyData.prefix + resp[0].path;
+      }
+    })
+    .catch((err) => NotifyResponse(catchError(err), 'error'));
+}
+
+defineExpose({ open });
+</script>

src/vueLib/dbm/dialog/DriverDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <DialogFrame ref="Dialog" :width="props.width" :header-title="localDialogLabel">
+    <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 || localDialogLabel }}</q-card-section
+    >
+    <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
+      props.text
+    }}</q-card-section>
+    <q-form ref="form">
+      <q-card-section class="q-gutter-xs row q-col-gutter-xs">
+        <div>
+          <q-select
+            class="col-8"
+            filled
+            label="Driver Name"
+            type="text"
+            name="Type"
+            dense
+            :options="options"
+            :rules="[(val) => !!val || 'Name is required']"
+            v-model="driverForm.type"
+          />
+          <q-input
+            class="col-8"
+            filled
+            label="Bus"
+            type="text"
+            name="Bus"
+            dense
+            :rules="[(val) => !!val || 'Bus is required']"
+            v-model="driverForm.bus"
+          />
+          <q-input
+            v-if="driverForm.isAddress"
+            class="col-8"
+            filled
+            dense
+            label="Address"
+            type="number"
+            name="Address"
+            v-model.number="driverForm.address"
+          />
+        </div>
+        <div v-if="!driverForm.isAddress" class="q-gutter-xs row q-col-gutter-xs">
+          <q-input
+            class="col-8"
+            filled
+            dense
+            label="Subscribe"
+            type="text"
+            name="Address"
+            v-model="driverForm.subscribe"
+          />
+          <q-input
+            class="col-8"
+            filled
+            dense
+            label="Publish"
+            type="text"
+            name="Address"
+            v-model="driverForm.publish"
+          />
+        </div>
+      </q-card-section>
+    </q-form>
+    <q-card-actions class="text-primary">
+      <q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup />
+      <q-btn
+        class="q-mb-xl q-ml-lg q-px-lg"
+        v-if="props.buttonOkLabel"
+        color="primary"
+        no-caps
+        :label="props.buttonOkLabel"
+        @click="updateDriver"
+      >
+      </q-btn>
+    </q-card-actions>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import type { Driver } from '../../models/Drivers';
+import { setRequest } from 'src/vueLib/models/Request';
+import { addRawSubscriptions } from 'src/vueLib/models/Subscriptions';
+import { convertToSubscribe, type RawSubs } from 'src/vueLib/models/Subscribe';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { UpdateTable } from '../updateTable';
+import { updateDriverTable, type DriverTableRow } from 'src/vueLib/models/driverTable';
+
+const { NotifyResponse } = useNotify();
+
+const Dialog = ref();
+const options = ['ArtNetDriver', 'OSCDriver'];
+const driverForm = reactive({
+  type: 'ArtNetDriver',
+  bus: '',
+  isAddress: true,
+  address: 0,
+  subscribe: '',
+  publish: '',
+});
+
+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 localDialogLabel = ref('');
+const driver = ref<Driver>();
+let dpUuid = '';
+const form = ref();
+const address = ref();
+const topic = ref();
+
+watch(
+  () => driverForm.type,
+  (val) => {
+    driverForm.isAddress = val === options[0];
+    if (driverForm.isAddress) {
+      driverForm.subscribe = '';
+      driverForm.publish = '';
+      topic.value = undefined;
+    } else {
+      driverForm.address = -1;
+      address.value = undefined;
+    }
+  },
+);
+
+const open = (uuid: string, drvs: DriverTableRow, type: 'add' | 'edit') => {
+  switch (type) {
+    case 'add':
+      localDialogLabel.value = 'Add Driver';
+      driverForm.type = 'ArtNetDriver';
+      driverForm.isAddress = true;
+      break;
+    case 'edit':
+      localDialogLabel.value = 'Edit Driver';
+      driverForm.type = drvs.type;
+      driverForm.bus = drvs.bus;
+  }
+
+  dpUuid = uuid;
+  driver.value = drvs;
+
+  if (drvs.address) driverForm.address = drvs.address;
+  if (drvs.subscribe) driverForm.subscribe = drvs.subscribe;
+  if (drvs.publish) driverForm.publish = drvs.publish;
+
+  Dialog.value?.open();
+};
+
+function updateDriver() {
+  form.value?.validate();
+  if (!driverForm.type || !driverForm.bus) {
+    NotifyResponse('Please fill in all required fields', 'warning');
+    return;
+  }
+
+  if (driverForm.address > -1) {
+    address.value = [driverForm.address];
+  }
+  if (driverForm.subscribe !== '' || driverForm.publish !== '') {
+    topic.value = { subscribe: [driverForm.subscribe], publish: [driverForm.publish] };
+  }
+
+  setRequest('', undefined, undefined, undefined, dpUuid, {
+    type: driverForm.type,
+    buses: [
+      {
+        name: driverForm.bus,
+        address: address.value,
+        topic: topic.value,
+      },
+    ],
+  })
+    .then((resp) => {
+      addRawSubscriptions(resp as RawSubs);
+
+      resp.forEach((set) => {
+        updateDriverTable(convertToSubscribe(set));
+      });
+
+      UpdateTable();
+      Dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+}
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+.outercard {
+  border-radius: 10px;
+}
+</style>

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,145 @@
+<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="removeData.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="removeData.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 { reactive, 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 removeData = reactive({
+  path: '',
+  newPath: '',
+  prefix: 'DBM:',
+});
+
+const copyForm = ref();
+
+const open = (uuid: string) => {
+  Dialog.value?.open();
+  getDatapoint(uuid);
+};
+
+function onSubmit() {
+  copyForm.value.validate().then((success: undefined) => {
+    if (success) {
+      if (removeData.newPath === removeData.path) {
+        NotifyResponse('same name', 'warning');
+        return;
+      }
+
+      getRequest('', removeData.newPath.slice(removeData.prefix.length), 1)
+        .then((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(
+            removeData.newPath.slice(removeData.prefix.length),
+            datapoint.value.type,
+            datapoint.value.value,
+            datapoint.value.rights,
+            datapoint.value.uuid,
+            undefined,
+            true,
+          )
+            .then((res) => {
+              addRawSubscriptions(res as RawSubs);
+              console.log(80, res);
+              buildTree(convertToSubscribes(res as RawSubs));
+              UpdateTable();
+            })
+            .catch((err) => NotifyResponse(err, 'error'));
+        });
+    } else {
+      if (removeData.newPath === '') {
+        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];
+        removeData.path = removeData.prefix + resp[0].path;
+        removeData.newPath = removeData.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/UpdateDriverDialog.vue

@@ -0,0 +1,199 @@
+<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 || localDialogLabel }}</q-card-section
+    >
+    <q-card-section>
+      <q-table
+        flat
+        dense
+        virtual-scroll
+        :rows-per-page-options="[0]"
+        :rows="drivers"
+        :columns="columns"
+        row-key="type"
+      >
+        <!-- add symbol on top right of table-->
+        <template v-slot:top-right>
+          <q-btn
+            size="sm"
+            ripple
+            rounded
+            color="primary"
+            icon="add"
+            round
+            dense
+            @click="handleRow(driver, 'add')"
+          />
+        </template>
+        <template v-slot:body-cell-settings="props">
+          <q-td :props="props" class="cursor-pointer">
+            <q-btn
+              dense
+              flat
+              size="sm"
+              icon="more_vert"
+              @click="(evt) => openSubMenu(evt, props.row)"
+            ></q-btn>
+          </q-td>
+        </template>
+      </q-table>
+      <q-menu ref="contextMenuRef" context-menu>
+        <q-list>
+          <q-item>
+            <q-item-section class="cursor-pointer" @click="handleRow(driver, 'edit')">
+              Edit
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section class="text-negative cursor-pointer" @click="deleteDriver(driver)">
+              Delete
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </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"
+        v-close-popup
+      >
+      </q-btn>
+    </q-card-actions>
+  </DialogFrame>
+  <DriverDialog :button-ok-label="driverOkLabel" ref="driverDialog"></DriverDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../../dialog/DialogFrame.vue';
+import DriverDialog from './DriverDialog.vue';
+import { convertToSubscribe, type Subscribe } from '../../models/Subscribe';
+import type { Driver } from '../../models/Drivers';
+import { driverDefault } from '../../models/Drivers';
+import type { DriverTableRow } from 'src/vueLib/models/driverTable';
+import { updateDriverTable, useDriverTable } from 'src/vueLib/models/driverTable';
+import { deleteRequest } from 'src/vueLib/models/Request';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import type { Bus } from 'src/vueLib/models/Bus';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const driverDialog = ref();
+const writeValue = ref();
+const onlyRead = ref(false);
+
+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 localDialogLabel = ref('');
+const contextMenuRef = ref();
+const table = useDriverTable();
+const drivers = table.driverTable;
+const driver: Driver = { type: '' };
+const driverOkLabel = ref('');
+const columns = table.columns;
+
+const open = (sub: Subscribe) => {
+  datapoint.value = sub;
+  if (datapoint.value.rights == 'R') onlyRead.value = true;
+  table.emptyTable();
+
+  localDialogLabel.value = 'Update Drivers';
+  updateDriverTable(sub);
+
+  writeValue.value = sub.drivers;
+  Dialog.value?.open();
+};
+
+function openSubMenu(evt: Event, d: DriverTableRow) {
+  if (d) {
+    const bus: Bus = {
+      name: d.bus,
+    };
+    bus.name = d.bus;
+    if (d.address) bus.address = d.address !== undefined ? [d.address] : [];
+    if (d.subscribe || d.publish)
+      bus.topic = {
+        subscribe:
+          typeof d.subscribe === 'string' ? d.subscribe.split(',').map((s) => s.trim()) : [],
+        publish: typeof d.publish === 'string' ? d.publish.split(',').map((s) => s.trim()) : [],
+      };
+
+    driver.type = d.type;
+    driver.buses = [bus];
+  }
+  const mouseEvent = evt as MouseEvent;
+  contextMenuRef.value?.show(mouseEvent);
+}
+
+function handleRow(driver: Driver | undefined, type: 'add' | 'edit') {
+  driverOkLabel.value = 'Add';
+  switch (type) {
+    case 'add':
+      driver = driverDefault;
+      break;
+    case 'edit':
+      driverOkLabel.value = 'Update';
+      break;
+  }
+  driverDialog.value?.open(datapoint.value.uuid, driver, type);
+}
+
+function deleteDriver(driver: Driver | undefined) {
+  deleteRequest(datapoint.value.uuid, '', driver)
+    .then((resp) => {
+      resp.forEach((set) => {
+        updateDriverTable(convertToSubscribe(set));
+      });
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+}
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+.outercard {
+  border-radius: 10px;
+}
+</style>

src/vueLib/dbm/dialog/UpdateValueDialog.vue

@@ -0,0 +1,150 @@
+<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="datapoint.type !== 'BIT'">
+      <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>
+      <div class="column q-pr-xs q-ma-sm">
+        <div class="row items-center q-gutter-sm">
+          <div>current value</div>
+          <div class="row items-left">
+            <q-toggle class="readonly-toggle" left-label v-model="inputValue"></q-toggle>
+          </div>
+        </div>
+        <div class="row items-center q-gutter-lg">
+          <div>new value</div>
+          <div class="row items-left">
+            <q-toggle left-label v-model="writeValue"></q-toggle>
+          </div>
+        </div>
+      </div>
+    </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 { catchError } from 'src/vueLib/models/error';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const localDialogLabel = ref('');
+const writeValue = ref();
+const onlyRead = ref(false);
+const writeType = ref<'text' | 'number'>('text');
+const datapoint = ref();
+const inputValue = ref(datapoint?.value);
+
+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 open = (sub: Ref<Subscribe>) => {
+  datapoint.value = sub.value;
+  if (datapoint.value.rights == 'R') onlyRead.value = true;
+  localDialogLabel.value = 'Update Value';
+  if (sub.value.type === 'STR') 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;
+}
+.readonly-toggle {
+  pointer-events: none;
+  opacity: 0.7;
+}
+</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

@@ -0,0 +1,82 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    :maximized="minMaxState"
+    :full-width="minMaxState"
+    :no-focus="!minMaxState"
+    :no-refocus="!minMaxState"
+    :seamless="!minMaxState"
+  >
+    <q-card class="layout" :style="cardStyle" v-touch-pan.mouse.prevent.stop="handlePan">
+      <div :class="props.headerTitle ? 'row items-center justify-between' : ''">
+        <div v-if="headerTitle" class="q-mx-sm q-mt-xs text-left text-bold text-caption">
+          {{ 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" />
+      <div class="scrollArea"><slot /></div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+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);
+function minMax() {
+  if (minMaxState.value) {
+    minMaxIcon.value = 'fullscreen';
+  } else {
+    minMaxIcon.value = 'fullscreen_exit';
+  }
+  minMaxState.value = !minMaxState.value;
+}
+
+const props = defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const position = ref({ x: 0, y: 0 });
+
+// This makes the dialog draggable
+const handlePan = (details: { delta: { x: number; y: number } }) => {
+  position.value.x += details.delta.x;
+  position.value.y += details.delta.y;
+};
+
+const cardStyle = computed(() => ({
+  width: props.width,
+  transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+}));
+
+defineExpose({ open, 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/Bus.ts

@@ -0,0 +1,7 @@
+import type { Topic } from './Topic';
+
+export interface Bus {
+  name: string;
+  address?: number[];
+  topic?: Topic;
+}

src/vueLib/models/Drivers.ts

@@ -0,0 +1,9 @@
+import type { Bus } from './Bus';
+export interface Driver {
+  type: string;
+  buses?: Bus[];
+}
+
+export const driverDefault = <Driver>{
+  type: '',
+};

src/vueLib/models/Get.ts

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

src/vueLib/models/Pong.ts

@@ -0,0 +1,3 @@
+export interface PongMessage {
+  type: 'pong';
+}

src/vueLib/models/Publish.ts

@@ -0,0 +1,62 @@
+import type { Driver } from './Drivers';
+export type Publish = {
+  event: string;
+  uuid: string;
+  path: string;
+  type: string;
+  drivers?: Record<string, Driver>;
+  value: string | number | boolean | null;
+  hasChild: boolean;
+};
+export type Pubs = Publish[];
+
+import {
+  updateSubscriptionValue,
+  removeRawSubscriptions,
+  addRawSubscription,
+  removeRawSubscription,
+} 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;
+    }
+    if (pub.drivers) {
+      removeRawSubscription(pub as RawSubscribe);
+      addRawSubscription(pub as RawSubscribe);
+      UpdateTable();
+    }
+    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,128 @@
+import type { Driver } from './Drivers';
+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,
+  driver?: Driver,
+  rename?: boolean,
+): Promise<Sets> {
+  const payload = {
+    path: path,
+    type: type,
+    value: value,
+    rights: rights,
+    uuid: uuid,
+    driver: driver,
+    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,
+  driver?: Driver,
+  rename?: boolean,
+): Promise<Sets> {
+  let payload = {};
+  if (uuid) {
+    payload = { uuid: uuid, driver: driver, rename: rename };
+  } else if (path) {
+    payload = { path: path, driver: driver };
+  }
+  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/Response.ts

@@ -1,11 +1,14 @@
 import type { Gets } from './Get';
 import type { Sets } from './Set';
-import type { Subs } from './Subscribe';
+import type { RawSubs } from './Subscribe';
 import type { Pubs } from './Publish';
 
 export type Response = {
   get?: Gets;
   set?: Sets;
-  subscribe?: Subs;
+  subscribe?: RawSubs;
+  unsubscribe?: RawSubs;
   publish?: Pubs;
+  error?: boolean;
+  message?: string;
 };

src/vueLib/models/Set.ts

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

src/vueLib/models/Subscribe.ts

@@ -0,0 +1,55 @@
+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?: Record<string, Driver>;
+  value?: Ref<string | number | boolean | null | undefined>;
+  hasChild?: boolean;
+};
+
+export type Subs = Subscribe[];
+
+export type RawSubscribe = {
+  uuid?: string;
+  path?: string;
+  depth?: number;
+  value?: string | number | boolean | null;
+  drivers?: Record<string, Driver>;
+  rights?: string;
+  hasChild?: boolean;
+};
+
+export type RawSubs = RawSubscribe[];
+
+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).sort((a, b) => {
+    const aPath = a.path ?? '';
+    const bPath = b.path ?? '';
+    return aPath.localeCompare(bPath);
+  });
+  return subs as Subs;
+}
+
+export function convertToRaw(sub: Subscribe): RawSubscribe {
+  return {
+    ...(sub.uuid !== undefined ? { uuid: sub.uuid } : {}),
+    ...(sub.path !== undefined ? { path: sub.path } : {}),
+    ...(sub.depth !== undefined ? { depth: sub.depth } : {}),
+    ...(sub.value?.value !== undefined ? { value: sub.value.value } : {}),
+    ...(sub.hasChild !== undefined ? { hasChild: sub.hasChild } : {}),
+  };
+}

src/vueLib/models/Subscriptions.ts

@@ -0,0 +1,73 @@
+import type { Ref } from 'vue';
+import { reactive, ref } from 'vue';
+import { convertToSubscribe } from '../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>>({});
+
+export type TableSubscription = {
+  path: string;
+  value: Ref<string | number | boolean | null | undefined>;
+};
+
+export function addRawSubscription(sub: RawSubscribe | Set | undefined) {
+  if (sub === undefined) return;
+  addSubscription(convertToSubscribe(sub as RawSubscribe));
+}
+
+export function addRawSubscriptions(subs: RawSubs) {
+  subs.forEach((sub) => addSubscription(convertToSubscribe(sub)));
+}
+
+function addSubscription(sub: Subscribe) {
+  if (EMPTYUUID === sub.uuid) {
+    sub.path = 'DBM';
+  }
+  if (!sub.uuid) return;
+  Subscriptions[sub.uuid] = sub;
+}
+
+export function updateSubscription(sub: Subscribe) {
+  if (!sub.uuid) return;
+  Subscriptions[sub.uuid] = sub;
+}
+
+export function updateSubscriptionValue(
+  uuid: string,
+  value: string | number | boolean | null | undefined,
+) {
+  if (!uuid) return;
+  if (!Subscriptions[uuid]) return;
+  Subscriptions[uuid].value = ref(value);
+}
+
+export function removeRawSubscription(sub: RawSubscribe | string) {
+  removeSubscription(typeof sub === 'string' ? sub : sub.uuid);
+}
+
+export function removeRawSubscriptions(subs: RawSubs) {
+  subs.forEach((sub) => {
+    removeSubscription(sub.uuid);
+  });
+}
+
+export function removeAllSubscriptions() {
+  Object.keys(Subscriptions).forEach((key) => delete Subscriptions[key]);
+}
+
+export function removeSubscription(uuid: string | undefined) {
+  if (uuid === undefined) return;
+  if (!Subscriptions || Subscriptions[uuid] === undefined) return;
+  delete Subscriptions[uuid];
+}
+
+export function findSubscriptionByPath(path: string): Subscribe | undefined {
+  return Object.values(Subscriptions).find((sub) => sub.path === path);
+}
+
+export function findSubscriptionByUuid(uuid: string): Subscribe | undefined {
+  if (!Subscriptions[uuid]) return;
+  return Subscriptions[uuid];
+}

src/vueLib/models/Topic.ts

@@ -0,0 +1,4 @@
+export interface Topic {
+  subscribe: string[];
+  publish: string[];
+}

src/vueLib/models/Value.ts

@@ -0,0 +1,7 @@
+import type { UUID } from 'crypto';
+
+export interface Value {
+  uuid?: UUID;
+  path: string;
+  value: number | string | undefined;
+}

src/vueLib/models/driverTable.ts

@@ -0,0 +1,83 @@
+import { reactive, ref } from 'vue';
+import type { QTableColumn } from 'quasar';
+import type { Subscribe } from './Subscribe';
+
+export type DriverTableRow = {
+  type: string;
+  bus: string;
+  address?: number | undefined;
+  subscribe?: string;
+  publish?: string;
+};
+
+const driverTable = reactive<DriverTableRow[]>([]);
+const columns = ref<QTableColumn[]>([]);
+const baseColumns: QTableColumn[] = [
+  { 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' },
+  { name: 'settings', label: '', field: 'settings', align: 'center' },
+];
+
+export function updateDriverTable(sub: Subscribe) {
+  driverTable.length = 0;
+  let hasSubs = false;
+  let hasPubs = false;
+
+  if (sub.drivers)
+    Object.entries(sub.drivers).forEach(([driverName, driverData]) => {
+      driverData.buses?.forEach((bus) => {
+        hasSubs = bus.topic?.subscribe !== undefined || hasSubs;
+        hasPubs = bus.topic?.publish !== undefined || hasPubs;
+
+        const subscribeList = bus.topic?.subscribe ?? [];
+        const publishList = bus.topic?.publish ?? [];
+
+        const addresses = bus.address?.length ? bus.address : [undefined];
+
+        addresses.forEach((addr) => {
+          driverTable.push({
+            type: driverName,
+            bus: bus.name,
+            address: addr,
+            subscribe: subscribeList.join(', '),
+            publish: publishList.join(', '),
+          });
+        });
+      });
+    });
+  reloadColumns(hasSubs, hasPubs);
+}
+export function useDriverTable() {
+  function emptyTable() {
+    driverTable.length = 0;
+  }
+
+  return {
+    driverTable,
+    emptyTable,
+    columns,
+  };
+}
+
+function reloadColumns(hasSubs: boolean, hasPubs: boolean) {
+  columns.value = [...baseColumns];
+  const settingsIndex = columns?.value.findIndex((col) => col.name === 'settings');
+
+  if (hasSubs) {
+    columns.value?.splice(settingsIndex ?? -1, 0, {
+      name: 'subscribe',
+      label: 'subscribe',
+      field: 'subscribe',
+      align: 'left',
+    });
+  }
+  if (hasPubs) {
+    columns.value?.splice(settingsIndex ?? -1, 0, {
+      name: 'publish',
+      label: 'publish',
+      field: 'publish',
+      align: 'left',
+    });
+  }
+}

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,23 +1,28 @@
-import type { Response } from 'src/models/Response';
+import type { Response } from '../models/Response';
-import type { Publish } 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 { subs, buildTree, dbmData } from 'src/composables/dbmTree';
 import { ref } from 'vue';
-
+import { type Subs } from '../models/Subscribe';
+import type { Sets } from '../models/Set';
+import { addRawSubscriptions } from '../models/Subscriptions';
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
 
 export let socket: WebSocket | null = null;
+
 const isConnected = ref(false);
 
-export function initWebSocket(url: string, $q?: QVueGlobals) {
+export function initWebSocket(host: string, port: number = 8100, $q?: QVueGlobals) {
+  const randomId = Math.floor(Math.random() * 10001); // random number from 0 to 10000
+
   const connect = () => {
-    socket = new WebSocket(url);
+    socket = new WebSocket(`ws://${host}:${port}/ws?id=q${randomId}`);
 
     socket.onopen = () => {
       console.log('WebSocket connected');
       isConnected.value = true;
     };
+
     socket.onclose = () => {
       isConnected.value = false;
       console.log('WebSocket disconnected');
@@ -41,22 +46,19 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
       });
     };
     socket.onmessage = (event) => {
-      const message = JSON.parse(event.data);
+      if (typeof event.data === 'string') {
-      const id = message.id;
+        const message = JSON.parse(event.data);
 
-      if (id && pendingResponses.has(id)) {
+        const id = message.id;
-        pendingResponses.get(id)?.(message); // resolve the promise
+        if (id && pendingResponses.has(id)) {
-        pendingResponses.delete(id);
+          pendingResponses.get(id)?.(message); // resolve the promise
-      } else if (message.publish) {
+          pendingResponses.delete(id);
-        message.publish.forEach((pub: Publish) => {
+          return;
-          const target = subs.value.find((s) => s.path === pub.path);
+        }
-          if (target) {
+
-            target.value = pub.value ?? '';
+        if (message.publish) {
-            dbmData.value = buildTree(subs.value);
+          publishToSubscriptions(message.publish);
-          }
+        }
-        });
-      } else {
-        console.warn('Unmatched message:', message);
       }
     };
   };
@@ -67,10 +69,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
     }
   };
 
-  // onBeforeUnmount(() => {
-  //   close();
-  // });
-
   return {
     connect,
     close,
@@ -101,13 +99,50 @@ function waitForSocketConnection(): Promise<void> {
   });
 }
 
-export function send(data: Request): Promise<Response | undefined> {
+export function subscribeToPath(
-  const id = generateId();
+  NotifyResponse: (
+    resp: Response | string | undefined,
+    type?: 'warning' | 'error',
+    timeout?: 5000,
+  ) => void,
+  path: string,
+) {
+  subscribe([
+    {
+      path: path,
+      depth: 0,
+    },
+  ])
+    .then((response) => {
+      if (response?.subscribe) {
+        addRawSubscriptions(response.subscribe);
+      } else {
+        NotifyResponse(response);
+      }
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+}
+
+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) => {
     pendingResponses.set(id, resolve);
-
     waitForSocketConnection()
       .then(() => {
         socket?.send(JSON.stringify(payload));
@@ -119,7 +154,3 @@ export function send(data: Request): Promise<Response | undefined> {
       });
   });
 }
-
-function generateId(): string {
-  return Math.random().toString(36).substr(2, 9); // simple unique ID
-}