diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/AdventureModal.svelte similarity index 75% rename from frontend/src/lib/components/EditAdventure.svelte rename to frontend/src/lib/components/AdventureModal.svelte index 985ef5b..64d94b9 100644 --- a/frontend/src/lib/components/EditAdventure.svelte +++ b/frontend/src/lib/components/AdventureModal.svelte @@ -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,21 +273,39 @@ async function handleSubmit(event: Event) { event.preventDefault(); - console.log(adventureToEdit); - let res = await fetch(`/api/adventures/${adventureToEdit.id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(adventureToEdit) - }); - let data = await res.json(); - if (data.id) { - adventureToEdit = data as Adventure; - isDetails = false; - addToast('success', 'Adventure updated'); + console.log(adventure); + if (adventure.id === '') { + let res = await fetch('/api/adventures', { + method: 'POST', + 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 created'); + } else { + addToast('error', 'Failed to create adventure'); + } } else { - addToast('error', 'Failed to update adventure'); + 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'); + } } } @@ -268,8 +315,8 @@
Share this Adventure!
- {window.location.origin}/adventures/{adventureToEdit.id} + {window.location.origin}/adventures/{adventure.id}