126 lines
3.3 KiB
Svelte
126 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
let newAdventure: Adventure;
|
|
|
|
newAdventure = {
|
|
id: -1,
|
|
type: "mylog",
|
|
name: "",
|
|
location: "",
|
|
date: "",
|
|
activityTypes: [],
|
|
};
|
|
|
|
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 create() {
|
|
addActivityType();
|
|
dispatch("create", newAdventure);
|
|
console.log(newAdventure);
|
|
}
|
|
|
|
function close() {
|
|
dispatch("close");
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Escape") {
|
|
close();
|
|
}
|
|
}
|
|
|
|
let activityInput: string = "";
|
|
|
|
function addActivityType() {
|
|
if (activityInput.trim() !== "") {
|
|
const activities = activityInput
|
|
.split(",")
|
|
.map((activity) => activity.trim());
|
|
newAdventure.activityTypes = [
|
|
...(newAdventure.activityTypes || []),
|
|
...activities,
|
|
];
|
|
activityInput = "";
|
|
}
|
|
console.log(newAdventure.activityTypes);
|
|
}
|
|
</script>
|
|
|
|
<dialog id="my_modal_1" class="modal">
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
|
<h3 class="font-bold text-lg">New Adventure</h3>
|
|
<p class="py-4">Press ESC key or click the button below to close</p>
|
|
<div
|
|
class="modal-action items-center"
|
|
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
|
>
|
|
<form method="dialog" style="width: 100%;">
|
|
<div>
|
|
<label for="name">Name</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
bind:value={newAdventure.name}
|
|
class="input input-bordered w-full max-w-xs"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="location">Location</label>
|
|
<input
|
|
type="text"
|
|
id="location"
|
|
bind:value={newAdventure.location}
|
|
class="input input-bordered w-full max-w-xs"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="date">date</label>
|
|
<input
|
|
type="date"
|
|
id="date"
|
|
bind:value={newAdventure.date}
|
|
class="input input-bordered w-full max-w-xs"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="date">Description</label>
|
|
<input
|
|
type="text"
|
|
id="description"
|
|
bind:value={newAdventure.description}
|
|
class="input input-bordered w-full max-w-xs"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="date">Activity Types</label>
|
|
<input
|
|
type="text"
|
|
id="activityTypes"
|
|
bind:value={activityInput}
|
|
class="input input-bordered w-full max-w-xs"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary mr-4 mt-4"
|
|
on:click={create}>Create</button
|
|
>
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<button class="btn mt-4" on:click={close}>Close</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</dialog>
|