Add paths implementation

frontend/src/app.d.ts

@@ -6,7 +6,17 @@ declare global {
 		// interface Locals {}
 		// interface PageData {}
 		// interface Platform {}
-
+		interface Category {
+			"id": 1,
+			"name_it": "Natura",
+			"name_en": "Nature",
+			"description_it": "Giri nella natura",
+			"description_en": "Countryside routes",
+			"icon": "",
+			"created_at": null,
+			"updated_at": null,
+			"deleted_at": null
+		}
 		interface Sport {
 			"id": 1,
 			"name_it": "Trekking",

frontend/src/routes/paths/[slug]/+page.server.ts

@@ -1,15 +0,0 @@
-import { error } from "@sveltejs/kit";
-
-
-export async function load({ params }) {
-    return {
-        title: params.slug,
-        routes: [
-            {id: 1, name: 'Pianello 1', image: '/images/test-1.jpg', duration: 1233},
-            {id: 2, name: 'Pianello 2', image: '/images/test-1.jpg', duration: 1233},
-            {id: 3, name: 'Pianello 3', image: '/images/test-1.jpg', duration: 2134},
-            {id: 4, name: 'Pianello 4', image: '/images/test-1.jpg', duration: 2134 * 4},
-            {id: 5, name: 'Pianello 5', image: '/images/test-1.jpg', duration: 2134 * 4},
-        ]
-    }
-}

frontend/src/routes/paths/[slug]/+page.svelte

@@ -1,22 +1,14 @@
 <script lang="ts">
 	import Route from '$lib/components/Route.svelte';
 	import HomeHeader from '$lib/components/HomeHeader.svelte';
-	import { onMount } from 'svelte';
-	import { getRouteByCategory } from '$lib/repo';
 
-	let id = 0;
-	let routes = [];
-	onMount(async () => {
-		id = Number(window.location.href.split('paths/')[1]);
-		routes = await getRouteByCategory(id);
-	})
+	export let data;
 </script>
 
-<!--
-<HomeHeader title={title}></HomeHeader>-->
+<HomeHeader title={data.category}></HomeHeader>
 
 <div>
-{#each routes as route}
+{#each data.routes as route}
 	<Route {route}></Route>
 {/each}
 </div>

frontend/src/routes/paths/[slug]/+page.ts

@@ -0,0 +1,19 @@
+import { getRouteByCategory, getRouteCategories } from '$lib/repo.js';
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+    const categories: App.Category[] = await getRouteCategories();
+    const categoryId = Number(params.slug);
+
+    const category: App.Category = categories.find(c => c.id === categoryId);
+
+    if (!category) {
+        error(404);
+    }
+
+    return {
+        category: category.name_it,
+        routes: await getRouteByCategory(categoryId),
+    }
+}

frontend/src/routes/routes/[slug]/+page.svelte

@@ -6,6 +6,8 @@
 	export let data: App.Route;
 
 	let divider;
+
+    const mapClick = () => {};
 </script>
 
 <Header></Header>
@@ -14,7 +16,7 @@
 <div bind:this={divider} id="divider">
 	<div id="banner">
 		<p>Percorso <b>{data.name_it}</b></p>
-		<p id="duration">Dislivello {data.elevation_gain}</p>
+		<p id="duration">Dislivello {data.route_sport_details[0].elevation_gain} m</p>
 	</div>
 	<Tabs on:map-click={mapClick} route={data}></Tabs>
 </div>

frontend/src/routes/routes/[slug]/+page.ts

@@ -1,7 +1,7 @@
-import { getRoute } from '$lib/repo.js';
+import { getRouteByCategory } from '$lib/repo.js';
 import { error } from '@sveltejs/kit';
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
-    return await getRoute(params.slug);
+    return await getRouteByCategory(params.slug);
 }