Lint and format
Some checks failed
ci/woodpecker/push/build Pipeline failed

This commit is contained in:
Alessio Davoli 2024-03-06 00:14:26 +01:00
parent 9d0dbc520b
commit c80eb89db7
34 changed files with 560 additions and 565 deletions

90
frontend/src/app.d.ts vendored
View file

@ -9,51 +9,50 @@ declare global {
// 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,
"color": string,
"cover": string,
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;
color: string;
cover: string;
}
interface Sport {
"id": 1,
"name_it": "Trekking",
"name_en": "Trekking",
"description_it": "Percorso escursionistico",
"description_en": "Trekking route",
"icon": "",
"created_at": "2023-10-31T18:37:30.000000Z",
"updated_at": null,
"deleted_at": null
id: 1;
name_it: 'Trekking';
name_en: 'Trekking';
description_it: 'Percorso escursionistico';
description_en: 'Trekking route';
icon: '';
created_at: '2023-10-31T18:37:30.000000Z';
updated_at: null;
deleted_at: null;
}
interface SportDetails {
id: 1,
route_id: 1,
sport_id: 1,
short_description_it: "Percorso escursionistico intermedio. Buon allenamento richiesto. Sentieri facilmente percorribili. Adatto a ogni livello di abilit\u00e0. ",
short_description_en: "Intermediate hiking route. Good training required. Easily accessible paths. Suitable for all skill levels.",
gpx_path: "",
distance: 16800,
duration: 288,
elevation_gain: 439,
elevation_loss: null,
altitude_max: 620,
altitude_min: 180,
difficulty_it: "Facile",
difficulty_en: "Easy",
route_type_it: "Percorso ad anello",
route_type_en: "Ring route",
created_at: "2023-11-02T10:57:41.000000Z",
updated_at: null,
deleted_at: null,
sport: Sport
id: 1;
route_id: 1;
sport_id: 1;
short_description_it: 'Percorso escursionistico intermedio. Buon allenamento richiesto. Sentieri facilmente percorribili. Adatto a ogni livello di abilit\u00e0. ';
short_description_en: 'Intermediate hiking route. Good training required. Easily accessible paths. Suitable for all skill levels.';
gpx_path: '';
distance: 16800;
duration: 288;
elevation_gain: 439;
elevation_loss: null;
altitude_max: 620;
altitude_min: 180;
difficulty_it: 'Facile';
difficulty_en: 'Easy';
route_type_it: 'Percorso ad anello';
route_type_en: 'Ring route';
created_at: '2023-11-02T10:57:41.000000Z';
updated_at: null;
deleted_at: null;
sport: Sport;
}
interface Route {
id: number;
@ -66,7 +65,7 @@ declare global {
description_it: string;
description_en: string;
route_category_id: number;
created_at: "2023-11-02T10:50:07.000000Z";
created_at: '2023-11-02T10:50:07.000000Z';
updated_at: null;
deleted_at: null;
route_sport_details: Array<SportDetails>;
@ -74,9 +73,4 @@ declare global {
}
}
}
export {
Route,
Category,
Sport,
SportDetails
};
export { Route, Category, Sport, SportDetails };

View file

@ -1,15 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="it">
<head>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<link rel="manifest" href="manifest.json" />
%sveltekit.head%
</head>
<style>
</head>
<style>
:root {
--footer-height: 108px;
--accent-color: #213c8b;
@ -41,10 +40,9 @@
font-family: 'Roboto-Regular';
src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
}
</style>
</style>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</body>
</html>

View file

