add workingdir for go setup and conditional executable on backend

add new step seperate uasar cli and quasar build
fix artifacts and go.mod go sum with AI
2025-05-29 11:22:07 +02:00 · 2025-05-29 10:56:28 +02:00 · 2025-05-29 10:40:13 +02:00 · 2025-05-29 10:27:05 +02:00 · 2025-05-29 10:20:14 +02:00 · 2025-05-29 10:08:46 +02:00
50 changed files with 2466 additions and 655 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -0,0 +1,81 @@
+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
+        working-directory: ./backend
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.24.0'
+
+      - 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: Restore Go module cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/go/pkg/mod
+            ~/.cache/go-build # Optional, but good for build cache
+          key: ${{ runner.os }}-${{ matrix.goos }}-${{ matrix.goarch }}-go-${{ hashFiles('backend/go.sum') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.goos }}-${{ matrix.goarch }}-go-
+
+      - 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 -o ../server-${{ matrix.goos }}-${{ matrix.goarch }}.exe main.go
+          else
+            GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
+          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') || '' }}
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,9 @@ yarn-error.log*

 # local .env files
 .env.local*
+
+# local .db files
+*.db
+
+# local .db files
+*.log
--- a/backend/backend.exe
+++ b/backend/backend.exe
--- a/backend/backend.log
+++ b/backend/backend.log
@@ -0,0 +1,84 @@
+{"level":"info","timestamp":"2025-05-16T11:06:44.126","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-16T11:06:44.144","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:07:09.600","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-16T11:07:09.639","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:07:30.646","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:11:22.786","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:14:07.524","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:15:05.782","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:18:42.471","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:20:08.703","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:21:05.334","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T11:22:23.537","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:02:20.623","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:05:45.885","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:06:26.735","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:13:05.683","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:17:21.288","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:17:47.981","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:21:30.972","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T12:22:40.192","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T13:29:28.096","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T13:55:38.216","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T13:57:06.877","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T13:58:51.985","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:06:33.530","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:10:23.607","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:12:19.664","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:14:02.375","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:22:41.131","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:23:40.824","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:24:57.025","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:27:28.217","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:27:34.492","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"error","timestamp":"2025-05-16T14:27:34.502","msg":"error http server listen tcp 0.0.0.0:8088: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:27:42.592","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"error","timestamp":"2025-05-16T14:27:42.602","msg":"error http server listen tcp 0.0.0.0:8088: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:28:06.480","msg":"http listen on ip: 0.0.0.0 port: 8088","caller":"main"}
+{"level":"error","timestamp":"2025-05-16T14:28:06.490","msg":"error http server listen tcp 0.0.0.0:8088: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:28:12.353","msg":"http listen on ip: 0.0.0.0 port: 8089","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:30:40.412","msg":"http listen on ip: 0.0.0.0 port: 8089","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:32:45.834","msg":"http listen on ip: 0.0.0.0 port: 8089","caller":"main"}
+{"level":"info","timestamp":"2025-05-16T14:34:47.410","msg":"http listen on ip: 0.0.0.0 port: 8089","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:22:40.984","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:22:40.995","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:25:45.901","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:25:45.919","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:26:04.544","msg":"http listen on ip: 127.0.0.1 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:26:04.552","msg":"error http server listen tcp 127.0.0.1:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:26:18.968","msg":"http listen on ip: localhost port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:26:18.998","msg":"error http server listen tcp 127.0.0.1:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:26:37.288","msg":"http listen on ip: 0.0.0.0 port: 8080","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:36:02.157","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:36:02.168","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:36:15.150","msg":"http listen on ip: 0.0.0.0 port: 8080","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:42:12.925","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:42:12.935","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:42:23.735","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:42:23.751","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:42:38.098","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:42:38.114","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:43:08.854","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:43:08.867","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:43:33.337","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:43:33.347","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:43:54.154","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:43:54.164","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:44:32.352","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:44:32.370","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:45:16.468","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:45:16.479","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:45:43.373","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:45:43.383","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:45:49.084","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:45:49.103","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:46:03.457","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:46:03.466","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:46:50.673","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:46:50.682","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:47:04.563","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:47:04.571","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:48:25.067","msg":"http listen on ip: 0.0.0.0 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:48:25.080","msg":"error http server listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
+{"level":"info","timestamp":"2025-05-23T21:48:32.148","msg":"http listen on ip: 127.0.0.1 port: 80","caller":"main"}
+{"level":"error","timestamp":"2025-05-23T21:48:32.156","msg":"error http server listen tcp 127.0.0.1:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.","caller":"main"}
--- a/backend/bin/server-arm64
+++ b/backend/bin/server-arm64
--- a/backend/dbRequest/dbRequest.go
+++ b/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
+}
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -0,0 +1,54 @@
+module backend
+
+go 1.24.0
+
+toolchain go1.24.3
+
+require (
+	github.com/gin-gonic/gin v1.10.0
+	github.com/golang-jwt/jwt/v5 v5.2.2
+	github.com/mattn/go-sqlite3 v1.14.28
+	github.com/tecamino/tecamino-dbm v0.0.10
+	github.com/tecamino/tecamino-logger v0.2.0
+	golang.org/x/crypto v0.23.0
+)
+
+require (
+	github.com/bytedance/sonic v1.11.6 // indirect
+	github.com/bytedance/sonic/loader v0.1.1 // indirect
+	github.com/cloudwego/base64x v0.1.4 // indirect
+	github.com/cloudwego/iasm v0.2.0 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
+	github.com/gin-contrib/sse v0.1.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.20.0 // indirect
+	github.com/goccy/go-json v0.10.2 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/json-iterator/go v1.1.12 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.7 // 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.2 // 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.8.0 // indirect
+	golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0 // indirect
+	golang.org/x/net v0.25.0 // indirect
+	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/text v0.15.0 // indirect
+	google.golang.org/protobuf v1.34.1 // 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
+	modernc.org/sqlite v1.37.1 // indirect
+)
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -0,0 +1,125 @@
+github.com/bytedance/sonic v1.11.6 h1:oUp34TzMlL+OY1OUWxHqsdkgC/Zfc85zGqw9siXjrc0=
+github.com/bytedance/sonic v1.11.6/go.mod h1:LysEHSvpvDySVdC2f87zGWf6CIKJcAvqab1ZaiQtds4=
+github.com/bytedance/sonic/loader v0.1.1 h1:c+e5Pt1k/cy5wMveRDyk2X4B9hF4g7an8N3zCYjJFNM=
+github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/cloudwego/base64x v0.1.4 h1:jwCgWpFanWmN8xoIUHa2rtzmkd5J2plF/dnLS6Xd/0Y=
+github.com/cloudwego/base64x v0.1.4/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
+github.com/cloudwego/iasm v0.2.0 h1:1KNIy1I1H9hNNFEEH3DVnI4UujN+1zjpuk6gwHLTssg=
+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.3 h1:in2uUcidCuFcDKtdcBxlR0rJ1+fsokWf+uqxgUFjbI0=
+github.com/gabriel-vasile/mimetype v1.4.3/go.mod h1:d8uq/6HKRL6CGdk+aubisF/M5GcPfT7nKyLpA0lbSSk=
+github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
+github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
+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.20.0 h1:K9ISHbSaI0lyB2eWMPJo+kOS/FBExVwjEviJTixqxL8=
+github.com/go-playground/validator/v10 v10.20.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
+github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+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.5.5 h1:Khx7svrCpmxxtHBq5j2mp/xVjsi8hQMfNLvJFAlrGgU=
+github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+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.7 h1:ZWSB3igEs+d0qvnxR/ZBzXVmxkgt8DdzP6m9pfuVLDM=
+github.com/klauspost/cpuid/v2 v2.2.7/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+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/mattn/go-sqlite3 v1.14.28 h1:ThEiQrnbtumT+QMknw63Befp/ce/nUPgBPMlRFEum7A=
+github.com/mattn/go-sqlite3 v1.14.28/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+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.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
+github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
+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/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.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.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.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/arch v0.8.0 h1:3wRIsP3pM4yUptoR96otTUOXI367OS0+c9eeRi9doIc=
+golang.org/x/arch v0.8.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
+golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
+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/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+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.15.0 h1:h1V/4gjBv8v9cjcR6+AR5+/cIYK5N/WAgiv4xlsEtAk=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+google.golang.org/protobuf v1.34.1 h1:9ddQBjfCyZPOHPUiPxpYESBLc+T8P3E+Vo4IbKZgFWg=
+google.golang.org/protobuf v1.34.1/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+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/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/sqlite v1.37.1 h1:EgHJK/FPoqC+q2YBXg7fUmES37pCHFc97sI7zSayBEs=
+modernc.org/sqlite v1.37.1/go.mod h1:XwdRtsE1MpiBcL54+MbKcaDvcuej+IYSMfLN6gSKV8g=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
+rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=
--- a/backend/login/login.go
+++ b/backend/login/login.go
@@ -0,0 +1,202 @@
+package login
+
+import (
+	"backend/dbRequest"
+	"backend/login/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,
+	})
+}
--- a/backend/login/manager.go
+++ b/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
+}
--- a/backend/login/models/user.go
+++ b/backend/login/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 != ""
+}
--- a/backend/main.go
+++ b/backend/main.go
@@ -0,0 +1,89 @@
+package main
+
+import (
+	"backend/login"
+	"backend/server"
+	"backend/utils"
+	"flag"
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/tecamino/tecamino-logger/logging"
+)
+
+func main() {
+	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)
+	}
+	fmt.Println(1.1, *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,
+	})
+
+	//new login manager
+	loginManager, err := login.NewLoginManager(".")
+	if err != nil {
+		logger.Error("main login manager", err.Error())
+		panic(err)
+	}
+
+	// new server
+	s := server.NewServer()
+
+	api := s.Routes.Group("/api")
+	//set routes
+	api.POST("/login", loginManager.Login)
+	api.POST("/user/add", loginManager.AddUser)
+	api.DELETE("/user", loginManager.RemoveUser)
+
+	// Serve static files
+	s.Routes.StaticFS("/", gin.Dir(*spa, true))
+	s.Routes.NoRoute(func(c *gin.Context) {
+		// 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)
+		} else {
+			// 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()))
+		}
+	}()
+	fmt.Println(3, *ip, *port)
+	// start http server
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
+	if err := s.ServeHttp(*ip, *port); err != nil {
+		logger.Error("main", "error http server "+err.Error())
+	}
+}
--- a/backend/server/server.go
+++ b/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)
+}
--- a/backend/user.db
+++ b/backend/user.db
--- a/backend/utils/hash.go
+++ b/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
+}
--- a/backend/utils/secret.go
+++ b/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
+}
--- a/backend/utils/utils.go
+++ b/backend/utils/utils.go
@@ -0,0 +1,46 @@
+package utils
+
+import (
+	"fmt"
+	"os/exec"
+	"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
+		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")
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
  "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "lightcontrol",
-      "version": "0.0.1",
+      "version": "0.0.5",
      "hasInstallScript": true,
      "dependencies": {
        "@quasar/extras": "^1.16.4",
+        "axios": "^1.9.0",
        "quasar": "^2.16.0",
        "vue": "^3.4.18",
        "vue-router": "^4.0.12"
@@ -2266,6 +2267,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.21",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -2304,6 +2311,17 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/b4a": {
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -2571,7 +2589,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -2839,6 +2856,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -3125,6 +3154,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -3206,7 +3244,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.1",
@@ -3284,7 +3321,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3294,7 +3330,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3304,7 +3339,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0"
@@ -3313,6 +3347,21 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.25.3",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.3.tgz",
@@ -4045,6 +4094,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/foreground-child": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -4062,6 +4131,21 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4130,7 +4214,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@@ -4150,7 +4233,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.2",
@@ -4175,7 +4257,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "dunder-proto": "^1.0.1",
@@ -4236,7 +4317,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4273,7 +4353,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4282,11 +4361,25 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/hasown": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "function-bind": "^1.1.2"
@@ -4890,7 +4983,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4977,7 +5069,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "mime-db": "1.52.0"
@@ -4990,7 +5081,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.6"
@@ -5620,6 +5710,12 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lightcontrol",
-  "version": "0.0.1",
+  "version": "0.0.4",
  "description": "A Quasar Project",
  "productName": "Light Control",
  "author": "A. Zuercher",
@@ -16,28 +16,29 @@
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
+    "axios": "^1.9.0",
    "quasar": "^2.16.0",
    "vue": "^3.4.18",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@types/node": "^20.5.9",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.4.0",
+    "autoprefixer": "^10.4.2",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "globals": "^15.12.0",
-    "vue-tsc": "^2.0.29",
-    "@vue/eslint-config-typescript": "^14.4.0",
-    "vite-plugin-checker": "^0.9.0",
-    "@vue/eslint-config-prettier": "^10.1.0",
    "prettier": "^3.3.3",
-    "@types/node": "^20.5.9",
-    "@quasar/app-vite": "^2.1.0",
-    "autoprefixer": "^10.4.2",
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.3",
+    "vite-plugin-checker": "^0.9.0",
+    "vue-tsc": "^2.0.29"
  },
  "engines": {
    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
-}
+}
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -11,7 +11,7 @@ export default defineConfig((/* ctx */) => {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['websocket'],
+    boot: ['websocket', 'axios'],

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

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

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

    // animations: 'all', // --- includes all animations
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -0,0 +1,21 @@
+import { boot } from 'quasar/wrappers';
+import axios from 'axios';
+
+const host = window.location.hostname;
+const port = 8100;
+const baseURL = `http://${host}:${port}`;
+
+const api = axios.create({
+  baseURL: baseURL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios;
+  app.config.globalProperties.$api = api;
+});
+
+export { axios, api };
--- a/src/components/DBMTree.vue
+++ b/src/components/DBMTree.vue
@@ -1,112 +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="(val) => onValueEdit(val, 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(newValue: undefined, node: TreeNode) {
-  const sub = subs.value.find((s) => s.uuid === node.key);
-  if (sub) {
-    send({
-      set: [
-        {
-          path: sub.path ?? '',
-          value: newValue,
-        },
-      ],
-    }).catch((err) => {
-      console.error('Error fetching data:', err);
-    });
-  }
-}
-</script>
--- a/src/components/DragPad.vue
+++ b/src/components/DragPad.vue
@@ -1,119 +0,0 @@
-<template>
-  <div class="row q-ma-xs">
-    <q-item-label class="text-bold">Tilt</q-item-label>
-    <q-slider
-      class="q-mr-sm"
-      vertical
-      reverse
-      v-model="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"
-        @touchstart="startTouch"
-        @touchend="stopTouch"
-        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="pan"
-        :min="0"
-        :max="100"
-        :step="1"
-        label
-        color="black"
-        style="opacity: 1"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, defineModel } from 'vue';
-
-const pad = ref<HTMLElement | null>(null);
-const dragging = ref(false);
-
-const pan = defineModel<number>('pan', { default: 0 });
-const tilt = defineModel<number>('tilt', { default: 0 });
-
-const markerStyle = computed(() => ({
-  position: 'absolute' as const,
-  top: `${2 * (100 - tilt.value)}px`,
-  left: `${2 * 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 onDrag(e: MouseEvent) {
-  if (!dragging.value) return;
-  updatePosition(e);
-}
-
-function stopDrag() {
-  dragging.value = false;
-  window.removeEventListener('mousemove', onDrag);
-  window.removeEventListener('mouseup', stopDrag);
-}
-
-function startTouch(e: TouchEvent) {
-  const touch = e.touches[0];
-  if (!touch) return;
-  dragging.value = true;
-  updatePosition(touch);
-  window.addEventListener('touchmove', onTouch);
-  window.addEventListener('touchend', stopTouch);
-}
-
-function onTouch(e: TouchEvent) {
-  if (!dragging.value) return;
-  const touch = e.touches[0];
-  if (!touch) return;
-  updatePosition(touch);
-}
-
-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 = Math.round((newX / rect.width) * 100);
-  tilt.value = Math.round(100 - (newY / rect.height) * 100);
-}
-</script>
--- a/src/components/MovingHead.vue
+++ b/src/components/MovingHead.vue
@@ -1,202 +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="changeState"
-            round
-            :color="brightness > 0 ? '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="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="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="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="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="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="zoom"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="black"
-          style="opacity: 1"
-        />
-
-        <div class="column items-center q-ml-sm">
-          <DragPad v-model:pan="pan" v-model:tilt="tilt" />
-          {{ pan }} {{ tilt }}
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import { send } from 'src/services/websocket';
-import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
-import DragPad from './DragPad.vue';
-
-const red = updateValue('MovingHead:Red', true);
-const green = updateValue('MovingHead:Green', true);
-const blue = updateValue('MovingHead:Blue', true);
-const white = updateValue('MovingHead:White', true);
-const brightness = updateBrightnessValue('MovingHead:Brightness');
-const pan = updateValue('MovingHead:Pan', true);
-const tilt = updateValue('MovingHead:Tilt', true);
-const zoom = updateValue('MovingHead:Zoom');
-const state = updateValue('MovingHead:State');
-
-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 changeState() {
-  if (brightness.value === 0) {
-    if (state.value === 0) {
-      brightness.value = 100;
-      return;
-    }
-    brightness.value = state.value;
-    return;
-  }
-  state.value = brightness.value;
-  brightness.value = 0;
-}
-
-function updateValue(path: string, isDouble = false) {
-  return computed({
-    get() {
-      const sub = subs.value.find((s) => s.path === path);
-      const value = sub ? Number(sub.value ?? 0) : 0;
-      return isDouble ? Math.round((100 / 255) * value) : Math.round((100 / 255) * value);
-    },
-    set(val) {
-      const baseValue = Math.round((255 / 100) * val);
-      const setPaths = [{ path, value: baseValue }];
-
-      if (isDouble) {
-        setPaths.push({ path: `${path}Fine`, value: baseValue });
-      }
-
-      send({
-        set: setPaths,
-      }).catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
-    },
-  });
-}
-
-function updateBrightnessValue(path: string) {
-  return computed({
-    get() {
-      const sub = subs.value.find((s) => s.path === path);
-      const value = sub ? Number(sub.value ?? 0) : 0;
-      return Math.round((100 / 255) * value);
-    },
-    set(val) {
-      const baseValue = Math.round((255 / 100) * val);
-      const setPaths = [{ path, value: baseValue }];
-      setPaths.push({ path: `${path}Fine`, value: baseValue });
-      setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
-
-      send({
-        set: setPaths,
-      }).catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
-    },
-  });
-}
-</script>
--- a/src/components/SubMenu.vue
+++ b/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>
--- a/src/components/dbm/AddDatapoint.vue
+++ b/src/components/dbm/AddDatapoint.vue
--- a/src/components/dbm/DBMTree.vue
+++ b/src/components/dbm/DBMTree.vue
@@ -0,0 +1,246 @@
+<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"
+          @lazy-load="onLazyLoad"
+        >
+          <template v-slot:[`default-header`]="props">
+            <div
+              class="row items-center text-blue"
+              @contextmenu.prevent.stop="openContextMenu($event, props.node)"
+            >
+              <div class="row items-center text-blue"></div>
+              <div>{{ props.node.path }}</div>
+            </div>
+            <q-popup-edit
+              v-if="props.node.value !== undefined && props.node.value !== ''"
+              v-model="props.node.value"
+              class="q-ml-xl bg-grey text-white"
+              @save="(val) => onValueEdit(val, props.node)"
+            >
+              <template v-slot="scope">
+                <q-input
+                  dark
+                  color="white"
+                  v-model="scope.value"
+                  dense
+                  autofocus
+                  counter
+                  @keyup.enter="scope.set"
+                >
+                  <template v-slot:append>
+                    <q-icon name="edit" />
+                  </template>
+                </q-input>
+              </template>
+            </q-popup-edit>
+          </template>
+        </q-tree>
+        <sub-menu :node="selectedNode"></sub-menu>
+      </q-card-section>
+      <DataTable :rows="Subscriptions" class="col-8" />
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { watch, onMounted, ref } from 'vue';
+import DataTable from './dataTable.vue';
+import type { TreeNode } from 'src/composables/dbm/dbmTree';
+import {
+  dbmData,
+  buildTree,
+  getSubscriptionsByUuid,
+  addChildrentoTree,
+  removeSubtreeByParentKey,
+  getAllSubscriptions,
+} from 'src/composables/dbm/dbmTree';
+import { useQuasar } from 'quasar';
+import { openContextMenu } from 'src/composables/dbm/useContextMenu';
+import { NotifyResponse } from 'src/composables/notify';
+import SubMenu from 'src/components/dbm/SubMenu.vue';
+import { QCard } from 'quasar';
+import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
+import { onBeforeRouteLeave } from 'vue-router';
+import { api } from 'boot/axios';
+import type { Subs } from 'src/models/Subscribe';
+
+const $q = useQuasar();
+const expanded = ref<string[]>([]);
+const selectedNode = ref<TreeNode | null>(null);
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+const Subscriptions = ref<Subs>([]);
+
+onMounted(() => {
+  const payload = {
+    get: [
+      {
+        path: '.*',
+        query: { depth: 1 },
+      },
+    ],
+  };
+  api
+    .post('/json_data', payload)
+    .then((res) => {
+      if (res.data.get) {
+        dbmData.value = buildTree(res.data.get);
+      }
+    })
+    .catch((err) => {
+      NotifyResponse($q, err, 'error');
+    });
+});
+
+onBeforeRouteLeave(() => {
+  unsubscribe([
+    {
+      path: '.*',
+      depth: 0,
+    },
+  ]).catch((err) => {
+    NotifyResponse($q, err, 'error');
+  });
+});
+
+function onLazyLoad({
+  node,
+  done,
+  fail,
+}: {
+  node: TreeNode;
+  done: (children: TreeNode[]) => void;
+  fail: () => void;
+}): void {
+  //first unsubsrice nodes
+
+  unsubscribe([
+    {
+      path: '.*',
+      depth: 0,
+    },
+  ])
+    .then(() => {
+      Subscriptions.value = [];
+    })
+    .catch((err) => {
+      NotifyResponse($q, err, 'error');
+    });
+
+  // now subscribe nodes
+  subscribe([
+    {
+      uuid: node.key ?? ZERO_UUID,
+      path: '',
+      depth: 2,
+    },
+  ])
+    .then((resp) => {
+      if (resp?.subscribe) {
+        // Optional: update your internal store too
+        addChildrentoTree(resp?.subscribe);
+
+        const toRemove = new Set(
+          resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
+        );
+
+        Subscriptions.value = getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid));
+
+        done(dbmData.value);
+      } else {
+        done([]); // no children returned
+      }
+    })
+    .catch((err) => {
+      NotifyResponse($q, err, 'error');
+      fail(); // trigger the fail handler
+    });
+}
+
+function onValueEdit(newValue: undefined, node: TreeNode) {
+  console.log(node.value, node.value === undefined);
+  const sub = getSubscriptionsByUuid(node.key);
+  if (sub) {
+    setValues([
+      {
+        path: sub.path ?? '',
+        value: newValue,
+      },
+    ]).catch((err) => {
+      NotifyResponse($q, err, 'error');
+    });
+  }
+}
+
+watch(
+  expanded,
+  (newVal, oldVal) => {
+    const collapsedKeys = oldVal.filter((key) => !newVal.includes(key));
+    collapsedKeys.forEach((key: string) => {
+      // WebSocket unsubscribe
+      unsubscribe([
+        {
+          uuid: key,
+          path: '.*',
+          depth: 0,
+        },
+      ])
+        .then((resp) => {
+          // Remove children of this node from the tree
+          removeSubtreeByParentKey(key);
+          if (resp?.unsubscribe) {
+            const toRemove = new Set(
+              resp.unsubscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
+            );
+
+            Subscriptions.value = Subscriptions.value.filter((sub) => !toRemove.has(sub.uuid));
+          }
+        })
+        .catch((err) => {
+          NotifyResponse($q, err, 'error');
+        });
+    });
+  },
+  { deep: false },
+);
+</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>
--- a/src/components/dbm/SubMenu.vue
+++ b/src/components/dbm/SubMenu.vue
@@ -0,0 +1,53 @@
+<template>
+  <q-menu ref="contextMenuRef" context-menu>
+    <q-list>
+      <q-item clickable v-close-popup @click="handleAction('Add')">
+        <q-item-section>Add Datapoint</q-item-section>
+      </q-item>
+      <q-item 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 { useQuasar } from 'quasar';
+//import { NotifyResponse, NotifyError } from 'src/composables/notify';
+import { contextMenuState, contextMenuRef } from 'src/composables/dbm/useContextMenu';
+//import AddDatapoint from 'src/components/dbm/AddDatapoint.vue';
+//import { send } from 'src/services/websocket';
+
+//const $q = useQuasar();
+
+function handleAction(action: string) {
+  console.log(`Action '${action}' on node:`, contextMenuState.value);
+
+  // Add your actual logic here
+  switch (action) {
+    case 'Add':
+      // send({
+      //   set: [
+      //     {
+      //       uuid: contextMenuState.value?.key,
+      //       path: 'New',
+      //       type: 'BIT',
+      //       value: true,
+      //       create: true,
+      //     },
+      //   ],
+      // })
+      //   .then((response) => {
+      //     if (response?.set) {
+      //       console.log(response);
+      //     } else {
+      //       NotifyResponse($q, response);
+      //     }
+      //   })
+      //   .catch((err) => {
+      //     NotifyError($q, err);
+      //   });
+      console.log(4);
+  }
+}
+</script>
--- a/src/components/dbm/dataTable.vue
+++ b/src/components/dbm/dataTable.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      v-if="props.rows.length > 0"
+      style="height: 600px"
+      flat
+      bordered
+      :title="props.rows[0]?.path"
+      :rows="props.rows ?? []"
+      :columns="columns"
+      row-key="path"
+      virtual-scroll
+      :rows-per-page-options="[0]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { QTableProps } from 'quasar';
+import type { Subscribe } from 'src/models/Subscribe';
+
+// we generate lots of rows here
+const props = defineProps<{
+  rows: Subscribe[];
+}>();
+
+const columns = [
+  { name: 'path', label: 'Path', field: 'path', align: 'left' },
+  {
+    name: 'value',
+    label: 'Value',
+    field: 'value',
+    align: 'left',
+  },
+] as QTableProps['columns'];
+</script>
--- a/src/components/lights/DomeLight.vue
+++ b/src/components/lights/DomeLight.vue
@@ -95,15 +95,25 @@
          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 { useQuasar } from 'quasar';
+import { watch, reactive, ref } from 'vue';
 import type { Light } from 'src/models/Light';
-import { send } from 'src/services/websocket';
+import { setValues } from 'src/services/websocket';
+import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
+import { NotifyResponse } from 'src/composables/notify';
+
+const $q = useQuasar();
+const settings = ref(false);

 const light = reactive<Light>({
  State: false,
@@ -117,39 +127,37 @@ const light = reactive<Light>({
 });

 watch(light, (newVal: Light) => {
-  send({
-    set: [
-      {
-        path: 'Light:001:001',
-        value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        path: 'Light:001:002',
-        value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        path: 'Light:001:003',
-        value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        path: 'Light:001:004',
-        value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        path: 'Light:001:005',
-        value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        path: 'Light:001:006',
-        value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
-      },
-    ],
-  })
+  setValues([
+    {
+      path: 'Light:001:001',
+      value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
+    },
+    {
+      path: 'Light:001:002',
+      value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
+    },
+    {
+      path: 'Light:001:003',
+      value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
+    },
+    {
+      path: 'Light:001:004',
+      value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
+    },
+    {
+      path: 'Light:001:005',
+      value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
+    },
+    {
+      path: 'Light:001:006',
+      value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
+    },
+  ])
    .then((response) => {
-      console.log('Response from server:', response);
+      NotifyResponse($q, response);
    })
    .catch((err) => {
-      console.error('Error fetching data:', err);
+      NotifyResponse($q, err, 'error');
    });
 });
 </script>
--- a/src/components/lights/DragPad.vue
+++ b/src/components/lights/DragPad.vue
@@ -0,0 +1,238 @@
+<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 class="text-black text-bold q-mb-none">Tilt</q-item-label>
+          <q-btn
+            :size="buttonSize"
+            round
+            color="positive"
+            icon="add_circle_outline"
+            class="q-mb-md"
+            @click="reverseTilt ? substractTiltOne : addTiltOne"
+            v-touch-repeat:300:300:300:300:50.mouse="reverseTilt ? substractTiltOne : addTiltOne"
+          />
+          <q-slider
+            vertical
+            :reverse="!props.reverseTilt"
+            v-model="tilt"
+            :min="0"
+            :max="100"
+            :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 ? addTiltOne : substractTiltOne"
+            v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
+              reverseTilt ? addTiltOne : substractTiltOne
+            "
+          />
+        </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 class="q-ma-sm text-black text-bold">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 ? addPanOne : substractPanOne"
+            v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
+              reversePan ? addPanOne : substractPanOne
+            "
+          />
+          <q-slider
+            class="col"
+            :reverse="props.reversePan"
+            v-model="pan"
+            :min="0"
+            :max="100"
+            :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 ? substractPanOne : addPanOne"
+            v-touch-repeat:300:300:300:300:50.mouse="reversePan ? substractPanOne : addPanOne"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+const pad = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+const containerSize = ref(0);
+
+const pan = defineModel<number>('pan', { default: 0 });
+const tilt = defineModel<number>('tilt', { default: 0 });
+const props = defineProps<{
+  reversePan: boolean;
+  reverseTilt: boolean;
+}>();
+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 scaleFactor = computed(() => containerSize.value / 100);
+// 200px → 2, 400px → 4, etc.
+
+const markerStyle = computed(() => {
+  const scale = scaleFactor.value;
+
+  return {
+    position: 'absolute' as const,
+    top: `${scale * (props.reverseTilt ? tilt.value : 100 - tilt.value)}px`,
+    left: `${scale * (props.reversePan ? 100 - 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(); // ✅ block scroll
+  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) * 100)
+    : Math.round((newX / rect.width) * 100);
+  tilt.value = props.reverseTilt
+    ? Math.round((newY / rect.height) * 100)
+    : Math.round(100 - (newY / rect.height) * 100);
+}
+
+function addTiltOne() {
+  if (tilt.value <= 255) {
+    tilt.value++;
+  }
+}
+
+function substractTiltOne() {
+  if (tilt.value >= 0) {
+    tilt.value--;
+  }
+}
+
+function addPanOne() {
+  if (pan.value <= 255) {
+    pan.value++;
+  }
+}
+
+function substractPanOne() {
+  if (pan.value >= 0) {
+    pan.value--;
+  }
+}
+</script>
+
+<style>
+.responsive-box {
+  width: 200px;
+  height: 200px;
+}
+
+@media (min-width: 640px) {
+  .responsive-box {
+    width: 400px;
+    height: 400px;
+  }
+}
+</style>
--- a/src/components/lights/LightBarCBL.vue
+++ b/src/components/lights/LightBarCBL.vue
@@ -0,0 +1,123 @@
+<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
+          title="Dimmer"
+          :dbm-path="'LightBar:Brightness'"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="Strobe"
+          :dbm-path="'LightBar:Strobe'"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="Program"
+          :dbm-path="'LightBar:Program'"
+          :opacity="0.5"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="Program Speed"
+          :dbm-path="'LightBar:Program:Speed'"
+          :opacity="0.8"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="Red"
+          :dbm-path="'LightBar:Red'"
+          color="red"
+          :opacity="0.8"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="Green"
+          :dbm-path="'LightBar:Green'"
+          :opacity="0.8"
+          color="green"
+          class="q-ma-sm"
+        ></LightSlider>
+        <LightSlider
+          title="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 { useQuasar } from 'quasar';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { subscribe, unsubscribe } from 'src/services/websocket';
+import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
+import { NotifyResponse } from 'src/composables/notify';
+import { updateValue, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
+import LightSlider from './LightSlider.vue';
+
+const $q = useQuasar();
+const settings = ref(false);
+const brightness = updateValue('LightBar:Brightness', $q);
+const state = updateValue('LightBar:State', $q);
+onMounted(() => {
+  subscribe([
+    {
+      path: 'LightBar:.*',
+      depth: 0,
+    },
+  ])
+    .then((response) => {
+      if (response?.subscribe) {
+        dbmData.value = buildTree(response.subscribe ?? []);
+      } else {
+        NotifyResponse($q, response);
+      }
+    })
+    .catch((err) => {
+      NotifyResponse($q, err, 'error');
+    });
+});
+
+onUnmounted(() => {
+  unsubscribe([
+    {
+      path: '.*',
+      depth: 0,
+    },
+  ]).catch((err) => {
+    NotifyResponse($q, err, 'error');
+  });
+});
+
+function changeState() {
+  if (brightness.value === 0) {
+    if (state.value === 0) {
+      brightness.value = 100;
+      return;
+    }
+    brightness.value = state.value;
+    return;
+  }
+  state.value = brightness.value;
+  brightness.value = 0;
+}
+</script>
--- a/src/components/lights/LightSlider.vue
+++ b/src/components/lights/LightSlider.vue
@@ -0,0 +1,121 @@
+<template>
+  <div :class="'column items-center ' + props.class">
+    <q-item-label :class="['text-bold', `text-${textColor}`]"><p v-html="title"></p></q-item-label>
+    <q-btn
+      size="sm"
+      class="q-mb-sm"
+      round
+      color="positive"
+      icon="add_circle_outline"
+      @click="addOne"
+      v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="addOne"
+    />
+    <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="substractOne"
+      v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="substractOne"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { updateValue } from 'src/composables/dbm/dbmTree';
+
+const $q = useQuasar();
+
+const props = defineProps({
+  title: {
+    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: 100,
+  },
+  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 localValue = updateValue(props.dbmPath, $q, props.dbmPath2, props.dbmPath3, props.dbmValue3);
+
+function addOne() {
+  if (localValue.value <= 255) {
+    localValue.value++;
+  }
+}
+
+function substractOne() {
+  if (localValue.value >= 0) {
+    localValue.value--;
+  }
+}
+</script>
--- a/src/components/lights/MovingHead.vue
+++ b/src/components/lights/MovingHead.vue
@@ -0,0 +1,203 @@
+// 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
+          title="Dimmer"
+          :dbm-path="'MovingHead:Brightness'"
+          :dbm-path2="'MovingHead:BrightnessFine'"
+          :dbm-path3="'MovingHead:Strobe'"
+          :dbm-value3="255"
+          :opacity="0.5"
+          class="q-ma-md"
+        />
+        <LightSlider
+          title="Red"
+          :dbm-path="'MovingHead:Red'"
+          :dbm-path2="'MovingHead:RedFine'"
+          :opacity="0.8"
+          color="red"
+          class="q-ma-md"
+        />
+        <LightSlider
+          title="Green"
+          :dbm-path="'MovingHead:Green'"
+          :dbm-path2="'MovingHead:GreenFine'"
+          :opacity="0.8"
+          color="green"
+          class="q-ma-md"
+        />
+        <LightSlider
+          title="Blue"
+          :dbm-path="'MovingHead:Blue'"
+          :dbm-path2="'MovingHead:BlueFine'"
+          :opacity="0.8"
+          color="blue"
+          class="q-ma-md"
+        />
+        <LightSlider
+          title="White"
+          :dbm-path="'MovingHead:White'"
+          :dbm-path2="'MovingHead:WhiteFine'"
+          :opacity="0.3"
+          color="grey"
+          class="q-ma-md"
+        />
+        <LightSlider
+          title="Zoom"
+          :dbm-path="'MovingHead:Zoom'"
+          :opacity="1"
+          color="black"
+          class="q-ma-md"
+        />
+        <div>
+          <DragPad
+            class="q-ma-md"
+            v-model:pan="pan"
+            v-model:reverse-pan="settings.reversePan"
+            v-model:tilt="tilt"
+            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 { useQuasar } from 'quasar';
+import LightSlider from './LightSlider.vue';
+import { NotifyResponse } from 'src/composables/notify';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
+import { LocalStorage } from 'quasar';
+import { getSubscriptionsByPath, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
+import DragPad from 'src/components/lights/DragPad.vue';
+import SettingDialog from './SettingMovingHead.vue';
+import type { Settings } from 'src/models/MovingHead';
+
+const $q = useQuasar();
+const brightness = updateBrightnessValue('MovingHead:Brightness');
+const pan = updateValue('MovingHead:Pan', true);
+const tilt = updateValue('MovingHead:Tilt', true);
+const state = updateValue('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;
+
+  subscribe([
+    {
+      path: 'MovingHead:.*',
+      depth: 0,
+    },
+  ])
+    .then((response) => {
+      console.log(response);
+      if (response?.subscribe) {
+        dbmData.value = buildTree(response.subscribe ?? []);
+      } else {
+        NotifyResponse($q, response);
+      }
+    })
+    .catch((err) => {
+      NotifyResponse($q, err, 'error');
+    });
+});
+
+onUnmounted(() => {
+  unsubscribe([
+    {
+      path: 'MovingHead',
+      depth: 0,
+    },
+  ]).catch((err) => {
+    NotifyResponse($q, err, 'error');
+  });
+});
+
+function changeState() {
+  if (brightness.value === 0) {
+    if (state.value === 0) {
+      brightness.value = 100;
+      return;
+    }
+    brightness.value = state.value;
+    return;
+  }
+  state.value = brightness.value;
+  brightness.value = 0;
+}
+
+function updateValue(path: string, isDouble = false) {
+  return computed({
+    get() {
+      const sub = getSubscriptionsByPath(path);
+      const value = sub ? Number(sub.value ?? 0) : 0;
+      return isDouble ? Math.round((100 / 255) * value) : Math.round((100 / 255) * value);
+    },
+    set(val) {
+      const baseValue = Math.round((255 / 100) * val);
+      const setPaths = [{ path, value: baseValue }];
+
+      if (isDouble) {
+        setPaths.push({ path: `${path}Fine`, value: baseValue });
+      }
+
+      setValues(setPaths)
+        .then((response) => NotifyResponse($q, response))
+        .catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
+    },
+  });
+}
+
+function updateBrightnessValue(path: string) {
+  return computed({
+    get() {
+      const sub = getSubscriptionsByPath(path);
+      const value = sub ? Number(sub.value ?? 0) : 0;
+      return Math.round((100 / 255) * value);
+    },
+    set(val) {
+      const baseValue = Math.round((255 / 100) * val);
+      const setPaths = [{ path, value: baseValue }];
+      setPaths.push({ path: `${path}Fine`, value: baseValue });
+      setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
+
+      setValues(setPaths)
+        .then((response) => NotifyResponse($q, response))
+        .catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
+    },
+  });
+}
+</script>
--- a/src/components/lights/SettingDomeLight.vue
+++ b/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>
--- a/src/components/lights/SettingMovingHead.vue
+++ b/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>
--- a/src/composables/dbm/dbmTree.ts
+++ b/src/composables/dbm/dbmTree.ts
@@ -0,0 +1,158 @@
+import type { Subs } from 'src/models/Subscribe';
+import { ref, nextTick, computed } from 'vue';
+import { setValues } from 'src/services/websocket';
+import { NotifyResponse } from 'src/composables/notify';
+import type { QVueGlobals } from 'quasar';
+
+const Subscriptions = ref<Subs>([]);
+
+export const dbmData = ref<TreeNode[]>([]);
+
+export interface TreeNode {
+  path: string | undefined;
+  key?: string; // optional: useful for QTree's node-key
+  value?: string | number | boolean | undefined;
+  lazy: boolean;
+  children?: TreeNode[];
+}
+
+export function buildTree(subs: Subs): TreeNode[] {
+  type TreeMap = {
+    [key: string]: {
+      __children: TreeMap;
+      uuid?: string;
+      value?: string | undefined;
+      lazy: boolean;
+    };
+  };
+
+  const root: TreeMap = {};
+
+  Subscriptions.value = subs;
+
+  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: {}, lazy: true };
+      }
+
+      // Optionally attach uuid only at the final part
+      if (i === pathParts.length - 1 && item.uuid) {
+        current[part].uuid = item.uuid;
+        current[part].value = item.value !== undefined ? String(item.value) : '';
+        current[part].lazy = item.hasChild ?? false;
+      }
+      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,
+      lazy: node.lazy,
+      children: convert(node.__children),
+    }));
+  }
+
+  return [
+    {
+      path: 'DBM',
+      key: '00000000-0000-0000-0000-000000000000',
+      lazy: true,
+      children: convert(root),
+    },
+  ];
+}
+
+export function getTreeElementByPath(path: string) {
+  return dbmData.value.find((s) => s.path === path);
+}
+
+export function getSubscriptionsByUuid(uid: string | undefined) {
+  return Subscriptions.value.find((s) => s.uuid === uid);
+}
+
+export function addChildrentoTree(subs: Subs) {
+  const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
+  const existingIds = new Set(Subscriptions.value.map((sub) => sub.uuid));
+  const newSubs = subs
+    .filter((sub) => sub.uuid !== ZERO_UUID) // Skip UUIDs with all zeroes
+    .filter((sub) => !existingIds.has(sub.uuid));
+
+  Subscriptions.value.push(...newSubs);
+
+  void nextTick(() => {
+    dbmData.value = buildTree(Subscriptions.value);
+  });
+}
+
+export function removeSubtreeByParentKey(parentKey: string) {
+  function removeChildrenAndMarkLazy(nodes: TreeNode[], targetKey: string): boolean {
+    for (const node of nodes) {
+      if (node.key === targetKey) {
+        delete node.children;
+        node.lazy = true;
+        return true;
+      }
+      if (node.children) {
+        const found = removeChildrenAndMarkLazy(node.children, targetKey);
+        if (found) return true;
+      }
+    }
+    return false;
+  }
+
+  removeChildrenAndMarkLazy(dbmData.value, parentKey);
+}
+
+export function getSubscriptionsByPath(path: string | undefined) {
+  return Subscriptions.value.find((s) => s.path === path);
+}
+
+export function getAllSubscriptions() {
+  return Subscriptions.value;
+}
+
+export function updateValue(
+  path1: string,
+  $q: QVueGlobals,
+  path2?: string,
+  path3?: string,
+  value3?: number,
+) {
+  return computed({
+    get() {
+      const sub = getSubscriptionsByPath(path1);
+      const value = sub ? Number(sub.value ?? 0) : 0;
+      return Math.round((100 / 255) * value);
+    },
+    set(val) {
+      const baseValue = Math.round((255 / 100) * val);
+      const setPaths = [{ path: path1, value: baseValue }];
+      if (path2) {
+        setPaths.push({ path: path2, value: baseValue });
+      }
+      if (path3) {
+        setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
+      }
+      setValues(setPaths)
+        .then((response) => NotifyResponse($q, response))
+        .catch((err) => {
+          NotifyResponse(
+            $q,
+            `Failed to update [${path1 + ' ' + path2 + ' ' + path3}]: ${err}`,
+            'error',
+          );
+        });
+    },
+  });
+}
--- a/src/composables/dbm/useContextMenu.ts
+++ b/src/composables/dbm/useContextMenu.ts
@@ -0,0 +1,12 @@
+import { ref } from 'vue';
+import type { TreeNode } from './dbmTree';
+
+export const contextMenuRef = ref();
+
+export const contextMenuState = ref<TreeNode | undefined>();
+
+export function openContextMenu(event: MouseEvent, node: undefined) {
+  event.preventDefault();
+  contextMenuState.value = node;
+  contextMenuRef.value?.show(event);
+}
--- a/src/composables/dbmTree.ts
+++ b/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),
-    },
-  ];
-}
--- a/src/composables/notify.ts
+++ b/src/composables/notify.ts
@@ -0,0 +1,39 @@
+import type { Response } from 'src/models/Response';
+import type { QVueGlobals } from 'quasar';
+
+export function NotifyResponse(
+  $q: QVueGlobals,
+  response: Response | string | undefined,
+  type?: 'warning' | 'error',
+  timeout: number = 5000,
+) {
+  let color = 'green';
+  let icon = 'check_circle';
+
+  switch (type) {
+    case 'warning':
+      color = 'orange';
+      icon = 'warning';
+      break;
+    case 'error':
+      color = 'orange';
+      icon = 'error';
+      break;
+  }
+
+  if (response) {
+    const message = typeof response === 'string' ? response : (response.message ?? '');
+    if (message === '') {
+      return;
+    }
+    color = typeof response === 'string' ? response : response?.error ? 'red' : color;
+    icon = typeof response === 'string' ? response : response?.error ? 'error' : icon;
+    $q?.notify({
+      message: message,
+      color: color,
+      position: 'bottom-right',
+      icon: icon,
+      timeout: timeout,
+    });
+  }
+}
--- a/src/composables/useContextMenu.ts
+++ b/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,
-  };
-}
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -6,11 +6,11 @@

        <q-toolbar-title> Light Control </q-toolbar-title>

