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 @@
 <template>
-    <Generic :item="item">
+  <Generic :item="item">
-        <template #indicator>
+    <template #indicator>
-            <div class="notifs">
+      <div class="notifs">
-                <strong class="notif total" title="Total Devices">
+        <strong class="notif total" title="Total Devices">
-                    {{ total }}
+          {{ total }}
-                </strong>
+        </strong>
-                <strong class="notif connected" title="Connected Devices">
+        <strong class="notif connected" title="Connected Devices">
-                    {{ connected }}
+          {{ connected }}
-                </strong>
+        </strong>
-                <strong class="notif newdevices" title="New Devices">
+        <strong class="notif newdevices" title="New Devices">
-                    {{ newdevices }}
+          {{ newdevices }}
-                </strong>
+        </strong>
-                <strong class="notif alert" title="Down Alerts">
+        <strong class="notif alert" title="Down Alerts">
-                    {{ downalert }}
+          {{ downalert }}
-                </strong>
+        </strong>
-                <strong v-if="serverError" class="notif alert"
+        <strong
-                    title="Connection error to PiAlert server, check the url in config.yml">?</strong>
+          v-if="serverError"
-            </div>
+          class="notif alert"
-        </template>
+          title="Connection error to PiAlert server, check the url in config.yml"
-    </Generic>
+          >?</strong
+        >
+      </div>
+    </template>
+  </Generic>
 </template>
-  
 <script>
 import service from "@/mixins/service.js";
 import Generic from "./Generic.vue";
 export default {
-    name: "PiAlert",
+  name: "PiAlert",
-    mixins: [service],
+  mixins: [service],
-    props: {
+  props: {
-        item: Object,
+    item: Object,
-    },
+  },
-    components: {
+  components: {
-        Generic,
+    Generic,
-    },
+  },
-    data: () => {
+  data: () => {
-        return {
+    return {
-            total: 0,
+      total: 0,
-            connected: 0,
+      connected: 0,
-            newdevices: 0,
+      newdevices: 0,
-            downalert: 0,
+      downalert: 0,
-            serverError: false,
+      serverError: false,
-        };
+    };
-    },
+  },
-    created() {
+  created() {
-        const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
+    const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
-        if (updateInterval > 0) {
+    if (updateInterval > 0) {
-            setInterval(() => this.fetchStatus(), updateInterval);
+      setInterval(() => this.fetchStatus(), updateInterval);
-        }
+    }
-        this.fetchStatus();
+    this.fetchStatus();
-    },
+  },
-    methods: {
+  methods: {
-        fetchStatus: async function () {
+    fetchStatus: async function () {
-            this.fetch("/php/server/devices.php?action=getDevicesTotals")
+      this.fetch("/php/server/devices.php?action=getDevicesTotals")
-                .then((response) => {
+        .then((response) => {
-                    this.total = response[0];
+          this.total = response[0];
-                    this.connected = response[1];
+          this.connected = response[1];
-                    this.newdevices = response[3];
+          this.newdevices = response[3];
-                    this.downalert = response[4];
+          this.downalert = response[4];
-                })
+        })
-                .catch((e) => {
+        .catch((e) => {
-                    console.log(e);
+          console.log(e);
-                    this.serverError = true;
+          this.serverError = true;
-                });
+        });
-        },
    },
+  },
 };
 </script>
-  
 <style scoped lang="scss">
 .notifs {
-    position: absolute;
+  position: absolute;
-    color: white;
+  color: white;
-    font-family: sans-serif;
+  font-family: sans-serif;
-    top: 0.3em;
+  top: 0.3em;
-    right: 0.5em;
+  right: 0.5em;
-    .notif {
+  .notif {
-        display: inline-block;
+    display: inline-block;
-        padding: 0.2em 0.35em;
+    padding: 0.2em 0.35em;
-        border-radius: 0.25em;
+    border-radius: 0.25em;
-        position: relative;
+    position: relative;
-        margin-left: 0.3em;
+    margin-left: 0.3em;
-        font-size: 0.8em;
+    font-size: 0.8em;
-        &.total {
+    &.total {
-            background-color: #4fb5d6;
+      background-color: #4fb5d6;
-        }
+    }
-        &.connected {
+    &.connected {
-            background-color: #4fd671;
+      background-color: #4fd671;
-        }
+    }
-        &.newdevices {
+    &.newdevices {
-            background-color: #d08d2e;
+      background-color: #d08d2e;
-        }
+    }
-        &.alert {
+    &.alert {
-            background-color: #e51111;
+      background-color: #e51111;
-        }
    }
+  }
 }
-</style>
-\ No newline at end of file
+</style>

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>
25	import service from "@/mixins/service.js";	29	import service from "@/mixins/service.js";
26	import Generic from "./Generic.vue";	30	import Generic from "./Generic.vue";
27		31
28	export default {	32	export 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>