|
1 | 1 | <template>
|
2 |
| - <openwb-base-card |
| 2 | + <status-card |
3 | 3 | 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']" |
7 | 7 | >
|
8 |
| - <template #header> |
| 8 | + <template #header-left> |
9 | 9 | <font-awesome-icon
|
10 | 10 | fixed-width
|
11 | 11 | :icon="['fas', 'car-battery']"
|
12 | 12 | />
|
13 | 13 | {{ battery.name }}
|
14 | 14 | </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) }} kW / |
21 |
| - {{ $store.state.mqtt[baseTopic + "/get/soc"] }} % |
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) }} kW / |
| 17 | + {{ $store.state.mqtt[baseTopic + "/get/soc"] }} % |
30 | 18 | </template>
|
| 19 | + <!-- Aktuelle Werte --> |
31 | 20 | <openwb-base-card
|
32 | 21 | title="Aktuelle Werte"
|
33 | 22 | subtype="white"
|
|
45 | 34 | <div class="col text-right text-monospace pl-0">{{ $store.state.mqtt[baseTopic + "/get/soc"] }} %</div>
|
46 | 35 | </div>
|
47 | 36 | </openwb-base-card>
|
| 37 | + <!-- Zählerstände --> |
48 | 38 | <openwb-base-card
|
49 | 39 | title="Zählerstände"
|
50 | 40 | subtype="white"
|
|
75 | 65 | </div>
|
76 | 66 | </div>
|
77 | 67 | </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> |
98 | 69 | </template>
|
99 | 70 |
|
100 | 71 | <script>
|
101 | 72 | import ComponentState from "../mixins/ComponentState.vue";
|
| 73 | +import StatusCard from "./StatusCard.vue"; |
102 | 74 |
|
103 | 75 | 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"; |
110 | 77 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
111 | 78 |
|
112 |
| -library.add(fasCheckCircle, fasExclamationTriangle, fasTimesCircle, fasCarBattery); |
| 79 | +library.add(fasCarBattery); |
113 | 80 |
|
114 | 81 | export default {
|
115 | 82 | name: "BatteryCard",
|
116 | 83 | components: {
|
| 84 | + StatusCard, |
117 | 85 | FontAwesomeIcon,
|
118 | 86 | },
|
119 | 87 | mixins: [ComponentState],
|
120 | 88 | props: {
|
121 | 89 | battery: { type: Object, required: true },
|
122 | 90 | },
|
| 91 | + data() { |
| 92 | + return { |
| 93 | + mqttTopicsToSubscribe: [`openWB/bat/${this.battery.id}/get/+`], |
| 94 | + }; |
| 95 | + }, |
123 | 96 | computed: {
|
124 | 97 | baseTopic: {
|
125 | 98 | get() {
|
|
0 commit comments