diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/services/PiHole.vue | 4 | ||||
-rw-r--r-- | src/components/services/Ping.vue | 29 |
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 { |