aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/PiHole.vue4
-rw-r--r--src/components/services/Ping.vue29
2 files changed, 19 insertions, 14 deletions
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 {
83 &.enabled:before { 83 &.enabled:before {
84 background-color: #94e185; 84 background-color: #94e185;
85 border-color: #78d965; 85 border-color: #78d965;
86 box-shadow: 0 0 4px 1px #94e185; 86 box-shadow: 0 0 5px 1px #94e185;
87 } 87 }
88 88
89 &.disabled:before { 89 &.disabled:before {
90 background-color: #c9404d; 90 background-color: #c9404d;
91 border-color: #c42c3b; 91 border-color: #c42c3b;
92 box-shadow: 0 0 4px 1px #c9404d; 92 box-shadow: 0 0 5px 1px #c9404d;
93 } 93 }
94 94
95 &:before { 95 &:before {
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 @@
22 </template> 22 </template>
23 </p> 23 </p>
24 </div> 24 </div>
25 <div v-if="api" class="status" :class="api.status"> 25 <div v-if="status" class="status" :class="status">
26 {{ api.status }} 26 {{ status }}
27 </div> 27 </div>
28 </div> 28 </div>
29 <div class="tag" :class="item.tagstyle" v-if="item.tag"> 29 <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -42,9 +42,7 @@ export default {
42 item: Object, 42 item: Object,
43 }, 43 },
44 data: () => ({ 44 data: () => ({
45 api: { 45 status: null,
46 status: "",
47 },
48 }), 46 }),
49 created() { 47 created() {
50 this.fetchStatus(); 48 this.fetchStatus();
@@ -52,9 +50,16 @@ export default {
52 methods: { 50 methods: {
53 fetchStatus: async function () { 51 fetchStatus: async function () {
54 const url = `${this.item.url}`; 52 const url = `${this.item.url}`;
55 this.api.status = await fetch(url) 53 fetch(url, { method: "HEAD", cache: "no-cache" })
56 .then(() => "enabled") 54 .then((response) => {
57 .catch(() => "disabled"); 55 if (!response.ok) {
56 throw Error(response.statusText);
57 }
58 this.status = "online";
59 })
60 .catch(() => {
61 this.status = "offline";
62 });
58 }, 63 },
59 }, 64 },
60}; 65};
@@ -68,16 +73,16 @@ export default {
68 font-size: 0.8rem; 73 font-size: 0.8rem;
69 color: var(--text-title); 74 color: var(--text-title);
70 75
71 &.enabled:before { 76 &.online:before {
72 background-color: #94e185; 77 background-color: #94e185;
73 border-color: #78d965; 78 border-color: #78d965;
74 box-shadow: 0 0 4px 1px #94e185; 79 box-shadow: 0 0 5px 1px #94e185;
75 } 80 }
76 81
77 &.disabled:before { 82 &.offline:before {
78 background-color: #c9404d; 83 background-color: #c9404d;
79 border-color: #c42c3b; 84 border-color: #c42c3b;
80 box-shadow: 0 0 4px 1px #c9404d; 85 box-shadow: 0 0 5px 1px #c9404d;
81 } 86 }
82 87
83 &:before { 88 &:before {