Fresh no fetch

frontend/src/hooks.server.ts

@@ -8,6 +8,7 @@ export async function handleFetch({ request, fetch }) {
 }
 
 export async function handleError({ error, event, status, message }) {
+	console.error(error)
 	return {
 		status,
 		message

frontend/src/lib/components/Path.svelte

@@ -1,21 +1,37 @@
 <script lang="ts">
+	import {PUBLIC_BACKEND_URL} from '$env/static/public'
+
 	export let name: string;
-	export let id: string;
+	export let id: number;
 	export let color: string;
 	export const path = `/paths/${id}`;
 	export let src: string;
+
+	console.log(id)
+	let image = '/archi.png'
+	switch (id) {
+		case 1:
+			image = '/archi.png';
+			break;
+		case 2:
+			image = '/montagne.png';
+			break;
+		case 3:
+			image = '/bibbito.png';
+			break;
+	}
 </script>
 
 <a href={path} class="route-card">
 	<div class="route-card-left" style="background-color: {color}">
-		<img {src} alt="logo" />
+		<img src={image} alt="logo" />
 	</div>
 	<div class="route-card-center">
 		<div class="name">
 			<div class="bold">{name}</div>
 		</div>
 	</div>
-	<div class="route-card-right" />
+	<div class="route-card-right" style:background-image='url({PUBLIC_BACKEND_URL}{src}' />
 </a>
 
 <style>
@@ -34,7 +50,6 @@
 	.route-card-right {
 		border-top-right-radius: 45px;
 		border-bottom-right-radius: 45px;
-		background-image: url('/images/test-1.jpg');
 		background-position: center;
 		background-size: cover;
 	}
@@ -48,6 +63,7 @@
 
 	.route-card-left img {
 		width: 100%;
+		max-width: 120px;
 	}
 
 	.route-card-center {

frontend/src/lib/repo.ts

@@ -1,6 +1,8 @@
-const API_URL = "https://ale-dev.teck-developer.com/api";
+import {PUBLIC_BACKEND_URL} from '$env/static/public'
 
-const getAllRoutes = async (fetch) => {
+const API_URL = `${PUBLIC_BACKEND_URL}/api`
+
+const getAllRoutes = async () => {
     let data = [];
 
     const response = await fetch(`${API_URL}/all-routes`);
@@ -10,7 +12,7 @@ const getAllRoutes = async (fetch) => {
     return data;
 }
 
-const getRouteCategories = async (fetch) => {
+const getRouteCategories = async () => {
     let data = [];
 
     const response = await fetch(`${API_URL}/route-categories`);
@@ -20,7 +22,7 @@ const getRouteCategories = async (fetch) => {
     return data;
 }
 
-const getRouteByCategory = async (fetch,categoryId: number) => {
+const getRouteByCategory = async (categoryId: number) => {
     let data = [];
     const response = await fetch(`${API_URL}/route-by-category/${categoryId}`);
     const json = await response.json();
@@ -29,7 +31,7 @@ const getRouteByCategory = async (fetch,categoryId: number) => {
     return data;
 }
 
-const getRoute = async (fetch,routeId: number) => {
+const getRoute = async (routeId: number) => {
     let data = {};
     const response = await fetch(`${API_URL}/route/${routeId}`);
     const json = await response.json();
@@ -39,7 +41,7 @@ const getRoute = async (fetch,routeId: number) => {
 }
 
 
-const getSport = async (fetch,routeId: number, sportId: number) => {
+const getSport = async (routeId: number, sportId: number) => {
     let data = {};
     const response = await fetch(`${API_URL}/route/${routeId}/${sportId}`);
     const json = await response.json();
@@ -48,7 +50,7 @@ const getSport = async (fetch,routeId: number, sportId: number) => {
     return data;
 }
 
-const getPlacemarks = async (fetch,routeId: number, sportId: number) => {
+const getPlacemarks = async (routeId: number, sportId: number) => {
     let data = {};
     const response = await fetch(`${API_URL}/getPlacemarks/${routeId}/${sportId}`);
     const json = await response.json();

frontend/src/routes/+page.svelte

@@ -14,7 +14,7 @@
 	<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
 	<div id="route-cards">
 		{#each categories as category}
-			<Path src={category.cover} color={category.color} name="{category.name_it}" id={String(category.id)} />
+			<Path src={category.cover} color={category.color} name="{category.name_it}" id={category.id} />
 		{/each}
 	</div>
 </main>

frontend/src/routes/+page.ts

@@ -2,10 +2,10 @@
 import { getRouteCategories } from '$lib/repo.js';
 import { error } from '@sveltejs/kit';
 
-export async function load({fetch}) {
+export async function load() {
     let categories = [];
     try {
-        categories = await getRouteCategories(fetch);
+        categories = await getRouteCategories();
     } catch (ex) {
         error(500);
     }

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

@@ -1,8 +1,8 @@
 import { getRouteByCategory, getRouteCategories } from '$lib/repo.js';
 import { error } from '@sveltejs/kit';
 
-export async function load({ fetch, params }) {
-    const categories: App.Category[] = await getRouteCategories(fetch);
+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) as App.Category;
@@ -13,7 +13,7 @@ export async function load({ fetch, params }) {
 
     const toReturn = {
         category: category.name_it,
-        routes: await getRouteByCategory(fetch, categoryId),
+        routes: await getRouteByCategory(categoryId),
     }
     
     return toReturn;

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

@@ -1,9 +1,9 @@
 import { getRoute } from '$lib/repo.js';
 import { error } from '@sveltejs/kit';
 
-export async function load({ fetch, params }) {
+export async function load({ params }) {
     const routeId = Number(params.slug);
-    const route = await getRoute(fetch, routeId);
+    const route = await getRoute(routeId);
 
     if (!route) {
         error(404);