-        <div>Version 0.0.1</div>
+        <div>Version {{ version }}</div>
      </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-section>Home</q-item-section>
@@ -29,6 +29,7 @@

 <script setup lang="ts">
 import { ref } from 'vue';
+import { version } from '../..//package.json';

 const leftDrawerOpen = ref(false);

--- a/src/models/Get.ts
+++ b/src/models/Get.ts
@@ -9,6 +9,7 @@ type Get = {
  rights?: string;
  value?: undefined;
  query?: Query;
+  hasChild?: boolean;
 };

 export type Gets = Get[];
--- a/src/models/MovingHead.ts
+++ b/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;
+};
--- a/src/models/Response.ts
+++ b/src/models/Response.ts
@@ -7,5 +7,8 @@ export type Response = {
  get?: Gets;
  set?: Sets;
  subscribe?: Subs;
+  unsubscribe?: Subs;
  publish?: Pubs;
+  error?: boolean;
+  message?: string;
 };
--- a/src/models/Set.ts
+++ b/src/models/Set.ts
@@ -1,6 +1,9 @@
 export type Set = {
+  uuid?: string | undefined;
  path: string;
+  type?: string;
  value: number | boolean | undefined;
+  create?: boolean;
 };

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

 export type Subs = Subscribe[];
--- a/src/pages/DataPage.vue
+++ b/src/pages/DataPage.vue
@@ -1,8 +1,19 @@
 <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/components/dbm/DBMTree.vue';
