]>
Commit | Line | Data |
---|---|---|
9a14de00 | 1 | <template> |
b4a2db6e BW |
2 | <Generic :item="item"> |
3 | <template #content> | |
4 | <p class="title is-4">{{ item.name }}</p> | |
5 | <p class="subtitle is-6"> | |
6 | <template v-if="item.subtitle"> | |
7 | {{ item.subtitle }} | |
8 | </template> | |
9 | <template v-else-if="percentage"> | |
10 | {{ percentage }}% blocked | |
11 | </template> | |
12 | </p> | |
13 | </template> | |
14 | <template #indicator> | |
15 | <div v-if="status" class="status" :class="status"> | |
16 | {{ status }} | |
17 | </div> | |
18 | </template> | |
19 | </Generic> | |
9a14de00 BW |
20 | </template> |
21 | ||
22 | <script> | |
b4a2db6e BW |
23 | import service from "@/mixins/service.js"; |
24 | import Generic from "./Generic.vue"; | |
25 | ||
9a14de00 BW |
26 | export default { |
27 | name: "PiHole", | |
b4a2db6e | 28 | mixins: [service], |
9a14de00 BW |
29 | props: { |
30 | item: Object, | |
31 | }, | |
b4a2db6e BW |
32 | components: { |
33 | Generic, | |
34 | }, | |
f81dc6f4 | 35 | data: () => ({ |
b4a2db6e BW |
36 | status: "", |
37 | ads_percentage_today: 0, | |
f81dc6f4 | 38 | }), |
c5eab80d | 39 | computed: { |
f81dc6f4 | 40 | percentage: function () { |
b4a2db6e BW |
41 | if (this.ads_percentage_today) { |
42 | return this.ads_percentage_today.toFixed(1); | |
c5eab80d BC |
43 | } |
44 | return ""; | |
45 | }, | |
46 | }, | |
f81dc6f4 | 47 | created() { |
9a14de00 BW |
48 | this.fetchStatus(); |
49 | }, | |
50 | methods: { | |
51 | fetchStatus: async function () { | |
d362add3 FM |
52 | const authQueryParams = this.item.apikey |
53 | ? `?summaryRaw&auth=${this.item.apikey}` | |
54 | : ""; | |
de4b7e61 BW |
55 | const result = await this.fetch(`/api.php${authQueryParams}`).catch((e) => |
56 | console.log(e), | |
57 | ); | |
b4a2db6e BW |
58 | |
59 | this.status = result.status; | |
60 | this.ads_percentage_today = result.ads_percentage_today; | |
9a14de00 BW |
61 | }, |
62 | }, | |
63 | }; | |
64 | </script> | |
65 | ||
66 | <style scoped lang="scss"> | |
9a14de00 BW |
67 | .status { |
68 | font-size: 0.8rem; | |
69 | color: var(--text-title); | |
70 | ||
71 | &.enabled:before { | |
72 | background-color: #94e185; | |
73 | border-color: #78d965; | |
3a8fa151 | 74 | box-shadow: 0 0 5px 1px #94e185; |
9a14de00 BW |
75 | } |
76 | ||
77 | &.disabled:before { | |
78 | background-color: #c9404d; | |
79 | border-color: #c42c3b; | |
3a8fa151 | 80 | box-shadow: 0 0 5px 1px #c9404d; |
9a14de00 BW |
81 | } |
82 | ||
83 | &:before { | |
84 | content: " "; | |
85 | display: inline-block; | |
86 | width: 7px; | |
87 | height: 7px; | |
88 | margin-right: 10px; | |
89 | border: 1px solid #000; | |
90 | border-radius: 7px; | |
91 | } | |
92 | } | |
93 | </style> |