aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/services/OpenHAB.vue144
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>
23import service from "@/mixins/service.js";
24import Generic from "./Generic.vue";
25
26export 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>