diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte index ef1cf0d..a19ee82 100644 --- a/frontend/src/lib/components/NewAdventure.svelte +++ b/frontend/src/lib/components/NewAdventure.svelte @@ -13,6 +13,11 @@ export let latitude: number | null = null; export let collection_id: string | null = null; + import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre'; + let markers: Point[] = []; + let query: string = ''; + let places: OpenStreetMapPlace[] = []; + import MapMarker from '~icons/mdi/map-marker'; import Calendar from '~icons/mdi/calendar'; import Notebook from '~icons/mdi/notebook'; @@ -32,13 +37,13 @@ id: '', type: type, name: '', - location: '', - date: '', + location: null, + date: null, description: '', activity_types: [], rating: NaN, link: '', - image: '', + images: [], user_id: NaN, latitude: null, longitude: null, @@ -52,6 +57,35 @@ reverseGeocode(); } + $: 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; + } + if (!newAdventure.name) { + newAdventure.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=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`, @@ -96,369 +130,333 @@ } } - async function generateDesc() { - let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`); - let data = await res.json(); - if (data.extract) { - newAdventure.description = data.extract; - } + // async function generateDesc() { + // let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`); + // let data = await res.json(); + // if (data.extract) { + // newAdventure.description = data.extract; + // } + // } + + function addMarker(e: CustomEvent) { + 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.success) { + newAdventure.images.push(result.data.id); + } else { + addToast('error', result.data.error || 'Failed to upload image'); + } + } + }; } 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 + console.log(newAdventure); + let res = await fetch('/api/adventures/', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newAdventure) }); - - if (response.ok) { - const result = await response.json(); - const data = JSON.parse(result.data); // Parsing the JSON string in the data field - - if (data[1] !== undefined) { - // these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure - console.log(data); - let id = data[1]; - let user_id = data[2]; - let image_url = data[3]; - let link = data[4]; - if (newAdventure.is_public) { - navigator.clipboard.writeText(`${window.location.origin}/adventures/${id}`); - } - newAdventure.image = image_url; - newAdventure.id = id; - newAdventure.user_id = user_id; - newAdventure.link = link; - // turn the activity_types string into an array by splitting it at the commas - if (typeof newAdventure.activity_types === 'string') { - newAdventure.activity_types = (newAdventure.activity_types as string) - .split(',') - .map((activity_type) => activity_type.trim()) - .filter((activity_type) => activity_type !== '' && activity_type !== ','); - - // Remove duplicates - newAdventure.activity_types = Array.from(new Set(newAdventure.activity_types)); - } - console.log(newAdventure); - dispatch('create', newAdventure); - addToast('success', 'Adventure created successfully!'); - close(); - } + let data = await res.json(); + if (data.id) { + newAdventure = data as Adventure; + } else { + addToast('error', 'Failed to create 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 - newAdventure.image = file; - } - isImageFetcherOpen = false; - } - - function setLongLat(event: CustomEvent) { - console.log(event.detail); - isPointModalOpen = false; - } -{#if isPointModalOpen} - (isPointModalOpen = false)} - on:submit={setLongLat} - bind:adventure={newAdventure} - /> -{/if} - -{#if isImageFetcherOpen} - (isImageFetcherOpen = false)} - /> -{/if} - -