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