From 68955dc1d3bff8ae0853fb8021cd6e28f31ac378 Mon Sep 17 00:00:00 2001
From: stubbfel <stubbfel@gmail.com>
Date: Mon, 28 Jun 2021 23:20:20 +0200
Subject: Add  Ping services

a  service (type) which check if the given url as available or not. if the service is  available then set the status to enable other to disable
---
 src/components/services/Ping.vue | 93 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/services/Ping.vue

(limited to 'src/components/services/Ping.vue')

diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
new file mode 100644
index 0000000..a9114a8
--- /dev/null
+++ b/src/components/services/Ping.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="card" :class="item.class">
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div class="media">
+            <div v-if="item.logo" class="media-left">
+              <figure class="image is-48x48">
+                <img :src="item.logo" :alt="`${item.name} logo`" />
+              </figure>
+            </div>
+            <div v-if="item.icon" class="media-left">
+              <figure class="image is-48x48">
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ item.name }}</p>
+              <p class="subtitle is-6">
+                <template v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </template>
+              </p>
+            </div>
+            <div v-if="api" class="status" :class="api.status">
+              {{ api.status }}
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Ping",
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    api: {
+      status: "",
+    },
+  }),
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      const url = `${this.item.url}`;
+      this.api.status = await fetch(url)
+        .then((response) => "enabled")
+        .catch((e) => "disabled");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+
+  &.enabled:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 4px 1px #94e185;
+  }
+
+  &.disabled:before {
+    background-color: #c9404d;
+    border-color: #c42c3b;
+    box-shadow: 0 0 4px 1px #c9404d;
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 7px;
+  }
+}
+</style>
-- 
cgit v1.2.3


From c06c0cdf9bbdc98f71dadb5edcc015926ba878e4 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Wed, 14 Jul 2021 12:05:53 +0200
Subject: Lint & updates

---
 src/components/services/Ping.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/services/Ping.vue')

diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index a9114a8..9684419 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -53,8 +53,8 @@ export default {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
       this.api.status = await fetch(url)
-        .then((response) => "enabled")
-        .catch((e) => "disabled");
+        .then(() => "enabled")
+        .catch(() => "disabled");
     },
   },
 };
-- 
cgit v1.2.3


From 3a8fa151f46c28274a418aa284c12fe71a827e95 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Wed, 14 Jul 2021 15:49:19 +0200
Subject: Improve ping service

---
 src/components/services/Ping.vue | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'src/components/services/Ping.vue')

diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 9684419..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(() => "enabled")
-        .catch(() => "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 {
-- 
cgit v1.2.3