Add offline cache + improve layout

1 files changed, 39 insertions, 28 deletions

diff --git a/app.js b/app.js
index fda16b2..6e20ea3 100644
--- a/app.js
+++ b/app.js
@@ -1,42 +1,53 @@
-var app = new Vue({
+const app = new Vue({
     el: '#app',
     data: {
         config: null,
-        filter: ''
+        offline: false,
+        filter: '',
     },
-    beforeCreate() {
+    created: function () {
         let that = this;
 
-        return getConfig().then(function (config) {
-            const size = 3;
-            config.services.forEach(function (service) {
-                service.rows = [];
-                items = service.items;
-                while (items.length) {
-                    service.rows.push(items.splice(0, size));
-                }
-
-                if (service.rows.length) {
-                    let last = service.rows.length - 1;
-                    service.rows[last] = service.rows[last].concat(Array(size - service.rows[last].length));
-                }
-            });
+        this.checkOffline();
+        that.getConfig().then(function (config) {
             that.config = config;
         }).catch(function () {
-            console.error('Fail to get config');
+            that.offline = true;
         });
+
+        document.addEventListener('visibilitychange', function () {
+            if (document.visibilityState == "visible") {
+                that.checkOffline();
+            }
+        }, false);
+    },
+    methods: {
+        checkOffline: function () {
+            let that = this;
+            return fetch(window.location.href + "?alive", {
+                method: 'HEAD',
+                cache: 'no-store'
+            }).then(function () {
+                that.offline = false;
+            }).catch(function () {
+                that.offline = true;
+            });
+        },
+        getConfig: function (event) {
+            return fetch('config.yml').then(function (response) {
+                if (response.status != 200) {
+                    return
+                }
+                return response.text().then(function (body) {
+                    return jsyaml.load(body);
+                });
+            });
+        },
     }
 });
 
-
-function getConfig() {
-    return fetch('config.yml').then(function (response) {
-        if (response.status !== 200) {
-            return;
-        }
-
-        return response.text().then(function (body) {
-            return jsyaml.load(body);
-        });
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/worker.js');
     });
 }