Build system integration using vue-cli.

[github/bastienwirtz/homer.git] / src / components / ConnectivityChecker.vue

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
new file mode 100644 (file)
index 0000000..a91a809
--- /dev/null
+++ b/src/components/ConnectivityChecker.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="offline" class="offline-message">
+    <i class="far fa-dizzy"></i>
+    <h1>
+      You're offline bro.
+      <span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
+    </h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ConnectivityChecker",
+  data: function () {
+    return {
+      offline: false,
+    };
+  },
+  created: function () {
+    let that = this;
+    this.checkOffline();
+
+    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;
+        })
+        .finally(function () {
+          that.$emit("network:status-update", that.offline);
+        });
+    },
+  },
+};
+</script>