]> git.immae.eu Git - github/bastienwirtz/homer.git/blob - src/components/services/AdGuardHome.vue
Update AdGuardHome.vue
[github/bastienwirtz/homer.git] / src / components / services / AdGuardHome.vue
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
22 v-if="status"
23 class="status"
24 v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
25 >
26 {{ status.protection_enabled }}
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: "AdGuardHome",
41 props: {
42 item: Object,
43 },
44 data: () => {
45 return {
46 status: null,
47 };
48 },
49 created: function () {
50 this.fetchStatus();
51 },
52 methods: {
53 fetchStatus: async function () {
54 this.status = await fetch(`${this.item.url}/control/status`{
55 credentials: 'include',
56 }).then(
57 (response) => response.json()
58 );
59 },
60 },
61 };
62 </script>
63
64 <style scoped lang="scss">
65 .media-left img {
66 max-height: 100%;
67 }
68 .status {
69 font-size: 0.8rem;
70 color: var(--text-title);
71
72 &.enabled:before {
73 background-color: #94e185;
74 border-color: #78d965;
75 box-shadow: 0px 0px 4px 1px #94e185;
76 }
77
78 &.disabled:before {
79 background-color: #c9404d;
80 border-color: #c42c3b;
81 box-shadow: 0px 0px 4px 1px #c9404d;
82 }
83
84 &:before {
85 content: " ";
86 display: inline-block;
87 width: 7px;
88 height: 7px;
89 margin-right: 10px;
90 border: 1px solid #000;
91 border-radius: 7px;
92 }
93 }
94 </style>