diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue index 19a2f7d..61d4bed 100644 --- a/src/components/services/AdGuardHome.vue +++ b/src/components/services/AdGuardHome.vue @@ -16,14 +16,17 @@

{{ item.name }}

-

{{ item.subtitle }}

+

+ + +

-
- {{ status.protection_enabled }} +
+ {{ protection }}
@@ -44,16 +47,45 @@ export default { data: () => { return { 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 ""; + }, + protection: function () { + if (this.status) { + return this.status.protection_enabled ? "enabled" : "disabled"; + } else return "unknown"; + }, + }, created: function () { this.fetchStatus(); + if (!this.item.subtitle) { + this.fetchStats(); + } }, methods: { fetchStatus: async function () { this.status = await fetch(`${this.item.url}/control/status`, { credentials: "include", - }).then((response) => response.json()); + }) + .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)); }, }, }; @@ -79,6 +111,12 @@ export default { box-shadow: 0px 0px 4px 1px #c9404d; } + &.unknown:before { + background-color: #c9c740; + border-color: #ccc935; + box-shadow: 0px 0px 4px 1px #c9c740; + } + &:before { content: " "; display: inline-block;