]>
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 () { | |
b4a2db6e BW |
52 | const result = await this.fetch("/api.php").catch((e) => console.log(e)); |
53 | ||
54 | this.status = result.status; | |
55 | this.ads_percentage_today = result.ads_percentage_today; | |
9a14de00 BW |
56 | }, |
57 | }, | |
58 | }; | |
59 | </script> | |
60 | ||
61 | <style scoped lang="scss"> | |
9a14de00 BW |
62 | .status { |
63 | font-size: 0.8rem; | |
64 | color: var(--text-title); | |
65 | ||
66 | &.enabled:before { | |
67 | background-color: #94e185; | |
68 | border-color: #78d965; | |
3a8fa151 | 69 | box-shadow: 0 0 5px 1px #94e185; |
9a14de00 BW |
70 | } |
71 | ||
72 | &.disabled:before { | |
73 | background-color: #c9404d; | |
74 | border-color: #c42c3b; | |
3a8fa151 | 75 | box-shadow: 0 0 5px 1px #c9404d; |
9a14de00 BW |
76 | } |
77 | ||
78 | &:before { | |
79 | content: " "; | |
80 | display: inline-block; | |
81 | width: 7px; | |
82 | height: 7px; | |
83 | margin-right: 10px; | |
84 | border: 1px solid #000; | |
85 | border-radius: 7px; | |
86 | } | |
87 | } | |
88 | </style> |