From 1ddf394176ffe7e1c4118ead46b9fa76c6f3c614 Mon Sep 17 00:00:00 2001
From: luixal <luixal@gmail.com>
Date: Thu, 7 Jan 2021 21:23:13 +0100
Subject: [PATCH] Refactors created function (splits logic for getting message)
 and adds timeout according to refreshInterval field

---
 docs/configuration.md      |  2 ++
 src/components/Message.vue | 29 ++++++++++++++++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 93fa898..8bff54f 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -69,12 +69,14 @@ message:
   # mapping: # allows to map fields from the remote format to the one expected by Homer
   #   title: 'id' # use value from field 'id' as title
   #   content: 'value' # value from field 'value' as content
+  # refreshInterval: 10000 # time interval to refresh message
   #
   # Real example using chucknorris.io for showing Chuck Norris facts as messages:
   # url: https://api.chucknorris.io/jokes/random
   # mapping:
   #   title: 'id'
   #   content: 'value'
+  # refreshInterval: 10000
   style: "is-warning"
   title: "Optional message!"
   icon: "fa fa-exclamation-triangle"
diff --git a/src/components/Message.vue b/src/components/Message.vue
index df203ae..72106c2 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -29,20 +29,27 @@ export default {
   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) {
-      let fetchedMessage = await this.getMessage(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];
-        }
-      }
-    }
+    await this.getMessage();
     this.show = this.message.title || this.message.content;
   },
+
   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];
+          }
+        }
+      }
+      console.log(this.item.refreshInterval);
+      if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval);
+    },
+
+    downloadMessage: function (url) {
       return fetch(url).then(function (response) {
         if (response.status != 200) {
           return;
-- 
2.41.0