mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-22 14:29:36 +02:00
Edit modal
This commit is contained in:
Sean Morley
parent
a264da39f5
commit
0479026b11
2 changed files with 458 additions and 358 deletions
|
|
@ -1,37 +1,102 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let adventureToEdit: Adventure;
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import type { Adventure } from '$lib/types';
|
import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
import { addToast } from '$lib/toasts';
|
import { addToast } from '$lib/toasts';
|
||||||
let modal: HTMLDialogElement;
|
|
||||||
|
export let type: string = 'visited';
|
||||||
|
|
||||||
|
export let longitude: number | null = null;
|
||||||
|
export let latitude: number | null = null;
|
||||||
|
|
||||||
|
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
|
||||||
|
let markers: Point[] = [];
|
||||||
|
let query: string = '';
|
||||||
|
let places: OpenStreetMapPlace[] = [];
|
||||||
|
let images: { id: string; image: string }[] = [];
|
||||||
|
|
||||||
|
import Earth from '~icons/mdi/earth';
|
||||||
|
import ActivityComplete from './ActivityComplete.svelte';
|
||||||
|
import { appVersion } from '$lib/config';
|
||||||
|
|
||||||
export let startDate: string | null = null;
|
export let startDate: string | null = null;
|
||||||
export let endDate: string | null = null;
|
export let endDate: string | null = null;
|
||||||
|
|
||||||
console.log(adventureToEdit.id);
|
export let adventureToEdit: Adventure;
|
||||||
|
|
||||||
let originalName = adventureToEdit.name;
|
images = adventureToEdit.images || [];
|
||||||
|
|
||||||
let isPointModalOpen: boolean = false;
|
if (longitude && latitude) {
|
||||||
let isImageFetcherOpen: boolean = false;
|
adventureToEdit.latitude = latitude;
|
||||||
|
adventureToEdit.longitude = longitude;
|
||||||
|
reverseGeocode();
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (!adventureToEdit.rating) {
|
||||||
|
adventureToEdit.rating = NaN;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let isDetails: boolean = true;
|
||||||
|
|
||||||
|
function saveAndClose() {
|
||||||
|
dispatch('saveEdit', adventureToEdit);
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (markers.length > 0) {
|
||||||
|
adventureToEdit.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
|
||||||
|
adventureToEdit.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
|
||||||
|
if (!adventureToEdit.location) {
|
||||||
|
adventureToEdit.location = markers[0].location;
|
||||||
|
}
|
||||||
|
if (!adventureToEdit.name) {
|
||||||
|
adventureToEdit.name = markers[0].name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function geocode(e: Event | null) {
|
||||||
|
if (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
if (!query) {
|
||||||
|
alert('Please enter a location');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
|
||||||
|
headers: {
|
||||||
|
'User-Agent': `AdventureLog / ${appVersion} `
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(res);
|
||||||
|
let data = (await res.json()) as OpenStreetMapPlace[];
|
||||||
|
places = data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reverseGeocode() {
|
||||||
|
let res = await fetch(
|
||||||
|
`https://nominatim.openstreetmap.org/search?q=${adventureToEdit.latitude},${adventureToEdit.longitude}&format=jsonv2`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': `AdventureLog / ${appVersion} `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
let data = (await res.json()) as OpenStreetMapPlace[];
|
||||||
|
if (data.length > 0) {
|
||||||
|
adventureToEdit.name = data[0]?.name || '';
|
||||||
|
adventureToEdit.activity_types?.push(data[0]?.type || '');
|
||||||
|
adventureToEdit.location = data[0]?.display_name || '';
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
|
||||||
let fileInput: HTMLInputElement;
|
let fileInput: HTMLInputElement;
|
||||||
let image: File;
|
|
||||||
|
|
||||||
import MapMarker from '~icons/mdi/map-marker';
|
const dispatch = createEventDispatcher();
|
||||||
import Map from '~icons/mdi/map';
|
let modal: HTMLDialogElement;
|
||||||
import Calendar from '~icons/mdi/calendar';
|
|
||||||
import Notebook from '~icons/mdi/notebook';
|
|
||||||
import ClipboardList from '~icons/mdi/clipboard-list';
|
|
||||||
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';
|
|
||||||
import ImageFetcher from './ImageFetcher.svelte';
|
|
||||||
import ActivityComplete from './ActivityComplete.svelte';
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||||
|
|
@ -40,8 +105,6 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function submit() {}
|
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
dispatch('close');
|
dispatch('close');
|
||||||
}
|
}
|
||||||
|
|
@ -52,155 +115,115 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function generateDesc() {
|
// async function generateDesc() {
|
||||||
let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
|
// let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
|
||||||
let data = await res.json();
|
// let data = await res.json();
|
||||||
if (data.extract) {
|
// if (data.extract) {
|
||||||
adventureToEdit.description = data.extract;
|
// adventureToEdit.description = data.extract;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
function addMarker(e: CustomEvent<any>) {
|
||||||
|
markers = [];
|
||||||
|
markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
|
||||||
|
console.log(markers);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function imageSubmit() {
|
||||||
|
return async ({ result }: any) => {
|
||||||
|
if (result.type === 'success') {
|
||||||
|
if (result.data.id && result.data.image) {
|
||||||
|
adventureToEdit.images = [...adventureToEdit.images, result.data];
|
||||||
|
images = [...images, result.data];
|
||||||
|
addToast('success', 'Image uploaded');
|
||||||
|
|
||||||
|
fileInput.value = '';
|
||||||
|
console.log(adventureToEdit);
|
||||||
|
} else {
|
||||||
|
addToast('error', result.data.error || 'Failed to upload image');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(event: Event) {
|
async function handleSubmit(event: Event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const form = event.target as HTMLFormElement;
|
console.log(adventureToEdit);
|
||||||
const formData = new FormData(form);
|
let res = await fetch(`/api/adventures/${adventureToEdit.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
const response = await fetch(form.action, {
|
headers: {
|
||||||
method: form.method,
|
'Content-Type': 'application/json'
|
||||||
body: formData
|
},
|
||||||
|
body: JSON.stringify(adventureToEdit)
|
||||||
});
|
});
|
||||||
|
let data = await res.json();
|
||||||
if (response.ok) {
|
if (data.id) {
|
||||||
const result = await response.json();
|
adventureToEdit = data as Adventure;
|
||||||
const data = JSON.parse(result.data);
|
isDetails = false;
|
||||||
console.log(data);
|
addToast('success', 'Adventure updated');
|
||||||
|
|
||||||
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 {
|
} else {
|
||||||
addToast('warning', 'Error editing adventure');
|
addToast('error', 'Failed to update adventure');
|
||||||
console.log('Error editing adventure');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function handleImageFetch(event: CustomEvent) {
|
|
||||||
const file = event.detail.file;
|
|
||||||
if (file && fileInput) {
|
|
||||||
// Create a DataTransfer object and add the file
|
|
||||||
const dataTransfer = new DataTransfer();
|
|
||||||
dataTransfer.items.add(file);
|
|
||||||
|
|
||||||
// Set the files property of the file input
|
|
||||||
fileInput.files = dataTransfer.files;
|
|
||||||
|
|
||||||
// Update the adventureToEdit object
|
|
||||||
adventureToEdit.image = file;
|
|
||||||
}
|
|
||||||
isImageFetcherOpen = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLongLat(event: CustomEvent<Adventure>) {
|
|
||||||
console.log(event.detail);
|
|
||||||
isPointModalOpen = false;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isPointModalOpen}
|
|
||||||
<PointSelectionModal
|
|
||||||
bind:adventure={adventureToEdit}
|
|
||||||
on:close={() => (isPointModalOpen = false)}
|
|
||||||
on:submit={setLongLat}
|
|
||||||
query={adventureToEdit.name}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isImageFetcherOpen}
|
|
||||||
<ImageFetcher
|
|
||||||
on:image={handleImageFetch}
|
|
||||||
name={adventureToEdit.name}
|
|
||||||
on:close={() => (isImageFetcherOpen = false)}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<dialog id="my_modal_1" class="modal">
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
<dialog id="my_modal_1" class="modal">
|
||||||
<h3 class="font-bold text-lg">Edit Adventure: {originalName}</h3>
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
<div
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
class="modal-action items-center"
|
<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
<h3 class="font-bold text-lg">Edit {type} Adventure</h3>
|
||||||
>
|
{#if adventureToEdit.id === '' || isDetails}
|
||||||
<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/adventures?/edit">
|
<div class="modal-action items-center">
|
||||||
<div class="mb-2">
|
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
||||||
<input
|
<!-- Grid layout for form fields -->
|
||||||
type="text"
|
<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
|
||||||
id="adventureId"
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
|
||||||
name="adventureId"
|
<div>
|
||||||
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 />
|
<label for="name">Name</label><br />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="name"
|
|
||||||
id="name"
|
id="name"
|
||||||
|
name="name"
|
||||||
bind:value={adventureToEdit.name}
|
bind:value={adventureToEdit.name}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full"
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<div class="join">
|
||||||
<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
<input
|
||||||
><br />
|
class="join-item btn btn-neutral"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
id="visited"
|
||||||
|
value="visited"
|
||||||
|
aria-label="Visited"
|
||||||
|
checked={adventureToEdit.type === 'visited'}
|
||||||
|
on:click={() => (type = 'visited')}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
class="join-item btn btn-neutral"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
id="planned"
|
||||||
|
value="planned"
|
||||||
|
aria-label="Planned"
|
||||||
|
checked={adventureToEdit.type === 'planned'}
|
||||||
|
on:click={() => (type = 'planned')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="location">Location</label><br />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="location"
|
id="location"
|
||||||
name="location"
|
name="location"
|
||||||
bind:value={adventureToEdit.location}
|
bind:value={adventureToEdit.location}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full"
|
||||||
/>
|
/>
|
||||||
<div class="mb-2 mt-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-secondary"
|
|
||||||
on:click={() => (isPointModalOpen = true)}
|
|
||||||
>
|
|
||||||
<Map class="inline-block w-6 h-6" />{adventureToEdit.latitude &&
|
|
||||||
adventureToEdit.longitude
|
|
||||||
? 'Change'
|
|
||||||
: 'Select'}
|
|
||||||
Location</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div class="mb-2">
|
<label for="date">Date</label><br />
|
||||||
<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
|
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
id="date"
|
id="date"
|
||||||
|
|
@ -208,72 +231,34 @@
|
||||||
min={startDate || ''}
|
min={startDate || ''}
|
||||||
max={endDate || ''}
|
max={endDate || ''}
|
||||||
bind:value={adventureToEdit.date}
|
bind:value={adventureToEdit.date}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<div>
|
||||||
<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
<label for="description">Description</label><br />
|
||||||
><br />
|
|
||||||
<div class="flex">
|
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
name="description"
|
name="description"
|
||||||
bind:value={adventureToEdit.description}
|
bind:value={adventureToEdit.description}
|
||||||
class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
|
class="textarea textarea-bordered w-full h-32"
|
||||||
/>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-neutral" type="button" on:click={generateDesc}
|
<div>
|
||||||
><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
|
<label for="activity_types">Activity Types</label><br />
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{#if adventureToEdit.type == 'visited' || adventureToEdit.type == 'planned'}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="activityTypes"
|
|
||||||
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="activity_types"
|
id="activity_types"
|
||||||
name="activity_types"
|
name="activity_types"
|
||||||
hidden
|
hidden
|
||||||
bind:value={adventureToEdit.activity_types}
|
bind:value={adventureToEdit.activity_types}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full"
|
||||||
/>
|
/>
|
||||||
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
|
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<div>
|
||||||
<div class="mb-2">
|
<label for="rating"
|
||||||
<label for="image">Image </label><br />
|
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
|
||||||
<div class="flex">
|
><br />
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="image"
|
|
||||||
name="image"
|
|
||||||
bind:value={image}
|
|
||||||
bind:this={fileInput}
|
|
||||||
class="file-input file-input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
class="btn btn-neutral ml-2"
|
|
||||||
type="button"
|
|
||||||
on:click={() => (isImageFetcherOpen = true)}
|
|
||||||
><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</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
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -284,19 +269,19 @@
|
||||||
name="rating"
|
name="rating"
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
/>
|
/>
|
||||||
<div class="rating -ml-3 mt-1 mb-4">
|
<div class="rating -ml-3 mt-1">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="rating-2"
|
name="rating-2"
|
||||||
class="rating-hidden"
|
class="rating-hidden"
|
||||||
checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
|
checked={Number.isNaN(adventureToEdit.rating)}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="rating-2"
|
name="rating-2"
|
||||||
class="mask mask-star-2 bg-orange-400"
|
class="mask mask-star-2 bg-orange-400"
|
||||||
checked={adventureToEdit.rating === 1}
|
|
||||||
on:click={() => (adventureToEdit.rating = 1)}
|
on:click={() => (adventureToEdit.rating = 1)}
|
||||||
|
checked={adventureToEdit.rating === 1}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
|
|
@ -337,26 +322,24 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<div>
|
||||||
|
<!-- link -->
|
||||||
|
<div>
|
||||||
|
<label for="link">Link</label><br />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="latitude"
|
id="link"
|
||||||
hidden
|
name="link"
|
||||||
name="latitude"
|
bind:value={adventureToEdit.link}
|
||||||
bind:value={adventureToEdit.latitude}
|
class="input input-bordered w-full"
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
/>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
</div>
|
||||||
id="longitude"
|
<div>
|
||||||
hidden
|
<div>
|
||||||
name="longitude"
|
<div>
|
||||||
bind:value={adventureToEdit.longitude}
|
<label for="is_public"
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||||
/>
|
|
||||||
{#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 />
|
><br />
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
|
@ -366,10 +349,88 @@
|
||||||
bind:checked={adventureToEdit.is_public}
|
bind:checked={adventureToEdit.is_public}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<label for="latitude">Location</label><br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="location"
|
||||||
|
name="location"
|
||||||
|
bind:value={adventureToEdit.location}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form on:submit={geocode}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Seach for a location"
|
||||||
|
class="input input-bordered w-full max-w-xs"
|
||||||
|
id="search"
|
||||||
|
name="search"
|
||||||
|
bind:value={query}
|
||||||
|
/>
|
||||||
|
<button type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
{#if places.length > 0}
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3 class="font-bold text-lg mb-4">Search Results</h3>
|
||||||
|
<ul>
|
||||||
|
{#each places as place}
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-neutral mb-2"
|
||||||
|
on:click={() => {
|
||||||
|
markers = [
|
||||||
|
{
|
||||||
|
lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
|
||||||
|
location: place.display_name,
|
||||||
|
name: place.name,
|
||||||
|
activity_type: place.type
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{place.display_name}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="text-error text-lg">No results found</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<MapLibre
|
||||||
|
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
||||||
|
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
|
||||||
|
standardControls
|
||||||
|
>
|
||||||
|
<!-- MapEvents gives you access to map events even from other components inside the map,
|
||||||
|
where you might not have access to the top-level `MapLibre` component. In this case
|
||||||
|
it would also work to just use on:click on the MapLibre component itself. -->
|
||||||
|
<MapEvents on:click={addMarker} />
|
||||||
|
|
||||||
|
{#each markers as marker}
|
||||||
|
<DefaultMarker lngLat={marker.lngLat} />
|
||||||
|
{/each}
|
||||||
|
</MapLibre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<button type="submit" class="btn btn-primary">Save & Next</button>
|
||||||
|
<button type="button" class="btn" on:click={close}>Close</button>
|
||||||
|
</div>
|
||||||
{#if adventureToEdit.is_public}
|
{#if adventureToEdit.is_public}
|
||||||
<div class="bg-neutral p-4 rounded-md shadow-sm">
|
<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
|
||||||
<p class=" font-semibold">Share this Adventure!</p>
|
<p class=" font-semibold">Share this Adventure!</p>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<p class="text-card-foreground font-mono">
|
<p class="text-card-foreground font-mono">
|
||||||
|
|
@ -389,19 +450,41 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="edit_adventure"
|
|
||||||
data-umami-event="Edit Adventure"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p>Upload images here</p>
|
||||||
|
<p>{adventureToEdit.id}</p>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="image">Image </label><br />
|
||||||
|
<div class="flex">
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="adventures?/image"
|
||||||
|
use:enhance={imageSubmit}
|
||||||
|
enctype="multipart/form-data"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
name="image"
|
||||||
|
class="file-input file-input-bordered w-full max-w-xs"
|
||||||
|
bind:this={fileInput}
|
||||||
|
accept="image/*"
|
||||||
|
id="image"
|
||||||
|
/>
|
||||||
|
<input type="hidden" name="adventure" value={adventureToEdit.id} id="adventure" />
|
||||||
|
<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class=" inline-flex gap-2">
|
||||||
|
{#each images as image}
|
||||||
|
<img src={image.image} alt={image.id} class="w-32 h-32" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,6 @@
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
import { addToast } from '$lib/toasts';
|
import { addToast } from '$lib/toasts';
|
||||||
import PointSelectionModal from './PointSelectionModal.svelte';
|
|
||||||
import ImageFetcher from './ImageFetcher.svelte';
|
|
||||||
|
|
||||||
export let type: string = 'visited';
|
export let type: string = 'visited';
|
||||||
|
|
||||||
|
|
@ -13,20 +11,13 @@
|
||||||
export let latitude: number | null = null;
|
export let latitude: number | null = null;
|
||||||
export let collection_id: string | null = null;
|
export let collection_id: string | null = null;
|
||||||
|
|
||||||
import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
|
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
|
||||||
let markers: Point[] = [];
|
let markers: Point[] = [];
|
||||||
let query: string = '';
|
let query: string = '';
|
||||||
let places: OpenStreetMapPlace[] = [];
|
let places: OpenStreetMapPlace[] = [];
|
||||||
|
let images: { id: string; image: string }[] = [];
|
||||||
|
|
||||||
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 Star from '~icons/mdi/star';
|
|
||||||
import Attachment from '~icons/mdi/attachment';
|
|
||||||
import Map from '~icons/mdi/map';
|
|
||||||
import Earth from '~icons/mdi/earth';
|
import Earth from '~icons/mdi/earth';
|
||||||
import Wikipedia from '~icons/mdi/wikipedia';
|
|
||||||
import ActivityComplete from './ActivityComplete.svelte';
|
import ActivityComplete from './ActivityComplete.svelte';
|
||||||
import { appVersion } from '$lib/config';
|
import { appVersion } from '$lib/config';
|
||||||
|
|
||||||
|
|
@ -57,6 +48,11 @@
|
||||||
reverseGeocode();
|
reverseGeocode();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function saveAndClose() {
|
||||||
|
dispatch('create', newAdventure);
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
|
||||||
$: if (markers.length > 0) {
|
$: if (markers.length > 0) {
|
||||||
newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
|
newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
|
||||||
newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
|
newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
|
||||||
|
|
@ -104,12 +100,8 @@
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
let image: File;
|
|
||||||
let fileInput: HTMLInputElement;
|
let fileInput: HTMLInputElement;
|
||||||
|
|
||||||
let isPointModalOpen: boolean = false;
|
|
||||||
let isImageFetcherOpen: boolean = false;
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
let modal: HTMLDialogElement;
|
let modal: HTMLDialogElement;
|
||||||
|
|
||||||
|
|
@ -147,8 +139,13 @@
|
||||||
function imageSubmit() {
|
function imageSubmit() {
|
||||||
return async ({ result }: any) => {
|
return async ({ result }: any) => {
|
||||||
if (result.type === 'success') {
|
if (result.type === 'success') {
|
||||||
if (result.data.success) {
|
if (result.data.id && result.data.image) {
|
||||||
newAdventure.images.push(result.data.id);
|
newAdventure.images = [...newAdventure.images, result.data];
|
||||||
|
images = [...images, result.data];
|
||||||
|
addToast('success', 'Image uploaded');
|
||||||
|
|
||||||
|
fileInput.value = '';
|
||||||
|
console.log(newAdventure);
|
||||||
} else {
|
} else {
|
||||||
addToast('error', result.data.error || 'Failed to upload image');
|
addToast('error', result.data.error || 'Failed to upload image');
|
||||||
}
|
}
|
||||||
|
|
@ -191,7 +188,7 @@
|
||||||
>
|
>
|
||||||
<!-- Grid layout for form fields -->
|
<!-- Grid layout for form fields -->
|
||||||
<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
|
<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
|
||||||
<div>
|
<div>
|
||||||
<label for="name">Name</label><br />
|
<label for="name">Name</label><br />
|
||||||
<input
|
<input
|
||||||
|
|
@ -329,6 +326,8 @@
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<!-- link -->
|
<!-- link -->
|
||||||
<div>
|
<div>
|
||||||
<label for="link">Link</label><br />
|
<label for="link">Link</label><br />
|
||||||
|
|
@ -340,6 +339,8 @@
|
||||||
class="input input-bordered w-full"
|
class="input input-bordered w-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<label for="is_public"
|
<label for="is_public"
|
||||||
|
|
@ -361,7 +362,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-2xl font-semibold mb-2">Location Information</h2>
|
<div class="divider"></div>
|
||||||
|
<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<div>
|
<div>
|
||||||
<label for="latitude">Location</label><br />
|
<label for="latitude">Location</label><br />
|
||||||
|
|
@ -451,11 +453,26 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
||||||
use:enhance={imageSubmit}
|
use:enhance={imageSubmit}
|
||||||
enctype="multipart/form-data"
|
enctype="multipart/form-data"
|
||||||
>
|
>
|
||||||
<input type="file" name="image" bind:this={fileInput} accept="image/*" id="image" />
|
<input
|
||||||
|
type="file"
|
||||||
|
name="image"
|
||||||
|
class="file-input file-input-bordered w-full max-w-xs"
|
||||||
|
bind:this={fileInput}
|
||||||
|
accept="image/*"
|
||||||
|
id="image"
|
||||||
|
/>
|
||||||
<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
|
<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
|
||||||
<button type="submit">Upload Image</button>
|
<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<div class=" inline-flex gap-2">
|
||||||
|
{#each images as image}
|
||||||
|
<img src={image.image} alt={image.id} class="w-32 h-32" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue