4 <p class="title is-4">{{ item.name }}</p>
5 <p class="subtitle is-6">
6 <template v-if="item.subtitle">
9 <template v-else-if="stats">
10 {{ percentage }}% blocked
15 <div class="status" :class="protection">
23 import service from "@/mixins/service.js";
24 import Generic from "./Generic.vue";
42 percentage: function () {
45 (this.stats.num_blocked_filtering * 100) /
46 this.stats.num_dns_queries
51 protection: function () {
53 return this.status.protection_enabled ? "enabled" : "disabled";
54 } else return "unknown";
57 created: function () {
59 if (!this.item.subtitle) {
64 fetchStatus: async function () {
65 this.status = await this.fetch("/control/status").catch((e) =>
69 fetchStats: async function () {
70 this.stats = await this.fetch("/control/stats").catch((e) =>
78 <style scoped lang="scss">
81 color: var(--text-title);
84 background-color: #94e185;
85 border-color: #78d965;
86 box-shadow: 0px 0px 4px 1px #94e185;
90 background-color: #c9404d;
91 border-color: #c42c3b;
92 box-shadow: 0px 0px 4px 1px #c9404d;
96 background-color: #c9c740;
97 border-color: #ccc935;
98 box-shadow: 0px 0px 4px 1px #c9c740;
103 display: inline-block;
107 border: 1px solid #000;