Skip to content

Commit 8bcb8a1

Browse files
benderlbenderl
authored
Merge pull request #638 from benderl/status-icons
refactor status cards
2 parents c36030a + a7a11ad commit 8bcb8a1

10 files changed

+247
-400
lines changed

‎src/components/status/BatteryCard.vue

+15-47
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,22 @@
11
<template>
2-
<openwb-base-card
2+
<status-card
33
subtype="warning"
4-
:collapsible="true"
5-
:collapsed="true"
6-
class="pb-0"
4+
:component-id="battery.id"
5+
:state="$store.state.mqtt[baseTopic + '/get/fault_state']"
6+
:state-message="$store.state.mqtt[baseTopic + '/get/fault_str']"
77
>
8-
<template #header>
8+
<template #header-left>
99
<font-awesome-icon
1010
fixed-width
1111
:icon="['fas', 'car-battery']"
1212
/>
1313
{{ battery.name }}
1414
</template>
15-
<template #actions>
16-
<div
17-
v-if="getFaultStateSubtype(baseTopic) == 'success'"
18-
class="text-right"
19-
>
20-
{{ formatNumberTopic(baseTopic + "/get/power", 1, 1, 0.001) }}&nbsp;kW /
21-
{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%
22-
</div>
23-
<span
24-
v-else
25-
:class="'subheader pill bg-' + getFaultStateSubtype(baseTopic)"
26-
>
27-
<div v-if="getFaultStateSubtype(baseTopic) == 'warning'">Warnung</div>
28-
<div v-else>Fehler</div>
29-
</span>
15+
<template #header-right>
16+
{{ formatNumberTopic(baseTopic + "/get/power", 1, 1, 0.001) }}&nbsp;kW /
17+
{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%
3018
</template>
19+
<!-- Aktuelle Werte -->
3120
<openwb-base-card
3221
title="Aktuelle Werte"
3322
subtype="white"
@@ -45,6 +34,7 @@
4534
<div class="col text-right text-monospace pl-0">{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%</div>
4635
</div>
4736
</openwb-base-card>
37+
<!-- Zählerstände -->
4838
<openwb-base-card
4939
title="Zählerstände"
5040
subtype="white"
@@ -75,45 +65,23 @@
7565
</div>
7666
</div>
7767
</openwb-base-card>
78-
<template #footer>
79-
<div class="container">
80-
<div class="row">
81-
<div class="col px-0">
82-
<openwb-base-alert :subtype="getFaultStateSubtype(baseTopic)">
83-
<font-awesome-icon
84-
fixed-width
85-
:icon="stateIcon"
86-
/>
87-
Modulmeldung:
88-
<span style="white-space: pre-wrap">{{ $store.state.mqtt[baseTopic + "/get/fault_str"] }}</span>
89-
</openwb-base-alert>
90-
</div>
91-
<div class="col col-auto pr-0">
92-
<div class="text-right">ID: {{ battery.id }}</div>
93-
</div>
94-
</div>
95-
</div>
96-
</template>
97-
</openwb-base-card>
68+
</status-card>
9869
</template>
9970

10071
<script>
10172
import ComponentState from "../mixins/ComponentState.vue";
73+
import StatusCard from "./StatusCard.vue";
10274
10375
import { library } from "@fortawesome/fontawesome-svg-core";
104-
import {
105-
faCheckCircle as fasCheckCircle,
106-
faExclamationTriangle as fasExclamationTriangle,
107-
faTimesCircle as fasTimesCircle,
108-
faCarBattery as fasCarBattery,
109-
} from "@fortawesome/free-solid-svg-icons";
76+
import { faCarBattery as fasCarBattery } from "@fortawesome/free-solid-svg-icons";
11077
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
11178
112-
library.add(fasCheckCircle, fasExclamationTriangle, fasTimesCircle, fasCarBattery);
79+
library.add(fasCarBattery);
11380
11481
export default {
11582
name: "BatteryCard",
11683
components: {
84+
StatusCard,
11785
FontAwesomeIcon,
11886
},
11987
mixins: [ComponentState],

‎src/components/status/BatterySumCard.vue

+14-38
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,21 @@
11
<template>
2-
<openwb-base-card
2+
<status-card
33
subtype="warning"
4-
:collapsible="true"
5-
:collapsed="true"
6-
class="pb-0"
4+
:state="$store.state.mqtt[baseTopic + '/get/fault_state']"
5+
:state-message="$store.state.mqtt[baseTopic + '/get/fault_str']"
76
>
8-
<template #header>
7+
<template #header-left>
98
<font-awesome-icon
109
fixed-width
1110
:icon="['fas', 'car-battery']"
1211
/>
1312
Alle Speicher
1413
</template>
15-
<template #actions>
16-
<div
17-
v-if="getFaultStateSubtype(baseTopic) == 'success'"
18-
class="text-right"
19-
>
20-
{{ formatNumberTopic(baseTopic + "/get/power", 1, 1, 0.001) }}&nbsp;kW /
21-
{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%
22-
</div>
23-
<span
24-
v-else
25-
:class="'subheader pill bg-' + getFaultStateSubtype(baseTopic)"
26-
>
27-
<div v-if="getFaultStateSubtype(baseTopic) == 'warning'">Warnung</div>
28-
<div v-else>Fehler</div>
29-
</span>
14+
<template #header-right>
15+
{{ formatNumberTopic(baseTopic + "/get/power", 1, 1, 0.001) }}&nbsp;kW /
16+
{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%
3017
</template>
18+
<!-- Aktuelle Werte -->
3119
<openwb-base-card
3220
title="Aktuelle Werte"
3321
subtype="white"
@@ -45,6 +33,7 @@
4533
<div class="col text-right text-monospace pl-0">{{ $store.state.mqtt[baseTopic + "/get/soc"] }}&nbsp;%</div>
4634
</div>
4735
</openwb-base-card>
36+
<!-- Zählerstände -->
4837
<openwb-base-card
4938
title="Zählerstände"
5039
subtype="white"
@@ -75,36 +64,23 @@
7564
</div>
7665
</div>
7766
</openwb-base-card>
78-
<template #footer>
79-
<openwb-base-alert :subtype="getFaultStateSubtype(baseTopic)">
80-
<font-awesome-icon
81-
fixed-width
82-
:icon="stateIcon"
83-
/>
84-
Modulmeldung:
85-
<span style="white-space: pre-wrap">{{ $store.state.mqtt[baseTopic + "/get/fault_str"] }}</span>
86-
</openwb-base-alert>
87-
</template>
88-
</openwb-base-card>
67+
</status-card>
8968
</template>
9069

9170
<script>
9271
import ComponentState from "../mixins/ComponentState.vue";
72+
import StatusCard from "./StatusCard.vue";
9373
9474
import { library } from "@fortawesome/fontawesome-svg-core";
95-
import {
96-
faCheckCircle as fasCheckCircle,
97-
faExclamationTriangle as fasExclamationTriangle,
98-
faTimesCircle as fasTimesCircle,
99-
faCarBattery as fasCarBattery,
100-
} from "@fortawesome/free-solid-svg-icons";
75+
import { faCarBattery as fasCarBattery } from "@fortawesome/free-solid-svg-icons";
10176
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
10277
103-
library.add(fasCheckCircle, fasExclamationTriangle, fasTimesCircle, fasCarBattery);
78+
library.add(fasCarBattery);
10479
10580
export default {
10681
name: "BatterySumCard",
10782
components: {
83+
StatusCard,
10884
FontAwesomeIcon,
10985
},
11086
mixins: [ComponentState],

‎src/components/status/ChargePointCard.vue

+21-61
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,19 @@
11
<template>
2-
<openwb-base-card
2+
<status-card
33
subtype="primary"
4-
:collapsible="true"
5-
:collapsed="true"
6-
class="pb-0"
4+
:component-id="chargePointIndex"
5+
:state="$store.state.mqtt[baseTopic + '/get/fault_state']"
6+
:state-message="$store.state.mqtt[baseTopic + '/get/fault_str']"
77
>
8-
<template #header>
8+
<template #header-left>
99
<font-awesome-icon
1010
fixed-width
1111
:icon="['fas', 'charging-station']"
1212
/>
1313
{{ installedChargePoint.name }}
1414
</template>
15-
<template #actions>
16-
<div
17-
v-if="getFaultStateSubtype(baseTopic) == 'success'"
18-
class="text-right"
19-
>
20-
{{ formatNumberTopic(baseTopic + "/get/power", 3, 3, 0.001) }}&nbsp;kW
21-
<font-awesome-icon
22-
fixed-width
23-
:icon="chargingStatus.icon"
24-
:title="chargingStatus.text"
25-
/>
26-
</div>
27-
<span
28-
v-else
29-
:class="'subheader pill bg-' + getFaultStateSubtype(baseTopic)"
30-
>
31-
<div v-if="getFaultStateSubtype(baseTopic) == 'warning'">Warnung</div>
32-
<div v-else>Fehler</div>
33-
</span>
34-
</template>
35-
15+
<template #header-right>{{ formatNumberTopic(baseTopic + "/get/power", 3, 3, 0.001) }}&nbsp;kW</template>
16+
<!-- Status -->
3617
<openwb-base-card
3718
subtype="white"
3819
body-bg="white"
@@ -54,14 +35,16 @@
5435
Statusmeldung:
5536
<span style="white-space: pre-wrap">{{ $store.state.mqtt[baseTopic + "/get/state_str"] }}</span>
5637
</openwb-base-alert>
57-
max. Ladeleistung:
58-
{{
59-
(max_power = formatNumberTopic("openWB/chargepoint/" + chargePointIndex + "/get/max_evse_current", 0)) == "-"
60-
? max_power
61-
: Math.floor((max_power * 3 * 230) / 1000)
62-
}}&nbsp;kW
38+
<div>
39+
max. Ladeleistung:
40+
{{
41+
(max_power = formatNumberTopic("openWB/chargepoint/" + chargePointIndex + "/get/max_evse_current", 0)) == "-"
42+
? max_power
43+
: Math.floor((max_power * 3 * 230) / 1000)
44+
}}&nbsp;kW
45+
</div>
6346
</openwb-base-card>
64-
47+
<!-- Ladevorgang -->
6548
<openwb-base-card
6649
subtype="white"
6750
body-bg="white"
@@ -101,7 +84,7 @@
10184
</div>
10285
</div>
10386
</openwb-base-card>
104-
87+
<!-- Zählerstände -->
10588
<openwb-base-card
10689
subtype="white"
10790
body-bg="white"
@@ -131,7 +114,7 @@
131114
</div>
132115
</div>
133116
</openwb-base-card>
134-
117+
<!-- Werte pro Phase -->
135118
<openwb-base-card
136119
subtype="white"
137120
body-bg="white"
@@ -193,36 +176,15 @@
193176
</div>
194177
</div>
195178
</openwb-base-card>
196-
<template #footer>
197-
<div class="container">
198-
<div class="row">
199-
<div class="col px-0">
200-
<openwb-base-alert :subtype="getFaultStateSubtype(baseTopic)">
201-
<font-awesome-icon
202-
fixed-width
203-
:icon="stateIcon"
204-
/>
205-
Modulmeldung:
206-
<span style="white-space: pre-wrap">{{ $store.state.mqtt[baseTopic + "/get/fault_str"] }}</span>
207-
</openwb-base-alert>
208-
</div>
209-
<div class="col col-auto pr-0">
210-
<div class="text-right">ID: {{ chargePointIndex }}</div>
211-
</div>
212-
</div>
213-
</div>
214-
</template>
215-
</openwb-base-card>
179+
</status-card>
216180
</template>
217181

218182
<script>
219183
import ComponentState from "../mixins/ComponentState.vue";
184+
import StatusCard from "./StatusCard.vue";
220185
221186
import { library } from "@fortawesome/fontawesome-svg-core";
222187
import {
223-
faCheckCircle as fasCheckCircle,
224-
faExclamationTriangle as fasExclamationTriangle,
225-
faTimesCircle as fasTimesCircle,
226188
faChargingStation as fasChargingStation,
227189
faPlug as fasPlug,
228190
faBolt as fasBolt,
@@ -235,9 +197,6 @@ import {
235197
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
236198
237199
library.add(
238-
fasCheckCircle,
239-
fasExclamationTriangle,
240-
fasTimesCircle,
241200
fasChargingStation,
242201
fasPlug,
243202
fasBolt,
@@ -251,6 +210,7 @@ library.add(
251210
export default {
252211
name: "ChargePointCard",
253212
components: {
213+
StatusCard,
254214
FontAwesomeIcon,
255215
},
256216
mixins: [ComponentState],

‎src/components/status/ChargePointSumCard.vue

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
<template>
2-
<openwb-base-card
3-
subtype="primary"
4-
:collapsible="true"
5-
:collapsed="true"
6-
class="pb-0"
7-
>
8-
<template #header>
2+
<status-card subtype="primary">
3+
<template #header-left>
94
<font-awesome-icon
105
fixed-width
116
:icon="['fas', 'charging-station']"
127
/>
138
Alle Ladepunkte
149
</template>
15-
<template #actions>
10+
<template #header-right>
1611
<span class="text-right"> {{ formatNumberTopic(baseTopic + "/get/power", 3, 3, 0.001) }}&nbsp;kW </span>
1712
</template>
13+
<!-- Ladevorgang -->
1814
<openwb-base-card
1915
subtype="white"
2016
body-bg="white"
@@ -30,7 +26,7 @@
3026
</div>
3127
</div>
3228
</openwb-base-card>
33-
29+
<!-- Zählerstände -->
3430
<openwb-base-card
3531
subtype="white"
3632
body-bg="white"
@@ -60,11 +56,12 @@
6056
</div>
6157
</div>
6258
</openwb-base-card>
63-
</openwb-base-card>
59+
</status-card>
6460
</template>
6561

6662
<script>
6763
import ComponentState from "../mixins/ComponentState.vue";
64+
import StatusCard from "./StatusCard.vue";
6865
6966
import { library } from "@fortawesome/fontawesome-svg-core";
7067
import { faChargingStation as fasChargingStation } from "@fortawesome/free-solid-svg-icons";
@@ -75,6 +72,7 @@ library.add(fasChargingStation);
7572
export default {
7673
name: "ChargePointSumCard",
7774
components: {
75+
StatusCard,
7876
FontAwesomeIcon,
7977
},
8078
mixins: [ComponentState],

0 commit comments

Comments
 (0)