]>
Commit | Line | Data |
---|---|---|
33750a4c | 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"> | |
31bd77c8 | 14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> |
33750a4c | 15 | </figure> |
16 | </div> | |
17 | <div class="media-content"> | |
18 | <p class="title is-4">{{ item.name }}</p> | |
3832025b AW |
19 | <p class="subtitle is-6"> |
20 | <template v-if="item.subtitle"> | |
21 | {{ item.subtitle }} | |
22 | </template> | |
23 | <template v-else-if="stats"> | |
24 | {{ percentage }}% blocked | |
25 | </template> | |
26 | </p> | |
33750a4c | 27 | </div> |
12063daf BW |
28 | <div |
29 | v-if="status" | |
30 | class="status" | |
31 | v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'" | |
32 | > | |
3832025b | 33 | {{ status.protection_enabled ? 'enabled' : 'disabled' }} |
33750a4c | 34 | </div> |
35 | </div> | |
36 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
37 | <strong class="tag-text">#{{ item.tag }}</strong> | |
38 | </div> | |
39 | </div> | |
40 | </a> | |
41 | </div> | |
42 | </div> | |
43 | </template> | |
44 | ||
45 | <script> | |
46 | export default { | |
47 | name: "AdGuardHome", | |
48 | props: { | |
49 | item: Object, | |
50 | }, | |
51 | data: () => { | |
52 | return { | |
53 | status: null, | |
3832025b | 54 | stats: null, |
33750a4c | 55 | }; |
56 | }, | |
3832025b AW |
57 | computed: { |
58 | percentage: function () { | |
59 | if (this.stats) { | |
60 | return (this.stats.num_blocked_filtering * 100 / this.stats.num_dns_queries).toFixed(2); | |
61 | } | |
62 | return ""; | |
63 | }, | |
64 | }, | |
33750a4c | 65 | created: function () { |
66 | this.fetchStatus(); | |
3832025b AW |
67 | if (!this.item.subtitle) { |
68 | this.fetchStats(); | |
69 | } | |
33750a4c | 70 | }, |
71 | methods: { | |
72 | fetchStatus: async function () { | |
12063daf | 73 | this.status = await fetch( |
3832025b AW |
74 | `${this.item.url}/control/status`, |
75 | { | |
76 | credentials: 'include' | |
77 | } | |
78 | ).then((response) => response.json()) | |
79 | .catch((e) => console.log(e)); | |
80 | }, | |
81 | fetchStats: async function () { | |
82 | this.stats = await fetch( | |
83 | `${this.item.url}/control/stats`, | |
84 | { | |
85 | credentials: 'include' | |
86 | } | |
87 | ).then((response) => response.json()) | |
88 | .catch((e) => console.log(e)); | |
33750a4c | 89 | }, |
90 | }, | |
91 | }; | |
92 | </script> | |
93 | ||
94 | <style scoped lang="scss"> | |
95 | .media-left img { | |
96 | max-height: 100%; | |
97 | } | |
98 | .status { | |
99 | font-size: 0.8rem; | |
100 | color: var(--text-title); | |
101 | ||
102 | &.enabled:before { | |
103 | background-color: #94e185; | |
104 | border-color: #78d965; | |
105 | box-shadow: 0px 0px 4px 1px #94e185; | |
106 | } | |
107 | ||
108 | &.disabled:before { | |
109 | background-color: #c9404d; | |
110 | border-color: #c42c3b; | |
111 | box-shadow: 0px 0px 4px 1px #c9404d; | |
112 | } | |
113 | ||
114 | &:before { | |
115 | content: " "; | |
116 | display: inline-block; | |
117 | width: 7px; | |
118 | height: 7px; | |
119 | margin-right: 10px; | |
120 | border: 1px solid #000; | |
121 | border-radius: 7px; | |
122 | } | |
123 | } | |
124 | </style> |