unit format

.eslintrc.cjs

@@ -19,5 +19,6 @@ module.exports = {
 		"vue/multi-word-component-names": "off",
 		"vue/no-reserved-component-names": "off",
 		"vue/no-undef-properties": "warn",
+		"no-param-reassign": "error",
 	},
 };

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -63,6 +63,15 @@ body:
         - Docker container
         - HomeAssistant Add-on
 
+  - type: checkboxes
+    id: nightly
+    attributes:
+      label: Nightly build
+      description: Check if issue as already been fixed in the latest nightly build
+      options:
+        - label: I have verified that the issue is reproducible with the latest nightly build
+          required: true
+
   - type: input
     attributes:
       label: Version

.gitignore

@@ -40,3 +40,4 @@ asset-stats.html
 /playwright-report/
 /playwright/.cache/
 .gitpod.yml
+/evcc.db

Makefile

@@ -143,3 +143,5 @@ patch-asn1::
 
 upgrade::
 	$(shell go list -u -f '{{if (and (not (or .Main .Indirect)) .Update)}}{{.Path}}{{end}}' -m all | xargs go get)
+	go get modernc.org/sqlite@latest
+	go mod tidy

assets/css/app.css

@@ -112,6 +112,10 @@ body {
 	color: var(--evcc-default-text);
 }
 
+body:not(.modal-open) {
+	overflow-y: scroll;
+}
+
 h1,
 h2,
 h3,

assets/js/components/BatterySettingsModal.vue

@@ -256,7 +256,7 @@ import "@h2d2/shopicons/es/regular/home";
 import SmartCostLimit from "./SmartCostLimit.vue";
 import CustomSelect from "./CustomSelect.vue";
 import GenericModal from "./GenericModal.vue";
-import formatter from "../mixins/formatter";
+import formatter, { POWER_UNIT } from "../mixins/formatter";
 import collector from "../mixins/collector";
 import api from "../api";
 import smartCostAvailable from "../utils/smartCostAvailable";
