diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/services/PiHole.vue | 26 |
1 files changed, 14 insertions, 12 deletions
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue index 10d5ece..03d3ae3 100644 --- a/src/components/services/PiHole.vue +++ b/src/components/services/PiHole.vue | |||
@@ -21,7 +21,7 @@ | |||
21 | {{ item.subtitle }} | 21 | {{ item.subtitle }} |
22 | </template> | 22 | </template> |
23 | <template v-else-if="status"> | 23 | <template v-else-if="status"> |
24 | {{ percentage }}% blocked | 24 | {{ percentage }}% blocked |
25 | </template> | 25 | </template> |
26 | </p> | 26 | </p> |
27 | </div> | 27 | </div> |
@@ -44,27 +44,29 @@ export default { | |||
44 | props: { | 44 | props: { |
45 | item: Object, | 45 | item: Object, |
46 | }, | 46 | }, |
47 | data: () => { | 47 | data: () => ({ |
48 | return { | 48 | status: { |
49 | status: null, | 49 | status: "", |
50 | }; | 50 | ads_percentage_today: 0, |
51 | }, | 51 | }, |
52 | }), | ||
52 | computed: { | 53 | computed: { |
53 | blocked: function () { | 54 | percentage: function () { |
54 | if (this.status) { | 55 | if (this.status) { |
55 | return this.status.dns_queries_today.toFixed(0); | 56 | return this.status.ads_percentage_today.toFixed(1); |
56 | } | 57 | } |
57 | return ""; | 58 | return ""; |
58 | }, | 59 | }, |
59 | }, | 60 | }, |
60 | created: function () { | 61 | created() { |
61 | this.fetchStatus(); | 62 | this.fetchStatus(); |
62 | }, | 63 | }, |
63 | methods: { | 64 | methods: { |
64 | fetchStatus: async function () { | 65 | fetchStatus: async function () { |
65 | this.status = await fetch(`${this.item.url}/api.php`).then((response) => | 66 | const url = `${this.item.url}/api.php`; |
66 | response.json() | 67 | this.status = await fetch(url) |
67 | ); | 68 | .then((response) => response.json()) |
69 | .catch((e) => console.log(e)); | ||
68 | }, | 70 | }, |
69 | }, | 71 | }, |
70 | }; | 72 | }; |