]>
Commit | Line | Data |
---|---|---|
f682a84e | 1 | <template> |
de4b7e61 BW |
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 | |
18 | v-if="serverError" | |
19 | class="notif alert" | |
20 | title="Connection error to PiAlert server, check the url in config.yml" | |
21 | >?</strong | |
22 | > | |
23 | </div> | |
24 | </template> | |
25 | </Generic> | |
f682a84e | 26 | </template> |
de4b7e61 | 27 | |
f682a84e | 28 | <script> |
29 | import service from "@/mixins/service.js"; | |
30 | import Generic from "./Generic.vue"; | |
31 | ||
32 | export default { | |
de4b7e61 BW |
33 | name: "PiAlert", |
34 | mixins: [service], | |
35 | props: { | |
36 | item: Object, | |
37 | }, | |
38 | components: { | |
39 | Generic, | |
40 | }, | |
41 | data: () => { | |
42 | return { | |
43 | total: 0, | |
44 | connected: 0, | |
45 | newdevices: 0, | |
46 | downalert: 0, | |
47 | serverError: false, | |
48 | }; | |
49 | }, | |
50 | created() { | |
51 | const updateInterval = parseInt(this.item.updateInterval, 10) || 0; | |
52 | if (updateInterval > 0) { | |
53 | setInterval(() => this.fetchStatus(), updateInterval); | |
54 | } | |
55 | this.fetchStatus(); | |
56 | }, | |
57 | methods: { | |
58 | fetchStatus: async function () { | |
59 | this.fetch("/php/server/devices.php?action=getDevicesTotals") | |
60 | .then((response) => { | |
61 | this.total = response[0]; | |
62 | this.connected = response[1]; | |
63 | this.newdevices = response[3]; | |
64 | this.downalert = response[4]; | |
65 | }) | |
66 | .catch((e) => { | |
67 | console.log(e); | |
68 | this.serverError = true; | |
69 | }); | |
f682a84e | 70 | }, |
de4b7e61 | 71 | }, |
f682a84e | 72 | }; |
73 | </script> | |
de4b7e61 | 74 | |
f682a84e | 75 | <style scoped lang="scss"> |
76 | .notifs { | |
de4b7e61 BW |
77 | position: absolute; |
78 | color: white; | |
79 | font-family: sans-serif; | |
80 | top: 0.3em; | |
81 | right: 0.5em; | |
f682a84e | 82 | |
de4b7e61 BW |
83 | .notif { |
84 | display: inline-block; | |
85 | padding: 0.2em 0.35em; | |
86 | border-radius: 0.25em; | |
87 | position: relative; | |
88 | margin-left: 0.3em; | |
89 | font-size: 0.8em; | |
f682a84e | 90 | |
de4b7e61 BW |
91 | &.total { |
92 | background-color: #4fb5d6; | |
93 | } | |
f682a84e | 94 | |
de4b7e61 BW |
95 | &.connected { |
96 | background-color: #4fd671; | |
97 | } | |
f682a84e | 98 | |
de4b7e61 BW |
99 | &.newdevices { |
100 | background-color: #d08d2e; | |
101 | } | |
f682a84e | 102 | |
de4b7e61 BW |
103 | &.alert { |
104 | background-color: #e51111; | |
f682a84e | 105 | } |
de4b7e61 | 106 | } |
f682a84e | 107 | } |
de4b7e61 | 108 | </style> |