diff --git a/assets/js/components/BatterySettingsModal.vue b/assets/js/components/BatterySettingsModal.vue index 2140db998..9fa382ba6 100644 --- a/assets/js/components/BatterySettingsModal.vue +++ b/assets/js/components/BatterySettingsModal.vue @@ -436,7 +436,7 @@ export default { return { transform: `scale(${scale})` }; }, fmtSoc(soc) { - return `${Math.round(soc)}%`; + return this.fmtPercentage(soc); }, async changeDischargeControl(e) { try { diff --git a/assets/js/components/ChargingPlan.vue b/assets/js/components/ChargingPlan.vue index 7fb993577..3e4060a3b 100644 --- a/assets/js/components/ChargingPlan.vue +++ b/assets/js/components/ChargingPlan.vue @@ -176,7 +176,7 @@ export default { return this.targetChargeEnabled || this.minSocEnabled; }, minSocLabel: function () { - return `${Math.round(this.minSoc)}%`; + return this.fmtPercentage(this.minSoc); }, modalId: function () { return `chargingPlanModal_${this.id}`; @@ -204,7 +204,7 @@ export default { }, targetSocLabel: function () { if (this.socBasedPlanning) { - return `${Math.round(this.effectivePlanSoc)}%`; + return this.fmtPercentage(this.effectivePlanSoc); } return fmtEnergy( this.planEnergy, diff --git a/assets/js/components/ChargingPlanArrival.vue b/assets/js/components/ChargingPlanArrival.vue index a42f09e5c..a94270a99 100644 --- a/assets/js/components/ChargingPlanArrival.vue +++ b/assets/js/components/ChargingPlanArrival.vue @@ -20,7 +20,11 @@ - {{ $t("main.loadpointSettings.minSoc.description", [selectedMinSoc || "x"]) }} + {{ + $t("main.loadpointSettings.minSoc.description", [ + selectedMinSoc ? fmtPercentage(selectedMinSoc) : "x", + ]) + }}
diff --git a/assets/js/components/ChargingPlanSettingsEntry.vue b/assets/js/components/ChargingPlanSettingsEntry.vue index df877066a..50bfd04de 100644 --- a/assets/js/components/ChargingPlanSettingsEntry.vue +++ b/assets/js/components/ChargingPlanSettingsEntry.vue @@ -176,6 +176,7 @@ export default { this.capacity || 100, this.socPerKwh, this.fmtKWh, + this.fmtPercentage, "-" ); // remove the first entry (0) diff --git a/assets/js/components/ChargingPlanWarnings.vue b/assets/js/components/ChargingPlanWarnings.vue index bdb0cbc9f..48899ba24 100644 --- a/assets/js/components/ChargingPlanWarnings.vue +++ b/assets/js/components/ChargingPlanWarnings.vue @@ -129,7 +129,7 @@ export default { }, methods: { fmtSoc(soc) { - return `${Math.round(soc)}%`; + return this.fmtPercentage(soc); }, }, }; diff --git a/assets/js/components/ChargingSessionModal.vue b/assets/js/components/ChargingSessionModal.vue index 6721878ac..d5f8c2d46 100644 --- a/assets/js/components/ChargingSessionModal.vue +++ b/assets/js/components/ChargingSessionModal.vue @@ -79,9 +79,8 @@ {{ $t("sessions.solar") }} - {{ fmtNumber(session.solarPercentage, 1) }}% ({{ - fmtKWh(solarEnergy, solarEnergy >= 1e3) - }}) + {{ fmtPercentage(session.solarPercentage, 1) }} + ({{ fmtKWh(solarEnergy, solarEnergy >= 1e3) }}) diff --git a/assets/js/components/Config/DeviceTags.vue b/assets/js/components/Config/DeviceTags.vue index bc1ea7584..594621eca 100644 --- a/assets/js/components/Config/DeviceTags.vue +++ b/assets/js/components/Config/DeviceTags.vue @@ -41,7 +41,8 @@ export default { case "chargedEnergy": return this.fmtKWh(value * 1e3); case "soc": - return `${this.fmtNumber(value, 1)}%`; + case "socLimit": + return this.fmtPercentage(value, 1); case "odometer": case "range": return `${this.fmtNumber(value, 0)} km`; @@ -53,8 +54,6 @@ export default { return value.map((v) => this.fmtKw(v)).join(", "); case "chargeStatus": return value; - case "socLimit": - return `${this.fmtNumber(value)}%`; } return value; }, diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue index 857044bf9..5d7ef22cf 100644 --- a/assets/js/components/Energyflow/Energyflow.vue +++ b/assets/js/components/Energyflow/Energyflow.vue @@ -288,7 +288,7 @@ export default { return this.pv.map(({ power }) => this.fmtKw(power, this.powerInKw)); }, batteryFmt() { - return (soc) => `${Math.round(soc)}%`; + return (soc) => this.fmtPercentage(soc, 0); }, co2Available() { return this.smartCostType === CO2_TYPE; diff --git a/assets/js/components/LimitEnergySelect.vue b/assets/js/components/LimitEnergySelect.vue index 27a1a3d8a..1cad71da2 100644 --- a/assets/js/components/LimitEnergySelect.vue +++ b/assets/js/components/LimitEnergySelect.vue @@ -57,6 +57,7 @@ export default { this.capacity || 100, this.socPerKwh, this.fmtKWh, + this.fmtPercentage, this.$t("main.targetEnergy.noLimit") ); }, @@ -75,7 +76,7 @@ export default { return fmtEnergy(value, this.step, this.fmtKWh, this.$t("main.targetEnergy.noLimit")); }, fmtSoc: function (value) { - return `+${Math.round(value)}%`; + return `+${this.fmtPercentage(value)}`; }, }, }; diff --git a/assets/js/components/LimitSocSelect.vue b/assets/js/components/LimitSocSelect.vue index 753bf111a..8ce4183af 100644 --- a/assets/js/components/LimitSocSelect.vue +++ b/assets/js/components/LimitSocSelect.vue @@ -67,7 +67,7 @@ export default { return null; }, formatSoc: function (value) { - return this.heating ? this.fmtTemperature(value) : `${Math.round(value)}%`; + return this.heating ? this.fmtTemperature(value) : this.fmtPercentage(value); }, formatKm: function (value) { return `${this.fmtNumber(value, 0)} ${distanceUnit()}`; diff --git a/assets/js/components/LoadpointSessionInfo.vue b/assets/js/components/LoadpointSessionInfo.vue index 7c904e3ea..46d6448e9 100644 --- a/assets/js/components/LoadpointSessionInfo.vue +++ b/assets/js/components/LoadpointSessionInfo.vue @@ -117,7 +117,7 @@ export default { return this.valueSm !== undefined; }, solarFormatted() { - return `${this.fmtNumber(this.sessionSolarPercentage, 1)}%`; + return this.fmtPercentage(this.sessionSolarPercentage, 1); }, priceFormatted() { return `${this.fmtMoney(this.sessionPrice, this.currency)} ${this.fmtCurrencySymbol( diff --git a/assets/js/components/Savings.vue b/assets/js/components/Savings.vue index 324cd3b95..210658abc 100644 --- a/assets/js/components/Savings.vue +++ b/assets/js/components/Savings.vue @@ -228,7 +228,7 @@ export default { return `${docsPrefix()}/docs/reference/configuration/tariffs`; }, percent() { - return Math.round(this.solarPercentage) || 0; + return this.fmtPercentage(this.solarPercentage || 0); }, regionOptions() { return co2Reference.regions.map((r) => ({ diff --git a/assets/js/components/SavingsTile.vue b/assets/js/components/SavingsTile.vue index c01c6a303..36972b3c3 100644 --- a/assets/js/components/SavingsTile.vue +++ b/assets/js/components/SavingsTile.vue @@ -15,11 +15,13 @@

{{ title }}

- + {{ value }} - {{ unit }} + + {{ unit }} +
@@ -37,10 +39,12 @@ import "@h2d2/shopicons/es/regular/receivepayment"; import "@h2d2/shopicons/es/regular/car3"; import "@h2d2/shopicons/es/regular/eco1"; import AnimatedNumber from "./AnimatedNumber.vue"; +import formatter from "../mixins/formatter"; export default { name: "SavingsTile", components: { AnimatedNumber }, + mixins: [formatter], props: { title: String, icon: String, @@ -50,6 +54,11 @@ export default { sub1: String, sub2: String, }, + computed: { + leadingUnit() { + return this.unit === "%" && this.hasLeadingPercentageSign(); + }, + }, };