Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-28 09:19:37 +02:00
Code Issues Releases Activity

feat: Add location and activity type to Point type

Browse source 
chore: Update adventure image upload logic
This commit is contained in:
Sean Morley 2024-08-17 07:58:07 -04:00
parent 03927a2394
commit a264da39f5
3 changed files with 361 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

696
frontend/src/lib/components/NewAdventure.svelte
View file

@ -13,6 +13,11 @@
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';
let markers: Point[] = [];
let query: string = '';
let places: OpenStreetMapPlace[] = [];
import MapMarker from '~icons/mdi/map-marker'; import MapMarker from '~icons/mdi/map-marker';
import Calendar from '~icons/mdi/calendar'; import Calendar from '~icons/mdi/calendar';
import Notebook from '~icons/mdi/notebook'; import Notebook from '~icons/mdi/notebook';
@ -32,13 +37,13 @@
id: '', id: '',
type: type, type: type,
name: '', name: '',
location: '', location: null,
date: '', date: null,
description: '', description: '',
activity_types: [], activity_types: [],
rating: NaN, rating: NaN,
link: '', link: '',
image: '', images: [],
user_id: NaN, user_id: NaN,
latitude: null, latitude: null,
longitude: null, longitude: null,
@ -52,6 +57,35 @@
reverseGeocode(); 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() { async function reverseGeocode() {
let res = await fetch( let res = await fetch(
`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`, `https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
@ -96,369 +130,333 @@
} }
} }
async function generateDesc() { // async function generateDesc() {
let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`); // let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
let data = await res.json(); // let data = await res.json();
if (data.extract) { // if (data.extract) {
newAdventure.description = data.extract; // newAdventure.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.success) {
newAdventure.images.push(result.data.id);
} 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(newAdventure);
const formData = new FormData(form); let res = await fetch('/api/adventures/', {
method: 'POST',
const response = await fetch(form.action, { headers: {
method: form.method, 'Content-Type': 'application/json'
body: formData },
body: JSON.stringify(newAdventure)
}); });
let data = await res.json();
if (response.ok) { if (data.id) {
const result = await response.json(); newAdventure = data as Adventure;
const data = JSON.parse(result.data); // Parsing the JSON string in the data field } else {
addToast('error', 'Failed to create adventure');
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();
}
} }
} }
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<Adventure>) {
console.log(event.detail);
isPointModalOpen = false;
}
</script> </script>
{#if isPointModalOpen}
<PointSelectionModal
query={newAdventure.name}
on:close={() => (isPointModalOpen = false)}
on:submit={setLongLat}
bind:adventure={newAdventure}
/>
{/if}
{#if isImageFetcherOpen}
<ImageFetcher
on:image={handleImageFetch}
name={newAdventure.name}
on:close={() => (isImageFetcherOpen = false)}
/>
{/if}
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">New {type} Adventure</h3> <h3 class="font-bold text-lg">New {type} Adventure</h3>
<div {#if newAdventure.id === ''}
class="modal-action items-center" <div class="modal-action items-center">
style="display: flex; flex-direction: column; align-items: center; width: 100%;" <form
> method="post"
<form style="width: 100%;"
method="post" on:submit={handleSubmit}
style="width: 100%;" action="/adventures/create"
on:submit={handleSubmit} >
action="/adventures?/create" <!-- Grid layout for form fields -->
> <h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
<div class="join"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<input <div>
class="join-item btn btn-neutral" <label for="name">Name</label><br />
type="radio" <input
name="type" type="text"
id="visited" id="name"
value="visited" name="name"
aria-label="Visited" bind:value={newAdventure.name}
checked={newAdventure.type === 'visited'} class="input input-bordered w-full"
on:click={() => (type = 'visited')} required
/> />
<input </div>
class="join-item btn btn-neutral" <div class="join">
type="radio" <input
name="type" class="join-item btn btn-neutral"
id="planned" type="radio"
value="planned" name="type"
aria-label="Planned" id="visited"
checked={newAdventure.type === 'planned'} value="visited"
on:click={() => (type = 'planned')} aria-label="Visited"
/> checked={newAdventure.type === 'visited'}
</div> on:click={() => (type = 'visited')}
/>
<input <input
type="text" class="join-item btn btn-neutral"
name="type" type="radio"
id="type" name="type"
value={type} id="planned"
hidden value="planned"
readonly aria-label="Planned"
class="input input-bordered w-full max-w-xs mt-1" checked={newAdventure.type === 'planned'}
/> on:click={() => (type = 'planned')}
<div class="mb-2"> />
<label for="name">Name</label><br /> </div>
<input <div>
type="text" <label for="location">Location</label><br />
id="name" <input
name="name" type="text"
bind:value={newAdventure.name} id="location"
class="input input-bordered w-full max-w-xs mt-1" name="location"
required bind:value={newAdventure.location}
/> class="input input-bordered w-full"
</div> />
<div class="mb-2"> </div>
<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label <div>
><br /> <label for="date">Date</label><br />
<input <input
type="text" type="date"
id="location" id="date"
name="location" name="date"
bind:value={newAdventure.location} min={startDate || ''}
class="input input-bordered w-full max-w-xs mt-1" max={endDate || ''}
/> bind:value={newAdventure.date}
<div class="mb-2 mt-2"> class="input input-bordered w-full"
<button />
type="button" </div>
class="btn btn-secondary" <div>
on:click={() => (isPointModalOpen = true)} <label for="description">Description</label><br />
><Map class="inline-block w-6 h-6" />{newAdventure.latitude && newAdventure.longitude <textarea
? 'Change' id="description"
: 'Select'} Location</button name="description"
bind:value={newAdventure.description}
class="textarea textarea-bordered w-full h-32"
></textarea>
</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>
<!-- 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>
<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>
<h2 class="text-2xl font-semibold mb-2">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}>
<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}
</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
> >
</div> <!-- MapEvents gives you access to map events even from other components inside the map,
</div> where you might not have access to the top-level `MapLibre` component. In this case
<div class="mb-2"> it would also work to just use on:click on the MapLibre component itself. -->
<label for="date" <MapEvents on:click={addMarker} />
>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
></iconify-icon></label
><br />
<input
type="date"
id="date"
name="date"
min={startDate || ''}
max={endDate || ''}
bind:value={newAdventure.date}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="mb-2">
<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
><br />
<div class="flex">
<textarea
id="description"
name="description"
bind:value={newAdventure.description}
class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
/>
</div>
<button class="btn btn-neutral" type="button" on:click={generateDesc}
><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
>
</div>
{#if newAdventure.type == 'visited' || newAdventure.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
type="text"
id="activity_types"
name="activity_types"
hidden
bind:value={newAdventure.activity_types}
class="input input-bordered w-full max-w-xs mt-1"
/>
<ActivityComplete bind:activities={newAdventure.activity_types} />
</div>
{/if}
<div class="mb-2">
<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 class="mb-2">
<label for="link"
>Link <iconify-icon icon="mdi:link" class="text-xl -mb-1"></iconify-icon></label
><br />
<input
type="text"
id="link"
name="link"
bind:value={newAdventure.link}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="mb-2">
<label for="image">Image </label><br />
<div class="flex">
<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">
<input
type="text"
id="latitude"
hidden
name="latitude"
bind:value={newAdventure.latitude}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="mb-2">
<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
/>
<input
type="checkbox"
class="toggle toggle-primary"
id="is_public"
name="is_public"
bind:checked={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 class="mb-2">
<input
type="text"
id="longitude"
name="longitude"
hidden
bind:value={newAdventure.longitude}
class="input input-bordered w-full max-w-xs mt-1"
/>
<input
type="text"
id="collection"
name="collection"
hidden
bind:value={newAdventure.collection}
class="input input-bordered w-full max-w-xs mt-1"
/>
<button {#each markers as marker}
id="new_adventure" <DefaultMarker lngLat={marker.lngLat} />
data-umami-event="Create new Adventure" {/each}
type="submit" </MapLibre>
class="btn btn-primary mr-4 mt-4">Create</button </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"
> >
<button type="button" class="btn mt-4" on:click={close}>Close</button> <input type="file" name="image" bind:this={fileInput} accept="image/*" id="image" />
<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
<button type="submit">Upload Image</button>
</form>
</div> </div>
</form> </div>
</div> {/if}
</div> </div>
</dialog> </dialog>

2
frontend/src/lib/types.ts
View file

@ -58,6 +58,8 @@ export type Point = {
lng: number; lng: number;
}; };
name: string; name: string;
location: string;
activity_type: string;
}; };
export type Collection = { export type Collection = {

12
frontend/src/routes/adventures/+page.server.ts
View file

@ -425,5 +425,17 @@ export const actions: Actions = {
let image_url = adventure.image; let image_url = adventure.image;
let link_url = adventure.link; let link_url = adventure.link;
return { image_url, link_url }; return { image_url, link_url };
},
image: async (event) => {
let formData = await event.request.formData();
let res = await fetch(`${serverEndpoint}/api/images/`, {
method: 'POST',
headers: {
Cookie: `${event.cookies.get('auth')}`
},
body: formData
});
let data = await res.json();
return data;
} }
}; };