From bf640bc433d1e613190e4ae05d03ef7c86bf5944 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 31 Mar 2024 00:49:42 +0000 Subject: [PATCH] Add SuccessToast component and pinLogo asset*** ***Update saveEdit function in adventureService.ts*** ***Remove unnecessary buttons in Navbar.svelte*** ***Add EditModal component*** ***Update Footer.svelte with pinLogo and copyright information --- src/lib/assets/pinLogo.svg | 1 + src/lib/components/EditModal.svelte | 50 +++++++++++++++++++++++++++ src/lib/components/Footer.svelte | 35 ++++++++++--------- src/lib/components/Navbar.svelte | 11 ------ src/lib/components/SucessToast.svelte | 9 +++++ src/routes/log/+page.svelte | 48 ++++++++++++++++++++++--- src/services/adventureService.ts | 18 ++++++---- 7 files changed, 133 insertions(+), 39 deletions(-) create mode 100644 src/lib/assets/pinLogo.svg create mode 100644 src/lib/components/EditModal.svelte create mode 100644 src/lib/components/SucessToast.svelte diff --git a/src/lib/assets/pinLogo.svg b/src/lib/assets/pinLogo.svg new file mode 100644 index 0000000..cf27faa --- /dev/null +++ b/src/lib/assets/pinLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte new file mode 100644 index 0000000..d13f56f --- /dev/null +++ b/src/lib/components/EditModal.svelte @@ -0,0 +1,50 @@ + + + +
+

Edit Adventure {editName}

+

Press ESC key or click the button below to close

+
+
+ + + + + + + + + +
+
+
+ \ No newline at end of file diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 68fa2c2..ed3bef5 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -1,18 +1,19 @@ - + - - -
-
-
-

AdventureLog 🗺️

-
+ diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 534aa43..603c41b 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -19,16 +19,5 @@

Adventures: {getNumberOfAdventures()}

- - -
diff --git a/src/lib/components/SucessToast.svelte b/src/lib/components/SucessToast.svelte new file mode 100644 index 0000000..3bc831e --- /dev/null +++ b/src/lib/components/SucessToast.svelte @@ -0,0 +1,9 @@ + + +
+
+ Adventure {action} successfully! +
+
\ No newline at end of file diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte index 7e86723..d3a866d 100644 --- a/src/routes/log/+page.svelte +++ b/src/routes/log/+page.svelte @@ -6,8 +6,9 @@ import { exportData } from "../../services/export"; import { importData } from "../../services/import"; import exportFile from "$lib/assets/exportFile.svg"; - + import SucessToast from "$lib/components/SucessToast.svelte"; import mapDrawing from "$lib/assets/adventure_map.svg" + import EditModal from "$lib/components/EditModal.svelte"; let newName = ''; @@ -20,6 +21,21 @@ let adventures: Adventure[] = []; + let isShowingToast:boolean = false; + let toastAction:string = ''; + + function showToast(action:string) { + toastAction = action; + isShowingToast = true; + console.log('showing toast'); + + setTimeout(() => { + isShowingToast = false; + toastAction = ''; + console.log('hiding toast'); + }, 3000); + } + const createNewAdventure = () => { let currentDate = new Date(); let dateString = currentDate.toISOString().slice(0,10); // Get date in "yyyy-mm-dd" format @@ -28,6 +44,7 @@ newName = ''; // Reset newName and newLocation after adding adventure newLocation = ''; adventures = getAdventures(); // add to local array + showToast('added'); }; onMount(async () => { @@ -36,16 +53,19 @@ function triggerRemoveAdventure(event: { detail: number; }) { removeAdventure(event) + showToast('removed'); adventures = getAdventures() } - function saveAdventure() { - saveEdit(editId, editName, editLocation, editCreated) + function saveAdventure(event: { detail: Adventure; }) { + console.log("Event" + event.detail) + saveEdit(event.detail) editId = NaN; editName = ''; editLocation = ''; editCreated = ''; adventures = getAdventures() + showToast('edited'); } @@ -59,6 +79,13 @@ } } + function handleClose() { + editId = NaN; + editName = ''; + editLocation = ''; + editCreated = ''; + } + @@ -69,6 +96,16 @@ +{#if isShowingToast} + +{/if} + + +{#if !Number.isNaN(editId)} + +{/if} + +
{#each adventures as adventure (adventure.id)} @@ -82,16 +119,17 @@ Logo
+ {/if} -{#if !Number.isNaN(editId)} + {#if adventures.length != 0} diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index 46aff5b..55e350b 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -41,12 +41,18 @@ export function removeAdventure(event: { detail: number; }) { } } -export function saveEdit(editId:number, editName:string, editLocation:string, editCreated:string) { - const adventure = adventures.find(adventure => adventure.id === editId); - if (adventure) { - adventure.name = editName; - adventure.location = editLocation; - adventure.created = editCreated; +export function saveEdit(adventure:Adventure) { + let editId = adventure.id; + console.log("saving edit") + let editName = adventure.name; + let editLocation = adventure.location; + let editCreated = adventure.created; + let oldAdventure: Adventure | undefined = adventures.find(adventure => adventure.id === editId); + console.log("old" + oldAdventure) + if (oldAdventure) { + oldAdventure.name = editName; + oldAdventure.location = editLocation; + oldAdventure.created = editCreated; } editId = NaN; console.log("done")