Merge pull request #175 from luixal/message-remote-fields-mapping

[github/bastienwirtz/homer.git] / src / components / Message.vue

diff --git a/src/components/Message.vue b/src/components/Message.vue
index fcb0fbba9bb79adf4770dfa8c094a53152a9a3d4..2f71f3f6689c5b385d3d81ad7cb3a4bcdfd5b5bb 100644 (file)
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,9 +1,16 @@
 <template>
-  <article v-if="item" class="message" :class="item.style">
-    <div v-if="item.title" class="message-header">
-      <p>{{ item.title }}</p>
+  <article v-if="show" class="message" :class="message.style">
+    <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="item.content" class="message-body" v-html="item.content"></div>
+    <div
+      v-if="message.content"
+      class="message-body"
+      v-html="message.content"
+    ></div>
   </article>
 </template>
 
@@ -13,22 +20,35 @@ export default {
   props: {
     item: Object,
   },
-  created: function () {
+  data: function () {
+    return {
+      show: false,
+      message: {},
+    };
+  },
+  created: async function () {
     // Look for a new message if an endpoint is provided.
-    let that = this;
-    if (this.item && this.item.url) {
-      this.getMessage(this.item.url).then(function (message) {
+    this.message = Object.assign({}, this.item);
+    await this.getMessage();
+    this.show = this.message.title || this.message.content;
+  },
+
+  methods: {
+    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 message && message[prop] !== null) {
-            that.item[prop] = message[prop];
+          if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
+            this.message[prop] = fetchedMessage[prop];
           }
         }
-      });
-    }
-  },
-  methods: {
-    getMessage: function (url) {
+      }
+      if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval);
+    },
+
+    downloadMessage: function (url) {
       return fetch(url).then(function (response) {
         if (response.status != 200) {
           return;
@@ -36,6 +56,13 @@ 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>