Minor frontend fix & enhancement (#2033)

* fix(entities-geolocation): add geolocation to store * fix(main): use entity centroid instead of event coordinate * feat(package): turf/centroid package add * fix(submissionsTable): spelling fix * fix(home): show short description instead of description on home project summary
hotosm · Dec 26, 2024 · 2a66a20 · 2a66a20
1 parent bec592e
commit 2a66a20
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 12 deletions.
diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
@@ -434,7 +434,7 @@ const SubmissionsTable = ({ toggleView }) => {
             rowClassName="codeRow"
             dataFormat={(row) => (
               <div className="fmtm-w-[7rem] fmtm-overflow-hidden fmtm-truncate">
-                <span>{row?.__system?.reviewState ? camelToFlat(row?.__system?.reviewState) : 'Recieved'}</span>
+                <span>{row?.__system?.reviewState ? camelToFlat(row?.__system?.reviewState) : 'Received'}</span>
               </div>
             )}
           />

diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx
@@ -45,8 +45,11 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
               {data.name}
             </p>
 
-            <p className="fmtm-capitalize fmtm-line-clamp-2 fmtm-mt-[5%] fmtm-text-[#7A7676]" title={data.description}>
-              {data.description}
+            <p
+              className="fmtm-capitalize fmtm-line-clamp-2 fmtm-mt-[5%] fmtm-text-[#7A7676]"
+              title={data.short_description}
+            >
+              {data.short_description}
             </p>
             <div className="fmtm-flex fmtm-items-start fmtm-mt-[1.63rem] fmtm-gap-2">
               <AssetModules.LocationOn color="error" style={{ fontSize: '22px' }} />

diff --git a/src/frontend/src/models/home/homeModel.ts b/src/frontend/src/models/home/homeModel.ts
@@ -24,7 +24,7 @@ export type homeProjectPaginationTypes = {
 export type projectType = {
   name: string;
   centroid: [number, number];
-  description: string;
+  short_description: string;
   hashtags: string | null;
   id: number;
   location_str: string;

diff --git a/src/mapper/package.json b/src/mapper/package.json
@@ -51,6 +51,7 @@
 		"@tiptap/starter-kit": "^2.10.3",
 		"@turf/bbox": "^7.1.0",
 		"@turf/buffer": "^7.1.0",
+		"@turf/centroid": "^7.1.0",
 		"@turf/helpers": "^7.1.0",
 		"@watergis/maplibre-gl-terradraw": "^0.5.1",
 		"drizzle-orm": "^0.35.3",

diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml
diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte
@@ -20,7 +20,6 @@
 
 	let { map }: Props = $props();
 
-	let coords: LngLatLike | undefined = $state();
 	let rotationDeg: number | undefined = $state();
 	let watchId: number | undefined = $state();
 	let directions: MapLibreGlDirections = $state();
@@ -70,8 +69,8 @@
 	}
 
 	$effect(() => {
-		if (coords && entityToNavigate) {
-			setWaypoints(coords as [number, number], entityToNavigate?.coordinate);
+		if (entitiesStore.userLocationCoord && entityToNavigate) {
+			setWaypoints(entitiesStore.userLocationCoord as [number, number], entityToNavigate?.coordinate);
 		}
 	});
 
@@ -96,7 +95,7 @@
 	// zoom to user's current location
 	$effect(() => {
 		if (entityToNavigate) {
-			map?.setCenter(coords as LngLatLike);
+			map?.setCenter(entitiesStore.userLocationCoord as LngLatLike);
 			map?.setZoom(18);
 		}
 	});
@@ -116,10 +115,11 @@
 			// track users location
 			watchId = navigator.geolocation.watchPosition(
 				function (pos) {
-					coords = [pos.coords.longitude, pos.coords.latitude];
+					let latLong = [pos.coords.longitude, pos.coords.latitude];
+					entitiesStore.setUserLocationCoordinate(latLong);
 					if (entityToNavigate) {
 						// if user is in navigation mode, update the map center according to user's live location since swiping map isn't possible
-						map?.setCenter(coords);
+						map?.setCenter(latLong);
 					}
 				},
 				function (error) {
@@ -152,7 +152,7 @@
 				type: 'Feature',
 				geometry: {
 					type: 'Point',
-					coordinates: coords as number[],
+					coordinates: entitiesStore.userLocationCoord as number[],
 				},
 				// firefox & safari doesn't support device orientation sensor, so if the browser any of the two set orientation to false
 				properties: { orientation: !(isFirefox || isSafari) },

diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -43,6 +43,7 @@
 	import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
 	import { baseLayers, osmStyle, pmtilesStyle } from '$constants/baseLayers.ts';
 	import { getEntitiesStatusStore } from '$store/entities.svelte.ts';
+	import { centroid } from '@turf/centroid';
 
 	type bboxType = [number, number, number, number];
 
@@ -152,11 +153,12 @@
 		});
 		// if clicked point contains entity then set it's osm id else set null to store
 		if (clickedEntityFeature && clickedEntityFeature?.length > 0) {
+			const entityCentroid = centroid(clickedEntityFeature[0].geometry);
 			const clickedEntityId = clickedEntityFeature[0]?.properties?.osm_id;
 			entitiesStore.setSelectedEntity(clickedEntityId);
 			entitiesStore.setSelectedEntityCoordinate({
 				entityId: clickedEntityId,
-				coordinate: [e.lngLat.lng, e.lngLat.lat],
+				coordinate: entityCentroid?.geometry?.coordinates,
 			});
 		} else {
 			entitiesStore.setSelectedEntity(null);

diff --git a/src/mapper/src/store/entities.svelte.ts b/src/mapper/src/store/entities.svelte.ts
@@ -1,5 +1,6 @@
 import { ShapeStream, Shape } from '@electric-sql/client';
 import type { ShapeData } from '@electric-sql/client';
+import type { LngLatLike } from 'svelte-maplibre';
 
 const API_URL = import.meta.env.VITE_API_URL;
 
@@ -31,6 +32,7 @@ type entityIdCoordinateMapType = {
 	coordinate: [number, number];
 };
 
+let userLocationCoord: LngLatLike | undefined = $state();
 let selectedEntity: number | null = $state(null);
 let entitiesShape: Shape;
 let entitiesStatusList: entitiesStatusListType[] = $state([]);
@@ -117,6 +119,10 @@ function getEntitiesStatusStore() {
 		toggleGeolocation = status;
 	}
 
+	function setUserLocationCoordinate(coordinate: LngLatLike | undefined) {
+		userLocationCoord = coordinate;
+	}
+
 	return {
 		subscribeToEntityStatusUpdates: subscribeToEntityStatusUpdates,
 		setSelectedEntity: setSelectedEntity,
@@ -125,6 +131,7 @@ function getEntitiesStatusStore() {
 		setSelectedEntityCoordinate: setSelectedEntityCoordinate,
 		setEntityToNavigate: setEntityToNavigate,
 		setToggleGeolocation: setToggleGeolocation,
+		setUserLocationCoordinate: setUserLocationCoordinate,
 		get selectedEntity() {
 			return selectedEntity;
 		},
@@ -146,6 +153,9 @@ function getEntitiesStatusStore() {
 		get toggleGeolocation() {
 			return toggleGeolocation;
 		},
+		get userLocationCoord() {
+			return userLocationCoord;
+		},
 	};
 }