mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-21 13:59:36 +02:00
297 lines
8.7 KiB
Svelte
297 lines
8.7 KiB
Svelte
<script lang="ts">
|
|
export let adventureToEdit: Adventure;
|
|
import { createEventDispatcher } from 'svelte';
|
|
import type { Adventure } from '$lib/types';
|
|
const dispatch = createEventDispatcher();
|
|
import { onMount } from 'svelte';
|
|
import { addToast } from '$lib/toasts';
|
|
let modal: HTMLDialogElement;
|
|
|
|
console.log(adventureToEdit.id);
|
|
|
|
let originalName = adventureToEdit.name;
|
|
|
|
let isPointModalOpen: boolean = false;
|
|
|
|
import MapMarker from '~icons/mdi/map-marker';
|
|
import Calendar from '~icons/mdi/calendar';
|
|
import Notebook from '~icons/mdi/notebook';
|
|
import ClipboardList from '~icons/mdi/clipboard-list';
|
|
import Image from '~icons/mdi/image';
|
|
import Star from '~icons/mdi/star';
|
|
import Attachment from '~icons/mdi/attachment';
|
|
import PointSelectionModal from './PointSelectionModal.svelte';
|
|
import Earth from '~icons/mdi/earth';
|
|
import Wikipedia from '~icons/mdi/wikipedia';
|
|
|
|
onMount(async () => {
|
|
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
|
if (modal) {
|
|
modal.showModal();
|
|
}
|
|
});
|
|
|
|
function submit() {}
|
|
|
|
function close() {
|
|
dispatch('close');
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') {
|
|
close();
|
|
}
|
|
}
|
|
|
|
async function generateDesc() {
|
|
let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
|
|
let data = await res.json();
|
|
if (data.extract) {
|
|
adventureToEdit.description = data.extract;
|
|
}
|
|
}
|
|
|
|
async function handleSubmit(event: Event) {
|
|
event.preventDefault();
|
|
const form = event.target as HTMLFormElement;
|
|
const formData = new FormData(form);
|
|
|
|
const response = await fetch(form.action, {
|
|
method: form.method,
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
const data = JSON.parse(result.data);
|
|
console.log(data);
|
|
|
|
if (data) {
|
|
if (typeof adventureToEdit.activity_types === 'string') {
|
|
adventureToEdit.activity_types = (adventureToEdit.activity_types as string)
|
|
.split(',')
|
|
.map((activity_type) => activity_type.trim())
|
|
.filter((activity_type) => activity_type !== '' && activity_type !== ',');
|
|
|
|
// Remove duplicates
|
|
adventureToEdit.activity_types = Array.from(new Set(adventureToEdit.activity_types));
|
|
}
|
|
|
|
adventureToEdit.image = data[1];
|
|
adventureToEdit.link = data[2];
|
|
addToast('success', 'Adventure edited successfully!');
|
|
dispatch('saveEdit', adventureToEdit);
|
|
close();
|
|
} else {
|
|
addToast('warning', 'Error editing adventure');
|
|
console.log('Error editing adventure');
|
|
}
|
|
}
|
|
}
|
|
function setLongLat(event: CustomEvent<[number, number]>) {
|
|
console.log(event.detail);
|
|
adventureToEdit.latitude = event.detail[1];
|
|
adventureToEdit.longitude = event.detail[0];
|
|
isPointModalOpen = false;
|
|
}
|
|
</script>
|
|
|
|
{#if isPointModalOpen}
|
|
<PointSelectionModal
|
|
longitude={adventureToEdit.longitude}
|
|
latitude={adventureToEdit.latitude}
|
|
on:close={() => (isPointModalOpen = false)}
|
|
on:submit={setLongLat}
|
|
/>
|
|
{/if}
|
|
|
|
<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">Edit Adventure: {originalName}</h3>
|
|
<div
|
|
class="modal-action items-center"
|
|
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
|
>
|
|
<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/adventures?/edit">
|
|
<div class="mb-2">
|
|
<input
|
|
type="text"
|
|
id="adventureId"
|
|
name="adventureId"
|
|
hidden
|
|
readonly
|
|
bind:value={adventureToEdit.id}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
<input
|
|
type="text"
|
|
id="type"
|
|
name="type"
|
|
hidden
|
|
readonly
|
|
bind:value={adventureToEdit.type}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
<label for="name">Name</label><br />
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
bind:value={adventureToEdit.name}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
><br />
|
|
<input
|
|
type="text"
|
|
id="location"
|
|
name="location"
|
|
bind:value={adventureToEdit.location}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
|
|
<input
|
|
type="date"
|
|
id="date"
|
|
name="date"
|
|
bind:value={adventureToEdit.date}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
><br />
|
|
<div class="flex">
|
|
<input
|
|
type="text"
|
|
id="description"
|
|
name="description"
|
|
bind:value={adventureToEdit.description}
|
|
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
|
/>
|
|
<button class="btn btn-neutral ml-2" type="button" on:click={generateDesc}
|
|
><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="activityTypes"
|
|
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
><br />
|
|
<input
|
|
type="text"
|
|
id="activity_types"
|
|
name="activity_types"
|
|
bind:value={adventureToEdit.activity_types}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="image">Image <Image class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
|
|
<input
|
|
type="file"
|
|
id="image"
|
|
name="image"
|
|
bind:value={adventureToEdit.image}
|
|
class="file-input file-input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
|
|
/>
|
|
<input
|
|
type="url"
|
|
id="link"
|
|
name="link"
|
|
bind:value={adventureToEdit.link}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="rating">Rating <Star class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="5"
|
|
name="rating"
|
|
id="rating"
|
|
bind:value={adventureToEdit.rating}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="latitude"
|
|
hidden
|
|
name="latitude"
|
|
bind:value={adventureToEdit.latitude}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
<input
|
|
type="text"
|
|
id="longitude"
|
|
hidden
|
|
name="longitude"
|
|
bind:value={adventureToEdit.longitude}
|
|
class="input input-bordered w-full max-w-xs mt-1"
|
|
/>
|
|
<div class="mb-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
on:click={() => (isPointModalOpen = true)}
|
|
>
|
|
{adventureToEdit.latitude && adventureToEdit.longitude ? 'Change' : 'Select'}
|
|
Location</button
|
|
>
|
|
</div>
|
|
{#if adventureToEdit.collection === null}
|
|
<div class="mb-2">
|
|
<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
><br />
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-primary"
|
|
id="is_public"
|
|
name="is_public"
|
|
bind:checked={adventureToEdit.is_public}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if adventureToEdit.is_public}
|
|
<div class="bg-neutral p-4 rounded-md shadow-sm">
|
|
<p class=" font-semibold">Share this Adventure!</p>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-card-foreground font-mono">
|
|
{window.location.origin}/adventures/{adventureToEdit.id}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
navigator.clipboard.writeText(
|
|
`${window.location.origin}/adventures/${adventureToEdit.id}`
|
|
);
|
|
}}
|
|
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
|
|
>
|
|
Copy Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</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 class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|