X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FMessage.vue;h=7c6acdde08919ea8f85f506ab37a496d1b153e69;hb=b6c667a129867db8c0f8aa29d12013b47e0c6516;hp=d007d3ec222e005c29f8c5c81fcefa10f40ab9c2;hpb=8ae1fe8a4ecdf5dfd8cabb4dc19bbe24401acd25;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/Message.vue b/src/components/Message.vue
index d007d3e..7c6acdd 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,7 +1,10 @@
 <template>
   <article v-if="show" class="message" :class="message.style">
-    <div v-if="message.title" class="message-header">
-      <p>{{ message.title }}</p>
+    <div v-if="message.title || message.icon" class="message-header">
+      <p>
+        <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
+        {{ message.title }}
+      </p>
     </div>
     <div
       v-if="message.content"
@@ -19,26 +22,42 @@ export default {
   },
   data: function () {
     return {
-      show: false,
       message: {},
     };
   },
   created: async function () {
     // Look for a new message if an endpoint is provided.
     this.message = Object.assign({}, this.item);
-    if (this.item && this.item.url) {
-      const fetchedMessage = await this.getMessage(this.item.url);
-      // keep the original config value if no value is provided by the endpoint
-      for (const prop of ["title", "style", "content"]) {
-        if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
-          this.message[prop] = fetchedMessage[prop];
-        }
-      }
-    }
-    this.show = this.message.title || this.message.content;
+    await this.getMessage();
+  },
+  computed: {
+    show: function () {
+      return this.message.title || this.message.content;
+    },
+  },
+  watch: {
+    item: function (item) {
+      this.message = Object.assign({}, item);
+    },
   },
   methods: {
-    getMessage: function (url) {
+    getMessage: async function () {
+      if (this.item && this.item.url) {
+        let fetchedMessage = await this.downloadMessage(this.item.url);
+        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"]) {
+          if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
+            this.message[prop] = fetchedMessage[prop];
+          }
+        }
+      }
+      if (this.item.refreshInterval)
+        setTimeout(this.getMessage, this.item.refreshInterval);
+    },
+
+    downloadMessage: function (url) {
       return fetch(url).then(function (response) {
         if (response.status != 200) {
           return;
@@ -46,6 +65,15 @@ export default {
         return response.json();
       });
     },
+
+    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]];
+      return mapped;
+    },
   },
 };
 </script>