extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-06-24 19:52:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improving Adguard Home service

Browse Source 
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.
This commit is contained in:
Andreas Waschinski 2021-07-10 02:02:57 +02:00 committed by GitHub
parent 996011956b
commit 3832025b0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/services/AdGuardHome.vue
View File

@ -16,14 +16,21 @@
</div> </div>
<div class="media-content"> <div class="media-content">
<p class="title is-4">{{ item.name }}</p> <p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">{{ item.subtitle }}</p> <p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="stats">
{{ percentage }}&percnt; blocked
</template>
</p>
</div> </div>
<div <div
v-if="status" v-if="status"
class="status" class="status"
v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'" v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
> >
{{ status.protection_enabled }} {{ status.protection_enabled ? 'enabled' : 'disabled' }}
</div> </div>
</div> </div>
<div class="tag" :class="item.tagstyle" v-if="item.tag"> <div class="tag" :class="item.tagstyle" v-if="item.tag">
@ -44,16 +51,41 @@ export default {
data: () => { data: () => {
return { return {
status: null, status: null,
stats: null,
}; };
}, },
computed: {
percentage: function () {
if (this.stats) {
return (this.stats.num_blocked_filtering * 100 / this.stats.num_dns_queries).toFixed(2);
}
return "";
},
},
created: function () { created: function () {
this.fetchStatus(); this.fetchStatus();
if (!this.item.subtitle) {
this.fetchStats();
}
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
this.status = await fetch( this.status = await fetch(
`${this.item.url}/control/status` `${this.item.url}/control/status`,
).then((response) => response.json()); {
credentials: 'include'
}
).then((response) => response.json())
.catch((e) => console.log(e));
},
fetchStats: async function () {
this.stats = await fetch(
`${this.item.url}/control/stats`,
{
credentials: 'include'
}
).then((response) => response.json())
.catch((e) => console.log(e));
}, },
}, },
}; };