add icon as asset, add refresh button

new save load scenes

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+*.scene
 
 # local .env files
 .env.local*
@@ -35,5 +36,5 @@ yarn-error.log*
 # local .db files
 *.db
 
-# local .db files
+# local .log files
 *.log

backend/backend.log

@@ -1,84 +0,0 @@
-{"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"}

backend/go.mod

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

backend/go.sum

@@ -1,20 +1,22 @@
-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 v1.13.2 h1:8/H1FempDZqC4VqjptGo14QQlJx8VdZJegxs6wwfqpQ=
+github.com/bytedance/sonic v1.13.2/go.mod h1:o68xyaF9u2gvVBuGHPlUVCy+ZfmNNO5ETf1+KgkJhz4=
 github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/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/bytedance/sonic/loader v0.2.4 h1:ZWCw4stuXUsn1/+zQDqeE7JKP+QO47tz7QCNan80NzY=
+github.com/bytedance/sonic/loader v0.2.4/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
+github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
+github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
 github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/gabriel-vasile/mimetype v1.4.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/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/gin-contrib/cors v1.7.5 h1:cXC9SmofOrRg0w9PigwGlHG3ztswH6bqq4vJVXnvYMk=
+github.com/gin-contrib/cors v1.7.5/go.mod h1:4q3yi7xBEDDWKapjT2o1V7mScKDDr8k+jZ0fSquGoy0=
+github.com/gin-contrib/sse v1.0.0 h1:y3bT1mUWUxDpW4JLQg/HnTqV4rozuW4tC9eFKTxYI9E=
+github.com/gin-contrib/sse v1.0.0/go.mod h1:zNuFdwarAygJBht0NTKiSi3jRf6RbqeILZ9Sp6Slhe0=
 github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
 github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
@@ -23,29 +25,33 @@ github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/o
 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/go-playground/validator/v10 v10.26.0 h1:SP05Nqhjcvz81uJaRfEV0YBSSSGMc/iMaVtFbr3Sw2k=
+github.com/go-playground/validator/v10 v10.26.0/go.mod h1:I5QpIEbmr8On7W0TktmJAumgzX4CA1XNl4ZmDuVHKKo=
+github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
+github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
 github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/google/go-cmp v0.5.5 h1:Khx7svrCpmxxtHBq5j2mp/xVjsi8hQMfNLvJFAlrGgU=
-github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e h1:ijClszYn+mADRFY17kjQEVQ1XRhq2/JR1M3sGqeJoxs=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
-github.com/klauspost/cpuid/v2 v2.2.7 h1:ZWSB3igEs+d0qvnxR/ZBzXVmxkgt8DdzP6m9pfuVLDM=
-github.com/klauspost/cpuid/v2 v2.2.7/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/klauspost/cpuid/v2 v2.2.10 h1:tBs3QSyvjDyFTq3uoc/9xFpCuOsJQFNPiAhYdw2skhE=
+github.com/klauspost/cpuid/v2 v2.2.10/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
 github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
+github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
 github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/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=
@@ -53,12 +59,14 @@ github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9G
 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/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
+github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
+github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
@@ -69,8 +77,8 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 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/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/tecamino/tecamino-dbm v0.0.10 h1:+6OTl7yTsqLuYqE8QVB8ski3x0seI5yBFLnuHdVz99k=
 github.com/tecamino/tecamino-dbm v0.0.10/go.mod h1:8YYOr/jQ9mGVmmNj2NE8HajDvlJAVY3iGOZNfMjd8kA=
 github.com/tecamino/tecamino-logger v0.2.0 h1:NPH/Gg9qRhmVoW8b39i1eXu/LEftHc74nyISpcRG+XU=
@@ -85,41 +93,57 @@ 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/arch v0.15.0 h1:QtOrQd0bTUnhNVNndMpLHNWrDmYzZ2KDqSrEymqInZw=
+golang.org/x/arch v0.15.0/go.mod h1:JmwW7aLIoRUKgaTzhkiEFxvcEiQGyOg9BMonBJUS7EE=
+golang.org/x/crypto v0.36.0 h1:AnAEvhDddvBdpY+uR+MyHmuZzzNqXSe/GvuDeob5L34=
+golang.org/x/crypto v0.36.0/go.mod h1:Y4J0ReaxCR1IMaabaSMugxJES1EpwhBHhv2bDHklZvc=
 golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0 h1:R84qjqJb5nVJMxqWYb3np9L5ZsaDtB+a39EqjV0JSUM=
 golang.org/x/exp v0.0.0-20250408133849-7e4ce0ab07d0/go.mod h1:S9Xr4PYopiDyqSyp5NjCrhFrqg6A5zA2E/iPHPhqnS8=
-golang.org/x/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/mod v0.24.0 h1:ZfthKaKaT4NrhGVZHO1/WDTwGES4De8KtWO0SIbNJMU=
+golang.org/x/mod v0.24.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
+golang.org/x/net v0.38.0 h1:vRMAPTMaeGqVhG5QyLJHqNDwecKTomGeqbnfZyKlBI8=
+golang.org/x/net v0.38.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
+golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
+golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.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=
+golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
+golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
+golang.org/x/tools v0.33.0 h1:4qz2S3zmRxbGIhDIAgjxvFutSvH5EfnsYrRBj0UI0bc=
+golang.org/x/tools v0.33.0/go.mod h1:CIJMaWEY88juyUfo7UbgPqbC8rU2OqfAV1h2Qp0oMYI=
+google.golang.org/protobuf v1.36.6 h1:z1NpPI8ku2WgiWnf+t9wTPsn6eP1L7ksHUlkfLvd9xY=
+google.golang.org/protobuf v1.36.6/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
 gopkg.in/natefinch/lumberjack.v2 v2.2.1 h1:bBRl1b0OH9s/DuPhuXpNl+VtCaJXFZ5/uEFST95x9zc=
 gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYskCTPBJVb9jqSc=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+modernc.org/cc/v4 v4.26.1 h1:+X5NtzVBn0KgsBCBe+xkDC7twLb/jNVj9FPgiwSQO3s=
