Update README.md

[github/bastienwirtz/homer.git] / app.js

diff --git a/app.js b/app.js
index def0be7957c525689365c9ea17ba203cb5212b39..c35e4c7da7aa1f4c8a7297434d886473657a8508 100644 (file)
--- a/app.js
+++ b/app.js
@@ -7,22 +7,34 @@ const app = new Vue({
         vlayout: true,
         isDark: null
     },
-    created: function () {
+    created: async function () {
         let that = this;
-        
-        this.isDark = 'overrideDark' in localStorage ? 
+
+        this.isDark = 'overrideDark' in localStorage ?
             JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
 
         if ('vlayout' in localStorage) {
             this.vlayout = JSON.parse(localStorage.vlayout)
         }
-        
+
         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 && 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,14 +64,22 @@ 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; 
         }, 
         toggleLayout: function() {
             this.vlayout = !this.vlayout;
-            localStorage.vlayout = this.vlayout; 
-        }, 
+            localStorage.vlayout = this.vlayout;
+        },
     }
 });
 
@@ -67,7 +87,7 @@ Vue.component('service', {
     props: ['item'],
     template: `<div>
     <div class="card">
-        <a :href="item.url">
+        <a :href="item.url" :target="item.target">
             <div class="card-content">
                 <div class="media">
                     <div v-if="item.logo" class="media-left">
@@ -95,6 +115,6 @@ Vue.component('service', {
 
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/worker.js');
+        navigator.serviceWorker.register('worker.js');
     });
 }