diff options
author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-12-09 15:16:19 -0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-09 15:16:19 -0800 |
commit | 16a86df3e4d03ae38a8c30c1235d079a1756e866 (patch) | |
tree | c9bf975a580b932c308455b5e7eff40dfb11ea0a /src | |
parent | 71a7d3cce4f94ffe51e6fbfbcfb1140594db06db (diff) | |
parent | 4ce53b68ea7143433bac39aa955a49981ceb6536 (diff) | |
download | homer-16a86df3e4d03ae38a8c30c1235d079a1756e866.tar.gz homer-16a86df3e4d03ae38a8c30c1235d079a1756e866.tar.zst homer-16a86df3e4d03ae38a8c30c1235d079a1756e866.zip |
Merge pull request #169 from bramceulemans/extended-pihole-component
Added extended PiHole statistics
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/PiHole.vue | 45 |
1 files changed, 31 insertions, 14 deletions
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue index c08e1fa..a9fd369 100644 --- a/src/components/services/PiHole.vue +++ b/src/components/services/PiHole.vue | |||
@@ -11,15 +11,22 @@ | |||
11 | </div> | 11 | </div> |
12 | <div v-if="item.icon" class="media-left"> | 12 | <div v-if="item.icon" class="media-left"> |
13 | <figure class="image is-48x48"> | 13 | <figure class="image is-48x48"> |
14 | <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i> | 14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> |
15 | </figure> | 15 | </figure> |
16 | </div> | 16 | </div> |
17 | <div class="media-content"> | 17 | <div class="media-content"> |
18 | <p class="title is-4">{{ item.name }}</p> | 18 | <p class="title is-4">{{ item.name }}</p> |
19 | <p class="subtitle is-6">{{ item.subtitle }}</p> | 19 | <p class="subtitle is-6"> |
20 | <template v-if="item.subtitle"> | ||
21 | {{ item.subtitle }} | ||
22 | </template> | ||
23 | <template v-else-if="api"> | ||
24 | {{ percentage }}% blocked | ||
25 | </template> | ||
26 | </p> | ||
20 | </div> | 27 | </div> |
21 | <div v-if="status" class="status" :class="status.status"> | 28 | <div v-if="api" class="status" :class="api.status"> |
22 | {{ status.status }} | 29 | {{ api.status }} |
23 | </div> | 30 | </div> |
24 | </div> | 31 | </div> |
25 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | 32 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> |
@@ -37,19 +44,29 @@ export default { | |||
37 | props: { | 44 | props: { |
38 | item: Object, | 45 | item: Object, |
39 | }, | 46 | }, |
40 | data: () => { | 47 | data: () => ({ |
41 | return { | 48 | api: { |
42 | status: null, | 49 | status: "", |
43 | }; | 50 | ads_percentage_today: 0, |
51 | }, | ||
52 | }), | ||
53 | computed: { | ||
54 | percentage: function () { | ||
55 | if (this.api) { | ||
56 | return this.api.ads_percentage_today.toFixed(1); | ||
57 | } | ||
58 | return ""; | ||
59 | }, | ||
44 | }, | 60 | }, |
45 | created: function () { | 61 | created() { |
46 | this.fetchStatus(); | 62 | this.fetchStatus(); |
47 | }, | 63 | }, |
48 | methods: { | 64 | methods: { |
49 | fetchStatus: async function () { | 65 | fetchStatus: async function () { |
50 | this.status = await fetch(`${this.item.url}/api.php`).then((response) => | 66 | const url = `${this.item.url}/api.php`; |
51 | response.json() | 67 | this.api = await fetch(url) |
52 | ); | 68 | .then((response) => response.json()) |
69 | .catch((e) => console.log(e)); | ||
53 | }, | 70 | }, |
54 | }, | 71 | }, |
55 | }; | 72 | }; |
@@ -66,13 +83,13 @@ export default { | |||
66 | &.enabled:before { | 83 | &.enabled:before { |
67 | background-color: #94e185; | 84 | background-color: #94e185; |
68 | border-color: #78d965; | 85 | border-color: #78d965; |
69 | box-shadow: 0px 0px 4px 1px #94e185; | 86 | box-shadow: 0 0 4px 1px #94e185; |
70 | } | 87 | } |
71 | 88 | ||
72 | &.disabled:before { | 89 | &.disabled:before { |
73 | background-color: #c9404d; | 90 | background-color: #c9404d; |
74 | border-color: #c42c3b; | 91 | border-color: #c42c3b; |
75 | box-shadow: 0px 0px 4px 1px #c9404d; | 92 | box-shadow: 0 0 4px 1px #c9404d; |
76 | } | 93 | } |
77 | 94 | ||
78 | &:before { | 95 | &:before { |