Merge branch 'master' into dynamic-message

diff --git a/README.md b/README.md
index 62bbd779a19f85cd217ae3e25c645eebbb2ab7e5..f1495495486ad80f6a44dd85572aa743ea100e26 100644 (file)
--- a/README.md
+++ b/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)

diff --git a/app.js b/app.js
index 40830da1a457f3053b4ff230b54e0814c0add6a2..6c2ba9078ef73da8214034e360530a33e7a3a55c 100644 (file)
--- a/app.js
+++ b/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; 

diff --git a/config.yml b/config.yml
index 2adddb181ea9478ce7a63cb20bc0e93c209c29df..7288da6dd2c857221bc4450f50dd7b0e447cdb5f 100644 (file)
--- a/config.yml
+++ b/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."