feat(web+server): map date filters + small changes (#2565)

web/src/routes/(user)/map/+page.svelte

@@ -10,15 +10,17 @@
 	} from '$lib/stores/asset-interaction.store';
 	import { mapSettings } from '$lib/stores/preferences.store';
 	import { MapMarkerResponseDto, api } from '@api';
+	import { isEqual, omit } from 'lodash-es';
 	import { onDestroy, onMount } from 'svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';
 	import type { PageData } from './$types';
+	import { DateTime, Duration } from 'luxon';
 
 	export let data: PageData;
 
 	let leaflet: typeof import('$lib/components/shared-components/leaflet');
-	let mapMarkers: MapMarkerResponseDto[];
-	let abortController = new AbortController();
+	let mapMarkers: MapMarkerResponseDto[] = [];
+	let abortController: AbortController;
 	let viewingAssets: string[] = [];
 	let viewingAssetCursor = 0;
 	let showSettingsModal = false;
@@ -29,22 +31,59 @@
 	});
 
 	onDestroy(() => {
-		abortController.abort();
+		if (abortController) {
+			abortController.abort();
+		}
 		assetInteractionStore.clearMultiselect();
 		assetInteractionStore.setIsViewingAsset(false);
 	});
 
 	async function loadMapMarkers() {
-		const { data } = await api.assetApi.getMapMarkers($mapSettings.onlyFavorites || undefined, {
-			signal: abortController.signal
-		});
+		if (abortController) {
+			abortController.abort();
+		}
+		abortController = new AbortController();
+
+		const { onlyFavorites } = $mapSettings;
+		const { fileCreatedAfter, fileCreatedBefore } = getFileCreatedDates();
+
+		const { data } = await api.assetApi.getMapMarkers(
+			onlyFavorites || undefined,
+			fileCreatedAfter,
+			fileCreatedBefore,
+			{
+				signal: abortController.signal
+			}
+		);
 		return data;
 	}
 
-	function onViewAssets(assets: string[]) {
-		assetInteractionStore.setViewingAssetId(assets[0]);
-		viewingAssets = assets;
-		viewingAssetCursor = 0;
+	function getFileCreatedDates() {
+		const { relativeDate, dateAfter, dateBefore } = $mapSettings;
+
+		if (relativeDate) {
+			const duration = Duration.fromISO(relativeDate);
+			return {
+				fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined
+			};
+		}
+
+		try {
+			return {
+				fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
+				fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined
+			};
+		} catch {
+			$mapSettings.dateAfter = '';
+			$mapSettings.dateBefore = '';
+			return {};
+		}
+	}
+
+	function onViewAssets(assetIds: string[], activeAssetIndex: number) {
+		assetInteractionStore.setViewingAssetId(assetIds[activeAssetIndex]);
+		viewingAssets = assetIds;
+		viewingAssetCursor = activeAssetIndex;
 	}
 
 	function navigateNext() {
@@ -58,31 +97,22 @@
 			assetInteractionStore.setViewingAssetId(viewingAssets[--viewingAssetCursor]);
 		}
 	}
-
-	function getMapCenter(mapMarkers: MapMarkerResponseDto[]): [number, number] {
-		const marker = mapMarkers[0];
-		if (marker) {
-			return [marker.lat, marker.lon];
-		}
-
-		return [48, 11];
-	}
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div class="h-full w-full isolate">
-		{#if leaflet && mapMarkers}
+		{#if leaflet}
 			{@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
 			<Map
-				center={getMapCenter(mapMarkers)}
-				zoom={7}
+				center={[30, 0]}
+				zoom={3}
 				allowDarkMode={$mapSettings.allowDarkMode}
 				options={{
 					maxBounds: [
 						[-90, -180],
 						[90, 180]
 					],
-					minZoom: 3
+					minZoom: 2.5
 				}}
 			>
 				<TileLayer
@@ -94,7 +124,7 @@
 				/>
 				<AssetMarkerCluster
 					markers={mapMarkers}
-					on:view={(event) => onViewAssets(event.detail.assets)}
+					on:view={({ detail }) => onViewAssets(detail.assetIds, detail.activeAssetIndex)}
 				/>
 				<Control>
 					<button
@@ -129,7 +159,10 @@
 		settings={{ ...$mapSettings }}
 		on:close={() => (showSettingsModal = false)}
 		on:save={async ({ detail }) => {
-			const shouldUpdate = detail.onlyFavorites !== $mapSettings.onlyFavorites;
+			const shouldUpdate = !isEqual(
+				omit(detail, 'allowDarkMode'),
+				omit($mapSettings, 'allowDarkMode')
+			);
 			showSettingsModal = false;
 			$mapSettings = detail;