Status route, preparing to make Overlay/Portal component

src/routes/+layout.ts

@@ -1,4 +1,5 @@
 import type { LayoutLoad } from './$types';
+import type { User } from '$lib/types/User';
 
 export const load: LayoutLoad = async ({ fetch }) => {
   const userRes = await fetch('/api/public/1/auth/myself/', {
@@ -9,9 +10,9 @@ export const load: LayoutLoad = async ({ fetch }) => {
   });
   if (!userRes.ok) return {
     user: null,
-    chargePermission: [],
+    chargePermission: [] as number[],
   };
-  const user = await userRes.json();
+  const user: User = await userRes.json();
   const chargePermissionRes = await fetch(`/api/v3/users/${user['id']}/charge_permissions/`);
   const chargePermission: number[] = chargePermissionRes.ok ? (await chargePermissionRes.json())['authorized_qrcode'] : [];
   return {

src/routes/[qrcode]/+layout.ts

@@ -1,10 +1,11 @@
 import type { LayoutLoad } from './$types';
 import { error } from "@sveltejs/kit";
 import { type } from "arktype";
+import type { ChargeController } from "$lib/types/ChargeController";
 
 const QrcodeType = type("string.integer.parse");
 
-export const load: LayoutLoad = async ({ params, fetch, parent }) => {
+export const load: LayoutLoad = async ({ params, fetch, parent, depends }) => {
   const qrcode = QrcodeType(params.qrcode);
   if (qrcode instanceof type.errors) error(400, 'invalid qrcode');
   const cc = await fetch(`/api/v2/chargecontroller/${qrcode}/`, {
@@ -13,10 +14,12 @@ export const load: LayoutLoad = async ({ params, fetch, parent }) => {
       'Accept': 'application/json',
     }
   });
+  depends('app:chargecontroller');
   const parentData = await parent();
+  const chargecontroller: ChargeController = await cc.json();
   return {
     ...parentData,
     qrcode: qrcode,
-    chargecontroller: await cc.json(),
+    chargecontroller: chargecontroller,
   };
 };

src/routes/[qrcode]/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition';
-  import { scale } from 'svelte/transition';
+  import { slide, scale, fade } from 'svelte/transition';
+  import { goto } from "$app/navigation";
+
+  let { data } = $props();
 
   let showOverlay = $state(false);
   let startingCharge = $state(false);
@@ -11,6 +13,7 @@
     try {
       // TODO: StartCharge fetch request
       console.log("nop");
+      await goto(`/${data.qrcode}/status`);
     } finally {
       startingCharge = false;
     }
@@ -20,17 +23,26 @@
     if (startingCharge) return;
     showOverlay = false;
   }
+
+  // TODO: Try to make a real component out of this "modal" using a Portal: https://stackoverflow.com/a/62733195
 </script>
 
 <div class="grid grid-rows-6 h-full w-full">
-  <div class="row-start-5 row-span-1 col-start-1 flex flex-col justify-center items-center">
+  <div class="row-start-5 col-start-1 flex flex-col justify-center items-center">
     <div class="pointer-events-auto">
       <button class="btn btn-primary btn-lg uppercase" onclick={() => showOverlay = true}>Attivare la Ricarica</button>
     </div>
   </div>
-  <div class="row-start-1 row-span-6 col-start-1 flex flex-col justify-end items-center z-10">
+  {#if showOverlay}
+    <button type="button" class="row-start-1 row-span-6 col-start-1 z-10 bg-base-100/50 pointer-events-auto"
+            transition:fade={{duration:200}}
+            onclick={closeOverlay}
+            aria-label="Close Overlay"
+    ></button>
+  {/if}
+  <div class="row-start-1 row-span-6 col-start-1 flex flex-col justify-end items-center">
     {#if showOverlay}
-      <div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2"
+      <div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2 z-20"
            data-theme="light"
            transition:slide>
         <!--suppress ALL -->

src/routes/[qrcode]/status/+page.svelte

@@ -1,3 +1,49 @@
-<div class="bg-black pointer-events-auto">
-  STATUS CARD
-</div>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { invalidate } from "$app/navigation";
+  import BatteryIcon from "$lib/icons/BatteryIcon.svelte";
+
+  let { data } = $props();
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      invalidate('app:chargecontroller');
+    }, 5000);
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  const energykWh: string = $derived.by(() => {
+    const wh = data.chargecontroller.active_charge?.energy_wh ?? 0;
+    return (wh / 1000).toFixed(2);
+  });
+  const powerkWh: string = $derived.by(() => {
+    const wh = data.chargecontroller.active_charge?.last_power?.power ?? 0;
+    return (wh / 1000).toFixed(2);
+  });
+
+  // TODO: Add Modal from bottom to confirm
+</script>
+
+<div class="pointer-events-auto bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
+  <div>
+    <BatteryIcon/>
+  </div>
+  <div class="text-center">
+    <p>Energia erogata a {data.user.username}:</p>
+    <p class="text-4xl"><span class="text-5xl">{energykWh}</span> kWh</p>
+    <p class="text-sm">Potenza misurata: {powerkWh} kW</p>
+  </div>
+  <div class="w-[90%]">
+    <button class="btn btn-warning btn-xl w-full">Interrompere la ricarica</button>
+  </div>
+  <div class="text-center w-[70%] flex flex-col gap-5 text-sm">
+    <p>
+      «Ciò che sta accadendo ci pone di fronte all’urgenza di procedere in una coraggiosa rivoluzione culturale.»
+    </p>
+    <p>
+      Papa Francesco, Enciclica Laudato Si’
+    </p>
+  </div>
+</div>