Add delete functionality and clear adventures

src/lib/assets/deleteIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="17.75" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>

src/routes/log/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import AdventureCard from "$lib/components/AdventureCard.svelte";
     import type { Adventure } from '$lib/utils/types';
-    import { addAdventure, getAdventures, getNextId, removeAdventure ,saveEdit } from "../../services/adventureService";
+    import { addAdventure, clearAdventures, getAdventures, getNextId, removeAdventure ,saveEdit } from "../../services/adventureService";
     import { onMount } from 'svelte';
     import { exportData } from "../../services/export";
     import { importData } from "../../services/import";
     import exportFile from "$lib/assets/exportFile.svg";
+    import deleteIcon from "$lib/assets/deleteIcon.svg";
     import SucessToast from "$lib/components/SucessToast.svelte";
     import mapDrawing from "$lib/assets/adventure_map.svg"
     import EditModal from "$lib/components/EditModal.svelte";
@@ -86,8 +87,12 @@
         editCreated = '';
     }
 
+    function deleteData() {
+        clearAdventures();
+        adventures = getAdventures();
+        showToast('deleted');
+    }
 
-    
 </script>
 
 <div class="flex flex-row items-center justify-center gap-4">
@@ -100,69 +105,30 @@
     <SucessToast action={toastAction} />
 {/if}
 
-
 {#if !Number.isNaN(editId)}
 <EditModal bind:editId={editId} bind:editName={editName} bind:editLocation={editLocation} bind:editCreated={editCreated} on:submit={saveAdventure} on:close={handleClose} />
 {/if}
 
-
 <div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
     {#each adventures as adventure (adventure.id)}
         <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
     {/each}
 </div>
 
-
 {#if adventures.length == 0}
 <div class="flex flex-col items-center justify-center mt-28">
     <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
 </div>
-
-
 {/if}
 
-<!-- {#if !Number.isNaN(editId)}
-    <form on:submit|preventDefault={saveAdventure}>
-        <input bind:value={editName} />
-        <input bind:value={editLocation} />
-        <input type="date" bind:value={editCreated} />
-        <button type="submit">Save</button>
-    </form>
-{/if} -->
-
 {#if adventures.length != 0}
-
-
-
-<button class="btn btn-neutral ml-auto mr-auto block" on:click={async () => { window.location.href = exportData(); }}>
-    <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
-</button>
-
+<div class="flex flex-row items-center justify-center mt-28 gap-4">
+    <button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
+        <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
+    </button>
+    <button class="btn btn-neutral" on:click={deleteData}>
+        <img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
+    </button>
+</div>
 {/if}
-
-<!-- <style>
-.addsomething {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 90vh;
-    text-align: center;
-}
-button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-</style> -->

src/services/adventureService.ts

@@ -65,4 +65,11 @@ export function getNumberOfAdventures() {
     return adventures.length;
 }
 
+export function clearAdventures() {
+    adventures = [];
+    if (isBrowser) {
+        localStorage.setItem('adventures', JSON.stringify(adventures));
+    }
+}
+