From 7fac5392b8a756b74b4e667fdf8e6ef349f41230 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 13 Nov 2022 23:52:21 +0100
Subject: [PATCH] Blink entities only if their values have actually changed

---
 .../src/components/panels/Entities/Entity.vue | 25 +++++++++++++--
 .../backend/http/webapp/src/utils/Types.vue   | 32 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
index 23af09300..4a4257ea0 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
@@ -26,6 +26,16 @@ export default {
     }
   },
 
+  methods: {
+    valuesEqual(a, b) {
+      a = {...a}
+      b = {...b}
+      delete a.updated_at
+      delete b.updated_at
+      return this.objectsEqual(a, b)
+    },
+  },
+
   mounted() {
     if (this.type !== 'Entity') {
       const type = this.type.split('_').map((t) =>
@@ -34,7 +44,10 @@ export default {
 
       this.$watch(
           () => this.value,
-          () => {
+          (newValue, oldValue) => {
+              if (this.valuesEqual(oldValue, newValue))
+                return false
+
               this.justUpdated = true
               const self = this;
               setTimeout(() => self.justUpdated = false, 1000)
@@ -63,8 +76,16 @@ export default {
 }
 
 @keyframes blink-animation {
-  to {
+  0% {
+    background: initial
+  }
+
+  50% {
     background: $active-bg;
   }
+
+  100% {
+    background: initial
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/utils/Types.vue b/platypush/backend/http/webapp/src/utils/Types.vue
index 7afd30909..c39577caf 100644
--- a/platypush/backend/http/webapp/src/utils/Types.vue
+++ b/platypush/backend/http/webapp/src/utils/Types.vue
@@ -36,7 +36,37 @@ export default {
       })
 
       return `${value.toFixed(2)} ${unit}`
-    }
+    },
+
+    objectsEqual(a, b) {
+      if (typeof(a) !== 'object' || typeof(b) !== 'object')
+        return false
+
+      for (const p of Object.keys(a || {})) {
+        switch(typeof(a[p])) {
+          case 'object':
+            if (!this.objectsEqual(a[p], b[p]))
+              return false
+            break
+
+          case 'function':
+            if (a[p].toString() != b[p]?.toString())
+              return false
+            break
+
+          default:
+            if (a[p] != b[p])
+              return false
+            break
+        }
+      }
+
+      for (const p of Object.keys(b || {}))
+        if (a[p] == null && b[p] != null)
+          return false
+
+      return true
+    },
   },
 }
 </script>