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