mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-27 16:59:37 +02:00
50 lines
2 KiB
Svelte
50 lines
2 KiB
Svelte
|
<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>
|