From f096716be8ff85d6b6929173ff3f96a3f45615ef Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 11 Aug 2023 20:08:49 +0200
Subject: [PATCH] Fix odometer number format (#9345)

---
 assets/js/components/ChargingSessionModal.vue | 2 +-
 assets/js/components/TargetSocSelect.vue      | 4 +++-
 assets/js/components/Vehicle.vue              | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/js/components/ChargingSessionModal.vue b/assets/js/components/ChargingSessionModal.vue
index 2ba40b2d4..2ae882ef5 100644
--- a/assets/js/components/ChargingSessionModal.vue
+++ b/assets/js/components/ChargingSessionModal.vue
@@ -207,7 +207,7 @@ export default {
 			modal.show();
 		},
 		formatKm: function (value) {
-			return `${distanceValue(value)} ${distanceUnit()}`;
+			return `${this.fmtNumber(distanceValue(value), 0)} ${distanceUnit()}`;
 		},
 		async changeVehicle(index) {
 			await this.updateSession({
diff --git a/assets/js/components/TargetSocSelect.vue b/assets/js/components/TargetSocSelect.vue
index dc49a5e8e..ef0cb6c95 100644
--- a/assets/js/components/TargetSocSelect.vue
+++ b/assets/js/components/TargetSocSelect.vue
@@ -28,10 +28,12 @@
 import LabelAndValue from "./LabelAndValue.vue";
 import AnimatedNumber from "./AnimatedNumber.vue";
 import { distanceUnit } from "../units";
+import formatter from "../mixins/formatter";
 
 export default {
 	name: "TargetSocSelect",
 	components: { LabelAndValue, AnimatedNumber },
+	mixins: [formatter],
 	props: {
 		targetSoc: Number,
 		rangePerSoc: Number,
@@ -69,7 +71,7 @@ export default {
 			return `${Math.round(value)}%`;
 		},
 		formatKm: function (value) {
-			return `${Math.round(value)} ${distanceUnit()}`;
+			return `${this.fmtNumber(value, 0)} ${distanceUnit()}`;
 		},
 	},
 };
diff --git a/assets/js/components/Vehicle.vue b/assets/js/components/Vehicle.vue
index 25aaf17a4..3ca4ae91a 100644
--- a/assets/js/components/Vehicle.vue
+++ b/assets/js/components/Vehicle.vue
@@ -20,7 +20,7 @@
 				class="flex-grow-1"
 				:label="$t('main.vehicle.vehicleSoc')"
 				:value="vehicleSoc ? `${Math.round(vehicleSoc)}%` : '--'"
-				:extraValue="range ? `${Math.round(range)} ${rangeUnit}` : null"
+				:extraValue="range ? `${fmtNumber(range, 0)} ${rangeUnit}` : null"
 				align="start"
 			/>
 			<LabelAndValue