From 9b6d7b9d5338510c5da539dd6ffc6f793bd69f40 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Mon, 27 Nov 2023 05:30:41 +0100
Subject: [PATCH] Update tabs mock

---
 frontend/src/lib/components/Tabs.svelte         | 10 ++++++----
 frontend/src/lib/components/tabs/DescTab.svelte | 11 ++++-------
 frontend/src/lib/components/tabs/InfoTab.svelte |  4 ++++
 frontend/src/lib/components/tabs/MapTab.svelte  |  1 +
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index 09d0ef2..50a03af 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -4,9 +4,11 @@
 	import MapTab from './tabs/MapTab.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
 
+	export let route: App.Route;
 	const dispatch = createEventDispatcher();
 
-	let ref;
+	let props;
+	let ref: HTMLDivElement;
 	let component = InfoTab;
 	onMount(() => {
 		const gbcr = ref.getBoundingClientRect();
@@ -35,7 +37,7 @@
 				break;
 		}
 
-		dispatch('map-click', {component});
+		dispatch('map-click', { component });
 	};
 </script>
 
@@ -48,7 +50,7 @@
 		<button id="map">Mappa</button>
 	</div>
 	<div class="tab" bind:this={ref}>
-		<svelte:component this={component} />
+		<svelte:component this={component} route={route} />
 	</div>
 </div>
 
@@ -76,12 +78,12 @@
 		padding: 15px;
 		border-bottom: 1px solid #eee;
 		cursor: pointer;
-		
 	}
 
 	.tab {
 		padding: 10px;
 		background-color: white;
+		overflow-y: scroll;
 	}
 
 	.active {
diff --git a/frontend/src/lib/components/tabs/DescTab.svelte b/frontend/src/lib/components/tabs/DescTab.svelte
index 0d305b7..3248e63 100644
--- a/frontend/src/lib/components/tabs/DescTab.svelte
+++ b/frontend/src/lib/components/tabs/DescTab.svelte
@@ -1,14 +1,11 @@
-<script>
+<script lang='ts'>
 	import { fade } from 'svelte/transition';
+
+	export let route: App.Route;
 </script>
 
 <div>
-	The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
-	adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-	minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-	mollit anim id est laborum."
+	{route.description_it}
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/tabs/InfoTab.svelte b/frontend/src/lib/components/tabs/InfoTab.svelte
index a59d3b1..c19bc9a 100644
--- a/frontend/src/lib/components/tabs/InfoTab.svelte
+++ b/frontend/src/lib/components/tabs/InfoTab.svelte
@@ -1,3 +1,7 @@
+<script>
+	export let route;
+</script>
+
 <div id="grid">
 	<div>
 		<p>Distanza</p>
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index f6af7b7..86c3beb 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -2,6 +2,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 
+	export let route;
 	const pianelloCoordinates = [43.14, 12.53];
 	let mapElement: string | HTMLElement;
 	let leaflet;