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

chore: Refactor adventure form components and improve image handling

Browse source
This commit is contained in:
Sean Morley 2024-08-17 14:21:55 -04:00
parent b9ebbafd76
commit 167154bed4
2 changed files with 59 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/lib/components/EditAdventure.svelte
View file

@ -22,6 +22,8 @@
export let startDate: string | null = null; export let startDate: string | null = null;
export let endDate: string | null = null; export let endDate: string | null = null;
let noPlaces: boolean = false;
export let adventureToEdit: Adventure; export let adventureToEdit: Adventure;
images = adventureToEdit.images || []; images = adventureToEdit.images || [];
@ -86,6 +88,11 @@
console.log(res); console.log(res);
let data = (await res.json()) as OpenStreetMapPlace[]; let data = (await res.json()) as OpenStreetMapPlace[];
places = data; places = data;
if (data.length === 0) {
noPlaces = true;
} else {
noPlaces = false;
}
} }
async function reverseGeocode() { async function reverseGeocode() {
@ -395,7 +402,7 @@
{/each} {/each}
</div> </div>
</div> </div>
{:else} {:else if noPlaces}
<p class="text-error text-lg">No results found</p> <p class="text-error text-lg">No results found</p>
{/if} {/if}
<!-- </div> --> <!-- </div> -->

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

@ -24,6 +24,9 @@
export let startDate: string | null = null; export let startDate: string | null = null;
export let endDate: string | null = null; export let endDate: string | null = null;
let noPlaces: boolean = false;
let wikiError: string = '';
let newAdventure: Adventure = { let newAdventure: Adventure = {
id: '', id: '',
type: type, type: type,
@ -79,6 +82,12 @@
console.log(res); console.log(res);
let data = (await res.json()) as OpenStreetMapPlace[]; let data = (await res.json()) as OpenStreetMapPlace[];
places = data; places = data;
if (data.length === 0) {
noPlaces = true;
} else {
noPlaces = false;
}
} }
async function reverseGeocode() { async function reverseGeocode() {
@ -121,13 +130,16 @@
} }
} }
// 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 && data.extract.length > 0) {
// newAdventure.description = data.extract; newAdventure.description = data.extract;
// } wikiError = '';
// } } else {
wikiError = 'No description found';
}
}
function addMarker(e: CustomEvent<any>) { function addMarker(e: CustomEvent<any>) {
markers = []; markers = [];
@ -176,7 +188,7 @@
<!-- 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 w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">New {type} Adventure</h3> <h3 class="font-bold text-lg">New {newAdventure.type} Adventure</h3>
{#if newAdventure.id === ''} {#if newAdventure.id === ''}
<div class="modal-action items-center"> <div class="modal-action items-center">
<form <form
@ -199,27 +211,31 @@
required required
/> />
</div> </div>
<div class="join"> <div>
<input <div class="form-control">
class="join-item btn btn-neutral" <label class="label cursor-pointer">
type="radio" <span class="label-text">Visited</span>
name="type" <input
id="visited" type="radio"
value="visited" name="radio-10"
aria-label="Visited" class="radio checked:bg-red-500"
checked={newAdventure.type === 'visited'} on:click={() => (newAdventure.type = 'visited')}
on:click={() => (type = 'visited')} checked={newAdventure.type == 'visited'}
/> />
<input </label>
class="join-item btn btn-neutral" </div>
type="radio" <div class="form-control">
name="type" <label class="label cursor-pointer">
id="planned" <span class="label-text">Planned</span>
value="planned" <input
aria-label="Planned" type="radio"
checked={newAdventure.type === 'planned'} name="radio-10"
on:click={() => (type = 'planned')} class="radio checked:bg-blue-500"
/> on:click={() => (newAdventure.type = 'planned')}
checked={newAdventure.type == 'planned'}
/>
</label>
</div>
</div> </div>
<div> <div>
@ -242,6 +258,10 @@
bind:value={newAdventure.description} bind:value={newAdventure.description}
class="textarea textarea-bordered w-full h-32" class="textarea textarea-bordered w-full h-32"
></textarea> ></textarea>
<button class="btn btn-neutral" type="button" on:click={generateDesc}
>Search Wikipedia</button
>
<p class="text-red-500">{wikiError}</p>
</div> </div>
<div> <div>
<label for="activity_types">Activity Types</label><br /> <label for="activity_types">Activity Types</label><br />
@ -403,7 +423,7 @@
{/each} {/each}
</div> </div>
</div> </div>
{:else} {:else if noPlaces}
<p class="text-error text-lg">No results found</p> <p class="text-error text-lg">No results found</p>
{/if} {/if}
<div> <div>
@ -431,7 +451,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
</div> </div>
{:else} {:else}
<p>Upload images here</p> <p>Upload images here</p>
<p>{newAdventure.id}</p> <!-- <p>{newAdventure.id}</p> -->
<div class="mb-2"> <div class="mb-2">
<label for="image">Image </label><br /> <label for="image">Image </label><br />
<div class="flex"> <div class="flex">