@@ -272,7 +272,7 @@ export default {
 		bufferStartSoc: Number,
 		batteryDischargeControl: Boolean,
 		battery: { type: Array, default: () => [] },
-		batteryGridChargeLimit: Number,
+		batteryGridChargeLimit: { type: Number, default: null },
 		smartCostType: String,
 		tariffGrid: Number,
 		currency: String,
@@ -363,13 +363,13 @@ export default {
 				.filter(({ capacity }) => capacity > 0)
 				.map(({ soc, capacity }) => {
 					const multipleBatteries = this.battery.length > 1;
-					const energy = this.fmtKWh(
+					const energy = this.fmtWh(
 						(capacity / 100) * soc * 1e3,
-						true,
+						POWER_UNIT.KW,
 						!multipleBatteries,
 						1
 					);
-					const total = this.fmtKWh(capacity * 1e3, true, true, 1);
+					const total = this.fmtWh(capacity * 1e3, POWER_UNIT.KW, true, 1);
 					const name = multipleBatteries ? "↳ " : "";
 					const formattedSoc = multipleBatteries ? ` (${this.fmtSoc(soc)})` : "";
 					const formattedEnergy = this.$t("batterySettings.capacity", {

assets/js/components/ChargingPlan.vue

@@ -196,7 +196,7 @@ export default {
 			return fmtEnergy(
 				this.planEnergy,
 				optionStep(this.capacity || 100),
-				this.fmtKWh,
+				this.fmtWh,
 				this.$t("main.targetEnergy.noLimit")
 			);
 		},

assets/js/components/ChargingPlanPreview.vue

@@ -69,7 +69,7 @@ export default {
 		},
 		fmtPower() {
 			if (this.duration > 0 && this.power > 0) {
-				return `@ ${this.fmtKw(this.power)}`;
+				return `@ ${this.fmtW(this.power)}`;
 			}
 			return null;
 		},

assets/js/components/ChargingPlanSettingsEntry.vue

@@ -175,7 +175,7 @@ export default {
 				0,
 				this.capacity || 100,
 				this.socPerKwh,
-				this.fmtKWh,
+				this.fmtWh,
 				this.fmtPercentage,
 				"-"
 			);

assets/js/components/ChargingPlanWarnings.vue

@@ -100,16 +100,16 @@ export default {
 			if (this.socBasedPlanning) {
 				return this.fmtSoc(this.effectiveLimitSoc);
 			}
-			return this.fmtKWh(this.limitEnergy * 1e3);
+			return this.fmtWh(this.limitEnergy * 1e3);
 		},
 		goalFmt: function () {
 			if (this.socBasedPlanning) {
 				return this.fmtSoc(this.effectivePlanSoc);
 			}
-			return this.fmtKWh(this.planEnergy * 1e3);
+			return this.fmtWh(this.planEnergy * 1e3);
 		},
 		costLimitExists: function () {
-			return this.smartCostLimit !== 0;
+			return this.smartCostLimit !== null;
 		},
 		costLimitText: function () {
 			if (this.isCo2) {

assets/js/components/Config/DeviceTags.vue

@@ -48,11 +48,11 @@ export default {
 			}
 			switch (name) {
 				case "power":
-					return this.fmtKw(value);
+					return this.fmtW(value);
 				case "energy":
 				case "capacity":
 				case "chargedEnergy":
-					return this.fmtKWh(value * 1e3);
+					return this.fmtWh(value * 1e3);
 				case "soc":
 				case "socLimit":
 					return this.fmtPercentage(value, 1);
@@ -66,7 +66,7 @@ export default {
 				case "phaseVoltages":
 					return value.map((v) => this.fmtNumber(v, 0)).join(" ") + " V";
 				case "phasePowers":
-					return value.map((v) => this.fmtKw(v)).join(", ");
+					return value.map((v) => this.fmtW(v)).join(", ");
 				case "chargeStatus":
 					return this.$t(`config.deviceValue.chargeStatus${value}`);
 				case "gridPrice":
@@ -75,7 +75,7 @@ export default {
 				case "co2":
 					return this.fmtCo2Short(value);
 				case "powerRange":
-					return `${this.fmtKw(value[0])} / ${this.fmtKw(value[1])}`;
+					return `${this.fmtW(value[0])} / ${this.fmtW(value[1])}`;
 				case "currentRange":
 					return `${this.fmtNumber(value[0], 1)} A / ${this.fmtNumber(value[1], 1)} A`;
 				case "controllable":

assets/js/components/Config/MqttModal.vue

@@ -63,17 +63,36 @@
 					</label>
 				</div>
 			</FormRow>
+			<PropertyCollapsible>
+				<template #advanced>
+					<FormRow id="mqttCaCert" :label="$t('config.mqtt.labelCaCert')" optional>
+						<PropertyCertField id="mqttCaCert" v-model="values.caCert" />
+					</FormRow>
+					<FormRow
+						id="mqttClientCert"
+						:label="$t('config.mqtt.labelClientCert')"
+						optional
+					>
+						<PropertyCertField id="mqttClientCert" v-model="values.clientCert" />
+					</FormRow>
+					<FormRow id="mqttClientKey" :label="$t('config.mqtt.labelClientKey')" optional>
+						<PropertyCertField id="mqttClientKey" v-model="values.clientKey" />
+					</FormRow>
+				</template>
+			</PropertyCollapsible>
 		</template>
 	</JsonModal>
 </template>
 
 <script>
 import JsonModal from "./JsonModal.vue";
 import FormRow from "./FormRow.vue";
+import PropertyCollapsible from "./PropertyCollapsible.vue";
+import PropertyCertField from "./PropertyCertField.vue";
 
 export default {
 	name: "MqttModal",
-	components: { FormRow, JsonModal },
+	components: { FormRow, JsonModal, PropertyCollapsible, PropertyCertField },
 	emits: ["changed"],
 };
 </script>

assets/js/components/Config/PropertyCertField.vue

@@ -0,0 +1,55 @@
+<template>
+	<div>
+		<textarea :id="id" v-model="value" class="form-control" rows="3" />
+		<div class="d-flex justify-content-end">
+			<button
+				type="button"
+				class="btn btn-link btn-sm text-muted pe-0"
+				@click="openFilePicker"
+			>
+				{{ $t("config.general.readFromFile") }}
+			</button>
+			<input
+				type="file"
+				ref="fileInput"
+				class="d-none"
+				@change="readFile"
+				accept=".crt,.pem,.cer,.csr,.key"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "PropertyCertField",
+	props: {
+		id: String,
+		modelValue: String,
+	},
+	emits: ["update:modelValue"],
+	computed: {
+		value: {
+			get() {
+				return this.modelValue;
+			},
+			set(value) {
+				this.$emit("update:modelValue", value);
+			},
+		},
+	},
+	methods: {
+		openFilePicker() {
+			this.$refs.fileInput.click();
+		},
+		readFile(event) {
+			const file = event.target.files[0];
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				this.value = e.target.result;
+			};
+			reader.readAsText(file);
+		},
+	},
+};
+</script>

assets/js/components/Energyflow/Energyflow.vue

@@ -18,7 +18,7 @@
 				:pvProduction="pvProduction"
 				:homePower="homePower"
 				:batterySoc="batterySoc"
-				:powerInKw="powerInKw"
+				:powerUnit="powerUnit"
 				:vehicleIcons="vehicleIcons"
 			/>
 		</div>
@@ -79,15 +79,15 @@
 							icon="sun"
 							:power="pvProduction"
 							:powerTooltip="pvTooltip"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							data-testid="energyflow-entry-production"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
 							:name="batteryDischargeLabel"
 							icon="battery"
 							:power="batteryDischarge"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -99,7 +99,7 @@
 							:name="$t('main.energyflow.gridImport')"
 							icon="powersupply"
 							:power="gridImport"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(tariffGrid, tariffCo2)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffGrid, tariffCo2)"
@@ -122,22 +122,22 @@
 							:name="$t('main.energyflow.homePower')"
 							icon="home"
 							:power="homePower"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(tariffPriceHome, tariffCo2Home)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffPriceHome, tariffCo2Home)"
 							data-testid="energyflow-entry-home"
 						/>
 						<EnergyflowEntry
 							:name="
-								$tc('main.energyflow.loadpoints', activeLoadpointsCount, {
+								$t('main.energyflow.loadpoints', activeLoadpointsCount, {
 									count: activeLoadpointsCount,
 								})
 							"
 							icon="vehicle"
 							:vehicleIcons="vehicleIcons"
 							:power="loadpointsPower"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="
 								activeLoadpointsCount
 									? detailsValue(tariffPriceLoadpoints, tariffCo2Loadpoints)
@@ -154,7 +154,7 @@
 							:name="batteryChargeLabel"
 							icon="battery"
 							:power="batteryCharge"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -176,7 +176,7 @@
 							:name="$t('main.energyflow.pvExport')"
 							icon="powersupply"
 							:power="pvExport"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(-tariffFeedIn)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(-tariffFeedIn)"
@@ -194,7 +194,7 @@ import "@h2d2/shopicons/es/filled/square";
 import Modal from "bootstrap/js/dist/modal";
 import Visualization from "./Visualization.vue";
 import EnergyflowEntry from "./EnergyflowEntry.vue";
-import formatter from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import AnimatedNumber from "../AnimatedNumber.vue";
 import settings from "../../settings";
 import { CO2_TYPE } from "../../units";
@@ -285,15 +285,21 @@ export default {
 		},
 		loadpointsPower: function () {
 			return this.loadpointsCompact.reduce((sum, lp) => {
-				sum += lp.power || 0;
-				return sum;
+				return sum + (lp.power || 0);
 			}, 0);
 		},
 		pvExport: function () {
 			return Math.max(0, this.gridPower * -1);
 		},
-		powerInKw: function () {
-			return Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport) >= 1000;
+		powerUnit: function () {
+			const watt = Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport);
+			if (watt >= 1_000_000) {
+				return POWER_UNIT.MW;
+			} else if (watt >= 1000) {
+				return POWER_UNIT.KW;
+			} else {
+				return POWER_UNIT.W;
+			}
 		},
 		inPower: function () {
 			return this.gridImport + this.pvProduction + this.batteryDischarge;
@@ -308,7 +314,7 @@ export default {
 			if (!Array.isArray(this.pv) || this.pv.length <= 1) {
 				return;
 			}
-			return this.pv.map(({ power }) => this.fmtKw(power, this.powerInKw));
+			return this.pv.map(({ power }) => this.fmtW(power, this.powerUnit));
 		},
 		batteryFmt() {
 			return (soc) => this.fmtPercentage(soc, 0);
@@ -331,7 +337,7 @@ export default {
 			return this.fmtPricePerKWh(this.tariffGrid, this.currency, true);
 		},
 		batteryGridChargeLimitFmt() {
-			if (this.batteryGridChargeLimit === null || this.batteryGridChargeLimit === undefined) {
+			if (this.batteryGridChargeLimit === null) {
 				return;
 			}
 			if (this.co2Available) {
@@ -386,7 +392,7 @@ export default {
 			return this.fmtPricePerKWh(value, this.currency, true);
 		},
 		kw: function (watt) {
-			return this.fmtKw(watt, this.powerInKw);
+			return this.fmtW(watt, this.powerUnit);
 		},
 		toggleDetails: function () {
 			this.updateHeight();