mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-29 17:59:36 +02:00
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
This commit is contained in:
Sean Morley
parent
960062b499
commit
bf640bc433
7 changed files with 133 additions and 39 deletions
1
src/lib/assets/pinLogo.svg
Normal file
1
src/lib/assets/pinLogo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="15" viewBox="0 0 384 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="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
|
||||
|
After Width: | Height: | Size: 437 B |
50
src/lib/components/EditModal.svelte
Normal file
50
src/lib/components/EditModal.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script lang="ts">
|
||||
export let editId:number = NaN;
|
||||
export let editName:string = '';
|
||||
export let editLocation:string = '';
|
||||
export let editCreated: string = '';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Adventure } from '$lib/utils/types';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
onMount(() => {
|
||||
modal = document.getElementById("my_modal_1") as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function submit() {
|
||||
const adventureEdited: Adventure = { id: editId, name: editName, location: editLocation, created: editCreated };
|
||||
dispatch('submit', adventureEdited);
|
||||
console.log(adventureEdited)
|
||||
}
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Edit Adventure {editName}</h3>
|
||||
<p class="py-4">Press ESC key or click the button below to close</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
|
||||
<label for="location">Location</label>
|
||||
<input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
|
||||
<label for="created">Created</label>
|
||||
<input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
|
||||
<button class="btn btn-primary" on:click={submit}>Save</button>
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" on:click={close}>Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
<style>
|
||||
.footer {
|
||||
clear: both;
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
margin-top: -4rem;
|
||||
text-align: center;
|
||||
}
|
||||
<script>
|
||||
import pinLogo from "$lib/assets/pinLogo.svg";
|
||||
</script>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<hr>
|
||||
<br>
|
||||
<p>AdventureLog 🗺️</p>
|
||||
</div>
|
||||
<footer class="footer items-center p-4 bg-neutral text-neutral-content fixed bottom-0 left-0 w-full">
|
||||
<aside class="items-center grid-flow-col">
|
||||
<img src={pinLogo} class="inline-block -mt-1 mr-1" alt="Logo" />
|
||||
<p>Copyright © 2024 Sean Morley - All rights reserved</p>
|
||||
</aside>
|
||||
<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
|
||||
</a>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -19,16 +19,5 @@
|
|||
</div>
|
||||
<div class="navbar-end">
|
||||
<p>Adventures: {getNumberOfAdventures()} </p>
|
||||
<button class="btn btn-ghost btn-circle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-ghost btn-circle">
|
||||
<div class="indicator">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
||||
<span class="badge badge-xs badge-primary indicator-item"></span>
|
||||
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
9
src/lib/components/SucessToast.svelte
Normal file
9
src/lib/components/SucessToast.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script lang="ts">
|
||||
export let action:string;
|
||||
</script>
|
||||
|
||||
<div class="toast toast-top toast-end z-50">
|
||||
<div class="alert alert-info">
|
||||
<span>Adventure {action} successfully!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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 = '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -69,6 +96,16 @@
|
|||
<button class="btn" on:click={createNewAdventure}>Add Adventure</button>
|
||||
</div>
|
||||
|
||||
{#if isShowingToast}
|
||||
<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} />
|
||||
|
|
@ -82,16 +119,17 @@
|
|||
<img src={mapDrawing} width="25%" alt="Logo" />
|
||||
</div>
|
||||
|
||||
|
||||
{/if}
|
||||
|
||||
{#if !Number.isNaN(editId)}
|
||||
<!-- {#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} -->
|
||||
|
||||
{#if adventures.length != 0}
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue