From b1f83886f9c3c9a9b35d7c510c08e695b6ea9387 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Mon, 18 Dec 2023 16:25:17 +0100
Subject: [PATCH] Add icons on tabs

---
 frontend/src/lib/components/Tabs.svelte       |  23 ++++--
 .../lib/components/tabs/InfoTabBike.svelte    |  77 ++++++++++++++++++
 ...{InfoTab.svelte => InfoTabTrekking.svelte} |   0
 frontend/static/bike.png                      | Bin 0 -> 444 bytes
 frontend/static/trekking.png                  | Bin 0 -> 418 bytes
 5 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/lib/components/tabs/InfoTabBike.svelte
 rename frontend/src/lib/components/tabs/{InfoTab.svelte => InfoTabTrekking.svelte} (100%)
 create mode 100644 frontend/static/bike.png
 create mode 100644 frontend/static/trekking.png

diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index dd5f4c2..c49e77e 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import InfoTab from './tabs/InfoTab.svelte';
+	import InfoTabTrekking from './tabs/InfoTabTrekking.svelte';
+	import InfoTabBike from './tabs/InfoTabBike.svelte';
 	import DescTab from './tabs/DescTab.svelte';
 	import MapTab from './tabs/MapTab.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -8,18 +9,22 @@
 	const dispatch = createEventDispatcher();
 
 	let ref: HTMLDivElement;
-	let component = InfoTab;
+	let component = InfoTabTrekking;
 
-	const dispatchClick = (c: InfoTab | DescTab | MapTab) => {
+	onMount(() => {
+		console.log(route)
+	})
+	const dispatchClick = (c: InfoTabTrekking | InfoTabBike | DescTab | MapTab) => {
 		component = c;
 		dispatch('tab-click', { component });
 	};
 </script>
 
 <div id="tabs">
-	<button class:active={component === InfoTab} on:click={() => dispatchClick(InfoTab)} id="info">Info</button>
-	<button class:active={component === DescTab} on:click={() => dispatchClick(DescTab)} id="desc">Descrizione</button>
-	<button class:active={component === MapTab}  on:click={() => dispatchClick(MapTab)}  id="map">Mappa</button>
+	<button class:active={component === InfoTabTrekking} on:click={() => dispatchClick(InfoTabTrekking)} id="info-trekking"> <img src='/trekking.png' alt='trekking'> </button>
+	<button class:active={component === InfoTabBike} 	 on:click={() => dispatchClick(InfoTabBike)} 	 id="info-bike">	<img src='/bike.png' alt='bike'> </button>
+	<button class:active={component === DescTab} 		 on:click={() => dispatchClick(DescTab)} 		 id="desc">			Descrizione</button>
+	<button class:active={component === MapTab}  		 on:click={() => dispatchClick(MapTab)} 	     id="map">			Mappa</button>
 </div>
 <div id="container">
 	<div class="tab" bind:this={ref} role="tab">
@@ -66,4 +71,10 @@
 		font-weight: bold !important;
 		border-bottom: 1px solid black !important;
 	}
