]>
Commit | Line | Data |
---|---|---|
9c537fb9 AP |
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> |