+import { api } from 'src/boot/axios';
+import { NotifyResponse } from 'src/composables/notify';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
+function saveDBM() {
+  api
+    .get('saveData')
+    .then((resp) => NotifyResponse($q, resp.data))
+    .catch((err) => NotifyResponse($q, err));
+}
 </script>
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,9 +1,37 @@
 <template>
  <q-page>
-    <moving-head></moving-head>
+    <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/MovingHead.vue';
+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>
--- a/src/services/websocket.ts
+++ b/src/services/websocket.ts
@@ -2,10 +2,18 @@ import type { Response } from 'src/models/Response';
 import type { Publish } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
-import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
-import { ref } from 'vue';
+import {
+  getAllSubscriptions,
+  buildTree,
+  dbmData,
+  getSubscriptionsByUuid,
+} from 'src/composables/dbm/dbmTree';
+import { ref, reactive } from 'vue';
+import type { Subs } from 'src/models/Subscribe';
+import type { Sets } from 'src/models/Set';

 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
+export const lastKnownValues = reactive(new Map<string, string>());

 export let socket: WebSocket | null = null;
 const isConnected = ref(false);
@@ -47,16 +55,38 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
      if (id && pendingResponses.has(id)) {
        pendingResponses.get(id)?.(message); // resolve the promise
        pendingResponses.delete(id);
-      } else if (message.publish) {
-        message.publish.forEach((pub: Publish) => {
-          const target = subs.value.find((s) => s.path === pub.path);
-          if (target) {
-            target.value = pub.value ?? '';
+        return;
+      }
+
+      if (message.publish) {
+        let changed = false;
+
+        (message.publish as Publish[]).forEach((pub) => {
+          const uuid = pub.uuid;
+          const value = pub.value ?? '';
+
+          if (uuid === undefined) {
+            return;
+          }
+
+          const oldValue = lastKnownValues.get(String(uuid));
+          if (oldValue !== value) {
+            lastKnownValues.set(uuid, value); // this is now reactive
+
+            const existing = getSubscriptionsByUuid(pub.uuid);
+            if (existing) {
+              existing.value = value;
+            } else {
+              getAllSubscriptions()?.push({ value, uuid: uuid });
+            }
+
+            changed = true;
          }
        });
-        dbmData.value = buildTree(subs.value);
-      } else {
-        console.warn('Unmatched message:', message);
+
+        if (changed) {
+          dbmData.value = buildTree(getAllSubscriptions()); // rebuild reactive tree
+        }
      }
    };
  };
@@ -67,10 +97,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
    }
  };

