]>
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> | |
2fba0435 | 12 | import service from "@/mixins/service.js"; |
2ca4faad BW |
13 | import Generic from "./Generic.vue"; |
14 | ||
68955dc1 | 15 | export default { |
16 | name: "Ping", | |
2fba0435 | 17 | mixins: [service], |
68955dc1 | 18 | props: { |
19 | item: Object, | |
20 | }, | |
2ca4faad BW |
21 | components: { |
22 | Generic, | |
23 | }, | |
68955dc1 | 24 | data: () => ({ |
3a8fa151 | 25 | status: null, |
68955dc1 | 26 | }), |
27 | created() { | |
28 | this.fetchStatus(); | |
29 | }, | |
30 | methods: { | |
31 | fetchStatus: async function () { | |
956f38a5 | 32 | const method = typeof this.item.method === 'string' ? this.item.method.toUpperCase() : 'HEAD'; |
84930a63 IS |
33 | |
34 | if (!['GET', 'HEAD', 'OPTION'].includes(method)) { | |
35 | console.error(`Ping: ${method} is not a supported HTTP method`); | |
36 | return; | |
37 | } | |
38 | ||
6c083d6a | 39 | this.fetch("/", { method, cache: "no-cache" }, false) |
2fba0435 | 40 | .then(() => { |
3a8fa151 BW |
41 | this.status = "online"; |
42 | }) | |
43 | .catch(() => { | |
44 | this.status = "offline"; | |
45 | }); | |
68955dc1 | 46 | }, |
47 | }, | |
48 | }; | |
49 | </script> | |
50 | ||
51 | <style scoped lang="scss"> | |
68955dc1 | 52 | .status { |
53 | font-size: 0.8rem; | |
54 | color: var(--text-title); | |
6c083d6a IS |
55 | white-space: nowrap; |
56 | margin-left: 0.25rem; | |
68955dc1 | 57 | |
3a8fa151 | 58 | &.online:before { |
68955dc1 | 59 | background-color: #94e185; |
60 | border-color: #78d965; | |
3a8fa151 | 61 | box-shadow: 0 0 5px 1px #94e185; |
68955dc1 | 62 | } |
63 | ||
3a8fa151 | 64 | &.offline:before { |
68955dc1 | 65 | background-color: #c9404d; |
66 | border-color: #c42c3b; | |
3a8fa151 | 67 | box-shadow: 0 0 5px 1px #c9404d; |
68955dc1 | 68 | } |
69 | ||
70 | &:before { | |
71 | content: " "; | |
72 | display: inline-block; | |
73 | width: 7px; | |
74 | height: 7px; | |
75 | margin-right: 10px; | |
76 | border: 1px solid #000; | |
77 | border-radius: 7px; | |
78 | } | |
79 | } | |
80 | </style> |