From 08830edc68077243f248881b93ab4e35a74fe1d0 Mon Sep 17 00:00:00 2001
From: aptt <git@aptt.ch>
Date: Tue, 7 Jan 2025 18:20:46 +0100
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=F0=9F=8E=B8=20rework=20nft?=
 =?UTF-8?q?=20detail=20page=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

uses type of work for the main heading & subsections with headings
---
 .../certificates/[serialNumber]/+page.svelte  | 90 ++++++++++++++++---
 1 file changed, 77 insertions(+), 13 deletions(-)

diff --git a/frontend/src/routes/certificates/[serialNumber]/+page.svelte b/frontend/src/routes/certificates/[serialNumber]/+page.svelte
index fe83167..f45691f 100644
--- a/frontend/src/routes/certificates/[serialNumber]/+page.svelte
+++ b/frontend/src/routes/certificates/[serialNumber]/+page.svelte
@@ -1,16 +1,77 @@
 <script lang="ts">
 	import containerStyles from '$lib/css/container.module.css'
+	import navigationLinkStyles from '$lib/css/navigationLink.module.css'
 	import { contractId, nftTokenId } from '$lib/deployment.js'
 	import HashConnectLoader from '$lib/hashconnect/HashConnectLoader.svelte'
 	import { associateWithToken } from '$lib/hedera/collection/associate'
 	import { claimNftWithExecutor } from '$lib/hedera/collection/claim.js'
+	import { getDecimalLatitudeLongitude } from '$lib/swissGrid.js'
+	import Claim from 'lucide-svelte/icons/file-down'
+	import Associate from 'lucide-svelte/icons/handshake'
 
 	let { data } = $props()
+
+	const decimalLatitudeLongitude = $derived(
+		getDecimalLatitudeLongitude({
+			E: data.nft.certificate.swissGridE,
+			N: data.nft.certificate.swissGridN,
+		}),
+	)
+	const mapSearchParams = $derived.by(() => {
+		const urlSearchParams = new URLSearchParams()
+		const bbox = `${
+			decimalLatitudeLongitude.longitude - 0.01
+		},${decimalLatitudeLongitude.latitude - 0.01},${
+			decimalLatitudeLongitude.longitude + 0.01
+		},${decimalLatitudeLongitude.latitude + 0.01}`
+		urlSearchParams.set('bbox', bbox)
+
+		const marker = `${decimalLatitudeLongitude.latitude},${decimalLatitudeLongitude.longitude}`
+		urlSearchParams.set('marker', marker)
+
+		return urlSearchParams
+	})
 </script>
 
 <main class={containerStyles.container}>
-	<h1>{data.nft.name} #{data.nft.serialNumber}</h1>
+	<h1>{data.nft.certificate.typeOfNaturalObject}</h1>
+
+	<time datetime={data.nft.certificate.dateOfWork}>
+		{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}
+	</time>
+	<p>{data.nft.certificate.typeOfWork}</p>
+
+	<p>Operations manager: {data.nft.certificate.operationsManager}</p>
+
+	<h2>Effect on biodiversity</h2>
+	<p>{data.nft.certificate.effectOnBiodiversity}</p>
+
+	<h2>Location</h2>
+
+	<p>
+		Coordinates
+
+		{data.nft.certificate.swissGridE?.toLocaleString()} / {data.nft.certificate.swissGridN?.toLocaleString()}
+	</p>
+
+	<figure>
+		<iframe
+			title="{data.nft.certificate.typeOfWork} on the map"
+			width="100%"
+			height="auto"
+			src="https://www.openstreetmap.org/export/embed.html?{mapSearchParams.toString()}"
+			class="map"
+		></iframe>
+		<small>
+			<a
+				href="https://www.openstreetmap.org/#map=8/{decimalLatitudeLongitude.latitude}/{decimalLatitudeLongitude.longitude}"
+			>
+				View on OpenStreetMap
+			</a>
+		</small>
+	</figure>
 
+	<h2>NFT</h2>
 	<HashConnectLoader>
 		{#snippet withAccountInformation({ hashConnect })}
 			{#if hashConnect.accountInformation.hasAssociatedWithToken}
@@ -23,8 +84,11 @@
 							executeTransaction: hashConnect.session.executeTransaction,
 						})
 					}}
+					class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
 				>
-					Claim
+					Claim this NFT
+
+					<Claim aria-hidden="true" />
 				</button>
 			{:else}
 				<button
@@ -38,29 +102,29 @@
 						hashConnect.accountInformation.hasAssociatedWithToken =
 							associateWithTokenResult.hasAssociatedWithToken
 					}}
+					class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
 				>
 					Associate with BIDI
+
+					<Associate aria-hidden="true" />
 				</button>
 			{/if}
 		{/snippet}
 	</HashConnectLoader>
 
 	<img src={data.nft.imageUrl} alt="Image of certificate #{data.nft.serialNumber}" />
-
-	<p>{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}</p>
-	<p>{data.nft.certificate.swissGridE} / {data.nft.certificate.swissGridN}</p>
-	<p>{data.nft.certificate.operationsManager}</p>
-	<p>{data.nft.certificate.typeOfNaturalObject}</p>
-	<p>{data.nft.certificate.typeOfWork}</p>
-	<p>{data.nft.certificate.effectOnBiodiversity}</p>
 </main>
 
 <style>
-	h1 {
-		padding-top: 3rem;
-	}
-
 	img {
 		margin-top: 1rem;
 	}
+
+	h2 {
+		margin-top: 2rem;
+	}
+
+	.map {
+		aspect-ratio: 1;
+	}
 </style>