+modernc.org/cc/v4 v4.26.1/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
+modernc.org/ccgo/v4 v4.28.0 h1:rjznn6WWehKq7dG4JtLRKxb52Ecv8OUGah8+Z/SfpNU=
+modernc.org/ccgo/v4 v4.28.0/go.mod h1:JygV3+9AV6SmPhDasu4JgquwU81XAKLd3OKTUDNOiKE=
+modernc.org/fileutil v1.3.1 h1:8vq5fe7jdtEvoCf3Zf9Nm0Q05sH6kGx0Op2CPx1wTC8=
+modernc.org/fileutil v1.3.1/go.mod h1:HxmghZSZVAz/LXcMNwZPA/DRrQZEVP9VX0V4LQGQFOc=
+modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
+modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
 modernc.org/libc v1.65.7 h1:Ia9Z4yzZtWNtUIuiPuQ7Qf7kxYrxP1/jeHZzG8bFu00=
 modernc.org/libc v1.65.7/go.mod h1:011EQibzzio/VX3ygj1qGFt5kMjP0lHb0qCW5/D/pQU=
 modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
 modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
 modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
 modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
+modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
+modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
+modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
+modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
 modernc.org/sqlite v1.37.1 h1:EgHJK/FPoqC+q2YBXg7fUmES37pCHFc97sI7zSayBEs=
 modernc.org/sqlite v1.37.1/go.mod h1:XwdRtsE1MpiBcL54+MbKcaDvcuej+IYSMfLN6gSKV8g=
+modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
+modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
-rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

backend/login/login.go

