mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-24 15:29:36 +02:00
new adventure modal
This commit is contained in:
Sean Morley
parent
c35795144e
commit
f0efdaa933
10 changed files with 197 additions and 806 deletions
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
export let longitude: number | null = null;
|
||||
export let latitude: number | null = null;
|
||||
export let collection_id: string | null = null;
|
||||
|
||||
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
|
||||
let markers: Point[] = [];
|
||||
|
|
@ -24,38 +25,56 @@
|
|||
|
||||
let noPlaces: boolean = false;
|
||||
|
||||
export let adventureToEdit: Adventure;
|
||||
export let adventureToEdit: Adventure | null = null;
|
||||
|
||||
let adventure: Adventure = {
|
||||
id: adventureToEdit?.id || '',
|
||||
name: adventureToEdit?.name || '',
|
||||
type: adventureToEdit?.type || 'visited',
|
||||
date: adventureToEdit?.date || null,
|
||||
link: adventureToEdit?.link || null,
|
||||
description: adventureToEdit?.description || null,
|
||||
activity_types: adventureToEdit?.activity_types || [],
|
||||
rating: adventureToEdit?.rating || NaN,
|
||||
is_public: adventureToEdit?.is_public || false,
|
||||
latitude: adventureToEdit?.latitude || NaN,
|
||||
longitude: adventureToEdit?.longitude || NaN,
|
||||
location: adventureToEdit?.location || null,
|
||||
images: adventureToEdit?.images || [],
|
||||
user_id: adventureToEdit?.user_id || null,
|
||||
collection: adventureToEdit?.collection || collection_id || null
|
||||
};
|
||||
|
||||
let url: string = '';
|
||||
let imageError: string = '';
|
||||
let wikiImageError: string = '';
|
||||
|
||||
images = adventureToEdit.images || [];
|
||||
images = adventure.images || [];
|
||||
|
||||
if (adventureToEdit.longitude && adventureToEdit.latitude) {
|
||||
if (adventure.longitude && adventure.latitude) {
|
||||
markers = [
|
||||
{
|
||||
lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
|
||||
location: adventureToEdit.location || '',
|
||||
name: adventureToEdit.name,
|
||||
lngLat: { lng: adventure.longitude, lat: adventure.latitude },
|
||||
location: adventure.location || '',
|
||||
name: adventure.name,
|
||||
activity_type: ''
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
if (longitude && latitude) {
|
||||
adventureToEdit.latitude = latitude;
|
||||
adventureToEdit.longitude = longitude;
|
||||
adventure.latitude = latitude;
|
||||
adventure.longitude = longitude;
|
||||
reverseGeocode();
|
||||
}
|
||||
|
||||
$: {
|
||||
if (!adventureToEdit.rating) {
|
||||
adventureToEdit.rating = NaN;
|
||||
if (!adventure.rating) {
|
||||
adventure.rating = NaN;
|
||||
}
|
||||
}
|
||||
|
||||
let imageSearch: string = adventureToEdit.name || '';
|
||||
let imageSearch: string = adventure.name || '';
|
||||
|
||||
async function removeImage(id: string) {
|
||||
let res = await fetch(`/api/images/${id}/image_delete`, {
|
||||
|
|
@ -63,7 +82,7 @@
|
|||
});
|
||||
if (res.status === 204) {
|
||||
images = images.filter((image) => image.id !== id);
|
||||
adventureToEdit.images = images;
|
||||
adventure.images = images;
|
||||
console.log(images);
|
||||
addToast('success', 'Image removed');
|
||||
} else {
|
||||
|
|
@ -74,18 +93,18 @@
|
|||
let isDetails: boolean = true;
|
||||
|
||||
function saveAndClose() {
|
||||
dispatch('saveEdit', adventureToEdit);
|
||||
dispatch('save', adventure);
|
||||
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;
|
||||
adventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
|
||||
adventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
|
||||
if (!adventure.location) {
|
||||
adventure.location = markers[0].location;
|
||||
}
|
||||
if (!adventureToEdit.name) {
|
||||
adventureToEdit.name = markers[0].name;
|
||||
if (!adventure.name) {
|
||||
adventure.name = markers[0].name;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +118,7 @@
|
|||
let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
|
||||
let formData = new FormData();
|
||||
formData.append('image', file);
|
||||
formData.append('adventure', adventureToEdit.id);
|
||||
formData.append('adventure', adventure.id);
|
||||
let res2 = await fetch(`/adventures?/image`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
|
|
@ -108,7 +127,7 @@
|
|||
console.log(data2);
|
||||
if (data2.type === 'success') {
|
||||
images = [...images, data2];
|
||||
adventureToEdit.images = images;
|
||||
adventure.images = images;
|
||||
addToast('success', 'Image uploaded');
|
||||
} else {
|
||||
addToast('error', 'Failed to upload image');
|
||||
|
|
@ -129,7 +148,7 @@
|
|||
let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
|
||||
let formData = new FormData();
|
||||
formData.append('image', file);
|
||||
formData.append('adventure', adventureToEdit.id);
|
||||
formData.append('adventure', adventure.id);
|
||||
let res2 = await fetch(`/adventures?/image`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
|
|
@ -140,7 +159,7 @@
|
|||
let newImage = { id: newData.data.id, image: newData.data.image };
|
||||
console.log(newImage);
|
||||
images = [...images, newImage];
|
||||
adventureToEdit.images = images;
|
||||
adventure.images = images;
|
||||
addToast('success', 'Image uploaded');
|
||||
} else {
|
||||
addToast('error', 'Failed to upload image');
|
||||
|
|
@ -173,7 +192,7 @@
|
|||
|
||||
async function reverseGeocode() {
|
||||
let res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?q=${adventureToEdit.latitude},${adventureToEdit.longitude}&format=jsonv2`,
|
||||
`https://nominatim.openstreetmap.org/search?q=${adventure.latitude},${adventure.longitude}&format=jsonv2`,
|
||||
{
|
||||
headers: {
|
||||
'User-Agent': `AdventureLog / ${appVersion} `
|
||||
|
|
@ -182,9 +201,19 @@
|
|||
);
|
||||
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 || '';
|
||||
adventure.name = data[0]?.name || '';
|
||||
adventure.activity_types?.push(data[0]?.type || '');
|
||||
adventure.location = data[0]?.display_name || '';
|
||||
if (longitude && latitude) {
|
||||
markers = [
|
||||
{
|
||||
lngLat: { lng: longitude, lat: latitude },
|
||||
location: data[0]?.display_name || '',
|
||||
name: data[0]?.name || '',
|
||||
activity_type: data[0]?.type || ''
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
console.log(data);
|
||||
}
|
||||
|
|
@ -229,12 +258,12 @@
|
|||
return async ({ result }: any) => {
|
||||
if (result.type === 'success') {
|
||||
if (result.data.id && result.data.image) {
|
||||
adventureToEdit.images = [...adventureToEdit.images, result.data];
|
||||
adventure.images = [...adventure.images, result.data];
|
||||
images = [...images, result.data];
|
||||
addToast('success', 'Image uploaded');
|
||||
|
||||
fileInput.value = '';
|
||||
console.log(adventureToEdit);
|
||||
console.log(adventure);
|
||||
} else {
|
||||
addToast('error', result.data.error || 'Failed to upload image');
|
||||
}
|
||||
|
|
@ -244,23 +273,41 @@
|
|||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log(adventureToEdit);
|
||||
let res = await fetch(`/api/adventures/${adventureToEdit.id}`, {
|
||||
method: 'PUT',
|
||||
console.log(adventure);
|
||||
if (adventure.id === '') {
|
||||
let res = await fetch('/api/adventures', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(adventureToEdit)
|
||||
body: JSON.stringify(adventure)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
adventureToEdit = data as Adventure;
|
||||
adventure = data as Adventure;
|
||||
isDetails = false;
|
||||
addToast('success', 'Adventure created');
|
||||
} else {
|
||||
addToast('error', 'Failed to create adventure');
|
||||
}
|
||||
} else {
|
||||
let res = await fetch(`/api/adventures/${adventure.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(adventure)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
adventure = data as Adventure;
|
||||
isDetails = false;
|
||||
addToast('success', 'Adventure updated');
|
||||
} else {
|
||||
addToast('error', 'Failed to update adventure');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
|
|
@ -268,8 +315,8 @@
|
|||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
|
||||
{#if adventureToEdit.id === '' || isDetails}
|
||||
<h3 class="font-bold text-lg">Edit {adventure.type} Adventure</h3>
|
||||
{#if adventure.id === '' || isDetails}
|
||||
<div class="modal-action items-center">
|
||||
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
||||
<!-- Grid layout for form fields -->
|
||||
|
|
@ -281,7 +328,7 @@
|
|||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={adventureToEdit.name}
|
||||
bind:value={adventure.name}
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
|
|
@ -294,8 +341,8 @@
|
|||
type="radio"
|
||||
name="radio-10"
|
||||
class="radio checked:bg-red-500"
|
||||
on:click={() => (adventureToEdit.type = 'visited')}
|
||||
checked={adventureToEdit.type == 'visited'}
|
||||
on:click={() => (adventure.type = 'visited')}
|
||||
checked={adventure.type == 'visited'}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -306,8 +353,8 @@
|
|||
type="radio"
|
||||
name="radio-10"
|
||||
class="radio checked:bg-blue-500"
|
||||
on:click={() => (adventureToEdit.type = 'planned')}
|
||||
checked={adventureToEdit.type == 'planned'}
|
||||
on:click={() => (adventure.type = 'planned')}
|
||||
checked={adventure.type == 'planned'}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -321,7 +368,7 @@
|
|||
name="date"
|
||||
min={startDate || ''}
|
||||
max={endDate || ''}
|
||||
bind:value={adventureToEdit.date}
|
||||
bind:value={adventure.date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -333,7 +380,7 @@
|
|||
type="text"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={adventureToEdit.link}
|
||||
bind:value={adventure.link}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -343,7 +390,7 @@
|
|||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={adventureToEdit.description}
|
||||
bind:value={adventure.description}
|
||||
class="textarea textarea-bordered w-full h-32"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -354,10 +401,10 @@
|
|||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={adventureToEdit.activity_types}
|
||||
bind:value={adventure.activity_types}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
|
||||
<ActivityComplete bind:activities={adventure.activity_types} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="rating"
|
||||
|
|
@ -368,7 +415,7 @@
|
|||
min="0"
|
||||
max="5"
|
||||
hidden
|
||||
bind:value={adventureToEdit.rating}
|
||||
bind:value={adventure.rating}
|
||||
id="rating"
|
||||
name="rating"
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
|
|
@ -378,48 +425,48 @@
|
|||
type="radio"
|
||||
name="rating-2"
|
||||
class="rating-hidden"
|
||||
checked={Number.isNaN(adventureToEdit.rating)}
|
||||
checked={Number.isNaN(adventure.rating)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (adventureToEdit.rating = 1)}
|
||||
checked={adventureToEdit.rating === 1}
|
||||
on:click={() => (adventure.rating = 1)}
|
||||
checked={adventure.rating === 1}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (adventureToEdit.rating = 2)}
|
||||
checked={adventureToEdit.rating === 2}
|
||||
on:click={() => (adventure.rating = 2)}
|
||||
checked={adventure.rating === 2}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (adventureToEdit.rating = 3)}
|
||||
checked={adventureToEdit.rating === 3}
|
||||
on:click={() => (adventure.rating = 3)}
|
||||
checked={adventure.rating === 3}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (adventureToEdit.rating = 4)}
|
||||
checked={adventureToEdit.rating === 4}
|
||||
on:click={() => (adventure.rating = 4)}
|
||||
checked={adventure.rating === 4}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (adventureToEdit.rating = 5)}
|
||||
checked={adventureToEdit.rating === 5}
|
||||
on:click={() => (adventure.rating = 5)}
|
||||
checked={adventure.rating === 5}
|
||||
/>
|
||||
{#if adventureToEdit.rating}
|
||||
{#if adventure.rating}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error ml-2"
|
||||
on:click={() => (adventureToEdit.rating = NaN)}
|
||||
on:click={() => (adventure.rating = NaN)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
|
|
@ -436,7 +483,7 @@
|
|||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
name="is_public"
|
||||
bind:checked={adventureToEdit.is_public}
|
||||
bind:checked={adventure.is_public}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -451,7 +498,7 @@
|
|||
type="text"
|
||||
id="location"
|
||||
name="location"
|
||||
bind:value={adventureToEdit.location}
|
||||
bind:value={adventure.location}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -518,18 +565,18 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
|||
<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 adventure.is_public}
|
||||
<div class="bg-neutral p-4 mt-2 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}
|
||||
{window.location.origin}/adventures/{adventure.id}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/adventures/${adventureToEdit.id}`
|
||||
`${window.location.origin}/adventures/${adventure.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"
|
||||
|
|
@ -549,7 +596,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
|||
<div class="flex">
|
||||
<form
|
||||
method="POST"
|
||||
action="adventures?/image"
|
||||
action="/adventures?/image"
|
||||
use:enhance={imageSubmit}
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
|
|
@ -561,7 +608,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
|||
accept="image/*"
|
||||
id="image"
|
||||
/>
|
||||
<input type="hidden" name="adventure" value={adventureToEdit.id} id="adventure" />
|
||||
<input type="hidden" name="adventure" value={adventure.id} id="adventure" />
|
||||
<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,610 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import { deserialize, enhance } from '$app/forms';
|
||||
import { addToast } from '$lib/toasts';
|
||||
|
||||
export let type: string = 'visited';
|
||||
|
||||
export let longitude: number | null = null;
|
||||
export let latitude: number | null = null;
|
||||
export let collection_id: string | 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 endDate: string | null = null;
|
||||
|
||||
let noPlaces: boolean = false;
|
||||
let wikiError: string = '';
|
||||
let wikiImageError: string = '';
|
||||
|
||||
let newAdventure: Adventure = {
|
||||
id: '',
|
||||
type: type,
|
||||
name: '',
|
||||
location: null,
|
||||
date: null,
|
||||
description: '',
|
||||
activity_types: [],
|
||||
rating: NaN,
|
||||
link: '',
|
||||
images: [],
|
||||
user_id: NaN,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
is_public: false,
|
||||
collection: collection_id || ''
|
||||
};
|
||||
|
||||
if (longitude && latitude) {
|
||||
newAdventure.latitude = latitude;
|
||||
newAdventure.longitude = longitude;
|
||||
reverseGeocode();
|
||||
}
|
||||
|
||||
function saveAndClose() {
|
||||
dispatch('create', newAdventure);
|
||||
close();
|
||||
}
|
||||
|
||||
$: if (markers.length > 0) {
|
||||
newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
|
||||
newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
|
||||
// if (!newAdventure.location) {
|
||||
newAdventure.location = markers[0].location;
|
||||
// }
|
||||
|
||||
newAdventure.name = markers[0].name;
|
||||
}
|
||||
|
||||
let url: string = '';
|
||||
let imageSearch: string = '';
|
||||
let imageError: string = '';
|
||||
|
||||
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;
|
||||
|
||||
if (data.length === 0) {
|
||||
noPlaces = true;
|
||||
} else {
|
||||
noPlaces = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchImage() {
|
||||
let res = await fetch(url);
|
||||
let data = await res.blob();
|
||||
if (!data) {
|
||||
imageError = 'No image found at that URL.';
|
||||
return;
|
||||
}
|
||||
let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
|
||||
let formData = new FormData();
|
||||
formData.append('image', file);
|
||||
formData.append('adventure', newAdventure.id);
|
||||
let res2 = await fetch(`/adventures?/image`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
let data2 = await res2.json();
|
||||
console.log(data2);
|
||||
if (data2.type === 'success') {
|
||||
images = [...images, data2];
|
||||
newAdventure.images = images;
|
||||
addToast('success', 'Image uploaded');
|
||||
} else {
|
||||
addToast('error', 'Failed to upload image');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchWikiImage() {
|
||||
let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
|
||||
let data = await res.json();
|
||||
if (!res.ok) {
|
||||
wikiImageError = 'Failed to fetch image';
|
||||
return;
|
||||
}
|
||||
if (data.source) {
|
||||
let imageUrl = data.source;
|
||||
let res = await fetch(imageUrl);
|
||||
|
||||
let blob = await res.blob();
|
||||
let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
|
||||
let formData = new FormData();
|
||||
formData.append('image', file);
|
||||
formData.append('adventure', newAdventure.id);
|
||||
let res2 = await fetch(`/adventures?/image`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
if (res2.ok) {
|
||||
let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
|
||||
console.log(newData);
|
||||
let newImage = { id: newData.data.id, image: newData.data.image };
|
||||
console.log(newImage);
|
||||
images = [...images, newImage];
|
||||
newAdventure.images = images;
|
||||
addToast('success', 'Image uploaded');
|
||||
} else {
|
||||
addToast('error', 'Failed to upload image');
|
||||
wikiImageError = 'Failed to upload image';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function removeImage(id: string) {
|
||||
let res = await fetch(`/api/images/${id}/image_delete`, {
|
||||
method: 'POST'
|
||||
});
|
||||
if (res.status === 204) {
|
||||
images = images.filter((image) => image.id !== id);
|
||||
newAdventure.images = images;
|
||||
console.log(images);
|
||||
addToast('success', 'Image removed');
|
||||
} else {
|
||||
addToast('error', 'Failed to remove image');
|
||||
}
|
||||
}
|
||||
|
||||
async function reverseGeocode() {
|
||||
let res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
|
||||
{
|
||||
headers: {
|
||||
'User-Agent': `AdventureLog / ${appVersion} `
|
||||
}
|
||||
}
|
||||
);
|
||||
let data = (await res.json()) as OpenStreetMapPlace[];
|
||||
if (data.length > 0) {
|
||||
newAdventure.name = data[0]?.name || '';
|
||||
newAdventure.activity_types?.push(data[0]?.type || '');
|
||||
newAdventure.location = data[0]?.display_name || '';
|
||||
}
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
let fileInput: HTMLInputElement;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function generateDesc() {
|
||||
let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
|
||||
let data = await res.json();
|
||||
if (data.extract && data.extract.length > 0) {
|
||||
newAdventure.description = data.extract;
|
||||
wikiError = '';
|
||||
} else {
|
||||
wikiError = 'No description found';
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
newAdventure.images = [...newAdventure.images, result.data];
|
||||
images = [...images, result.data];
|
||||
addToast('success', 'Image uploaded');
|
||||
|
||||
fileInput.value = '';
|
||||
console.log(newAdventure);
|
||||
} else {
|
||||
addToast('error', result.data.error || 'Failed to upload image');
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log(newAdventure);
|
||||
let res = await fetch('/api/adventures/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(newAdventure)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
newAdventure = data as Adventure;
|
||||
imageSearch = newAdventure.name;
|
||||
} else {
|
||||
addToast('error', 'Failed to create adventure');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">New {newAdventure.type} Adventure</h3>
|
||||
{#if newAdventure.id === ''}
|
||||
<div class="modal-action items-center">
|
||||
<form
|
||||
method="post"
|
||||
style="width: 100%;"
|
||||
on:submit={handleSubmit}
|
||||
action="/adventures/create"
|
||||
>
|
||||
<!-- Grid layout for form fields -->
|
||||
<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 xl:grid-cols-3"> -->
|
||||
<div>
|
||||
<label for="name">Name</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={newAdventure.name}
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">Visited</span>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio-10"
|
||||
class="radio checked:bg-red-500"
|
||||
on:click={() => (newAdventure.type = 'visited')}
|
||||
checked={newAdventure.type == 'visited'}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">Planned</span>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio-10"
|
||||
class="radio checked:bg-blue-500"
|
||||
on:click={() => (newAdventure.type = 'planned')}
|
||||
checked={newAdventure.type == 'planned'}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="date">Date</label><br />
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
min={startDate || ''}
|
||||
max={endDate || ''}
|
||||
bind:value={newAdventure.date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description">Description</label><br />
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={newAdventure.description}
|
||||
class="textarea textarea-bordered w-full h-32"
|
||||
></textarea>
|
||||
<button class="btn btn-neutral" type="button" on:click={generateDesc}
|
||||
>Search Wikipedia</button
|
||||
>
|
||||
<p class="text-red-500">{wikiError}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="activity_types">Activity Types</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={newAdventure.activity_types}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<ActivityComplete bind:activities={newAdventure.activity_types} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="rating"
|
||||
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
|
||||
><br />
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="5"
|
||||
hidden
|
||||
bind:value={newAdventure.rating}
|
||||
id="rating"
|
||||
name="rating"
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<div class="rating -ml-3 mt-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="rating-hidden"
|
||||
checked={Number.isNaN(newAdventure.rating)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (newAdventure.rating = 1)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (newAdventure.rating = 2)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (newAdventure.rating = 3)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (newAdventure.rating = 4)}
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-2"
|
||||
class="mask mask-star-2 bg-orange-400"
|
||||
on:click={() => (newAdventure.rating = 5)}
|
||||
/>
|
||||
{#if newAdventure.rating}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error ml-2"
|
||||
on:click={() => (newAdventure.rating = NaN)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- link -->
|
||||
<div>
|
||||
<label for="link">Link</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={newAdventure.link}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="mt-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={newAdventure.is_public}
|
||||
/>
|
||||
</div>
|
||||
{#if newAdventure.is_public}
|
||||
<p>
|
||||
The link to this adventure will be copied to your clipboard once it is created!
|
||||
</p>
|
||||
{/if}
|
||||
</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={newAdventure.location}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<form on:submit={geocode} class="mt-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Seach for a location"
|
||||
class="input input-bordered w-full max-w-xs mb-2"
|
||||
id="search"
|
||||
name="search"
|
||||
bind:value={query}
|
||||
/>
|
||||
<button class="btn btn-neutral -mt-1" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
{#if places.length > 0}
|
||||
<div class="mt-4 max-w-full">
|
||||
<h3 class="font-bold text-lg mb-4">Search Results</h3>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
{#each places as place}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
|
||||
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>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if noPlaces}
|
||||
<p class="text-error text-lg">No results found</p>
|
||||
{/if}
|
||||
<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">Create</button>
|
||||
<button type="button" class="btn" on:click={close}>Close</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
<p>Upload images here</p>
|
||||
<!-- <p>{newAdventure.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={newAdventure.id} id="adventure" />
|
||||
<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label for="url">URL</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="url"
|
||||
name="url"
|
||||
bind:value={url}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
|
||||
>Fetch Image</button
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label for="name">Wikipedia</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={imageSearch}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
|
||||
>Fetch Image</button
|
||||
>
|
||||
<p class="text-red-500">{wikiImageError}</p>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
{#if images.length > 0}
|
||||
<h1 class="font-semibold text-xl">My Images</h1>
|
||||
{:else}
|
||||
<h1 class="font-semibold text-xl">No Images</h1>
|
||||
{/if}
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
{#each images as image}
|
||||
<div class="relative h-32 w-32">
|
||||
<button
|
||||
type="button"
|
||||
class="absolute top-0 left-0 btn btn-error btn-sm z-10"
|
||||
on:click={() => removeImage(image.id)}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -11,7 +11,7 @@ export type User = {
|
|||
|
||||
export type Adventure = {
|
||||
id: string;
|
||||
user_id: number;
|
||||
user_id: number | null;
|
||||
type: string;
|
||||
name: string;
|
||||
location?: string | null;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import type { Adventure } from '$lib/types';
|
||||
|
||||
|
|
@ -95,31 +94,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
let adventureToEdit: Adventure;
|
||||
let isEditModalOpen: boolean = false;
|
||||
let adventureToEdit: Adventure | null = null;
|
||||
let isAdventureModalOpen: boolean = false;
|
||||
|
||||
function deleteAdventure(event: CustomEvent<string>) {
|
||||
adventures = adventures.filter((adventure) => adventure.id !== event.detail);
|
||||
}
|
||||
|
||||
function createAdventure(event: CustomEvent<Adventure>) {
|
||||
adventures = [event.detail, ...adventures];
|
||||
isShowingCreateModal = false;
|
||||
}
|
||||
|
||||
function editAdventure(event: CustomEvent<Adventure>) {
|
||||
adventureToEdit = event.detail;
|
||||
isEditModalOpen = true;
|
||||
}
|
||||
|
||||
function saveEdit(event: CustomEvent<Adventure>) {
|
||||
// function that save changes to an existing adventure or creates a new one if it doesn't exist
|
||||
function saveOrCreate(event: CustomEvent<Adventure>) {
|
||||
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
|
||||
adventures = adventures.map((adventure) => {
|
||||
if (adventure.id === event.detail.id) {
|
||||
return event.detail;
|
||||
}
|
||||
return adventure;
|
||||
});
|
||||
isEditModalOpen = false;
|
||||
} else {
|
||||
adventures = [event.detail, ...adventures];
|
||||
}
|
||||
isAdventureModalOpen = false;
|
||||
}
|
||||
|
||||
function editAdventure(event: CustomEvent<Adventure>) {
|
||||
adventureToEdit = event.detail;
|
||||
isAdventureModalOpen = true;
|
||||
}
|
||||
|
||||
let sidebarOpen = false;
|
||||
|
|
@ -129,19 +128,11 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if isShowingCreateModal}
|
||||
<NewAdventure
|
||||
type={newType}
|
||||
on:create={createAdventure}
|
||||
on:close={() => (isShowingCreateModal = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<EditAdventure
|
||||
{#if isAdventureModalOpen}
|
||||
<AdventureModal
|
||||
{adventureToEdit}
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
on:saveEdit={saveEdit}
|
||||
on:close={() => (isAdventureModalOpen = false)}
|
||||
on:save={saveOrCreate}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
@ -160,21 +151,14 @@
|
|||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
isAdventureModalOpen = true;
|
||||
newType = 'visited';
|
||||
adventureToEdit = null;
|
||||
}}
|
||||
>
|
||||
Visited Adventure</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
newType = 'planned';
|
||||
}}
|
||||
>
|
||||
Planned Adventure</button
|
||||
Adventure</button
|
||||
>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-primary"
|
||||
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@
|
|||
let isEditModalOpen: boolean = false;
|
||||
|
||||
import ClipboardList from '~icons/mdi/clipboard-list';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import EditAdventure from '$lib/components/AdventureModal.svelte';
|
||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
|
||||
onMount(() => {
|
||||
if (data.props.adventure) {
|
||||
|
|
@ -75,10 +76,10 @@
|
|||
{/if}
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<EditAdventure
|
||||
<AdventureModal
|
||||
adventureToEdit={adventure}
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
on:saveEdit={saveEdit}
|
||||
on:save={saveEdit}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { enhance, deserialize } from '$app/forms';
|
||||
import { enhance } from '$app/forms';
|
||||
import { goto } from '$app/navigation';
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import CollectionCard from '$lib/components/CollectionCard.svelte';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import EditCollection from '$lib/components/EditCollection.svelte';
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import NewCollection from '$lib/components/NewCollection.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
import type { Collection } from '$lib/types';
|
||||
|
||||
import Plus from '~icons/mdi/plus';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
import Plus from '~icons/mdi/plus';
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import AdventureLink from '$lib/components/AdventureLink.svelte';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
|
||||
import TransportationCard from '$lib/components/TransportationCard.svelte';
|
||||
import EditTransportation from '$lib/components/EditTransportation.svelte';
|
||||
|
|
@ -26,6 +24,7 @@
|
|||
} from '$lib';
|
||||
import ChecklistCard from '$lib/components/ChecklistCard.svelte';
|
||||
import ChecklistModal from '$lib/components/ChecklistModal.svelte';
|
||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
console.log(data);
|
||||
|
|
@ -83,11 +82,6 @@
|
|||
adventures = adventures.filter((a) => a.id !== event.detail);
|
||||
}
|
||||
|
||||
function createAdventure(event: CustomEvent<Adventure>) {
|
||||
adventures = [event.detail, ...adventures];
|
||||
isShowingCreateModal = false;
|
||||
}
|
||||
|
||||
async function addAdventure(event: CustomEvent<Adventure>) {
|
||||
console.log(event.detail);
|
||||
if (adventures.find((a) => a.id === event.detail.id)) {
|
||||
|
|
@ -124,9 +118,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
let adventureToEdit: Adventure;
|
||||
let adventureToEdit: Adventure | null = null;
|
||||
let transportationToEdit: Transportation;
|
||||
let isEditModalOpen: boolean = false;
|
||||
let isAdventureModalOpen: boolean = false;
|
||||
let isTransportationEditModalOpen: boolean = false;
|
||||
let isNoteModalOpen: boolean = false;
|
||||
let noteToEdit: Note | null;
|
||||
|
|
@ -136,7 +130,7 @@
|
|||
|
||||
function editAdventure(event: CustomEvent<Adventure>) {
|
||||
adventureToEdit = event.detail;
|
||||
isEditModalOpen = true;
|
||||
isAdventureModalOpen = true;
|
||||
}
|
||||
|
||||
function saveNewTransportation(event: CustomEvent<Transportation>) {
|
||||
|
|
@ -149,14 +143,18 @@
|
|||
isTransportationEditModalOpen = false;
|
||||
}
|
||||
|
||||
function saveEdit(event: CustomEvent<Adventure>) {
|
||||
function saveOrCreate(event: CustomEvent<Adventure>) {
|
||||
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
|
||||
adventures = adventures.map((adventure) => {
|
||||
if (adventure.id === event.detail.id) {
|
||||
return event.detail;
|
||||
}
|
||||
return adventure;
|
||||
});
|
||||
isEditModalOpen = false;
|
||||
} else {
|
||||
adventures = [event.detail, ...adventures];
|
||||
}
|
||||
isAdventureModalOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -180,13 +178,12 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<EditAdventure
|
||||
{#if isAdventureModalOpen}
|
||||
<AdventureModal
|
||||
{adventureToEdit}
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
on:saveEdit={saveEdit}
|
||||
startDate={collection.start_date}
|
||||
endDate={collection.end_date}
|
||||
on:close={() => (isAdventureModalOpen = false)}
|
||||
on:save={saveOrCreate}
|
||||
collection_id={collection.id}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
@ -235,17 +232,6 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowingCreateModal}
|
||||
<NewAdventure
|
||||
type={newType}
|
||||
collection_id={collection.id}
|
||||
on:create={createAdventure}
|
||||
on:close={() => (isShowingCreateModal = false)}
|
||||
startDate={collection.start_date}
|
||||
endDate={collection.end_date}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowingTransportationModal}
|
||||
<NewTransportation
|
||||
on:close={() => (isShowingTransportationModal = false)}
|
||||
|
|
@ -312,21 +298,13 @@
|
|||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
newType = 'visited';
|
||||
isAdventureModalOpen = true;
|
||||
adventureToEdit = null;
|
||||
}}
|
||||
>
|
||||
Visited Adventure</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
newType = 'planned';
|
||||
}}
|
||||
>
|
||||
Planned Adventure</button
|
||||
Adventure</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { enhance, deserialize } from '$app/forms';
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import CollectionCard from '$lib/components/CollectionCard.svelte';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import EditCollection from '$lib/components/EditCollection.svelte';
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import NewCollection from '$lib/components/NewCollection.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
|
||||
import Plus from '~icons/mdi/plus';
|
||||
import type { Collection } from '$lib/types';
|
||||
|
||||
export let data: any;
|
||||
console.log(data);
|
||||
|
||||
let collections: Collection[] = data.props.adventures || [];
|
||||
|
||||
function deleteCollection(event: CustomEvent<number>) {
|
||||
function deleteCollection(event: CustomEvent<string>) {
|
||||
collections = collections.filter((collection) => collection.id !== event.detail);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
// @ts-nocheck
|
||||
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
import {
|
||||
DefaultMarker,
|
||||
MapEvents,
|
||||
|
|
@ -142,11 +141,11 @@
|
|||
</div>
|
||||
|
||||
{#if createModalOpen}
|
||||
<NewAdventure
|
||||
<AdventureModal
|
||||
on:close={() => (createModalOpen = false)}
|
||||
longitude={newLongitude}
|
||||
on:save={createNewAdventure}
|
||||
latitude={newLatitude}
|
||||
on:create={createNewAdventure}
|
||||
longitude={newLongitude}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
import type { Adventure, OpenStreetMapPlace } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import EditAdventure from '$lib/components/AdventureModal.svelte';
|
||||
import { appVersion } from '$lib/config';
|
||||
import { goto } from '$app/navigation';
|
||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
|
|
@ -59,29 +60,31 @@
|
|||
}
|
||||
|
||||
let adventureToEdit: Adventure;
|
||||
let isEditModalOpen: boolean = false;
|
||||
let isAdventureModalOpen: boolean = false;
|
||||
|
||||
function editAdventure(event: CustomEvent<Adventure>) {
|
||||
adventureToEdit = event.detail;
|
||||
isEditModalOpen = true;
|
||||
isAdventureModalOpen = true;
|
||||
}
|
||||
|
||||
function saveEdit(event: CustomEvent<Adventure>) {
|
||||
console.log(event.detail);
|
||||
myAdventures = myAdventures.map((adventure) => {
|
||||
if (adventure.id === event.detail.id) {
|
||||
return event.detail;
|
||||
}
|
||||
return adventure;
|
||||
});
|
||||
isEditModalOpen = false;
|
||||
isAdventureModalOpen = false;
|
||||
console.log(myAdventures);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<EditAdventure
|
||||
{#if isAdventureModalOpen}
|
||||
<AdventureModal
|
||||
{adventureToEdit}
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
on:saveEdit={saveEdit}
|
||||
on:close={() => (isAdventureModalOpen = false)}
|
||||
on:save={filterByProperty}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue