aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services/PiAlert.vue
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2023-10-21 14:24:05 +0200
committerBastien Wirtz <bastien.wirtz@gmail.com>2023-10-21 14:24:05 +0200
commitde4b7e6124254a192c897bdf0070b078a64ee563 (patch)
tree2517f4e70c56b55515f75b686fd9ea508ef5659c /src/components/services/PiAlert.vue
parentecf664d19b2a46c9d89a9a9c1128e22b7228607a (diff)
downloadhomer-de4b7e6124254a192c897bdf0070b078a64ee563.tar.gz
homer-de4b7e6124254a192c897bdf0070b078a64ee563.tar.zst
homer-de4b7e6124254a192c897bdf0070b078a64ee563.zip
Linting updatev23.10.1
Diffstat (limited to 'src/components/services/PiAlert.vue')
-rw-r--r--src/components/services/PiAlert.vue174
1 files changed, 89 insertions, 85 deletions
diff --git a/src/components/services/PiAlert.vue b/src/components/services/PiAlert.vue
index fb0d9ed..fd1fd9e 100644
--- a/src/components/services/PiAlert.vue
+++ b/src/components/services/PiAlert.vue
@@ -1,104 +1,108 @@
1<template> 1<template>
2 <Generic :item="item"> 2 <Generic :item="item">
3 <template #indicator> 3 <template #indicator>
4 <div class="notifs"> 4 <div class="notifs">
5 <strong class="notif total" title="Total Devices"> 5 <strong class="notif total" title="Total Devices">
6 {{ total }} 6 {{ total }}
7 </strong> 7 </strong>
8 <strong class="notif connected" title="Connected Devices"> 8 <strong class="notif connected" title="Connected Devices">
9 {{ connected }} 9 {{ connected }}
10 </strong> 10 </strong>
11 <strong class="notif newdevices" title="New Devices"> 11 <strong class="notif newdevices" title="New Devices">
12 {{ newdevices }} 12 {{ newdevices }}
13 </strong> 13 </strong>
14 <strong class="notif alert" title="Down Alerts"> 14 <strong class="notif alert" title="Down Alerts">
15 {{ downalert }} 15 {{ downalert }}
16 </strong> 16 </strong>
17 <strong v-if="serverError" class="notif alert" 17 <strong
18 title="Connection error to PiAlert server, check the url in config.yml">?</strong> 18 v-if="serverError"
19 </div> 19 class="notif alert"
20 </template> 20 title="Connection error to PiAlert server, check the url in config.yml"
21 </Generic> 21 >?</strong
22 >
23 </div>
24 </template>
25 </Generic>
22</template> 26</template>
23 27
24<script> 28<script>
25import service from "@/mixins/service.js"; 29import service from "@/mixins/service.js";
26import Generic from "./Generic.vue"; 30import Generic from "./Generic.vue";
27 31
28export default { 32export default {
29 name: "PiAlert", 33 name: "PiAlert",
30 mixins: [service], 34 mixins: [service],
31 props: { 35 props: {
32 item: Object, 36 item: Object,
33 }, 37 },
34 components: { 38 components: {
35 Generic, 39 Generic,
36 }, 40 },
37 data: () => { 41 data: () => {
38 return { 42 return {
39 total: 0, 43 total: 0,
40 connected: 0, 44 connected: 0,
41 newdevices: 0, 45 newdevices: 0,
42 downalert: 0, 46 downalert: 0,
43 serverError: false, 47 serverError: false,
44 }; 48 };
45 }, 49 },
46 created() { 50 created() {
47 const updateInterval = parseInt(this.item.updateInterval, 10) || 0; 51 const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
48 if (updateInterval > 0) { 52 if (updateInterval > 0) {
49 setInterval(() => this.fetchStatus(), updateInterval); 53 setInterval(() => this.fetchStatus(), updateInterval);
50 } 54 }
51 this.fetchStatus(); 55 this.fetchStatus();
52 }, 56 },
53 methods: { 57 methods: {
54 fetchStatus: async function () { 58 fetchStatus: async function () {
55 this.fetch("/php/server/devices.php?action=getDevicesTotals") 59 this.fetch("/php/server/devices.php?action=getDevicesTotals")
56 .then((response) => { 60 .then((response) => {
57 this.total = response[0]; 61 this.total = response[0];
58 this.connected = response[1]; 62 this.connected = response[1];
59 this.newdevices = response[3]; 63 this.newdevices = response[3];
60 this.downalert = response[4]; 64 this.downalert = response[4];
61 }) 65 })
62 .catch((e) => { 66 .catch((e) => {
63 console.log(e); 67 console.log(e);
64 this.serverError = true; 68 this.serverError = true;
65 }); 69 });
66 },
67 }, 70 },
71 },
68}; 72};
69</script> 73</script>
70 74
71<style scoped lang="scss"> 75<style scoped lang="scss">
72.notifs { 76.notifs {
73 position: absolute; 77 position: absolute;
74 color: white; 78 color: white;
75 font-family: sans-serif; 79 font-family: sans-serif;
76 top: 0.3em; 80 top: 0.3em;
77 right: 0.5em; 81 right: 0.5em;
78 82
79 .notif { 83 .notif {
80 display: inline-block; 84 display: inline-block;
81 padding: 0.2em 0.35em; 85 padding: 0.2em 0.35em;
82 border-radius: 0.25em; 86 border-radius: 0.25em;
83 position: relative; 87 position: relative;
84 margin-left: 0.3em; 88 margin-left: 0.3em;
85 font-size: 0.8em; 89 font-size: 0.8em;
86 90
87 &.total { 91 &.total {
88 background-color: #4fb5d6; 92 background-color: #4fb5d6;
89 } 93 }
90 94
91 &.connected { 95 &.connected {
92 background-color: #4fd671; 96 background-color: #4fd671;
93 } 97 }
94 98
95 &.newdevices { 99 &.newdevices {
96 background-color: #d08d2e; 100 background-color: #d08d2e;
97 } 101 }
98 102
99 &.alert { 103 &.alert {
100 background-color: #e51111; 104 background-color: #e51111;
101 }
102 } 105 }
106 }
103} 107}
104</style> \ No newline at end of file 108</style>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-05 02:20:04 +0000