Merge pull request #181 from dickwolff/main

[github/bastienwirtz/homer.git] / src / components / services / Ping.vue

diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index a9114a826d70dcb1821604fe18dc53a209ae192e..e693af4cc210eb66ca530a1f9f2fa502bd3a0e1d 100644 (file)
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -22,8 +22,8 @@
                 </template>
               </p>
             </div>
-            <div v-if="api" class="status" :class="api.status">
-              {{ api.status }}
+            <div v-if="status" class="status" :class="status">
+              {{ status }}
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -42,9 +42,7 @@ export default {
     item: Object,
   },
   data: () => ({
-    api: {
-      status: "",
-    },
+    status: null,
   }),
   created() {
     this.fetchStatus();
@@ -52,9 +50,20 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
-      this.api.status = await fetch(url)
-        .then((response) => "enabled")
-        .catch((e) => "disabled");
+      fetch(url, {
+        method: "HEAD",
+        cache: "no-cache",
+        credentials: "include",
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          this.status = "online";
+        })
+        .catch(() => {
+          this.status = "offline";
+        });
     },
   },
 };
@@ -68,16 +77,16 @@ export default {
   font-size: 0.8rem;
   color: var(--text-title);
 
-  &.enabled:before {
+  &.online:before {
     background-color: #94e185;
     border-color: #78d965;
-    box-shadow: 0 0 4px 1px #94e185;
+    box-shadow: 0 0 5px 1px #94e185;
   }
 
-  &.disabled:before {
+  &.offline:before {
     background-color: #c9404d;
     border-color: #c42c3b;
-    box-shadow: 0 0 4px 1px #c9404d;
+    box-shadow: 0 0 5px 1px #c9404d;
   }
 
   &:before {