diff options
Diffstat (limited to 'src/components/services/AdGuardHome.vue')
-rw-r--r-- | src/components/services/AdGuardHome.vue | 58 |
1 files changed, 48 insertions, 10 deletions
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue index d4a2b89..9aeaf39 100644 --- a/src/components/services/AdGuardHome.vue +++ b/src/components/services/AdGuardHome.vue | |||
@@ -16,14 +16,17 @@ | |||
16 | </div> | 16 | </div> |
17 | <div class="media-content"> | 17 | <div class="media-content"> |
18 | <p class="title is-4">{{ item.name }}</p> | 18 | <p class="title is-4">{{ item.name }}</p> |
19 | <p class="subtitle is-6">{{ item.subtitle }}</p> | 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> | ||
20 | </div> | 27 | </div> |
21 | <div | 28 | <div v-if="!item.subtitle" class="status" :class="protection"> |
22 | v-if="status" | 29 | {{ protection }} |
23 | class="status" | ||
24 | v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'" | ||
25 | > | ||
26 | {{ status.protection_enabled }} | ||
27 | </div> | 30 | </div> |
28 | </div> | 31 | </div> |
29 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | 32 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> |
@@ -44,16 +47,45 @@ export default { | |||
44 | data: () => { | 47 | data: () => { |
45 | return { | 48 | return { |
46 | status: null, | 49 | status: null, |
50 | stats: null, | ||
47 | }; | 51 | }; |
48 | }, | 52 | }, |
53 | computed: { | ||
54 | percentage: function () { | ||
55 | if (this.stats) { | ||
56 | return ( | ||
57 | (this.stats.num_blocked_filtering * 100) / | ||
58 | this.stats.num_dns_queries | ||
59 | ).toFixed(2); | ||
60 | } | ||
61 | return ""; | ||
62 | }, | ||
63 | protection: function () { | ||
64 | if (this.status) { | ||
65 | return this.status.protection_enabled ? "enabled" : "disabled"; | ||
66 | } else return "unknown"; | ||
67 | }, | ||
68 | }, | ||
49 | created: function () { | 69 | created: function () { |
50 | this.fetchStatus(); | 70 | this.fetchStatus(); |
71 | if (!this.item.subtitle) { | ||
72 | this.fetchStats(); | ||
73 | } | ||
51 | }, | 74 | }, |
52 | methods: { | 75 | methods: { |
53 | fetchStatus: async function () { | 76 | fetchStatus: async function () { |
54 | this.status = await fetch(`${this.item.url}/control/status`).then( | 77 | this.status = await fetch(`${this.item.url}/control/status`, { |
55 | (response) => response.json() | 78 | credentials: "include", |
56 | ); | 79 | }) |
80 | .then((response) => response.json()) | ||
81 | .catch((e) => console.log(e)); | ||
82 | }, | ||
83 | fetchStats: async function () { | ||
84 | this.stats = await fetch(`${this.item.url}/control/stats`, { | ||
85 | credentials: "include", | ||
86 | }) | ||
87 | .then((response) => response.json()) | ||
88 | .catch((e) => console.log(e)); | ||
57 | }, | 89 | }, |
58 | }, | 90 | }, |
59 | }; | 91 | }; |
@@ -79,6 +111,12 @@ export default { | |||
79 | box-shadow: 0px 0px 4px 1px #c9404d; | 111 | box-shadow: 0px 0px 4px 1px #c9404d; |
80 | } | 112 | } |
81 | 113 | ||
114 | &.unknown:before { | ||
115 | background-color: #c9c740; | ||
116 | border-color: #ccc935; | ||
117 | box-shadow: 0px 0px 4px 1px #c9c740; | ||
118 | } | ||
119 | |||
82 | &:before { | 120 | &:before { |
83 | content: " "; | 121 | content: " "; |
84 | display: inline-block; | 122 | display: inline-block; |