Merge pull request #7 from bastienwirtz/dynamic-message

Optionaly load message from an endpoint.

README.md

@@ -27,6 +27,7 @@ logo: "assets/homer.png"
 
 # Optional message
 message:
+  # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
   style: "is-warning"
   title: "Optional message!"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula."
@@ -85,3 +86,16 @@ services:
         url: "#"
 
 ```
+
+If you choose to fetch message information from an endpoint, the output format should be:
+
+```json
+{
+	"style": null,
+	"title": "Lorem ipsum 42",
+	"content": "LA LA LA Lorem ipsum dolor sit amet, ....."
+}
+```
+
+`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
+Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar)

app.js

@@ -7,7 +7,7 @@ const app = new Vue({
         vlayout: true,
         isDark: null
     },
-    created: function () {
+    created: async function () {
         let that = this;
 
         this.isDark = 'overrideDark' in localStorage ?
@@ -18,11 +18,23 @@ const app = new Vue({
         }
 
         this.checkOffline();
-        that.getConfig().then(function (config) {
-            that.config = config;
-        }).catch(function () {
-            that.offline = true;
-        });
+        try {
+            this.config =  await this.getConfig();
+        } catch (error) {
+            this.offline = true;
+        }
+
+        // Look for a new message if an endpoint is provided.
+        if (this.config.message.url) {
+            this.getMessage(this.config.message.url).then(function(message){
+                // 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.config.message[prop] = message[prop];
+                    }    
+                }
+            });
+        }
 
         document.addEventListener('visibilitychange', function () {
             if (document.visibilityState == "visible") {
@@ -52,6 +64,14 @@ const app = new Vue({
                 });
             });
         },
+        getMessage: function (url) {
+            return fetch(url).then(function (response) {
+                if (response.status != 200) {
+                    return;
+                }
+                return response.json();
+            });
+        },
         toggleTheme: function() {
             this.isDark = !this.isDark;
             localStorage.overrideDark = this.isDark; 

config.yml

@@ -10,6 +10,7 @@ icon: "fas fa-skull-crossbones"
 # Optional message
 # See https://bulma.io/documentation/components/message/#colors for styling options.
 message:
+  # url: https://....
   style: "is-warning"
   title: "Optional message!"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula."