]>
Commit | Line | Data |
---|---|---|
68955dc1 | 1 | <template> |
2ca4faad BW |
2 | <Generic :item="item"> |
3 | <template #indicator> | |
4 | <div v-if="status" class="status" :class="status"> | |
5 | {{ status }} | |
6 | </div> | |
7 | </template> | |
8 | </Generic> | |
68955dc1 | 9 | </template> |
10 | ||
11 | <script> | |
2ca4faad BW |
12 | import Generic from "./Generic.vue"; |
13 | ||
68955dc1 | 14 | export default { |
15 | name: "Ping", | |
16 | props: { | |
17 | item: Object, | |
18 | }, | |
2ca4faad BW |
19 | components: { |
20 | Generic, | |
21 | }, | |
68955dc1 | 22 | data: () => ({ |
3a8fa151 | 23 | status: null, |
68955dc1 | 24 | }), |
25 | created() { | |
26 | this.fetchStatus(); | |
27 | }, | |
28 | methods: { | |
29 | fetchStatus: async function () { | |
30 | const url = `${this.item.url}`; | |
76a46c35 C |
31 | fetch(url, { |
32 | method: "HEAD", | |
33 | cache: "no-cache", | |
34 | credentials: "include", | |
35 | }) | |
3a8fa151 BW |
36 | .then((response) => { |
37 | if (!response.ok) { | |
38 | throw Error(response.statusText); | |
39 | } | |
40 | this.status = "online"; | |
41 | }) | |
42 | .catch(() => { | |
43 | this.status = "offline"; | |
44 | }); | |
68955dc1 | 45 | }, |
46 | }, | |
47 | }; | |
48 | </script> | |
49 | ||
50 | <style scoped lang="scss"> | |
68955dc1 | 51 | .status { |
52 | font-size: 0.8rem; | |
53 | color: var(--text-title); | |
54 | ||
3a8fa151 | 55 | &.online:before { |
68955dc1 | 56 | background-color: #94e185; |
57 | border-color: #78d965; | |
3a8fa151 | 58 | box-shadow: 0 0 5px 1px #94e185; |
68955dc1 | 59 | } |
60 | ||
3a8fa151 | 61 | &.offline:before { |
68955dc1 | 62 | background-color: #c9404d; |
63 | border-color: #c42c3b; | |
3a8fa151 | 64 | box-shadow: 0 0 5px 1px #c9404d; |
68955dc1 | 65 | } |
66 | ||
67 | &:before { | |
68 | content: " "; | |
69 | display: inline-block; | |
70 | width: 7px; | |
71 | height: 7px; | |
72 | margin-right: 10px; | |
73 | border: 1px solid #000; | |
74 | border-radius: 7px; | |
75 | } | |
76 | } | |
77 | </style> |