-  // onBeforeUnmount(() => {
-  //   close();
-  // });
-
  return {
    connect,
    close,
@@ -101,13 +127,24 @@ function waitForSocketConnection(): Promise<void> {
  });
 }

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

  return new Promise((resolve) => {
    pendingResponses.set(id, resolve);
-
    waitForSocketConnection()
      .then(() => {
        socket?.send(JSON.stringify(payload));
@@ -119,7 +156,3 @@ export function send(data: Request): Promise<Response | undefined> {
      });
  });
 }
-
-function generateId(): string {
-  return Math.random().toString(36).substr(2, 9); // simple unique ID
-}
Author	SHA1	Message	Date
Adrian Zürcher	c4fe532e88	add workingdir for go setup and conditional executable on backend	2025-05-29 11:22:07 +02:00
Adrian Zürcher	838ac4e7c3	add new step seperate uasar cli and quasar build	2025-05-29 10:56:28 +02:00
Adrian Zürcher	b7e3fa435a	fix artifacts and go.mod go sum with AI	2025-05-29 10:40:13 +02:00
Adrian Zürcher	87d5d769c8	change artifact output	2025-05-29 10:27:05 +02:00
zuadi	510d2980ac	fix secret name	2025-05-29 10:20:14 +02:00
zuadi	fb43c99920	add missing working directory for go mod	2025-05-29 10:08:46 +02:00
zuadi	be1a06a759	change git credential section	2025-05-29 10:05:45 +02:00
Adrian Zürcher	4951e2bb34	fix artifact tag to @4	2025-05-29 09:46:38 +02:00
Adrian Zürcher	403f35b87f	fix wrong tabs to spaces	2025-05-29 09:45:02 +02:00
Adrian Zürcher	a8fb630542	add new github workflow/action	2025-05-29 09:39:11 +02:00
Adrian Zürcher	03f23d6d5a	abstract dbm and light composable and components and upgrade light user gui for fine graining with + and -	2025-05-28 21:56:05 +02:00
Adrian Zürcher	d7565ed09c	add new websocket http rest and notify components	2025-05-28 21:54:43 +02:00
Adrian Zürcher	491ca72140	add ignore log file	2025-05-28 21:52:05 +02:00
Adrian Zürcher	a955d6db37	add ignore db files	2025-05-28 21:50:09 +02:00
Adrian Zürcher	8cfb720c42	add golang backend for login an d webserver	2025-05-28 21:48:30 +02:00
Adrian Zürcher	c8b27813ae	fix datatree sub and unsubscribe at tree	2025-05-12 17:17:53 +02:00
Adrian Zürcher	802f1c71db	modify component moving head	2025-05-12 17:17:16 +02:00
Adrian Zürcher	0a35ac49b9	remove test name	2025-05-12 17:16:31 +02:00
Adrian Zürcher	ce3de4c1e3	add tabs	2025-05-12 17:16:06 +02:00
Adrian Zürcher	1c7a8de4e1	rename component	2025-05-12 17:15:45 +02:00
Adrian Zürcher	a5303ff232	fix no scrolling while in dragPad	2025-05-12 17:14:49 +02:00