From Feedback: Truncating to max 3 decimals, space before meter unit

Author: latin-panda

packages/web-forms/src/components/controls/GeopointFormattedValue.vue

@@ -6,6 +6,7 @@ import type {
 	GeopointNoteValue,
 } from '@getodk/xforms-engine';
 import { computed } from 'vue';
+import { truncateDecimals } from '@/lib/format/truncateDecimals.ts';
 
 type GeopointNode = GeopointInputNode | GeopointNoteNode;
 
@@ -25,7 +26,7 @@ const value = computed<GeopointValue>(() => {
 <template>
 	<!-- TODO: translations -->
 	<p class="geopoint-formatted-value">
-		<span v-if="value?.accuracy != null">Accuracy: {{ value.accuracy }}m</span>
+		<span v-if="value?.accuracy != null">Accuracy: {{ truncateDecimals(value.accuracy) }} m</span>
 		<span v-if="value?.latitude != null">Latitude: {{ value.latitude }}</span>
 		<span v-if="value?.longitude != null">Longitude: {{ value.longitude }}</span>
 	</p>

packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue

@@ -3,6 +3,7 @@ import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
 import Button from 'primevue/button';
 import PrimeDialog from 'primevue/dialog';
 import PrimeProgressSpinner from 'primevue/progressspinner';
+import { truncateDecimals } from '@/lib/format/truncateDecimals.ts';
 import ElapsedTime from '@/components/ElapsedTime.vue';
 import {
 	GEOLOCATION_STATUS,
@@ -163,14 +164,14 @@ onBeforeUnmount(cleanup);
 				<div class="geopoint-information">
 					<!-- TODO: translations -->
 					<strong v-if="accuracy.value != null" class="geo-quality">
-						{{ accuracy.value }}m - {{ accuracy.label }}
+						{{ truncateDecimals(accuracy.value) }} m - {{ accuracy.label }}
 					</strong>
 					<p v-if="options.accuracyThreshold > 0 && state.geopoint == null">
-						Location will be saved at {{ options.accuracyThreshold }}m
+						Location will be saved at {{ options.accuracyThreshold }} m
 					</p>
 					<p>Time taken to capture location: <ElapsedTime /></p>
 					<p v-if="previousAccuracy.value">
-						Previous saved location at {{ previousAccuracy.value }}m
+						Previous saved location at {{ truncateDecimals(previousAccuracy.value) }} m
 					</p>
 				</div>
 			</div>

packages/web-forms/src/lib/format/truncateDecimals.ts

@@ -0,0 +1,18 @@
+export const truncateDecimals = (num: number, decimals = 3): string => {
+	if (
+		typeof num !== 'number' ||
+		Number.isNaN(num) ||
+		typeof decimals !== 'number' ||
+		Number.isNaN(decimals)
+	) {
+		return '';
+	}
+
+	if (Number.isInteger(num) || decimals <= 0) {
+		return num.toString();
+	}
+
+	const factor = Math.pow(10, decimals);
+	const withDecimals = Math.floor(Math.abs(num) * factor) / factor;
+	return (num < 0 ? -withDecimals : withDecimals).toString();
+};