@@ -2,7 +2,7 @@ package login
 
 import (
 	"backend/dbRequest"
-	"backend/login/models"
+	"backend/models"
 	"backend/utils"
 	"database/sql"
 	"encoding/json"

backend/main.go

@@ -2,15 +2,19 @@ package main
 
 import (
 	"backend/login"
+	secenes "backend/scenes"
 	"backend/server"
 	"backend/utils"
 	"flag"
 	"fmt"
 	"log"
+	"net/http"
 	"os"
 	"path/filepath"
+	"strings"
 	"time"
 
+	"github.com/gin-contrib/cors"
 	"github.com/gin-gonic/gin"
 	"github.com/tecamino/tecamino-logger/logging"
 )
@@ -52,26 +56,46 @@ func main() {
 		panic(err)
 	}
 
+	//new scenes handler
+	scenesHandler := secenes.NewScenesHandler("")
+
 	// new server
 	s := server.NewServer()
 
+	s.Routes.Use(cors.New(cors.Config{
+		AllowOrigins:     []string{"http://localhost:9000"},
+		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
+		AllowHeaders:     []string{"Origin", "Content-Type"},
+		AllowCredentials: true,
+	}))
+
 	api := s.Routes.Group("/api")
 	//set routes
+	api.GET("/loadScenes", scenesHandler.LoadScenes)
 	api.POST("/login", loginManager.Login)
 	api.POST("/user/add", loginManager.AddUser)
+	api.POST("/saveScene", scenesHandler.SaveScene)
+	api.POST("/loadScene", scenesHandler.LoadScene)
 	api.DELETE("/user", loginManager.RemoveUser)
+	api.DELETE("/deleteScene", scenesHandler.DeleteScene)
 
 	// Serve static files
-	s.Routes.StaticFS("/", gin.Dir(*spa, true))
+	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(*spa, "assets"), true))
 	s.Routes.NoRoute(func(c *gin.Context) {
+		// Disallow fallback for /api paths
+		if strings.HasPrefix(c.Request.URL.Path, "/api") {
+			c.JSON(http.StatusNotFound, gin.H{"error": "API endpoint not found"})
+			return
+		}
 		// Try to serve file from SPA directory
 		filePath := filepath.Join(*spa, c.Request.URL.Path)
 		if _, err := os.Stat(filePath); err == nil {
 			c.File(filePath)
-		} else {
+			return
+		}
 		// Fallback to index.html for SPA routing
 		c.File(filepath.Join(*spa, "index.html"))
-		}
+
 	})
 
 	go func() {

backend/models/lightBar.go

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

backend/models/movingHead.go

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

backend/models/scenes.go

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

backend/models/value.go

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

backend/models/values.go

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

backend/scenes/scenes.go

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

backend/utils/utils.go

@@ -2,7 +2,10 @@ package utils
 
 import (
 	"fmt"
+	"io/fs"
+	"os"
 	"os/exec"
+	"path/filepath"
 	"runtime"
 
 	"github.com/tecamino/tecamino-logger/logging"
@@ -25,6 +28,10 @@ func OpenBrowser(url string, logger *logging.Logger) error {
 			{"open", url}, // fallback
 		}
 	default: // Linux
+		if os.Getenv("DISPLAY") == "" && os.Getenv("WAYLAND_DISPLAY") == "" && os.Getenv("XDG_SESSION_TYPE") != "wayland" {
+
+			return fmt.Errorf("os is running i headless mode do not start browser")
+		}
 		commands = [][]string{
 			{"chromium-browser", "--kiosk", url},
 			{"google-chrome", "--kiosk", url},
@@ -44,3 +51,15 @@ func OpenBrowser(url string, logger *logging.Logger) error {
 
 	return fmt.Errorf("could not open browser")
 }
+
+func FindAllFiles(rootDir, fileExtention string) (files []string, err error) {
+	err = filepath.WalkDir(rootDir, func(path string, d fs.DirEntry, err error) error {
+		if d.IsDir() {
+			return nil
+		} else if filepath.Ext(d.Name()) == fileExtention {
+			files = append(files, path)
+		}
+		return err
+	})
+	return
+}

package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "lightcontrol",
-  "version": "0.0.5",
+  "version": "0.0.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lightcontrol",
-      "version": "0.0.5",
+      "version": "0.0.14",
       "hasInstallScript": true,
       "dependencies": {
         "@quasar/extras": "^1.16.4",
-        "axios": "^1.9.0",
+        "axios": "^1.10.0",
         "quasar": "^2.16.0",
         "vue": "^3.4.18",
         "vue-router": "^4.0.12"
@@ -2312,9 +2312,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lightcontrol",
-  "version": "0.0.4",
-  "description": "A Quasar Project",
+  "version": "0.0.16",
+  "description": "A Tecamino App",
   "productName": "Light Control",
   "author": "A. Zuercher",
   "type": "module",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12"

src/assets/LOGO_CF-ICON_color.svg

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

src/components/dbm/DBMTree.vue

@@ -10,6 +10,7 @@
           no-transition
           :default-expand-all="false"
           v-model:expanded="expanded"
+          @update:expanded="onExpandedChange"
           @lazy-load="onLazyLoad"
         >
           <template v-slot:[`default-header`]="props">
@@ -52,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import DataTable from './dataTable.vue';
 import type { TreeNode } from 'src/composables/dbm/dbmTree';
 import {
@@ -60,7 +61,6 @@ import {
   buildTree,
   getSubscriptionsByUuid,
   addChildrentoTree,
-  removeSubtreeByParentKey,
   getAllSubscriptions,
 } from 'src/composables/dbm/dbmTree';
 import { useQuasar } from 'quasar';
@@ -72,12 +72,14 @@ 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';
+import { reactive } from 'vue';
 
 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>([]);
+const Subscriptions = reactive<Subs>([]);
+let lastExpanded: string[] = [];
 
 onMounted(() => {
   const payload = {
@@ -92,7 +94,7 @@ onMounted(() => {
     .post('/json_data', payload)
     .then((res) => {
       if (res.data.get) {
-        dbmData.value = buildTree(res.data.get);
+        dbmData.splice(0, dbmData.length, ...buildTree(res.data.get));
       }
     })
     .catch((err) => {
@@ -121,7 +123,6 @@ function onLazyLoad({
   fail: () => void;
 }): void {
   //first unsubsrice nodes
-
   unsubscribe([
     {
       path: '.*',
@@ -129,7 +130,7 @@ function onLazyLoad({
     },
   ])
     .then(() => {
-      Subscriptions.value = [];
+      Subscriptions.length = 0;
     })
     .catch((err) => {
       NotifyResponse($q, err, 'error');
@@ -152,9 +153,13 @@ function onLazyLoad({
           resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
         );
 
-        Subscriptions.value = getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid));
+        Subscriptions.splice(
+          0,
+          Subscriptions.length,
+          ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
+        );
 
-        done(dbmData.value);
+        done(dbmData);
       } else {
         done([]); // no children returned
       }
@@ -167,11 +172,12 @@ function onLazyLoad({
 
 function onValueEdit(newValue: undefined, node: TreeNode) {
   console.log(node.value, node.value === undefined);
+  if (!node.key) return;
   const sub = getSubscriptionsByUuid(node.key);
   if (sub) {
     setValues([
       {
-        path: sub.path ?? '',
+        path: sub.value?.path ?? '',
         value: newValue,
       },
     ]).catch((err) => {
@@ -180,37 +186,72 @@ function onValueEdit(newValue: undefined, node: TreeNode) {
   }
 }
 
-watch(
-  expanded,
-  (newVal, oldVal) => {
-    const collapsedKeys = oldVal.filter((key) => !newVal.includes(key));
-    collapsedKeys.forEach((key: string) => {
-      // WebSocket unsubscribe
-      unsubscribe([
+function onExpandedChange(newExpanded: readonly string[]) {
+  const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
+  const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
+
+  if (collapsed.length) {
+    collapsed.forEach((key: string) => {
+      subscribe([
         {
           uuid: key,
-          path: '.*',
-          depth: 0,
+          path: '',
+          depth: 2,
         },
       ])
         .then((resp) => {
-          // Remove children of this node from the tree
-          removeSubtreeByParentKey(key);
-          if (resp?.unsubscribe) {
+          if (resp?.subscribe) {
+            // Optional: update your internal store too
+            addChildrentoTree(resp?.subscribe);
+
             const toRemove = new Set(
-              resp.unsubscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
+              resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
             );
 
-            Subscriptions.value = Subscriptions.value.filter((sub) => !toRemove.has(sub.uuid));
+            Subscriptions.splice(
+              0,
+              Subscriptions.length,
+              ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
+            );
           }
         })
         .catch((err) => {
           NotifyResponse($q, err, 'error');
         });
     });
+  } else if (newlyExpanded.length) {
+    newlyExpanded.forEach((key: string) => {
+      subscribe([
+        {
+          uuid: key,
+          path: '',
+          depth: 2,
         },
-  { deep: false },
-);
+      ])
+        .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.splice(
+              0,
+              Subscriptions.length,
+              ...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
+            );
+          }
+        })
+        .catch((err) => {
+          NotifyResponse($q, err, 'error');
+        });
+    });
+  }
+
+  lastExpanded = [...newExpanded];
+}
 </script>
 
 <style scoped>

src/components/dbm/UpdateValue.vue

@@ -0,0 +1,13 @@
+<template>
+  <QCard v-if="props.display"> Test </QCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  display: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+});
+</script>

src/components/dbm/dataTable.vue

@@ -1,29 +1,42 @@
 <template>
   <div class="q-pa-md">
     <q-table
-      v-if="props.rows.length > 0"
+      v-if="tableRows.length > 0"
       style="height: 600px"
       flat
       bordered
       :title="props.rows[0]?.path"
-      :rows="props.rows ?? []"
+      :rows="rows"
       :columns="columns"
       row-key="path"
       virtual-scroll
       :rows-per-page-options="[0]"
-    />
+    >
+      <template v-slot:body-cell-value="props">
+        <q-td :props="props" @click="openDialog(props.row)">
+          <span :class="['cursor-pointer', open ? 'text-green' : '']"> {{ props.row.value }}</span>
+        </q-td>
+      </template>
+    </q-table>
+    <Dialog dialogLabel="Update Value" :show-dialog="open" />
   </div>
 </template>
 
 <script setup lang="ts">
+import Dialog from 'src/components/dialog/UpdateValueDialog.vue';
 import type { QTableProps } from 'quasar';
-import type { Subscribe } from 'src/models/Subscribe';
+import type { Subs, Subscribe } from 'src/models/Subscribe';
+import { computed, ref } from 'vue';
+
+const open = ref(false);
 
 // we generate lots of rows here
 const props = defineProps<{
-  rows: Subscribe[];
+  rows: Subs;
 }>();
 
+const tableRows = computed(() => [...props.rows]);
+
 const columns = [
   { name: 'path', label: 'Path', field: 'path', align: 'left' },
   {
@@ -32,5 +45,16 @@ const columns = [
     field: 'value',
     align: 'left',
   },
+  {
+    name: 'test',
+    label: '',
+    field: 'test',
+    align: 'left',
+  },
 ] as QTableProps['columns'];
+
+function openDialog(item: Subscribe) {
+  console.log(77, item);
+  open.value = true;
+}
 </script>

src/components/dialog/OkDialog.vue

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

src/components/dialog/UpdateValueDialog.vue

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

src/components/lights/DomeLight.vue

@@ -18,7 +18,7 @@
           reverse
           v-model="light.Brightness"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           color="black"
           style="opacity: 0.5"
@@ -29,7 +29,7 @@
           reverse
           v-model="light.Red"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="red"
@@ -41,7 +41,7 @@
           reverse
           v-model="light.Green"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="green"
@@ -53,7 +53,7 @@
           reverse
           v-model="light.Blue"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="blue"
@@ -65,7 +65,7 @@
           reverse
           v-model="light.White"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="grey"
@@ -77,7 +77,7 @@
           reverse
           v-model="light.Amber"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="amber"
@@ -89,7 +89,7 @@
           reverse
           v-model="light.Purple"
           :min="0"
-          :max="100"
+          :max="255"
           :step="1"
           label
           color="purple"

src/components/lights/DragPad.vue

@@ -3,22 +3,35 @@
     <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-item-label
+            @click="toggleTilt = !toggleTilt"
+            :class="[
+              'cursor-pointer',
+              'text-bold',
+              'clickable-text-effect',
+              'q-mb-none',
+              `text-black`,
+            ]"
+          >
+            {{ toggleTilt ? 'Tilt Fine' : 'Tilt' }}</q-item-label
+          >
           <q-btn
             :size="buttonSize"
             round
             color="positive"
             icon="add_circle_outline"
             class="q-mb-md"
-            @click="reverseTilt ? substractTiltOne : addTiltOne"
-            v-touch-repeat:300:300:300:300:50.mouse="reverseTilt ? substractTiltOne : addTiltOne"
+            @click="reverseTilt ? substractTilt : addTilt"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
+              reverseTilt ? substractTilt : addTilt
+            "
           />
           <q-slider
             vertical
             :reverse="!props.reverseTilt"
             v-model="tilt"
             :min="0"
-            :max="100"
+            :max="255"
             :step="1"
             label
             class="col"
@@ -31,9 +44,9 @@
             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
+            @click="reverseTilt ? addTilt : substractTilt"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
+              reverseTilt ? addTilt : substractTilt
             "
           />
         </div>
@@ -49,7 +62,11 @@
         >
           <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>
+        <q-item-label
+          @click="togglePan = !togglePan"
+          :class="['cursor-pointer', 'text-bold', 'clickable-text-effect', 'q-mt-lg', `text-black`]"
+          >{{ togglePan ? 'Pan Fine' : 'Pan' }}</q-item-label
+        >
 
         <div class="q-gutter-sm row items-center full-width">
           <q-btn
@@ -58,9 +75,9 @@
             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
+            @click="reversePan ? addPan : substractPan"
+            v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="
+              reversePan ? addPan : substractPan
             "
           />
           <q-slider
@@ -68,7 +85,7 @@
             :reverse="props.reversePan"
             v-model="pan"
             :min="0"
-            :max="100"
+            :max="255"
             :step="1"
             label
             color="black"
@@ -80,8 +97,8 @@
             round
             color="positive"
             icon="add_circle_outline"
-            @click="reversePan ? substractPanOne : addPanOne"
-            v-touch-repeat:300:300:300:300:50.mouse="reversePan ? substractPanOne : addPanOne"
+            @click="reversePan ? substractPan : addPan"
+            v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="reversePan ? substractPan : addPan"
           />
         </div>
       </div>
@@ -90,18 +107,53 @@
 </template>
 
 <script lang="ts" setup>
+import { addOne, substractOne } from 'src/utils/number-helpers';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { updateValue } from 'src/composables/dbm/dbmTree';
+import { useQuasar } from 'quasar';
 
+const props = defineProps({
+  reversePan: {
+    type: Boolean,
+    default: false,
+  },
+  reverseTilt: {
+    type: Boolean,
+    default: false,
+  },
+  panPath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  panPath2: {
+    type: String,
+    default: '',
+  },
+  tiltPath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  tiltPath2: {
+    type: String,
+    default: '',
+  },
+});
+
+const $q = useQuasar();
+
+const togglePan = ref(false);
+const toggleTilt = ref(false);
 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 pan = updateValue(props.panPath, $q, togglePan, props.panPath2);
+const tilt = updateValue(props.tiltPath, $q, toggleTilt, props.tiltPath2);
+
+const scaleFactor = computed(() => containerSize.value / 255);
+// 200px → 2, 400px → 4, etc.
 const buttonSize = computed(() => (containerSize.value <= 200 ? 'sm' : 'md'));
 
 onMounted(() => {
@@ -120,16 +172,12 @@ onMounted(() => {
   });
 });
 
-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`,
+    top: `${scale * (props.reverseTilt ? tilt.value : 255 - tilt.value)}px`,
+    left: `${scale * (props.reversePan ? 255 - pan.value : pan.value)}px`,
     width: '12px',
     height: '12px',
     borderRadius: '50%',
@@ -191,35 +239,27 @@ function updatePosition(e: MouseEvent | Touch) {
   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);
+    ? Math.round((1 - newX / rect.width) * 255)
+    : Math.round((newX / rect.width) * 255);
   tilt.value = props.reverseTilt
-    ? Math.round((newY / rect.height) * 100)
-    : Math.round(100 - (newY / rect.height) * 100);
+    ? Math.round((newY / rect.height) * 255)
+    : Math.round(255 - (newY / rect.height) * 255);
 }
 
-function addTiltOne() {
-  if (tilt.value <= 255) {
-    tilt.value++;
-  }
+function addTilt() {
+  addOne(tilt, 255);
 }
 
-function substractTiltOne() {
-  if (tilt.value >= 0) {
-    tilt.value--;
-  }
+function substractTilt() {
+  substractOne(tilt, 0);
 }
 
-function addPanOne() {
-  if (pan.value <= 255) {
-    pan.value++;
-  }
+function addPan() {
+  addOne(pan, 255);
 }
 
-function substractPanOne() {
-  if (pan.value >= 0) {
-    pan.value--;
-  }
+function substractPan() {
+  substractOne(pan, 0);
 }
 </script>
 

src/components/lights/LightBarCBL.vue

@@ -12,46 +12,46 @@
           />
         </div>
         <LightSlider
-          title="Dimmer"
-          :dbm-path="'LightBar:Brightness'"
+          mainTitle="Dimmer"
+          dbm-path="LightBar:Brightness"
           :opacity="0.5"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Strobe"
-          :dbm-path="'LightBar:Strobe'"
+          mainTitle="Strobe"
+          dbm-path="LightBar:Strobe"
           :opacity="0.5"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Program"
-          :dbm-path="'LightBar:Program'"
+          mainTitle="Program"
+          dbm-path="LightBar:Program"
           :opacity="0.5"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Program Speed"
-          :dbm-path="'LightBar:Program:Speed'"
+          mainTitle="Program Speed"
+          dbm-path="LightBar:Program:Speed"
           :opacity="0.8"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Red"
-          :dbm-path="'LightBar:Red'"
+          mainTitle="Red"
+          dbm-path="LightBar:Red"
           color="red"
           :opacity="0.8"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Green"
-          :dbm-path="'LightBar:Green'"
+          mainTitle="Green"
+          dbm-path="LightBar:Green"
           :opacity="0.8"
           color="green"
           class="q-ma-sm"
         ></LightSlider>
         <LightSlider
-          title="Blue"
-          :dbm-path="'LightBar:Blue'"
+          mainTitle="Blue"
+          dbm-path="LightBar:Blue"
           :opacity="0.8"
           color="blue"
           class="q-ma-sm"
@@ -67,12 +67,12 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
+import LightSlider from './LightSlider.vue';
 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);
@@ -87,7 +87,7 @@ onMounted(() => {
   ])
     .then((response) => {
       if (response?.subscribe) {
-        dbmData.value = buildTree(response.subscribe ?? []);
+        dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
       } else {
         NotifyResponse($q, response);
       }
@@ -111,7 +111,7 @@ onUnmounted(() => {
 function changeState() {
   if (brightness.value === 0) {
     if (state.value === 0) {
-      brightness.value = 100;
+      brightness.value = 255;
       return;
     }
     brightness.value = state.value;

src/components/lights/LightSlider.vue

@@ -1,14 +1,22 @@
 <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-item-label v-if="!toggleHighLow" :class="['text-bold', `text-${textColor}`]"
+      ><p v-html="mainTitle"></p>
+    </q-item-label>
+    <q-item-label
+      v-else
+      @click="toggle = !toggle"
+      :class="['cursor-pointer', 'text-bold', 'clickable-text-effect', `text-${textColor}`]"
+      ><p v-html="toggle ? secondTitle : mainTitle"></p>
+    </q-item-label>
     <q-btn
       size="sm"
-      class="q-mb-sm"
+      class="q-mb-md"
       round
       color="positive"
       icon="add_circle_outline"
-      @click="addOne"
-      v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="addOne"
+      @click="reverse ? add : substract"
+      v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? add : substract"
     />
     <div>
       <q-slider
@@ -29,20 +37,30 @@
       round
       color="negative"
       icon="remove_circle_outline"
-      @click="substractOne"
-      v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="substractOne"
+      @click="reverse ? substract : add"
+      v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? substract : add"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { updateValue } from 'src/composables/dbm/dbmTree';
+import { addOne, substractOne } from 'src/utils/number-helpers';
 
 const $q = useQuasar();
 
 const props = defineProps({
-  title: {
+  toggleHighLow: {
+    type: Boolean,
+    default: false,
+  },
+  mainTitle: {
+    type: String,
+    default: '',
+  },
+  secondTitle: {
     type: String,
     default: '',
   },
@@ -77,7 +95,7 @@ const props = defineProps({
   },
   max: {
     type: Number,
-    default: 100,
+    default: 255,
   },
   vertical: {
     type: Boolean,
@@ -105,17 +123,35 @@ const props = defineProps({
   },
 });
 
-const localValue = updateValue(props.dbmPath, $q, props.dbmPath2, props.dbmPath3, props.dbmValue3);
+const toggle = ref(false);
+const localValue = updateValue(
+  props.dbmPath,
+  $q,
+  toggle,
+  props.dbmPath2,
+  props.dbmPath3,
+  props.dbmValue3,
+);
 
-function addOne() {
-  if (localValue.value <= 255) {
-    localValue.value++;
-  }
+function add() {
+  addOne(localValue, 255);
 }
 
-function substractOne() {
-  if (localValue.value >= 0) {
-    localValue.value--;
-  }
+function substract() {
+  substractOne(localValue, 0);
 }
 </script>
+
+<style>
+.clickable-text-effect {
+  cursor: pointer;
+  color: #040303; /* Static text color */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+  /* Add hover effect here if you want it part of this class */
+  transition: text-shadow 0.2s ease-in-out;
+}
+
+.clickable-text-effect:hover {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+</style>

src/components/lights/MovingHead.vue

@@ -21,49 +21,59 @@ select
         </div>
 
         <LightSlider
-          title="Dimmer"
-          :dbm-path="'MovingHead:Brightness'"
-          :dbm-path2="'MovingHead:BrightnessFine'"
-          :dbm-path3="'MovingHead:Strobe'"
+          mainTitle="Dimmer"
+          second-title="Dimmer Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Brightness"
+          dbm-path2="MovingHead:BrightnessFine"
+          dbm-path3="MovingHead:Strobe"
           :dbm-value3="255"
           :opacity="0.5"
           class="q-ma-md"
         />
         <LightSlider
-          title="Red"
-          :dbm-path="'MovingHead:Red'"
-          :dbm-path2="'MovingHead:RedFine'"
+          mainTitle="Red"
+          second-title="Red Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Red"
+          dbm-path2="MovingHead:RedFine"
           :opacity="0.8"
           color="red"
           class="q-ma-md"
         />
         <LightSlider
-          title="Green"
-          :dbm-path="'MovingHead:Green'"
-          :dbm-path2="'MovingHead:GreenFine'"
+          mainTitle="Green"
+          second-title="Green Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Green"
+          dbm-path2="MovingHead:GreenFine"
           :opacity="0.8"
           color="green"
           class="q-ma-md"
         />
         <LightSlider
-          title="Blue"
-          :dbm-path="'MovingHead:Blue'"
-          :dbm-path2="'MovingHead:BlueFine'"
+          mainTitle="Blue"
+          second-title="Blue Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:Blue"
+          dbm-path2="MovingHead:BlueFine"
           :opacity="0.8"
           color="blue"
           class="q-ma-md"
         />
         <LightSlider
-          title="White"
-          :dbm-path="'MovingHead:White'"
-          :dbm-path2="'MovingHead:WhiteFine'"
+          mainTitle="White"
+          second-title="White Fine"
+          :toggle-high-low="true"
+          dbm-path="MovingHead:White"
+          dbm-path2="MovingHead:WhiteFine"
           :opacity="0.3"
           color="grey"
           class="q-ma-md"
         />
         <LightSlider
-          title="Zoom"
-          :dbm-path="'MovingHead:Zoom'"
+          mainTitle="Zoom"
+          dbm-path="MovingHead:Zoom"
           :opacity="1"
           color="black"
           class="q-ma-md"
@@ -71,9 +81,11 @@ select
         <div>
           <DragPad
             class="q-ma-md"
-            v-model:pan="pan"
+            pan-path="MovingHead:Pan"
+            pan-path2="MovingHead:PanFine"
             v-model:reverse-pan="settings.reversePan"
-            v-model:tilt="tilt"
+            tilt-path="MovingHead:Tilt"
+            tilt-path2="MovingHead:TiltFine"
             v-model:reverse-tilt="settings.reverseTilt"
           />
         </div>
@@ -92,19 +104,17 @@ select
 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 { onBeforeUpdate, computed, onMounted, onUnmounted, ref } from 'vue';
+import { subscribeToPath, unsubscribe, setValues } from 'src/services/websocket';
 import { LocalStorage } from 'quasar';
-import { getSubscriptionsByPath, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
+import { getSubscriptionsByPath, updateValue } 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 state = updateValue('MovingHead:State', $q);
 const settings = ref<Settings>({
   show: false,
   reversePan: false,
@@ -115,24 +125,11 @@ const settings = ref<Settings>({
 onMounted(() => {
   settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
   settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
+  subscribeToPath($q, 'MovingHead:.*');
+});
 
-  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');
-    });
+onBeforeUpdate(() => {
+  subscribeToPath($q, 'MovingHead:.*');
 });
 
 onUnmounted(() => {
@@ -147,51 +144,32 @@ onUnmounted(() => {
 });
 
 function changeState() {
+  console.log(55, brightness.value);
+  console.log(56, state.value);
   if (brightness.value === 0) {
     if (state.value === 0) {
-      brightness.value = 100;
+      brightness.value = 255;
       return;
     }
     brightness.value = state.value;
+    console.log(57, brightness.value);
     return;
   }
   state.value = brightness.value;
+  console.log(58, state.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);
+      if (!sub.value) return 0;
+      return Number(sub.value.value);
     },
     set(val) {
-      const baseValue = Math.round((255 / 100) * val);
-      const setPaths = [{ path, value: baseValue }];
-      setPaths.push({ path: `${path}Fine`, value: baseValue });
+      const setPaths = [{ path, value: val }];
+      setPaths.push({ path: `${path}Fine`, value: val });
       setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
 
       setValues(setPaths)

src/components/scenes/ScenesPage.vue

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

src/composables/dbm/dbmTree.ts

@@ -1,12 +1,13 @@
-import type { Subs } from 'src/models/Subscribe';
-import { ref, nextTick, computed } from 'vue';
+import type { Subs, Subscribe } from 'src/models/Subscribe';
+import type { Ref } from 'vue';
+import { nextTick, computed, reactive, ref } from 'vue';
 import { setValues } from 'src/services/websocket';
 import { NotifyResponse } from 'src/composables/notify';
 import type { QVueGlobals } from 'quasar';
 
-const Subscriptions = ref<Subs>([]);
+const Subscriptions = reactive<Record<string, Subscribe>>({});
 
-export const dbmData = ref<TreeNode[]>([]);
+export const dbmData = reactive<TreeNode[]>([]);
 
 export interface TreeNode {
   path: string | undefined;
@@ -28,9 +29,10 @@ export function buildTree(subs: Subs): TreeNode[] {
 
   const root: TreeMap = {};
 
-  Subscriptions.value = subs;
-
   for (const item of subs) {
+    if (item.path) {
+      addNewSubscription(item);
+    }
     const pathParts = item.path?.split(':') ?? [];
     let current = root;
 
@@ -54,13 +56,15 @@ export function buildTree(subs: Subs): TreeNode[] {
   }
 
   function convert(map: TreeMap): TreeNode[] {
-    return Object.entries(map).map(([path, node]) => ({
+    return reactive(
+      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 [
@@ -74,24 +78,32 @@ export function buildTree(subs: Subs): TreeNode[] {
 }
 
 export function getTreeElementByPath(path: string) {
-  return dbmData.value.find((s) => s.path === path);
+  const sub = dbmData.find((s) => s.path === path);
+  return ref(sub);
 }
 
-export function getSubscriptionsByUuid(uid: string | undefined) {
-  return Subscriptions.value.find((s) => s.uuid === uid);
+export function getSubscriptionsByUuid(uid: string) {
+  const sub = Object.values(Subscriptions).find((sub) => sub.uuid === uid);
+  return ref(sub);
 }
 
 export function addChildrentoTree(subs: Subs) {
   const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
-  const existingIds = new Set(Subscriptions.value.map((sub) => sub.uuid));
+  const existingIds = new Set(Object.values(Subscriptions).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);
+  for (const sub of newSubs) {
+    if (sub.path !== undefined) {
+      Subscriptions[sub.path] = sub;
+    } else {
+      console.warn('Skipping sub with undefined path', sub);
+    }
+  }
 
   void nextTick(() => {
-    dbmData.value = buildTree(Subscriptions.value);
+    dbmData.splice(0, dbmData.length, ...buildTree(Object.values(Subscriptions)));
   });
 }
 
@@ -111,39 +123,48 @@ export function removeSubtreeByParentKey(parentKey: string) {
     return false;
   }
 
-  removeChildrenAndMarkLazy(dbmData.value, parentKey);
+  removeChildrenAndMarkLazy(dbmData, parentKey);
 }
 
-export function getSubscriptionsByPath(path: string | undefined) {
-  return Subscriptions.value.find((s) => s.path === path);
+export function getSubscriptionsByPath(path: string) {
+  return ref(Subscriptions[path]);
+}
+
+export function addNewSubscription(sub: Subscribe) {
+  if (!sub.path) return;
+  Subscriptions[sub.path] = sub;
 }
 
 export function getAllSubscriptions() {
-  return Subscriptions.value;
+  return Object.values(Subscriptions);
 }
 
 export function updateValue(
   path1: string,
   $q: QVueGlobals,
+  toggle?: Ref<boolean>,
   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);
+      const sub = getSubscriptionsByPath(toggle?.value && path2 ? path2 : path1);
+      return sub?.value ? Number(sub.value.value ?? 0) : 0;
     },
     set(val) {
-      const baseValue = Math.round((255 / 100) * val);
-      const setPaths = [{ path: path1, value: baseValue }];
-      if (path2) {
+      const baseValue = val;
+      const setPaths = [];
+      if (toggle?.value && path2) {
         setPaths.push({ path: path2, value: baseValue });
+      } else {
+        setPaths.push({ path: path1, value: baseValue });
       }
+
       if (path3) {
         setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
       }
+
       setValues(setPaths)
         .then((response) => NotifyResponse($q, response))
         .catch((err) => {

src/composables/notify.ts

@@ -16,7 +16,7 @@ export function NotifyResponse(
       icon = 'warning';
       break;
     case 'error':
-      color = 'orange';
+      color = 'red';
       icon = 'error';
       break;
   }
@@ -26,8 +26,9 @@ export function NotifyResponse(
     if (message === '') {
       return;
     }
-    color = typeof response === 'string' ? response : response?.error ? 'red' : color;
-    icon = typeof response === 'string' ? response : response?.error ? 'error' : icon;
+
+    color = typeof response === 'string' ? color : response?.error ? 'red' : color;
+    icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
     $q?.notify({
       message: message,
       color: color,
@@ -37,3 +38,30 @@ export function NotifyResponse(
     });
   }
 }
+
+export function NotifyDialog(
+  $q: QVueGlobals,
+  title: string,
+  text: string,
+  okText?: string,
+  cancelText?: string,
+) {
+  return new Promise((resolve) => {
+    $q.dialog({
+      title: title,
+      message: text,
+      persistent: true,
+      ok: okText ?? 'OK',
+      cancel: cancelText ?? 'CANCEL',
+    })
+      .onOk(() => {
+        resolve(true);
+      })
+      .onCancel(() => {
+        resolve(false);
+      })
+      .onDismiss(() => {
+        resolve(false);
+      });
+  });
+}

src/layouts/MainLayout.vue

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

src/models/Pong.ts

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

src/models/Publish.ts

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

src/models/Scene.ts

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

src/models/Set.ts

@@ -2,7 +2,7 @@ export type Set = {
   uuid?: string | undefined;
   path: string;
   type?: string;
-  value: number | boolean | undefined;
+  value: string | number | boolean | undefined;
   create?: boolean;
 };
 

src/models/Subscribe.ts

@@ -1,8 +1,9 @@
+// API type (from backend)
 export type Subscribe = {
-  uuid?: string | undefined;
-  path?: string | undefined;
+  uuid?: string;
+  path?: string;
   depth?: number;
-  value?: string | number | boolean | undefined;
+  value?: string | number | boolean;
   hasChild?: boolean;
 };
 

src/models/Value.ts

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

src/pages/DataPage.vue

@@ -10,6 +10,7 @@ import { NotifyResponse } from 'src/composables/notify';
 import { useQuasar } from 'quasar';
 
 const $q = useQuasar();
+
 function saveDBM() {
   api
     .get('saveData')

src/router/routes.ts

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

src/services/websocket.ts

@@ -3,20 +3,46 @@ import type { Publish } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
 import {
-  getAllSubscriptions,
   buildTree,
   dbmData,
-  getSubscriptionsByUuid,
+  getSubscriptionsByPath,
+  getAllSubscriptions,
 } from 'src/composables/dbm/dbmTree';
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import type { Subs } from 'src/models/Subscribe';
 import type { Sets } from 'src/models/Set';
+import type { PongMessage } from 'src/models/Pong';
+import { NotifyResponse } from 'src/composables/notify';
 
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
-export const lastKnownValues = reactive(new Map<string, string>());
+//const lastKnownValues: Record<string, string> = reactive({});
 
 export let socket: WebSocket | null = null;
 const isConnected = ref(false);
+let lastPongTime = Date.now();
+
+function pingLoop(interval: number = 5000) {
+  // Start sending ping every 5 seconds
+  setInterval(() => {
+    if (!socket || socket.readyState !== WebSocket.OPEN) return;
+
+    // If no pong received in last 10 seconds, close
+    if (Date.now() - lastPongTime > interval + 10000) {
+      console.warn('No pong response, closing socket...');
+      socket.close();
+      return;
+    }
+    socket.send(JSON.stringify({ type: 'ping' }));
+  }, interval);
+}
+
+function isPong(msg: PongMessage | undefined | null) {
+  if (msg?.type === 'pong') {
+    lastPongTime = Date.now();
+    return true;
+  }
+  return false;
+}
 
 export function initWebSocket(url: string, $q?: QVueGlobals) {
   const connect = () => {
@@ -25,6 +51,8 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
     socket.onopen = () => {
       console.log('WebSocket connected');
       isConnected.value = true;
+      // Start sending ping every 5 seconds
+      pingLoop(5000);
     };
     socket.onclose = () => {
       isConnected.value = false;
@@ -49,9 +77,13 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
       });
     };
     socket.onmessage = (event) => {
+      if (typeof event.data === 'string') {
         const message = JSON.parse(event.data);
-      const id = message.id;
 
+        // Handle pong
+        if (isPong(message)) return;
+
+        const id = message.id;
         if (id && pendingResponses.has(id)) {
           pendingResponses.get(id)?.(message); // resolve the promise
           pendingResponses.delete(id);
@@ -59,33 +91,13 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
         }
 
         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;
+            const sub = getSubscriptionsByPath(pub.path);
+            if (sub.value && pub.value) {
+              sub.value.value = pub.value;
             }
+            dbmData.splice(0, dbmData.length, ...buildTree(getAllSubscriptions())); // rebuild reactive tree
           });
-
-        if (changed) {
-          dbmData.value = buildTree(getAllSubscriptions()); // rebuild reactive tree
         }
       }
     };
@@ -131,6 +143,26 @@ export function subscribe(data: Subs): Promise<Response | undefined> {
   return send({ subscribe: data });
 }
 
+export function subscribeToPath(q: QVueGlobals, path: string) {
+  subscribe([
+    {
+      path: path,
+      depth: 0,
+    },
+  ])
+    .then((response) => {
+      console.log(response);
+      if (response?.subscribe) {
+        dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
+      } else {
+        NotifyResponse(q, response);
+      }
+    })
+    .catch((err) => {
+      NotifyResponse(q, err, 'error');
+    });
+}
+
 export function unsubscribe(data: Subs): Promise<Response | undefined> {
   return send({ unsubscribe: data });
 }

src/utils/number-helpers.ts

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