BSlideOverlay in qrcode and qrcode/status

src/lib/BSlideOverlay.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { slide, fade } from 'svelte/transition';
+  import type { Snippet } from "svelte";
+
+  let { show = $bindable(), closable = true, children }: {
+    show: boolean,
+    closable: boolean
+    children: Snippet<[{ closeOverlay: () => void }]>
+  } = $props();
+
+  function closeOverlay() {
+    if (!closable) return;
+    show = false;
+  }
+</script>
+
+{#if show}
+  <div class="fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
+    <button type="button" class="bg-base-100/50 w-full grow z-20"
+            transition:fade={{duration:200}}
+            onclick={closeOverlay}
+            aria-label="Close Overlay"
+    ></button>
+    <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>
+      {@render children({ closeOverlay })}
+    </div>
+  </div>
+{/if}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { slide, scale, fade } from 'svelte/transition';
+  import { scale } from 'svelte/transition';
   import { goto } from "$app/navigation";
+  import BSlideOverlay from "$lib/BSlideOverlay.svelte";
 
   let { data } = $props();
 
@@ -12,19 +13,18 @@
     startingCharge = true;
     try {
       // TODO: StartCharge fetch request
+      const response = await fetch(`/api/public/1/chargecontroller/${data.qrcode}/start_charge/`, {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+        }
+      });
       console.log("nop");
       await goto(`/${data.qrcode}/status`);
     } finally {
       startingCharge = false;
     }
   }
-
-  function closeOverlay() {
-    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">
@@ -33,18 +33,8 @@
       <button class="btn btn-primary btn-lg uppercase" onclick={() => showOverlay = true}>Attivare la Ricarica</button>
     </div>
   </div>
-  {#if showOverlay}
+  <BSlideOverlay bind:show={showOverlay} closable={!startingCharge}>
-    <button type="button" class="row-start-1 row-span-6 col-start-1 z-10 bg-base-100/50 pointer-events-auto"
+    {#snippet children({ closeOverlay })}
-            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 z-20"
-           data-theme="light"
-           transition:slide>
       <!--suppress ALL -->
       <enhanced:img alt="Please attach the connector to the car" src="./attach_car.png"/>
       <div class="font-bold uppercase text-md text-gray-700">Avete connesso il cavo alla vostra auto?</div>
@@ -58,7 +48,6 @@
         </button>
         <button class="btn btn-secondary btn-xl w-24" onclick={closeOverlay}>NO</button>
       </div>
-      </div>
+    {/snippet}
-    {/if}
+  </BSlideOverlay>
-  </div>
 </div>

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { invalidate } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
+  import { scale } from 'svelte/transition';
   import BatteryIcon from "$lib/icons/BatteryIcon.svelte";
+  import BSlideOverlay from "$lib/BSlideOverlay.svelte";
 
   let { data } = $props();
 
@@ -23,7 +25,20 @@
     return (wh / 1000).toFixed(2);
   });
 
-  // TODO: Add Modal from bottom to confirm
+  let showOverlay = $state(false);
+  let stoppingCharge = $state(false);
+
+  async function stopCharge() {
+    if (stoppingCharge) return;
+    stoppingCharge = true;
+    try {
+      // TODO: StopCharge fetch request
+      console.log("nop");
+      await goto(`/${data.qrcode}`);
+    } finally {
+      stoppingCharge = false;
+    }
+  }
 </script>
 
 <div class="pointer-events-auto bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
@@ -36,7 +51,7 @@
     <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>
+    <button class="btn btn-warning btn-xl w-full" onclick={() => showOverlay = true}>Interrompere la ricarica</button>
   </div>
   <div class="text-center w-[70%] flex flex-col gap-5 text-sm">
     <p>
@@ -46,4 +61,19 @@
       Papa Francesco, Enciclica Laudato Si’
     </p>
   </div>
+  <BSlideOverlay bind:show={showOverlay} closable={!stoppingCharge}>
+    {#snippet children({ closeOverlay })}
+      <p class="font-bold w-[90%] text-wrap uppercase text-center">Sei sicuro di voler interrompere la ricarica?</p>
+      <div class="flex flex-row justify-around gap-4 w-full">
+        <button class="btn btn-primary btn-xl w-24 grid" onclick={stopCharge}>
+          {#if stoppingCharge}
+            <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2 loading"></span>
+          {:else}
+            <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2">SI</span>
+          {/if}
+        </button>
+        <button class="btn btn-secondary btn-xl w-24" onclick={closeOverlay}>NO</button>
+      </div>
+    {/snippet}
+  </BSlideOverlay>
 </div>