]>
Commit | Line | Data |
---|---|---|
9a14de00 BW |
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">{{ item.subtitle }}</p> | |
20 | </div> | |
21 | <div v-if="status" class="status" :class="status.status"> | |
22 | {{ status.status }} | |
23 | </div> | |
24 | </div> | |
25 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
26 | <strong class="tag-text">#{{ item.tag }}</strong> | |
27 | </div> | |
28 | </div> | |
29 | </a> | |
30 | </div> | |
31 | </div> | |
32 | </template> | |
33 | ||
34 | <script> | |
35 | export default { | |
36 | name: "PiHole", | |
37 | props: { | |
38 | item: Object, | |
39 | }, | |
40 | data: () => { | |
41 | return { | |
42 | status: null, | |
43 | }; | |
44 | }, | |
45 | created: function () { | |
46 | this.fetchStatus(); | |
47 | }, | |
48 | methods: { | |
49 | fetchStatus: async function () { | |
50 | this.status = await fetch(`${this.item.url}/api.php`).then((response) => | |
51 | response.json() | |
52 | ); | |
53 | }, | |
54 | }, | |
55 | }; | |
56 | </script> | |
57 | ||
58 | <style scoped lang="scss"> | |
59 | .media-left img { | |
60 | max-height: 100%; | |
61 | } | |
62 | .status { | |
63 | font-size: 0.8rem; | |
64 | color: var(--text-title); | |
65 | ||
66 | &.enabled:before { | |
67 | background-color: #94e185; | |
68 | border-color: #78d965; | |
69 | box-shadow: 0px 0px 4px 1px #94e185; | |
70 | } | |
71 | ||
72 | &.disabled:before { | |
73 | background-color: #c9404d; | |
74 | border-color: #c42c3b; | |
75 | box-shadow: 0px 0px 4px 1px #c9404d; | |
76 | } | |
77 | ||
78 | &:before { | |
79 | content: " "; | |
80 | display: inline-block; | |
81 | width: 7px; | |
82 | height: 7px; | |
83 | margin-right: 10px; | |
84 | border: 1px solid #000; | |
85 | border-radius: 7px; | |
86 | } | |
87 | } | |
88 | </style> |