Distance constraint add on frontend

src/mapper/package.json

@@ -52,6 +52,7 @@
 		"@turf/bbox": "^7.1.0",
 		"@turf/buffer": "^7.1.0",
 		"@turf/centroid": "^7.1.0",
+		"@turf/distance": "^7.2.0",
 		"@turf/helpers": "^7.1.0",
 		"@watergis/maplibre-gl-terradraw": "^0.8.1",
 		"drizzle-orm": "^0.35.3",

src/mapper/src/lib/components/dialog-entities-actions.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import { distance } from '@turf/distance';
+	import type { Coord } from '@turf/helpers';
 	import { TaskStatusEnum, type ProjectData } from '$lib/types';
 	import { getEntitiesStatusStore } from '$store/entities.svelte.ts';
 	import { getAlertStore } from '$store/common.svelte.ts';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
 	import { mapTask } from '$lib/db/events';
+	import type { SlDialog } from '@shoelace-style/shoelace';
 
 	type Props = {
 		isTaskActionModalOpen: boolean;
@@ -14,6 +17,9 @@
 
 	let { isTaskActionModalOpen, toggleTaskActionModal, selectedTab, projectData }: Props = $props();
 
+	let dialogRef: SlDialog | null = $state(null);
+	let toggleDistanceWarningDialog = $state(false);
+
 	const entitiesStore = getEntitiesStatusStore();
 	const alertStore = getAlertStore();
 	const taskStore = getTaskStore();
@@ -53,6 +59,54 @@
 		}
 	};
 
+	const handleMapFeature = () => {
+		/**
+		 	Logic to handle mapping feature in different scenarios:
+			1. No geolocation, no force geo constraint: allow mapping, ignore / do not show warning
+			2. No geolocation, force geo constraint: block mapping, show prompt to enable geolocation
+			3. Geolocation, no force geo constraint: show warning dialog if feature is far away
+			4. Geolocation, force geo constraint: block mapping if out of range else allow
+		**/
+		const coordTo = entitiesStore.selectedEntityCoordinate?.coordinate;
+		const coordFrom = entitiesStore.userLocationCoord;
+
+		// Run only if geo_restrict_force_error is set to true
+		if (projectData?.geo_restrict_force_error) {
+			// Geolocation not enabled, warn user
+			if (!coordFrom) {
+				alertStore.setAlert({
+					message:
+						'This project has distance constraint enabled. Please enable device geolocation for optimal functionality',
+					variant: 'warning',
+				});
+				return;
+			}
+
+			const entityDistance = distance(coordFrom as Coord, coordTo as Coord, { units: 'kilometers' }) * 1000;
+			if (entityDistance && entityDistance > projectData?.geo_restrict_distance_meters) {
+				// Feature is far away from user, warn user
+				alertStore.setAlert({
+					message: `The feature must be within ${projectData?.geo_restrict_distance_meters} meters of your location`,
+					variant: 'warning',
+				});
+				return;
+			}
+		}
+
+		// Show warning dialog if geo_restrict_force_error is set to false, user location enabled and feature is far away
+		if (
+			!projectData?.geo_restrict_force_error &&
+			coordFrom &&
+			distance(coordFrom as Coord, coordTo as Coord, { units: 'kilometers' }) * 1000 >
+				projectData?.geo_restrict_distance_meters
+		) {
+			toggleDistanceWarningDialog = true;
+			return;
+		}
+
+		mapFeature();
+	};
+
 	const navigateToEntity = () => {
 		if (!entitiesStore.toggleGeolocation) {
 			alertStore.setAlert({ message: 'Please enable geolocation to navigate to the entity.', variant: 'warning' });
@@ -138,11 +192,11 @@
 							size="small"
 							class="primary flex-grow"
 							onclick={() => {
-								mapFeature();
+								handleMapFeature();
 							}}
 							onkeydown={(e: KeyboardEvent) => {
 								if (e.key === 'Enter') {
-									mapFeature();
+									handleMapFeature();
 								}
 							}}
 							role="button"
@@ -158,3 +212,65 @@
 		</div>
 	</div>
 {/if}
+
+{#if entitiesStore.selectedEntityCoordinate?.coordinate && entitiesStore.userLocationCoord}
+	<hot-dialog
+		bind:this={dialogRef}
+		class="dialog-overview z-50 font-barlow font-regular"
+		open={toggleDistanceWarningDialog}
+		onsl-hide={() => {
+			toggleDistanceWarningDialog = false;
+		}}
+		noHeader
+	>
+		<div class="flex items-start flex-col">
+			<p class="text-base mb-5 text-gray-700">
+				Your are <b
+					>{(
+						distance(
+							entitiesStore.selectedEntityCoordinate?.coordinate as Coord,
+							entitiesStore.userLocationCoord as Coord,
+							{ units: 'kilometers' },
+						) * 1000
+					).toFixed(2)}m</b
+				> away from the feature. Are you sure you want to map this feature?
+			</p>
+			<div class="flex gap-2 ml-auto">
+				<sl-button
+					variant="default"
+					size="small"
+					class="secondary flex-grow"
+					onclick={() => (toggleDistanceWarningDialog = false)}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							toggleDistanceWarningDialog = false;
+						}
+					}}
+					role="button"
+					tabindex="0"
+				>
+					<span class="font-barlow font-medium text-sm">NO</span>
+				</sl-button>
+				<sl-button
+					variant="default"
+					size="small"
+					class="primary flex-grow"
+					onclick={() => {
+						mapFeature();
+						toggleDistanceWarningDialog = false;
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							mapFeature();
+							toggleDistanceWarningDialog = false;
+						}
+					}}
+					role="button"
+					tabindex="0"
+				>
+					<span class="font-barlow font-medium text-sm">YES</span>
+				</sl-button>
+			</div>
+		</div>
+	</hot-dialog>
+{/if}

src/mapper/src/lib/components/map/geolocation.svelte

@@ -244,6 +244,7 @@
 				on:click={() => {
 					entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation);
 					if (!entitiesStore.toggleGeolocation) {
+						entitiesStore.setUserLocationCoordinate(undefined);
 						exitNavigationMode();
 					}
 				}}

src/mapper/src/lib/types.ts

@@ -42,6 +42,8 @@ export interface ProjectData {
 	hashtags: string[];
 	tasks: ProjectTask[];
 	new_geom_type: NewGeomTypes;
+	geo_restrict_distance_meters: number;
+	geo_restrict_force_error: boolean;
 }
 
 export interface ZoomToTaskEventDetail {