X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FMessage.vue;h=2b338ef2e167d0b21962121daa93192d173e5e20;hb=5418c6291a39d27aeee471673adba742080e1ccb;hp=72106c25450761f95cbf8011608ad636b9ec3864;hpb=1ddf394176ffe7e1c4118ead46b9fa76c6f3c614;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 72106c2..2b338ef 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -22,7 +22,6 @@ export default {
   },
   data: function () {
     return {
-      show: false,
       message: {},
     };
   },
@@ -30,23 +29,41 @@ export default {
     // Look for a new message if an endpoint is provided.
     this.message = Object.assign({}, this.item);
     await this.getMessage();
-    this.show = this.message.title || this.message.content;
   },
-
+  computed: {
+    show: function () {
+      return this.message.title || this.message.content;
+    },
+  },
+  watch: {
+    item: function (item) {
+      this.message = Object.assign({}, item);
+    },
+  },
   methods: {
-    getMessage: async function() {
-      if (this.item && this.item.url) {
+    getMessage: async function () {
+      if (!this.item) {
+        return;
+      }
+      if (this.item.url) {
         let fetchedMessage = await this.downloadMessage(this.item.url);
-        if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage);
+        if (this.item.mapping) {
+          fetchedMessage = this.mapRemoteMessage(fetchedMessage);
+        }
+
         // keep the original config value if no value is provided by the endpoint
-        for (const prop of ["title", "style", "content"]) {
+        const message = this.message;
+        for (const prop of ["title", "style", "content", "icon"]) {
           if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
-            this.message[prop] = fetchedMessage[prop];
+            message[prop] = fetchedMessage[prop];
           }
         }
+        this.message = { ...message }; // Force computed property to re-evaluate
+      }
+
+      if (this.item.refreshInterval) {
+        setTimeout(this.getMessage, this.item.refreshInterval);
       }
-      console.log(this.item.refreshInterval);
-      if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval);
     },
 
     downloadMessage: function (url) {
@@ -61,7 +78,9 @@ export default {
     mapRemoteMessage: function (message) {
       let mapped = {};
       // map property from message into mapped according to mapping config (only if field has a value):
-      for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]];
+      for (const prop in this.item.mapping)
+        if (message[this.item.mapping[prop]])
+          mapped[prop] = message[this.item.mapping[prop]];
       return mapped;
     },
   },