@ -1,4 +1,3 @@
:root {
--footer-height: calc(68px + 20px + 20px);
--accent-color: #213c8b;

View file

@ -1,6 +1,5 @@
<html>
<head>
<head>
<style>
* {
box-sizing: border-box;
@ -31,13 +30,12 @@
padding: 20px;
}
</style>
</head>
</head>
<body>
<body>
<div class="wrapper">
<p id="status">Code %sveltekit.status%</p>
<p id="message">%sveltekit.error.message%</p>
</div>
</body>
</body>
</html>

View file

@ -1,6 +1,6 @@
export async function handleError({ error, event, status, message }) {
const errorId = crypto.randomUUID();
console.error(error)
console.error(error);
// console.error(event)
// console.error(status)
return {

View file

@ -9,7 +9,7 @@ export async function handleFetch({ request, fetch }) {
export async function handleError({ error, event, status, message }) {
const errorId = crypto.randomUUID();
console.error(error)
console.error(error);
// console.error(event)
// console.error(status)
return {

View file

@ -30,7 +30,6 @@
box-shadow: 0 0 50px #ccc;
background-color: var(--card-background-color);
margin: 0 auto;
}
#container > a {

View file

@ -8,7 +8,7 @@
};
</script>
<div class='header'>
<div class="header">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->

View file

@ -8,7 +8,7 @@
};
</script>
<div class='header'>
<div class="header">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->

View file

@ -1,5 +1,5 @@
<script lang="ts">
import {PUBLIC_BACKEND_URL} from '$env/static/public'
import { PUBLIC_BACKEND_URL } from '$env/static/public';
export let name: string;
export let id: number;
@ -7,7 +7,7 @@
export const path = `/paths/${id}`;
export let src: string;
let image = '/archi.png'
let image = '/archi.png';
switch (id) {
case 1:
image = '/archi.png';
@ -30,7 +30,7 @@
<div class="bold">{name}</div>
</div>
</div>
<div class="route-card-right" style:background-image='url({PUBLIC_BACKEND_URL}{src})' />
<div class="route-card-right" style:background-image="url({PUBLIC_BACKEND_URL}{src})" />
</a>
<style>
@ -39,7 +39,7 @@
color: inherit;
cursor: pointer;
display: grid;
grid-template-columns: 20% minmax(1px,1fr) 20%;
grid-template-columns: 20% minmax(1px, 1fr) 20%;
max-width: 100%;
width: calc(100% - 20px);
margin: 0 auto;

View file

@ -1,16 +1,16 @@
<script lang="ts">
import {PUBLIC_BACKEND_URL} from '$env/static/public'
import { PUBLIC_BACKEND_URL } from '$env/static/public';
export let route: App.Route;
</script>
<a href="/routes/{route.id}">
<div id="image" style:background-image="url({PUBLIC_BACKEND_URL}{route.cover})" />
<div id='path-holder'>
<p class='path-name'>{route.title_it}</p>
<div id="path-holder">
<p class="path-name">{route.title_it}</p>
</div>
<div id='duration-holder'>
<div style='font-size: 15px;'>Dislivello</div>
<div id="duration-holder">
<div style="font-size: 15px;">Dislivello</div>
<p id="duration">{route.elevation_gain}</p>
</div>
</a>

View file

@ -1,13 +1,13 @@
<script>
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { dev } from '$app/environment'
import { dev } from '$app/environment';
let visible = dev ? false : true;
let time = 2000;
onMount(() => {
if(dev) return
if (dev) return;
setTimeout(() => {
visible = false;
@ -16,9 +16,9 @@
</script>
{#if visible}
<img class='background' transition:fade src="/splash.webp" alt="splash" />
<div class='wrapper'>
<img transition:fade class='logo' src="/images/splash-logo.png" alt="splash-logo" />
<img class="background" transition:fade src="/splash.webp" alt="splash" />
<div class="wrapper">
<img transition:fade class="logo" src="/images/splash-logo.png" alt="splash-logo" />
</div>
{/if}

View file

@ -12,8 +12,8 @@
let component = InfoTabTrekking;
onMount(() => {
console.log(route)
})
console.log(route);
});
const dispatchClick = (c: InfoTabTrekking | InfoTabBike | DescTab | MapTab) => {
component = c;
dispatch('tab-click', { component });
@ -21,14 +21,30 @@
</script>
<div id="tabs">
<button class:active={component === InfoTabTrekking} on:click={() => dispatchClick(InfoTabTrekking)} id="info-trekking"> <img src='/trekking.svg' alt='trekking'> </button>
<button class:active={component === InfoTabBike} on:click={() => dispatchClick(InfoTabBike)} id="info-bike"> <img src='/bike.svg' 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>
<button
class:active={component === InfoTabTrekking}
on:click={() => dispatchClick(InfoTabTrekking)}
id="info-trekking"
>
<img src="/trekking.svg" alt="trekking" />
</button>
<button
class:active={component === InfoTabBike}
on:click={() => dispatchClick(InfoTabBike)}
id="info-bike"
>
<img src="/bike.svg" 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">
<svelte:component this={component} route={route} />
<svelte:component this={component} {route} />
</div>
</div>
@ -72,7 +88,8 @@
border-bottom: 1px solid black !important;
}
#info-bike, #info-trekking {
#info-bike,
#info-trekking {
display: flex;
justify-content: center;
align-items: center;

View file

@ -1,4 +1,4 @@
<script lang='ts'>
<script lang="ts">
import { fade } from 'svelte/transition';
export let route: App.Route;

View file

@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition';
const mapMarkerIcon = new URL('/icons/map.png', import.meta.url).href
const mapMarkerIcon = new URL('/icons/map.png', import.meta.url).href;
export let route;
const pianelloCoordinates = [43.14, 12.53];
@ -14,28 +14,29 @@
let longitude;
let accuracy;
let watchPositionId: number;
const errorMessage = "Geolocation not available";
const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const errorMessage = 'Geolocation not available';
const attribution =
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const openStreetMapTile = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
let errored = false;
const watchPosition = async () => {
if (!("geolocation" in navigator)) {
if (!('geolocation' in navigator)) {
errored = true;
throw new Error(errorMessage)
throw new Error(errorMessage);
}
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
maximumAge: 0
};
function success(pos: GeolocationPosition) {
const crd = pos.coords;
let string = "";
let string = '';
latitude = crd.latitude;
longitude = crd.longitude;
@ -43,14 +44,14 @@
const icon = leaflet.icon({
iconUrl: mapMarkerIcon,
iconSize: [75, 75], // size of the icon
iconSize: [75, 75] // size of the icon
});
userMarker = leaflet.marker([latitude, longitude], {icon}).addTo(map);
userMarker = leaflet.marker([latitude, longitude], { icon }).addTo(map);
// move the map to have the location in its center
map.panTo(userMarker.getLatLng());
string += "Your current position is:";
string += 'Your current position is:';
string += `Latitude : ${crd.latitude}`;
string += `Longitude: ${crd.longitude}`;
string += `More or less ${crd.accuracy} meters.`;
@ -75,22 +76,22 @@
map.setView(pianelloCoordinates, 13);
leaflet
.tileLayer(openStreetMapTile, {attribution})
.addTo(map);
}
leaflet.tileLayer(openStreetMapTile, { attribution }).addTo(map);
};
const renderGPX = () => {
const gpx = "/gpx/tidone.gpx"; // URL to your GPX file or the GPX itself
new leafletGPX(gpx, {async: true}).on('loaded', function(e) {
const gpx = '/gpx/tidone.gpx'; // URL to your GPX file or the GPX itself
new leafletGPX(gpx, { async: true })
.on('loaded', function (e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
}
})
.addTo(map);
};
onMount(async () => {
await watchPosition();
leaflet = await import('leaflet');
const {GPX} = await import('leaflet-gpx');
const { GPX } = await import('leaflet-gpx');
leafletGPX = GPX;
renderMap();
@ -115,10 +116,14 @@
{/if}
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
crossorigin=""
/>
</svelte:head>
<style>
#map {
height: 100%;

View file

@ -1,12 +1,6 @@
let latitude;
let longitude;
onmessage = () => {};
onmessage = () => {
};
export { };
export {};

View file

@ -1,6 +1,6 @@
import {PUBLIC_BACKEND_URL} from '$env/static/public'
import { PUBLIC_BACKEND_URL } from '$env/static/public';
const API_URL = `${PUBLIC_BACKEND_URL}/api`
const API_URL = `${PUBLIC_BACKEND_URL}/api`;
const getAllRoutes = async () => {
let data = [];
@ -10,7 +10,7 @@ const getAllRoutes = async () => {
data = json;
return data;
}
};
const getRouteCategories = async () => {
let data = [];
@ -20,7 +20,7 @@ const getRouteCategories = async () => {
data = json;
return data;
}
};
const getRouteByCategory = async (categoryId: number) => {
let data = [];
@ -29,7 +29,7 @@ const getRouteByCategory = async (categoryId: number) => {
data = json;
return data;
}
};
const getRoute = async (routeId: number) => {
let data = {};
@ -38,8 +38,7 @@ const getRoute = async (routeId: number) => {
data = json;
return data;
}
};
const getSport = async (routeId: number, sportId: number) => {
let data = {};
@ -48,7 +47,7 @@ const getSport = async (routeId: number, sportId: number) => {
data = json;
return data;
}
};
const getPlacemarks = async (routeId: number, sportId: number) => {
let data = {};
@ -57,5 +56,5 @@ const getPlacemarks = async (routeId: number, sportId: number) => {
data = json;
return data;
}
};
export { getAllRoutes, getPlacemarks, getSport, getRoute, getRouteByCategory, getRouteCategories };

View file

@ -2,7 +2,7 @@
import { page } from '$app/stores';
</script>
<div id='container'>
<div id="container">
<div class="wrapper">
<p id="status">{$page.status}</p>
<p id="message">{$page.error?.message}</p>

View file

@ -8,7 +8,7 @@
let node: HTMLElement;
onMount(() => {
if(dev) return;
if (dev) return;
if ('serviceWorker' in navigator) {
addEventListener('load', function () {
@ -32,8 +32,8 @@
}
});
onNavigate((navigation: { complete: any; }) => {
if (!(document.startViewTransition)) return;
onNavigate((navigation: { complete: any }) => {
if (!document.startViewTransition) return;
return new Promise<void>((resolve) => {
document?.startViewTransition(async () => {

View file

@ -9,7 +9,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={category.id} />
<Path src={category.cover} color={category.color} name={category.name_it} id={category.id} />
{/each}
</div>
</main>

View file

@ -9,7 +9,7 @@ export async function load({ fetch }) {
const response = await fetch(`${API_URL}/route-categories`);
categories = await response.json();
} catch (ex) {
error(404, { message: 'API Not Found'});
error(404, { message: 'API Not Found' });
}
return { categories };

View file

@ -1,6 +1,5 @@
import { getRouteByCategory, getRouteCategories } from '$lib/repo.js';
import { error } from '@sveltejs/kit';
import {PUBLIC_BACKEND_URL} from '$env/static/public';
import { PUBLIC_BACKEND_URL } from '$env/static/public';
const API_URL = `${PUBLIC_BACKEND_URL}/api`;
@ -9,10 +8,10 @@ export async function load({ params, fetch }) {
const categories: App.Category[] = await response.json();
const categoryId = Number(params.slug);
const category: App.Category = categories.find(c => c.id === categoryId) as App.Category;
const category: App.Category = categories.find((c) => c.id === categoryId) as App.Category;
if (!category) {
error(404);
error(404, { message: 'Path not found' });
}
const response2 = await fetch(`${API_URL}/route-by-category/${categoryId}`);
@ -20,8 +19,8 @@ export async function load({ params, fetch }) {
const toReturn = {
category: category.name_it,
routes,
}
routes
};
return toReturn;
}

View file

@ -18,7 +18,7 @@
<div bind:this={divider} id="divider" class:move-to-top={isMap}>
<div id="banner">
<p class='path-name'>Percorso <b>{data.name_it}</b></p>
<p class="path-name">Percorso <b>{data.name_it}</b></p>
<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
</div>
<Tabs on:tab-click={tabClick} route={data}></Tabs>

View file

@ -1,7 +1,7 @@
import { error } from '@sveltejs/kit';
import {PUBLIC_BACKEND_URL} from '$env/static/public'
import { PUBLIC_BACKEND_URL } from '$env/static/public';
const API_URL = `${PUBLIC_BACKEND_URL}/api`
const API_URL = `${PUBLIC_BACKEND_URL}/api`;
export async function load({ params, fetch }) {
const routeId = Number(params.slug);
@ -9,7 +9,7 @@ export async function load({ params, fetch }) {
const route = await response.json();
if (!route) {
error(404);
error(404, { message: 'Route non found' });
}
return route;

View file

@ -16,7 +16,7 @@ const ASSETS = [
let client;
addEventListener('message', event => {
addEventListener('message', (event) => {
client = event.source;
});
@ -30,9 +30,6 @@ self.addEventListener('install', (event) => {
event.waitUntil(addFilesToCache());
});
self.addEventListener('activate', (event) => {
// Remove previous cached data from disk
async function deleteOldCaches() {
@ -43,11 +40,11 @@ self.addEventListener('activate', (event) => {
event.waitUntil(deleteOldCaches());
let channel;
if(BroadcastChannel) {
if (BroadcastChannel) {
channel = new BroadcastChannel('sw-messages');
channel.postMessage({title: 'Cache Downloaded'});
channel.postMessage({ title: 'Cache Downloaded' });
} else {
client.postMessage("Cache Downloaded")
client.postMessage('Cache Downloaded');
}
});
@ -81,4 +78,3 @@ self.addEventListener('fetch', (event) => {
event.respondWith(respond());
});

View file

@ -43,5 +43,4 @@
"type": "image/png"
}
]
}
}

View file

@ -1,4 +1,4 @@
import adapter from "@sveltejs/adapter-node";
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
@ -6,17 +6,17 @@ const config = {
preprocess: vitePreprocess(),
kit: {
files: {
serviceWorker: 'src/sw.ts',
serviceWorker: 'src/sw.ts'
},
serviceWorker: {
register: false,
register: false
},
adapter: adapter({
fallback: null,
precompress: true,
strict: true
}),
},
})
}
};
export default config;

View file

@ -1,22 +1,20 @@
import { sveltekit } from '@sveltejs/kit/vite';
import adapter from "@sveltejs/adapter-node";
import adapter from '@sveltejs/adapter-node';
const config = {
plugins: [
sveltekit(),
],
plugins: [sveltekit()],
test: {
include: ["src/**/*.{test,spec}.{js,ts}"],
include: ['src/**/*.{test,spec}.{js,ts}']
},
build: {
minify: "esbuild",
target: "esnext",
minify: 'esbuild',
target: 'esnext'
},
kit: {
adapter: adapter({
precompress: false,
precompress: false
})
},
}
};
export default config;