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 Generic from "./Generic.vue";
40 percentage: function () {
43 (this.stats.num_blocked_filtering * 100) /
44 this.stats.num_dns_queries
49 protection: function () {
51 return this.status.protection_enabled ? "enabled" : "disabled";
52 } else return "unknown";
55 created: function () {
57 if (!this.item.subtitle) {
62 fetchStatus: async function () {
63 this.status = await fetch(`${this.item.url}/control/status`, {
64 credentials: "include",
66 .then((response) => response.json())
67 .catch((e) => console.log(e));
69 fetchStats: async function () {
70 this.stats = await fetch(`${this.item.url}/control/stats`, {
71 credentials: "include",
73 .then((response) => response.json())
74 .catch((e) => console.log(e));
80 <style scoped lang="scss">
86 color: var(--text-title);
89 background-color: #94e185;
90 border-color: #78d965;
91 box-shadow: 0px 0px 4px 1px #94e185;
95 background-color: #c9404d;
96 border-color: #c42c3b;
97 box-shadow: 0px 0px 4px 1px #c9404d;
101 background-color: #c9c740;
102 border-color: #ccc935;
103 box-shadow: 0px 0px 4px 1px #c9c740;
108 display: inline-block;
112 border: 1px solid #000;