From aaa5ef2ca471d13989404dcb98972adb17e00a01 Mon Sep 17 00:00:00 2001
From: javalikescript <javalikescript@free.fr>
Date: Wed, 1 Jan 2025 17:52:05 +0100
Subject: [PATCH] Add app watcher on data change

---
 extensions/web-base/web-base.lua   |  4 +--
 extensions/web-base/www/app/app.js | 41 +++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/extensions/web-base/web-base.lua b/extensions/web-base/web-base.lua
index 0987557..0d31e15 100644
--- a/extensions/web-base/web-base.lua
+++ b/extensions/web-base/web-base.lua
@@ -75,9 +75,7 @@ local function webSocketBroadcast(data)
   logger:fine('WebSocket broadcast')
   local message = json.encode(data)
   for _, websocket in ipairs(websockets) do
-    if not websocket.lhaEvent or websocket.lhaEvent == data.event then
-      websocket:sendTextMessage(message)
-    end
+    websocket:sendTextMessage(message)
   end
 end
 
diff --git a/extensions/web-base/www/app/app.js b/extensions/web-base/www/app/app.js
index 5134781..e58e20b 100644
--- a/extensions/web-base/www/app/app.js
+++ b/extensions/web-base/www/app/app.js
@@ -100,6 +100,7 @@ var app = new Vue({
     menu: '',
     hideMenu: window.innerWidth < 360,
     dialog: '',
+    watchers: [],
     page: '',
     path: '',
     pages: {},
@@ -174,6 +175,25 @@ var app = new Vue({
         this.toPage('home');
       }
     },
+    watchDataChange: function(path, fn) {
+      var parts = path.split('/', 2);
+      var thingId = parts[0];
+      var propName = parts[1];
+      var watcher = {thingId: thingId, propertyName: propName, fn: fn};
+      this.watchers.push(watcher);
+      return watcher;
+    },
+    unwatchDataChange: function(watcherOrFn) {
+      var i = 0;
+      while (i < this.watchers.length) {
+        var watcher = this.watchers[i];
+        if (watcher === watcherOrFn || watcher.fn === watcherOrFn) {
+          this.watchers.splice(i, 1);
+        } else {
+          i++;
+        }
+      }
+    },
     onMessage: function(message) {
       //console.log('onMessage', message);
       if (typeof message !== 'object') {
@@ -192,8 +212,27 @@ var app = new Vue({
               }
             }
           }
-          this.callPage(this.page, 'onDataChange', message.data);
         }
+        this.watchers.forEach(function(watcher) {
+          var thingId = watcher.thingId;
+          if (thingId) {
+            var props = message.data[thingId];
+            if (props) {
+              var name = watcher.propertyName;
+              if (name) {
+                var value = props[name];
+                if (value !== undefined) {
+                  watcher.fn(value);
+                }
+              } else {
+                watcher.fn(props);
+              }
+            }
+          } else {
+            watcher.fn(message.data);
+          }
+        });
+        this.callPage(this.page, 'onDataChange', message.data);
         break;
       case 'logs':
         if (Array.isArray(message.logs)) {