]>
Commit | Line | Data |
---|---|---|
1 | <template> | |
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> | |
20 | </template> | |
21 | ||
22 | <script> | |
23 | import service from "@/mixins/service.js"; | |
24 | import Generic from "./Generic.vue"; | |
25 | ||
26 | export default { | |
27 | name: "AdGuardHome", | |
28 | mixins: [service], | |
29 | props: { | |
30 | item: Object, | |
31 | }, | |
32 | components: { | |
33 | Generic, | |
34 | }, | |
35 | data: () => { | |
36 | return { | |
37 | status: null, | |
38 | stats: null, | |
39 | }; | |
40 | }, | |
41 | computed: { | |
42 | percentage: function () { | |
43 | if (this.stats) { | |
44 | return ( | |
45 | (this.stats.num_blocked_filtering * 100) / | |
46 | this.stats.num_dns_queries | |
47 | ).toFixed(2); | |
48 | } | |
49 | return ""; | |
50 | }, | |
51 | protection: function () { | |
52 | if (this.status) { | |
53 | return this.status.protection_enabled ? "enabled" : "disabled"; | |
54 | } else return "unknown"; | |
55 | }, | |
56 | }, | |
57 | created: function () { | |
58 | this.fetchStatus(); | |
59 | if (!this.item.subtitle) { | |
60 | this.fetchStats(); | |
61 | } | |
62 | }, | |
63 | methods: { | |
64 | fetchStatus: async function () { | |
65 | this.status = await this.fetch("/control/status").catch((e) => | |
66 | console.log(e) | |
67 | ); | |
68 | }, | |
69 | fetchStats: async function () { | |
70 | this.stats = await this.fetch("/control/stats").catch((e) => | |
71 | console.log(e) | |
72 | ); | |
73 | }, | |
74 | }, | |
75 | }; | |
76 | </script> | |
77 | ||
78 | <style scoped lang="scss"> | |
79 | .status { | |
80 | font-size: 0.8rem; | |
81 | color: var(--text-title); | |
82 | ||
83 | &.enabled:before { | |
84 | background-color: #94e185; | |
85 | border-color: #78d965; | |
86 | box-shadow: 0px 0px 4px 1px #94e185; | |
87 | } | |
88 | ||
89 | &.disabled:before { | |
90 | background-color: #c9404d; | |
91 | border-color: #c42c3b; | |
92 | box-shadow: 0px 0px 4px 1px #c9404d; | |
93 | } | |
94 | ||
95 | &.unknown:before { | |
96 | background-color: #c9c740; | |
97 | border-color: #ccc935; | |
98 | box-shadow: 0px 0px 4px 1px #c9c740; | |
99 | } | |
100 | ||
101 | &:before { | |
102 | content: " "; | |
103 | display: inline-block; | |
104 | width: 7px; | |
105 | height: 7px; | |
106 | margin-right: 10px; | |
107 | border: 1px solid #000; | |
108 | border-radius: 7px; | |
109 | } | |
110 | } | |
111 | </style> |