Fix battery soc not displayed

assets/js/app.js

@@ -6,6 +6,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSun } from "@fortawesome/free-solid-svg-icons/faSun";
 import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown";
+import { faBatteryThreeQuarters } from "@fortawesome/free-solid-svg-icons/faBatteryThreeQuarters";
 import { faTemperatureLow } from "@fortawesome/free-solid-svg-icons/faTemperatureLow";
 import { faTemperatureHigh } from "@fortawesome/free-solid-svg-icons/faTemperatureHigh";
 import { faThermometerHalf } from "@fortawesome/free-solid-svg-icons/faThermometerHalf";
@@ -23,6 +24,7 @@ library.add(
   faSun,
   faArrowUp,
   faArrowDown,
+  faBatteryThreeQuarters,
   faTemperatureLow,
   faTemperatureHigh,
   faThermometerHalf,

assets/js/components/LoadpointDetails.vue

@@ -7,17 +7,17 @@
 					class="text-primary ml-1"
 					icon="temperature-low"
 					v-if="state.climater == 'heating'"
-				/>
+				></fa-icon>
 				<fa-icon
 					class="text-primary ml-1"
 					icon="temperature-high"
 					v-if="state.climater == 'cooling'"
-				/>
+				></fa-icon>
 				<fa-icon
 					class="text-primary ml-1"
 					icon="thermometer-half"
 					v-if="state.climater == 'on'"
-				/>
+				></fa-icon>
 			</div>
 			<h2 class="value">
 				{{ fmt(state.chargePower) }}

assets/js/components/MessageToast.vue

@@ -2,10 +2,10 @@
 	<div class="toast" data-delay="10000" v-bind:data-autohide="true">
 		<div class="toast-header">
 			<strong class="mr-auto" v-if="item.type != 'warn'"
-				><fa-icon class="text-danger" icon="exclamation-triangle" /> Error</strong
+				><fa-icon class="text-danger" icon="exclamation-triangle"></fa-icon> Error</strong
 			>
 			<strong class="mr-auto" v-if="item.type == 'warn'"
-				><fa-icon class="text-warning" icon="exclamation-triangle" />
+				><fa-icon class="text-warning" icon="exclamation-triangle"></fa-icon>
 				Warning</strong
 			>
 			<small v-if="item.status">HTTP {{ item.status }}</small>

assets/js/components/SiteDetails.vue

@@ -2,10 +2,10 @@
 	<div class="row">
 		<div class="col-6 col-md-3 mt-3" v-if="state.gridConfigured">
 			<div class="mb-2 value" v-if="state.gridPower > 0">
-				Bezug <fa-icon icon="arrow-down" class="text-primary" />
+				Bezug <fa-icon icon="arrow-down" class="text-primary"></fa-icon>
 			</div>
 			<div class="mb-2 value" v-else>
-				Einspeisung <fa-icon icon="arrow-up" class="text-primary" />
+				Einspeisung <fa-icon icon="arrow-up" class="text-primary"></fa-icon>
 			</div>
 			<h2 class="value">
 				{{ fmt(state.gridPower) }}
@@ -21,49 +21,44 @@
 						'text-primary': state.pvPower < 0,
 						'text-muted': state.pvPower >= 0,
 					}"
-				/>
+				></fa-icon>
 			</div>
 			<h2 class="value">
 				{{ fmt(state.pvPower) }}
 				<small class="text-muted">{{ fmtUnit(state.pvPower) }}W</small>
 			</h2>
 		</div>
-		<div
-			class="d-md-block col-6 col-md-3 mt-3"
-			v-bind:class="{ 'd-none': !state.batterySoC }"
-			v-if="state.batteryConfigured"
-		>
+		<div class="d-md-block col-6 col-md-3 mt-3" v-if="state.batteryConfigured">
 			<div class="mb-2 value">
 				Batterie
 				<fa-icon
 					class="text-primary"
 					icon="arrow-down"
 					v-if="state.batteryPower < 0"
-				/>
+				></fa-icon>
 				<fa-icon
 					class="text-primary"
 					icon="arrow-up"
 					v-if="state.batteryPower > 0"
-				/>
+				></fa-icon>
 			</div>
 			<h2 class="value">
 				{{ fmt(state.batteryPower) }}
 				<small class="text-muted">{{ fmtUnit(state.batteryPower) }}W</small>
 			</h2>
 		</div>
-		<div class="col-6 col-md-3 mt-3" v-if="state.batterySoC">
+		<div class="col-6 col-md-3 mt-3" v-if="state.batteryConfigured">
 			<div class="mb-2 value">
 				SoC
 				<fa-icon
-					class="text-primary"
 					icon="battery-three-quarters"
 					v-bind:class="{
 						'text-primary': state.batteryPower > 0,
 						'text-muted': state.batteryPower < 0,
 					}"
-				/>
+				></fa-icon>
 			</div>
-			<h2 class="value">{{ state.batterySoC }} <small class="text-muted">%</small></h2>
+			<h2 class="value">{{ state.batterySoC || 0 }} <small class="text-muted">%</small></h2>
 		</div>
 	</div>
 </template>

assets/js/components/Version.vue

@@ -12,8 +12,8 @@
 				>
 					<a href="#" class="text-body">
 						Release notes
-						<fa-icon icon="chevron-up" v-if="notesShown" />
-						<fa-icon icon="chevron-down" v-if="!notesShown" />
+						<fa-icon icon="chevron-up" v-if="notesShown"></fa-icon>
+						<fa-icon icon="chevron-down" v-else></fa-icon>
 					</a>
 				</b>
 				<b class="px-3">
@@ -23,7 +23,7 @@
 						"
 						class="text-body"
 					>
-						Download <fa-icon icon="chevron-down" />
+						Download <fa-icon icon="chevron-down"></fa-icon>
 					</a>
 				</b>
 				<button