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