From 09139f9ad6b242ec64a7116c04e2cf66793a2c1b Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Tue, 11 Jul 2023 00:10:53 +0200
Subject: [PATCH] You could recreate this grid

---
 frontend/src/lib/components/Header.svelte     | 90 +++++++++++--------
 frontend/src/lib/components/InfoTab.svelte    | 76 ++++++++++++++++
 frontend/src/lib/components/Tabs.svelte       | 57 ++++++++++++
 .../src/routes/routes/[slug]/+page.server.ts  | 12 +++
 .../src/routes/routes/[slug]/+page.svelte     | 45 ++++++++++
 5 files changed, 242 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/lib/components/InfoTab.svelte
 create mode 100644 frontend/src/lib/components/Tabs.svelte
 create mode 100644 frontend/src/routes/routes/[slug]/+page.server.ts
 create mode 100644 frontend/src/routes/routes/[slug]/+page.svelte

diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index 07ecfe6..1ac25e6 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,43 +1,57 @@
-<script lang='ts'>
-    import { goto, afterNavigate } from '$app/navigation';
-    export let title: string = 'Naturalistici';
+<script lang="ts">
+	export let title: string = 'Naturalistici';
+	export let transparent = false;
 
-    const goBack = () => {
-        history.back();
-    };
+	const goBack = () => {
+		history.back();
+	};
 </script>
-<div>
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-missing-attribute -->
-    <a on:click={goBack}>
-        <img class='back' src='/images/white-back-arrow.png' alt=''>
-    </a>
-    <p>Percorsi {title}</p>
-    <img src='/images/app-bar-logo.png' alt=''>
-</div>
+
+{#if transparent}
+	<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<a on:click={goBack}>
+			<img class="back" src="/images/black-back-arrow.png" alt="" />
+		</a>
+		
+		<img src="/images/app-bar-logo.png" alt="" />
+	</div>
+{:else}
+	<div>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<a on:click={goBack}>
+			<img class="back" src="/images/white-back-arrow.png" alt="" />
+		</a>
+		<p>Percorsi {title}</p>
+		<img src="/images/app-bar-logo.png" alt="" />
+	</div>
+{/if}
 
 <style>
-    div {
-        color: white;
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-        background-color: #de0e1b;
-    }
-    div a {
-        cursor: pointer;
-    }
-    div a img {
-        height: 40px;
-    }
+	div {
+		color: white;
+		padding: 5px;
+		width: 100%;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+		background-color: #de0e1b;
+	}
+	div a {
+		cursor: pointer;
+	}
+	div a img {
+		height: 40px;
+	}
 
-    img {
-        height: 40px;
-    }
-    .back {
-        height: 20px;
-    }
-</style>
\ No newline at end of file
+	img {
+		height: 40px;
+	}
+	.back {
+		height: 20px;
+	}
+</style>
diff --git a/frontend/src/lib/components/InfoTab.svelte b/frontend/src/lib/components/InfoTab.svelte
new file mode 100644
index 0000000..94a59a4
--- /dev/null
+++ b/frontend/src/lib/components/InfoTab.svelte
@@ -0,0 +1,76 @@
+<script>
+</script>
+
+<div id="grid">
+	<div>
+		<p>Distanza</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Dislivello Positivo</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Velocità Media</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Difficolta</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Dislivello Negativo</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Durata</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Altitudine max</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Altitudine min</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Tipo Percorso</p>
+		<p>Value</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.svelte b/frontend/src/lib/components/Tabs.svelte
new file mode 100644
index 0000000..d1135c3
--- /dev/null
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import InfoTab from "./InfoTab.svelte";
+
+	const activeClicked = (evt) => {
+		const clickedTab = evt.target.closest('button');
+
+		for (const active of clickedTab.parentElement.querySelectorAll('.active')) {
+			active.classList.remove('active');
+		}
+
+		clickedTab.classList.add('active');
+	};
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div id="tabs" on:click={activeClicked}>
+	<button class="active">Info</button>
+	<button>Descrizione</button>
+	<button>Mappa</button>
+</div>
+<InfoTab></InfoTab>
+
+<style>
+	#tabs {
+		display: flex;
+		justify-content: center;
+		color: grey;
+		background-color: white;
+	}
+
+	#tabs button {
+		background: none;
+		color: inherit;
+		border: none;
+		padding: 0;
+		font: inherit;
+		cursor: pointer;
+		outline: inherit;
+		width: 33%;
+		text-align: center;
+		padding: 15px;
+		border-bottom: 1px solid #eee;
+		cursor: pointer;
+	}
+
+	.tab {
+		padding: 10px;
+		background-color: white;
+	}
+
+	.active {
+		color: black !important;
+		font-weight: bold !important;
+        border-bottom: 1px solid black !important;
+	}
+</style>
diff --git a/frontend/src/routes/routes/[slug]/+page.server.ts b/frontend/src/routes/routes/[slug]/+page.server.ts
new file mode 100644
index 0000000..dcea290
--- /dev/null
+++ b/frontend/src/routes/routes/[slug]/+page.server.ts
@@ -0,0 +1,12 @@
+import { error } from "@sveltejs/kit";
+
+export const prerender = false;
+
+export async function load({ params }) {
+    return {
+        id: 1, 
+        name: 'Pianello 1',
+        image: '/images/test-1.jpg',
+        duration: 1233
+    };
+}
diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
new file mode 100644
index 0000000..db3d693
--- /dev/null
+++ b/frontend/src/routes/routes/[slug]/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Header from '$lib/components/Header.svelte';
+	import Tabs from '$lib/components/Tabs.svelte';
+	export let data;
+</script>
+
+<Header transparent></Header>
+<img src='/splash.jpeg' alt='splash'>
+
+<div>
+	<div id='banner'>
+		<p>Percorso <b>{data.name}</b></p>
+		<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
+	</div>
+	<Tabs></Tabs>
+</div>
+
+
+<style>
+	img {
+		width: 100%;
+		position: absolute;
+		z-index: -1;
+	}
+
+	#banner {
+		display: flex;
+		padding: 5px;
+		background-color: #de0e1b;
+		color: white;
+		font-size: 1.3em;
+		justify-content: space-evenly;
+		align-items: center;
+		padding: 20px;
+	}
+	#banner p {
+		margin: 0;
+		padding: 0;
+	}
+
+	#banner #duration {
+		font-size: 14px;
+		text-align: rightìì;
+	}
+</style>
\ No newline at end of file