4 files changed, 32 insertions, 25 deletions

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 6ef5302..d4a2b89 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -51,9 +51,9 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(
-        `${this.item.url}/control/status`
-      ).then((response) => response.json());
+      this.status = await fetch(`${this.item.url}/control/status`).then(
+        (response) => response.json()
+      );
     },
   },
 };
diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index c4f50eb..4fb31f8 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -52,20 +52,22 @@ export default {
       if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
       var apikey = this.item.apikey;
       if (!apikey) {
-        console.error("apikey is not present in config.yml for the paperless entry!");
+        console.error(
+          "apikey is not present in config.yml for the paperless entry!"
+        );
         return;
       }
       const url = `${this.item.url}/api/documents/`;
       this.api = await fetch(url, {
-          headers: {
-            "Authorization": "Token " + this.item.apikey
-          }
-        })
-        .then(function(response) {
+        headers: {
+          Authorization: "Token " + this.item.apikey,
+        },
+      })
+        .then(function (response) {
           if (!response.ok) {
-            throw new Error("Not 2xx response")
+            throw new Error("Not 2xx response");
           } else {
-            return response.json()
+            return response.json();
           }
         })
         .catch((e) => console.log(e));
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index a9fd369..7042a7b 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -83,13 +83,13 @@ export default {
   &.enabled:before {
     background-color: #94e185;
     border-color: #78d965;
-    box-shadow: 0 0 4px 1px #94e185;
+    box-shadow: 0 0 5px 1px #94e185;
   }
 
   &.disabled:before {
     background-color: #c9404d;
     border-color: #c42c3b;
-    box-shadow: 0 0 4px 1px #c9404d;
+    box-shadow: 0 0 5px 1px #c9404d;
   }
 
   &:before {
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index a9114a8..8a9b7a4 100644
--- 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,16 @@ 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" })
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          this.status = "online";
+        })
+        .catch(() => {
+          this.status = "offline";
+        });
     },
   },
 };
@@ -68,16 +73,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 {