+
+	#info-bike, #info-trekking {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>
diff --git a/frontend/src/lib/components/tabs/InfoTabBike.svelte b/frontend/src/lib/components/tabs/InfoTabBike.svelte
new file mode 100644
index 0000000..2550e50
--- /dev/null
+++ b/frontend/src/lib/components/tabs/InfoTabBike.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	export let route: App.Route;
+</script>
+
+<div id="grid">
+	<div>
+		<p>Distanza</p>
+		<p>{route.route_sport_details[1].distance} m</p>
+	</div>
+
+	<div>
+		<p>Dislivello Positivo</p>
+		<p>{route.route_sport_details[1].elevation_gain}</p>
+	</div>
+
+	<div>
+		<p>Velocità Media</p>
+		<p>N/A</p>
+	</div>
+
+	<div>
+		<p>Difficolta</p>
+		<p>{route.route_sport_details[1].difficulty_it}</p>
+	</div>
+
+	<div>
+		<p>Dislivello Negativo</p>
+		<p>{route.route_sport_details[1].elevation_loss}</p>
+	</div>
+
+	<div>
+		<p>Durata</p>
+		<p>{route.route_sport_details[1].duration}'</p>
+	</div>
+
+	<div>
+		<p>Altitudine max</p>
+		<p>{route.route_sport_details[1].altitude_max}</p>
+	</div>
+
+	<div>
+		<p>Altitudine min</p>
+		<p>{route.route_sport_details[1].altitude_min}</p>
+	</div>
+
+	<div>
+		<p>Tipo Percorso</p>
+		<p>{route.route_sport_details[1].route_type_it}</p>
+	</div>
+</div>
+
+<style>
+    #grid {
+        display: grid;
+        grid-template-rows: repeat(3, 33%);
+        grid-template-columns: repeat(3, 1fr);
+        width: 100%;
+        background: white;
+        place-items: center;
+        font-size: 14px;
+    }
+
+    #grid div {
+        margin: 0 auto;
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    }
+    #grid div > p {
+        padding: 10px;
+        margin: 0px;
+    }
+    #grid div p:nth-child(2) {
+        font-weight: bold;
+        font-size: 16px;
+    }
+</style>
diff --git a/frontend/src/lib/components/tabs/InfoTab.svelte b/frontend/src/lib/components/tabs/InfoTabTrekking.svelte
similarity index 100%
rename from frontend/src/lib/components/tabs/InfoTab.svelte
rename to frontend/src/lib/components/tabs/InfoTabTrekking.svelte
diff --git a/frontend/static/bike.png b/frontend/static/bike.png
new file mode 100644
index 0000000000000000000000000000000000000000..b82ba293b01f7cd0febb5632d9e4449af70d0729
GIT binary patch
literal 444
zcmV;t0Ym<YP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004lNkl<ZNK3Vp
zflUK33`OY#umNQPU;^3+U;~Z`fC+#J3KLK!05)I)+6~GCzy$DL6-!onsdEQs$-3kc
z{~v!l8SM;gqd(vuDfU$UDqoav`Vs*C?m&-ABz*~P1$g5K?lk7#hV>;FB!foBo24V(
zC+*Mleff_X0REWeKiB*sYLXg>+Q1DrB#8)+;5j?xQgeV!t~ZTMvd%>&_{2p4K9PUP
z$qe9Kx4v=UC<6+}WimU^VCCj}8ehrD^ibZJ006Qe7-Kwj1mVy#lJcdT9>=);rY+y|
z^nb3e@19cJ6Z?&TAOJq($bymfzT5z9Pp3EtH~~ElBYILm40-J2oEU<iv{oI*Mx+1?
zX$(B!tpBtADd$1+1XXbm5cH5vZ@~Ub7SzV}vQ`~evk_^iPgjC<oJquGL4r1kc=x}P
zgt<gvoG%uP*Nz1Jc@7%671>M2f0|=!T;8TD1^6}{Yfg6o)@CMOF)qJow5i=%-W>`I
m$Tow#7#F=o0d~ARIKeLidvJDH#81=!0000<MNUMnLSTZRmAoSW

literal 0
HcmV?d00001

diff --git a/frontend/static/trekking.png b/frontend/static/trekking.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c48f927cdbeea0a76f9b4a084c26e14107738d9
GIT binary patch
literal 418
zcmV;T0bTxyP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004LNkl<ZNK3Vq
zjWI((6osV%RN$!q6`%r90qKAWL<Q&|9iRd)6`%r11*m}YnLRUip1i!j&CZ<3CVBUK
z_h&a5ZEbjsdiWnI=1h8)-kRdO0x*9KrbkVXu7IfwZvx;}dp@gOT>%@ffJ}jmrKhI$
z@NiuPm^?~_^dMbHm(rc|B~7HVX~63MWXDNixz8AHr_b2$C)ip}T?Gq8?WM@`)QXRa
z6G`x0XTXjkK0_3lx@A=}S~ZiV5~u55!mBDc(St9^>07S=ZD7E=HV5eqm9Q9mD?l`x
zD+pjI9f$N!wJ)T5$#dcBRsh;TAcm_3jM1*dpn-70$ex+C0)#~WwwP20Y=ED2)x7{@
z$DN3aA354Y6|6x32Q!a_bdgMf@MAX^P|AUM_(snH#4Q<Afp0LE%181iWj+{C$jAfc
z!qFmDHh>4blqoQ;YykI`zeix%0Uq$RoVk420Uj`C9$0oj@a(t!1>r$b8A9UPxBvhE
M07*qoM6N<$g1>09xc~qF

literal 0
HcmV?d00001