aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
authorAndreas Waschinski <25221082+waschinski@users.noreply.github.com>2021-07-10 02:02:57 +0200
committerGitHub <noreply@github.com>2021-07-10 02:02:57 +0200
commit3832025b0c404498c798148f1e7c52f34dce372a (patch)
tree270f8f026ecb34ddc450ae792751868d0eb0723d /src/components
parent996011956b97566849167ccd6ec470ab38b0ec60 (diff)
downloadhomer-3832025b0c404498c798148f1e7c52f34dce372a.tar.gz
homer-3832025b0c404498c798148f1e7c52f34dce372a.tar.zst
homer-3832025b0c404498c798148f1e7c52f34dce372a.zip
Improving Adguard Home service
Showing "x.x% blocked" similar to how the PiHole service is doing it. The status text will no longer be `true/false` but `enabled/disabled`. Endpoints require to be logged in so fetch does now send cookies to prevent 403s.
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/AdGuardHome.vue40
1 files changed, 36 insertions, 4 deletions
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 6ef5302..0c689b9 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -16,14 +16,21 @@
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 }}&percnt; blocked
25 </template>
26 </p>
20 </div> 27 </div>
21 <div 28 <div
22 v-if="status" 29 v-if="status"
23 class="status" 30 class="status"
24 v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'" 31 v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
25 > 32 >
26 {{ status.protection_enabled }} 33 {{ status.protection_enabled ? 'enabled' : 'disabled' }}
27 </div> 34 </div>
28 </div> 35 </div>
29 <div class="tag" :class="item.tagstyle" v-if="item.tag"> 36 <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -44,16 +51,41 @@ export default {
44 data: () => { 51 data: () => {
45 return { 52 return {
46 status: null, 53 status: null,
54 stats: null,
47 }; 55 };
48 }, 56 },
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 },
49 created: function () { 65 created: function () {
50 this.fetchStatus(); 66 this.fetchStatus();
67 if (!this.item.subtitle) {
68 this.fetchStats();
69 }
51 }, 70 },
52 methods: { 71 methods: {
53 fetchStatus: async function () { 72 fetchStatus: async function () {
54 this.status = await fetch( 73 this.status = await fetch(
55 `${this.item.url}/control/status` 74 `${this.item.url}/control/status`,
56 ).then((response) => response.json()); 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));
57 }, 89 },
58 }, 90 },
59}; 91};