Fix vehicle soc not displayed broken in #623

assets/js/components/Loadpoint.vue

@@ -102,14 +102,7 @@
 
 		<div class="row">
 			<div class="col-12 col-md-4 mt-3 mb-3 mb-md-0">
-				<Vehicle
-					:charging="charging"
-					:connected="connected"
-					:minSoC="minSoC"
-					:hasVehicle="hasVehicle"
-					:socCharge="socCharge"
-					:socTitle="socTitle"
-				></Vehicle>
+				<Vehicle v-bind="vehicle"></Vehicle>
 			</div>
 
 			<div class="col-12 col-md-4 d-none d-md-block mt-3" v-if="multi">
@@ -149,6 +142,7 @@ import Mode from "./Mode";
 import Vehicle from "./Vehicle";
 import LoadpointDetails from "./LoadpointDetails";
 import formatter from "../mixins/formatter";
+import collector from "../mixins/collector";
 
 export default {
 	name: "Loadpoint",
@@ -186,7 +180,7 @@ export default {
 		chargeEstimate: Number,
 	},
 	components: { LoadpointDetails, Soc, Mode, Vehicle },
-	mixins: [formatter],
+	mixins: [formatter, collector],
 	data: function () {
 		return {
 			tickerHandle: null,
@@ -195,18 +189,10 @@ export default {
 	},
 	computed: {
 		details: function () {
-			return {
-				connected: this.connected,
-				minSoC: this.minSoC,
-				hasVehicle: this.hasVehicle,
-				socCharge: this.socCharge,
-				climater: this.climater,
-				chargePower: this.chargePower,
-				chargedEnergy: this.chargedEnergy,
-				range: this.range,
-				chargeDuration: this.chargeDurationDisplayed,
-				chargeEstimate: this.chargeEstimate,
-			};
+			return this.collectProps(LoadpointDetails);
+		},
+		vehicle: function () {
+			return this.collectProps(Vehicle);
 		},
 		hasTargetSoC: function () {
 			return this.socLevels != null && this.socLevels.length > 0;

assets/js/components/LoadpointDetails.vue

@@ -68,15 +68,15 @@ import formatter from "../mixins/formatter";
 export default {
 	name: "LoadpointDetails",
 	props: {
-		chargePower: Number,
 		chargedEnergy: Number,
 		chargeDuration: Number,
+		chargeEstimate: Number,
+		chargePower: Number,
+		climater: String,
 		hasVehicle: Boolean,
+		range: Number,
 		socTimerActive: Boolean,
 		socTimerSet: Boolean,
-		climater: String,
-		range: Number,
-		chargeEstimate: Number,
 	},
 	mixins: [formatter],
 };

assets/js/components/Site.vue

@@ -5,15 +5,7 @@
 				<p class="h1">{{ title || "Home" }}</p>
 			</div>
 			<div class="col-12 col-md-8 mt-md-4" v-if="multi">
-				<SiteDetails
-					:gridConfigured="gridConfigured"
-					:gridPower="gridPower"
-					:pvConfigured="pvConfigured"
-					:pvPower="pvPower"
-					:batteryConfigured="batteryConfigured"
-					:batteryPower="batteryPower"
-					:batterySoC="batterySoC"
-				></SiteDetails>
+				<SiteDetails v-bind="details"></SiteDetails>
 			</div>
 		</div>
 
@@ -22,15 +14,7 @@
 		<div class="row" v-if="!multi">
 			<div class="d-none d-md-block col-md-4"></div>
 			<div class="col-12 col-md-8">
-				<SiteDetails
-					:gridConfigured="gridConfigured"
-					:gridPower="gridPower"
-					:pvConfigured="pvConfigured"
-					:pvPower="pvPower"
-					:batteryConfigured="batteryConfigured"
-					:batteryPower="batteryPower"
-					:batterySoC="batterySoC"
-				></SiteDetails>
+				<SiteDetails v-bind="details"></SiteDetails>
 			</div>
 		</div>
 
@@ -50,6 +34,7 @@
 import SiteDetails from "./SiteDetails";
 import Loadpoint from "./Loadpoint";
 import formatter from "../mixins/formatter";
+import collector from "../mixins/collector";
 
 export default {
 	name: "Site",
@@ -67,8 +52,11 @@ export default {
 		batterySoC: Number,
 	},
 	components: { SiteDetails, Loadpoint },
-	mixins: [formatter],
+	mixins: [formatter, collector],
 	computed: {
+		details: function () {
+			return this.collectProps(SiteDetails);
+		},
 		multi: function () {
 			// TODO fix compact
 			return this.loadpoints.length > 1 /* || app.compact*/;

assets/js/components/Vehicle.vue

@@ -39,20 +39,20 @@ export default {
 		socTitle: String,
 		connected: Boolean,
 		charging: Boolean,
-		soc: Boolean,
+		hasVehicle: Boolean,
 		socCharge: Number,
 		minSoC: Number,
 	},
 	computed: {
 		socChargeDisplayWidth: function () {
-			if (this.soc && this.socCharge >= 0) {
+			if (this.hasVehicle && this.socCharge >= 0) {
 				return this.socCharge;
 			}
 			return 100;
 		},
 		socChargeDisplayValue: function () {
 			// no soc or no soc value
-			if (!this.soc || this.socCharge < 0) {
+			if (!this.hasVehicle || this.socCharge < 0) {
 				let chargeStatus = "getrennt";
 				if (this.charging) {
 					chargeStatus = "laden";

assets/js/mixins/collector.js

@@ -0,0 +1,12 @@
+export default {
+  methods: {
+    // collect all target component properties from current instance
+    collectProps: function (component) {
+      let data = {};
+      for (var p in component.props) {
+        data[p] = this[p];
+      }
+      return data;
+    },
+  },
+};