]>
Commit | Line | Data |
---|---|---|
68955dc1 | 1 | <template> |
2 | <div> | |
3 | <div class="card" :class="item.class"> | |
4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | |
5 | <div class="card-content"> | |
6 | <div class="media"> | |
7 | <div v-if="item.logo" class="media-left"> | |
8 | <figure class="image is-48x48"> | |
9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | |
10 | </figure> | |
11 | </div> | |
12 | <div v-if="item.icon" class="media-left"> | |
13 | <figure class="image is-48x48"> | |
14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | |
15 | </figure> | |
16 | </div> | |
17 | <div class="media-content"> | |
18 | <p class="title is-4">{{ item.name }}</p> | |
19 | <p class="subtitle is-6"> | |
20 | <template v-if="item.subtitle"> | |
21 | {{ item.subtitle }} | |
22 | </template> | |
23 | </p> | |
24 | </div> | |
3a8fa151 BW |
25 | <div v-if="status" class="status" :class="status"> |
26 | {{ status }} | |
68955dc1 | 27 | </div> |
28 | </div> | |
29 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
30 | <strong class="tag-text">#{{ item.tag }}</strong> | |
31 | </div> | |
32 | </div> | |
33 | </a> | |
34 | </div> | |
35 | </div> | |
36 | </template> | |
37 | ||
38 | <script> | |
39 | export default { | |
40 | name: "Ping", | |
41 | props: { | |
42 | item: Object, | |
43 | }, | |
44 | data: () => ({ | |
3a8fa151 | 45 | status: null, |
68955dc1 | 46 | }), |
47 | created() { | |
48 | this.fetchStatus(); | |
49 | }, | |
50 | methods: { | |
51 | fetchStatus: async function () { | |
52 | const url = `${this.item.url}`; | |
76a46c35 C |
53 | fetch(url, { |
54 | method: "HEAD", | |
55 | cache: "no-cache", | |
56 | credentials: "include", | |
57 | }) | |
3a8fa151 BW |
58 | .then((response) => { |
59 | if (!response.ok) { | |
60 | throw Error(response.statusText); | |
61 | } | |
62 | this.status = "online"; | |
63 | }) | |
64 | .catch(() => { | |
65 | this.status = "offline"; | |
66 | }); | |
68955dc1 | 67 | }, |
68 | }, | |
69 | }; | |
70 | </script> | |
71 | ||
72 | <style scoped lang="scss"> | |
73 | .media-left img { | |
74 | max-height: 100%; | |
75 | } | |
76 | .status { | |
77 | font-size: 0.8rem; | |
78 | color: var(--text-title); | |
79 | ||
3a8fa151 | 80 | &.online:before { |
68955dc1 | 81 | background-color: #94e185; |
82 | border-color: #78d965; | |
3a8fa151 | 83 | box-shadow: 0 0 5px 1px #94e185; |
68955dc1 | 84 | } |
85 | ||
3a8fa151 | 86 | &.offline:before { |
68955dc1 | 87 | background-color: #c9404d; |
88 | border-color: #c42c3b; | |
3a8fa151 | 89 | box-shadow: 0 0 5px 1px #c9404d; |
68955dc1 | 90 | } |
91 | ||
92 | &:before { | |
93 | content: " "; | |
94 | display: inline-block; | |
95 | width: 7px; | |
96 | height: 7px; | |
97 | margin-right: 10px; | |
98 | border: 1px solid #000; | |
99 | border-radius: 7px; | |
100 | } | |
101 | } | |
102 | </style> |