save new value and validations

Author: latin-panda

packages/web-forms/src/components/common/map/MapAdvancedPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import IconSVG from '@/components/common/IconSVG.vue';
+import { toGeoJsonCoordinateArray } from '@/components/common/map/map-helpers.ts';
 import { fromLonLat, toLonLat } from 'ol/proj';
 import { ref, watch } from 'vue';
 import type { Coordinate } from 'ol/coordinate';
@@ -32,26 +33,19 @@ watch(
 );
 
 const updateVertex = () => {
-	const [originalLong, originalLat] = props.selectedVertex ?? [];
-	if (!longitude.value) {
-		longitude.value = originalLong;
+	const [originalLong, originalLat] = toLonLat(props.selectedVertex ?? []);
+	const long = longitude.value ?? originalLong;
+	const lat = latitude.value ?? originalLat;
+	if (long === undefined || lat === undefined) {
 		return;
 	}
 
-	if (!latitude.value) {
-		latitude.value = originalLat;
-		return;
-	}
-
-	const newVertex = [longitude.value, latitude.value];
-	if (altitude.value != null) {
-		newVertex.push(altitude.value);
-	}
-
-	if (accuracy.value != null) {
-		newVertex.push(accuracy.value);
-	}
-
+	const newVertex = toGeoJsonCoordinateArray(
+		long,
+		lat,
+		altitude.value,
+		accuracy.value
+	) as Coordinate;
 	emit('save', fromLonLat(newVertex));
 };
 </script>

packages/web-forms/src/components/common/map/MapBlock.vue

@@ -141,12 +141,14 @@ const undoLastChange = () => {
 	emitSavedFeature();
 };
 
-const updateFeatureCoords = () => {
-	// todo
+const updateFeatureCoords = (newCoords: Coordinate[] & Coordinate[][]) => {
+	mapHandler.updateFeatureCoordinates(newCoords);
+	emitSavedFeature();
 };
 
-const updateVertexCoords = () => {
-	// todo
+const updateVertexCoords = (newCoords: Coordinate) => {
+	mapHandler.updateVertexCoords(newCoords);
+	emitSavedFeature();
 };
 </script>
 

packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { getGeoJSONCoordinates } from '@/components/common/map/createFeatureCollectionAndProps.ts';
-import type { DrawFeatureType } from '@/components/common/map/useMapInteractions.ts';
+import {
+	DRAW_FEATURE_TYPES,
+	type DrawFeatureType,
+} from '@/components/common/map/useMapInteractions.ts';
+import { isCoordsEqual } from '@/components/common/map/vertex-geometry.ts';
 import type { FeatureCollection, LineString, Point, Polygon } from 'geojson';
+import { fromLonLat } from 'ol/proj';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 import IconSVG from '@/components/common/IconSVG.vue';
 import { ref, computed, watch } from 'vue';
 import type { Coordinate } from 'ol/coordinate';
 
-defineProps<{
+const props = defineProps<{
 	visible: boolean;
 	drawFeatureType?: DrawFeatureType;
 }>();
@@ -42,6 +47,7 @@ const parseFileCoordinates = async (file: File): Promise<Coordinate[] | undefine
 	try {
 		const text = await file.text();
 		if (!text.trim()) {
+			// TODO: translations
 			error.value = 'File is empty.';
 			return;
 		}
@@ -54,9 +60,10 @@ const parseFileCoordinates = async (file: File): Promise<Coordinate[] | undefine
 		if (fileName.endsWith('.csv')) {
 			return parseCSVGeometry(text);
 		}
-
+		// TODO: translations
 		error.value = 'Unsupported file type. Please upload a .csv or .geojson file.';
 	} catch {
+		// TODO: translations
 		error.value = 'Failed to parse file. Ensure it is valid CSV or GeoJSON.';
 	}
 };
@@ -97,6 +104,26 @@ const parsePastedValue = () => {
 	return getGeoJSONCoordinates(value);
 };
 
+const isExpectedFeatureType = (coords: Coordinate | Coordinate[] | Coordinate[][]) => {
+	const isPoint = !props.drawFeatureType && !Array.isArray(coords[0]) && coords.length > 2;
+	if (isPoint) {
+		return true;
+	}
+
+	const hasRing = Array.isArray(coords[0]) && Array.isArray(coords[0][0]);
+	const flatCoords = (hasRing ? coords[0] : coords) as Coordinate[];
+	if (!flatCoords?.length) {
+		return false;
+	}
+
+	const isClosed = isCoordsEqual(flatCoords[0], flatCoords[flatCoords.length - 1]);
+	if (props.drawFeatureType === DRAW_FEATURE_TYPES.TRACE && !isClosed && flatCoords.length >= 2) {
+		return true;
+	}
+
+	return props.drawFeatureType === DRAW_FEATURE_TYPES.SHAPE && isClosed && flatCoords.length >= 3;
+};
+
 const save = async () => {
 	error.value = null;
 	let coordinates: Coordinate[] | undefined;
@@ -107,10 +134,18 @@ const save = async () => {
 	}
 
 	if (!coordinates?.length) {
+		// TODO: translations
 		error.value ??= 'No valid coordinates found.';
 		return;
 	}
 
+	coordinates = coordinates.map((coord) => fromLonLat(coord));
+	if (!isExpectedFeatureType(coordinates)) {
+		// TODO: translations
+		error.value ??= 'Incorrect geometry type.';
+		return;
+	}
+
 	emit('save', coordinates);
 	close();
 };
@@ -149,19 +184,23 @@ watch(pasteValue, (newVal) => {
 		@update:visible="emit('update:visible', $event)"
 	>
 		<template #header>
+			<!-- TODO: translations -->
 			<strong>Paste or upload location data</strong>
 		</template>
 
 		<template #default>
 			<div class="dialog-field-container">
+				<!-- TODO: translations -->
 				<label for="paste-input">Paste the new value in ODK format</label>
 				<InputText id="paste-input" v-model="pasteValue" />
 			</div>
 
 			<div class="dialog-field-container">
+				<!-- TODO: translations -->
 				<label>Or upload a GeoJSON or a CSV file</label>
 				<Button outlined severity="contrast" @click="openFileChooser">
 					<IconSVG name="mdiUpload" />
+					<!-- TODO: translations -->
 					<span>Upload file</span>
 				</Button>
 
@@ -170,11 +209,12 @@ watch(pasteValue, (newVal) => {
 					type="file"
 					accept=".geojson,.csv,application/json,text/csv"
 					@change="selectFile"
-				>
+				/>
 			</div>
 		</template>
 
 		<template #footer>
+			<p v-if="error?.length" class="coords-error-message">{{ error }}</p>
 			<Button label="Save" :disabled="!selectedFile && !hasPastedValue" @click="save" />
 		</template>
 	</Dialog>
@@ -201,6 +241,11 @@ watch(pasteValue, (newVal) => {
 		padding: 9px;
 	}
 }
+
+.coords-error-message {
+	color: var(--odk-error-text-color);
+	margin-bottom: 10px;
+}
 </style>
 
 <style lang="scss">

packages/web-forms/src/components/common/map/createFeatureCollectionAndProps.ts

@@ -1,3 +1,4 @@
+import { toGeoJsonCoordinateArray } from '@/components/common/map/map-helpers.ts';
 import type { SelectItem } from '@getodk/xforms-engine';
 
 const PROPERTY_PREFIX = 'odk_'; // Avoids conflicts with OpenLayers (for example, geometry).
@@ -30,25 +31,33 @@ export const getGeoJSONCoordinates = (
 ): [Coordinates, ...Coordinates[]] | undefined => {
 	const coordinates: Coordinates[] = [];
 	for (const coord of geometry.split(';')) {
-		const [lat, lon] = coord.trim().split(/\s+/).map(Number);
+		const [lat, lon, alt, acc] = coord.trim().split(/\s+/).map(Number);
 
 		const isNullLocation = lat === 0 && lon === 0;
 		const isValidLatitude = lat != null && !Number.isNaN(lat) && Math.abs(lat) <= 90;
 		const isValidLongitude = lon != null && !Number.isNaN(lon) && Math.abs(lon) <= 180;
+		const isAltitudeProvided = alt != null && !Number.isNaN(alt);
+		const isAccuracyProvided = acc != null && !Number.isNaN(acc);
 
 		if (isNullLocation || !isValidLatitude || !isValidLongitude) {
 			// eslint-disable-next-line no-console -- Skip silently to match Collect behaviour.
 			console.warn(`Invalid geo point coordinates: ${geometry}`);
 			return;
 		}
 
-		coordinates.push([lon, lat]);
+		const parsedCoords = toGeoJsonCoordinateArray(
+			lon,
+			lat,
+			isAltitudeProvided ? alt : undefined,
+			isAccuracyProvided ? acc : undefined
+		) as Coordinates;
+		coordinates.push(parsedCoords);
 	}
 
 	return coordinates.length ? (coordinates as [Coordinates, ...Coordinates[]]) : undefined;
 };
 
-const getGeoJSONGeometry = (coords: [Coordinates, ...Coordinates[]]): Geometry => {
+export const getGeoJSONGeometry = (coords: [Coordinates, ...Coordinates[]]): Geometry => {
 	if (coords.length === 1) {
 		return { type: 'Point', coordinates: coords[0] };
 	}

packages/web-forms/src/components/common/map/map-helpers.ts

@@ -4,15 +4,52 @@ import type Feature from 'ol/Feature';
 import type { LineString, Point, Polygon } from 'ol/geom';
 import { toLonLat } from 'ol/proj';
 
+const resolveAltitudeAndAccuracy = (
+	altitude: number | null | undefined,
+	accuracy: number | null | undefined
+) => {
+	const arr = [];
+	if (accuracy != null) {
+		arr.push(altitude ?? 0, accuracy);
+	} else if (altitude != null) {
+		arr.push(altitude);
+	}
+	return arr;
+};
+
+// Longitude is first for GeoJSON and latitude is second.
+export const toGeoJsonCoordinateArray = (
+	longitude: number,
+	latitude: number,
+	altitude: number | null | undefined,
+	accuracy: number | null | undefined
+): number[] => {
+	const coords = [longitude, latitude];
+	coords.push(...resolveAltitudeAndAccuracy(altitude, accuracy));
+	return coords;
+};
+
+// Latitude is first for ODK and longitude is second.
+export const toODKCoordinateArray = (
+	longitude: number,
+	latitude: number,
+	altitude: number | null | undefined,
+	accuracy: number | null | undefined
+): number[] => {
+	const coords = [latitude, longitude];
+	coords.push(...resolveAltitudeAndAccuracy(altitude, accuracy));
+	return coords;
+};
+
 export const formatODKValue = (feature: Feature): string => {
 	const geometry = feature.getGeometry();
 	if (!geometry) {
 		return '';
 	}
 
 	const formatCoords = (coords: Coordinate) => {
-		const [longitude, latitude, altitude, accuracy] = toLonLat(coords);
-		return [latitude, longitude, altitude, accuracy].filter((item) => item != null).join(' ');
+		const parsedCoords = toLonLat(coords) as [number, number, number?, number?];
+		return toODKCoordinateArray(...parsedCoords).join(' ');
 	};
 
 	const featureType = geometry.getType();