From 68ff5377b030cc8036428037f507a212cedf9fbe Mon Sep 17 00:00:00 2001
From: Matthias Rupp <matthias.rupp@posteo.de>
Date: Mon, 6 Jun 2022 23:40:12 +0200
Subject: [PATCH] Minor improvements to the detail-panel component (#205)

* Fix roudning behavior in details panel

* Add lat,lon-popup to map in details

* Refactor map code in detail-panel to avoid duplicate code
---
 .../asset-viewer/detail-panel.svelte          | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index f607f9f98d..b4b1d24607 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -15,33 +15,43 @@
 	let marker: any;
 
 	export let asset: ImmichAsset;
-	$: {
-		// Redraw map
-		if (map && leaflet) {
-			map.removeLayer(marker);
-			map.setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17);
-			marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]);
-			map.addLayer(marker);
-		}
+	$: if (asset.exifInfo) {
+		drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 	}
 
 	onMount(async () => {
 		if (browser) {
+			if (asset.exifInfo) {
+				await drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
+			}
+		}
+	});
+
+	async function drawMap(lat: number, lon: number) {
+		if (!leaflet) {
 			// @ts-ignore
 			leaflet = await import('leaflet');
-			map = leaflet.map('map').setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17);
+		}
 
+		if (!map) {
+			map = leaflet.map('map');
 			leaflet
 				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 				})
 				.addTo(map);
-
-			marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]);
-
-			map.addLayer(marker);
 		}
-	});
+
+		if (marker) {
+			map.removeLayer(marker);
+		}
+
+		map.setView([lat || 0, lon || 0], 17);
+
+		marker = leaflet.marker([lat || 0, lon || 0]);
+		marker.bindPopup(`${(lat || 0).toFixed(7)},${(lon || 0).toFixed(7)}`);
+		map.addLayer(marker);
+	}
 
 	const dispatch = createEventDispatcher();
 	const getHumanReadableString = (sizeInByte: number) => {
@@ -131,7 +141,7 @@
 					<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
 					<div class="flex text-sm gap-2">
 						<p>{`f/${asset.exifInfo.fNumber}` || ''}</p>
-						<p>{`1/${1 / asset.exifInfo.exposureTime}` || ''}</p>
+						<p>{`1/${Math.floor(1 / asset.exifInfo.exposureTime)}` || ''}</p>
 						<p>{`${asset.exifInfo.focalLength}mm` || ''}</p>
 						<p>{`ISO${asset.exifInfo.iso}` || ''}</p>
 					</div>