From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 25 May 2020 15:07:03 -0700
Subject: Build system integration using vue-cli.

---
 src/components/ConnectivityChecker.vue | 52 ++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/ConnectivityChecker.vue

(limited to 'src/components/ConnectivityChecker.vue')

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
new file mode 100644
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>
-- 
cgit v1.2.3

