diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/services/OpenHAB.vue | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/src/components/services/OpenHAB.vue b/src/components/services/OpenHAB.vue new file mode 100644 index 0000000..03b50b2 --- /dev/null +++ b/src/components/services/OpenHAB.vue | |||
@@ -0,0 +1,144 @@ | |||
1 | <template> | ||
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> | ||
10 | {{ details }} | ||
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> | ||
20 | </template> | ||
21 | |||
22 | <script> | ||
23 | import service from "@/mixins/service.js"; | ||
24 | import Generic from "./Generic.vue"; | ||
25 | |||
26 | export default { | ||
27 | name: "OpenHAB", | ||
28 | mixins: [service], | ||
29 | props: { | ||
30 | item: Object, | ||
31 | }, | ||
32 | components: { | ||
33 | Generic, | ||
34 | }, | ||
35 | data: () => ({ | ||
36 | status: "", | ||
37 | things: { | ||
38 | count: 0, | ||
39 | online: 0, | ||
40 | }, | ||
41 | items: { | ||
42 | count: 0, | ||
43 | }, | ||
44 | }), | ||
45 | computed: { | ||
46 | headers: function () { | ||
47 | const basicAuth = `${this.item.apikey}:`; | ||
48 | |||
49 | return { | ||
50 | Authorization: `Basic ${btoa(basicAuth)}`, | ||
51 | }; | ||
52 | }, | ||
53 | details: function () { | ||
54 | const details = []; | ||
55 | |||
56 | if (this.item.things) { | ||
57 | details.push( | ||
58 | `${this.things.count} things (${this.things.online} Online)`, | ||
59 | ); | ||
60 | } | ||
61 | |||
62 | if (this.item.items) { | ||
63 | details.push(`${this.items.count} items`); | ||
64 | } | ||
65 | |||
66 | return details.join(", "); | ||
67 | }, | ||
68 | }, | ||
69 | created() { | ||
70 | this.fetchServerStatus(); | ||
71 | |||
72 | if (!this.item.subtitle && this.status !== "dead") { | ||
73 | this.fetchServerStats(); | ||
74 | } | ||
75 | }, | ||
76 | methods: { | ||
77 | fetchServerStatus: async function () { | ||
78 | const headers = this.headers; | ||
79 | this.fetch("/rest/systeminfo", { headers }) | ||
80 | .then((response) => { | ||
81 | if (response && response.systemInfo) this.status = "running"; | ||
82 | else throw new Error(); | ||
83 | }) | ||
84 | .catch((e) => { | ||
85 | console.log(e); | ||
86 | this.status = "dead"; | ||
87 | }); | ||
88 | }, | ||
89 | fetchServerStats: async function () { | ||
90 | const headers = this.headers; | ||
91 | |||
92 | if (this.item.things) { | ||
93 | const data = await this.fetch("/rest/things?summary=true", { | ||
94 | headers, | ||
95 | }).catch((e) => { | ||
96 | console.log(e); | ||
97 | }); | ||
98 | |||
99 | this.things.count = data.length; | ||
100 | this.things.online = data.filter( | ||
101 | (e) => e.statusInfo.status === "ONLINE", | ||
102 | ).length; | ||
103 | } | ||
104 | |||
105 | if (this.item.items) { | ||
106 | const data = await this.fetch("/rest/items", { headers }).catch((e) => { | ||
107 | console.log(e); | ||
108 | }); | ||
109 | |||
110 | this.items.count = data.length; | ||
111 | } | ||
112 | }, | ||
113 | }, | ||
114 | }; | ||
115 | </script> | ||
116 | |||
117 | <style scoped lang="scss"> | ||
118 | .status { | ||
119 | font-size: 0.8rem; | ||
120 | color: var(--text-title); | ||
121 | |||
122 | &.running:before { | ||
123 | background-color: #94e185; | ||
124 | border-color: #78d965; | ||
125 | box-shadow: 0 0 5px 1px #94e185; | ||
126 | } | ||
127 | |||
128 | &.dead:before { | ||
129 | background-color: #c9404d; | ||
130 | border-color: #c42c3b; | ||
131 | box-shadow: 0 0 5px 1px #c9404d; | ||
132 | } | ||
133 | |||
134 | &:before { | ||
135 | content: " "; | ||
136 | display: inline-block; | ||
137 | width: 7px; | ||
138 | height: 7px; | ||
139 | margin-right: 10px; | ||
140 | border: 1px solid #000; | ||
141 | border-radius: 7px; | ||
142 | } | ||
143 | } | ||
144 | </style> | ||