eisterman/re-test-chargere-svkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First Layout with Leaflet map and centered slot for overlays

Browse Source
This commit is contained in:
Federico Pasqua
2025-03-24 18:53:57 +01:00
parent 00b340307b
commit ca65d2986e
8 changed files with 127 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.html
View File

@@ -1,12 +1,12 @@
<!doctype html>
<html lang="%paraglide.lang%">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8"/>
<link rel="icon" href="%sveltekit.assets%/favicon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

4
src/routes/+page.svelte
View File

@@ -1,2 +1,2 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<h1>Demo Charge.re</h1>
<p>This page can be a view or just a basic redirect to rossinienergy.com</p>

40
src/routes/[qrcode]/+layout.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import { page } from '$app/state';
import type { LayoutProps } from './$types';
let { data, children }: LayoutProps = $props();
const cc = $derived(data.chargecontroller);
const qrcode = $derived(page.params.qrcode);
</script>
<div class="flex flex-col h-screen">
<div class="flex flex-col fixed w-screen h-screen top-0 left-0 overflow-hidden">
<div class="navbar bg-base-100 not-dark:shadow-xl dark:shadow-sm h-16">
<div class="flex-1">
<a class="btn btn-ghost text-xl" href="/">RossiniEnergy</a>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal px-1">
<li><p>QRCODE: {qrcode}</p></li>
<li>
<details>
<summary>PARK: {cc['park']}</summary>
<ul class="bg-base-100 rounded-t-none p-2">
<li><p>EN</p></li>
<li><p>IT</p></li>
</ul>
</details>
</li>
</ul>
</div>
</div>
{#await import('./Map.svelte') then { default: Map }}
<Map class="grow h-10 -z-20" x={cc['latitude']} y={cc['longitude']}/>
{/await}
</div>
<div class="z-20 mt-16 grow pointer-events-none">
<div class="flex justify-center items-center h-full pointer-events-none">
{@render children()}
</div>
</div>
</div>

19
src/routes/[qrcode]/+layout.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { LayoutLoad } from './$types';
import { error } from "@sveltejs/kit";
import { type } from "arktype";
const QrcodeType = type("string.integer.parse");
export const load: LayoutLoad = async ({ params, fetch }) => {
const qrcode = QrcodeType(params.qrcode);
if (qrcode instanceof type.errors) error(400, 'invalid qrcode');
const data = await fetch(`/api/v2/chargecontroller/${qrcode}/`, {
method: 'GET',
headers: {
'Accept': 'application/json',
}
});
return {
chargecontroller: await data.json(),
};
};

3
src/routes/[qrcode]/+page.svelte Normal file
View File

@@ -0,0 +1,3 @@
<div class="bg-black pointer-events-auto">
TEST CARD
</div>

28
src/routes/[qrcode]/Map.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { onMount } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type Props = {
x: number,
y: number,
} & SvelteHTMLElements['div']
let { x, y, ...rest }: Props = $props();
let mapDiv: HTMLDivElement;
let map: L.Map;
onMount(() => {
map = L.map(mapDiv).setView([x, y], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.marker([x, y]).addTo(map);
});
</script>
<div bind:this={mapDiv} {...rest}>
</div>