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
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;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import pinLogo from "$lib/assets/pinLogo.svg";
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user