Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 22:39:36 +02:00
Code Issues Releases Activity

remove image

Browse source
This commit is contained in:
Sean Morley 2024-08-17 14:13:23 -04:00
parent 6b9cd48603
commit b9ebbafd76
2 changed files with 409 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -184,222 +184,221 @@
<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 w-11/12 max-w-6xl" 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">Edit {adventureToEdit.type} Adventure</h3> <h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
{#if adventureToEdit.id === '' || isDetails} {#if adventureToEdit.id === '' || isDetails}
<div class="modal-action items-center"> <div class="modal-action items-center">
<form method="post" style="width: 100%;" on:submit={handleSubmit}> <form method="post" style="width: 100%;" on:submit={handleSubmit}>
<!-- Grid layout for form fields --> <!-- Grid layout for form fields -->
<h2 class="text-2xl font-semibold mb-2">Basic Information</h2> <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 class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
<div> <div>
<label for="name">Name</label><br /> <label for="name">Name</label><br />
<input <input
type="text" type="text"
id="name" id="name"
name="name" name="name"
bind:value={adventureToEdit.name} bind:value={adventureToEdit.name}
class="input input-bordered w-full" class="input input-bordered w-full"
required 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={() => (adventureToEdit.type = 'visited')}
checked={adventureToEdit.type == 'visited'}
/>
</label>
</div> </div>
<div> <div class="form-control">
<div class="form-control"> <label class="label cursor-pointer">
<label class="label cursor-pointer"> <span class="label-text">Planned</span>
<span class="label-text">Visited</span> <input
<input type="radio"
type="radio" name="radio-10"
name="radio-10" class="radio checked:bg-blue-500"
class="radio checked:bg-red-500" on:click={() => (adventureToEdit.type = 'planned')}
on:click={() => (adventureToEdit.type = 'visited')} checked={adventureToEdit.type == 'planned'}
checked={adventureToEdit.type == 'visited'} />
/> </label>
</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={() => (adventureToEdit.type = 'planned')}
checked={adventureToEdit.type == 'planned'}
/>
</label>
</div>
</div> </div>
</div>
<div>
<label for="date">Date</label><br />
<input
type="date"
id="date"
name="date"
min={startDate || ''}
max={endDate || ''}
bind:value={adventureToEdit.date}
class="input input-bordered w-full"
/>
</div>
<div>
<!-- link -->
<div> <div>
<label for="date">Date</label><br /> <label for="link">Link</label><br />
<input
type="date"
id="date"
name="date"
min={startDate || ''}
max={endDate || ''}
bind:value={adventureToEdit.date}
class="input input-bordered w-full"
/>
</div>
<div>
<!-- link -->
<div>
<label for="link">Link</label><br />
<input
type="text"
id="link"
name="link"
bind:value={adventureToEdit.link}
class="input input-bordered w-full"
/>
</div>
</div>
<div>
<label for="description">Description</label><br />
<textarea
id="description"
name="description"
bind:value={adventureToEdit.description}
class="textarea textarea-bordered w-full h-32"
></textarea>
</div>
<div>
<label for="activity_types">Activity Types</label><br />
<input <input
type="text" type="text"
id="activity_types" id="link"
name="activity_types" name="link"
hidden bind:value={adventureToEdit.link}
bind:value={adventureToEdit.activity_types}
class="input input-bordered w-full" class="input input-bordered w-full"
/> />
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
</div> </div>
<div> </div>
<label for="rating" <div>
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label <label for="description">Description</label><br />
><br /> <textarea
id="description"
name="description"
bind:value={adventureToEdit.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={adventureToEdit.activity_types}
class="input input-bordered w-full"
/>
<ActivityComplete bind:activities={adventureToEdit.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={adventureToEdit.rating}
id="rating"
name="rating"
class="input input-bordered w-full max-w-xs mt-1"
/>
<div class="rating -ml-3 mt-1">
<input <input
type="number" type="radio"
min="0" name="rating-2"
max="5" class="rating-hidden"
hidden checked={Number.isNaN(adventureToEdit.rating)}
bind:value={adventureToEdit.rating}
id="rating"
name="rating"
class="input input-bordered w-full max-w-xs mt-1"
/> />
<div class="rating -ml-3 mt-1"> <input
<input type="radio"
type="radio" name="rating-2"
name="rating-2" class="mask mask-star-2 bg-orange-400"
class="rating-hidden" on:click={() => (adventureToEdit.rating = 1)}
checked={Number.isNaN(adventureToEdit.rating)} checked={adventureToEdit.rating === 1}
/> />
<input <input
type="radio" type="radio"
name="rating-2" name="rating-2"
class="mask mask-star-2 bg-orange-400" class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 1)} on:click={() => (adventureToEdit.rating = 2)}
checked={adventureToEdit.rating === 1} checked={adventureToEdit.rating === 2}
/> />
<input <input
type="radio" type="radio"
name="rating-2" name="rating-2"
class="mask mask-star-2 bg-orange-400" class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 2)} on:click={() => (adventureToEdit.rating = 3)}
checked={adventureToEdit.rating === 2} checked={adventureToEdit.rating === 3}
/> />
<input <input
type="radio" type="radio"
name="rating-2" name="rating-2"
class="mask mask-star-2 bg-orange-400" class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 3)} on:click={() => (adventureToEdit.rating = 4)}
checked={adventureToEdit.rating === 3} checked={adventureToEdit.rating === 4}
/> />
<input <input
type="radio" type="radio"
name="rating-2" name="rating-2"
class="mask mask-star-2 bg-orange-400" class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 4)} on:click={() => (adventureToEdit.rating = 5)}
checked={adventureToEdit.rating === 4} checked={adventureToEdit.rating === 5}
/> />
<input {#if adventureToEdit.rating}
type="radio" <button
name="rating-2" type="button"
class="mask mask-star-2 bg-orange-400" class="btn btn-sm btn-error ml-2"
on:click={() => (adventureToEdit.rating = 5)} on:click={() => (adventureToEdit.rating = NaN)}
checked={adventureToEdit.rating === 5} >
/> Remove
{#if adventureToEdit.rating} </button>
<button {/if}
type="button"
class="btn btn-sm btn-error ml-2"
on:click={() => (adventureToEdit.rating = NaN)}
>
Remove
</button>
{/if}
</div>
</div> </div>
<!-- </div> -->
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2> <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 class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
<div> <div>
<label for="latitude">Location</label><br /> <label for="latitude">Location</label><br />
<input
type="text"
id="location"
name="location"
bind:value={adventureToEdit.location}
class="input input-bordered w-full"
/>
</div>
<div>
<form on:submit={geocode} class="mt-2">
<input <input
type="text" type="text"
id="location" placeholder="Seach for a location"
name="location" class="input input-bordered w-full max-w-xs"
bind:value={adventureToEdit.location} id="search"
class="input input-bordered w-full" name="search"
bind:value={query}
/> />
</div> <button class="btn btn-neutral -mt-1" type="submit">Search</button>
<div> </form>
<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>
{#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}
<p class="text-error text-lg">No results found</p>
{/if}
<!-- </div> -->
<div> <div>
<MapLibre <MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"

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

@ -56,12 +56,11 @@
$: if (markers.length > 0) { $: if (markers.length > 0) {
newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6; newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6; newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
if (!newAdventure.location) { // if (!newAdventure.location) {
newAdventure.location = markers[0].location; newAdventure.location = markers[0].location;
} // }
if (!newAdventure.name) {
newAdventure.name = markers[0].name; newAdventure.name = markers[0].name;
}
} }
async function geocode(e: Event | null) { async function geocode(e: Event | null) {
@ -176,7 +175,7 @@
<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 w-11/12 max-w-6xl" 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 {type} Adventure</h3>
{#if newAdventure.id === ''} {#if newAdventure.id === ''}
<div class="modal-action items-center"> <div class="modal-action items-center">
@ -188,236 +187,225 @@
> >
<!-- Grid layout for form fields --> <!-- Grid layout for form fields -->
<h2 class="text-2xl font-semibold mb-2">Basic Information</h2> <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 class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
<div> <div>
<label for="name">Name</label><br /> <label for="name">Name</label><br />
<input <input
type="text" type="text"
id="name" id="name"
name="name" name="name"
bind:value={newAdventure.name} bind:value={newAdventure.name}
class="input input-bordered w-full" class="input input-bordered w-full"
required required
/> />
</div>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="type"
id="visited"
value="visited"
aria-label="Visited"
checked={newAdventure.type === 'visited'}
on:click={() => (type = 'visited')}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="type"
id="planned"
value="planned"
aria-label="Planned"
checked={newAdventure.type === 'planned'}
on:click={() => (type = 'planned')}
/>
</div>
<div>
<label for="location">Location</label><br />
<input
type="text"
id="location"
name="location"
bind:value={newAdventure.location}
class="input input-bordered w-full"
/>
</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>
</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>
<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>
<div class="divider"></div> <div class="join">
<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2> <input
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> class="join-item btn btn-neutral"
<div> type="radio"
<label for="latitude">Location</label><br /> name="type"
id="visited"
value="visited"
aria-label="Visited"
checked={newAdventure.type === 'visited'}
on:click={() => (type = 'visited')}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="type"
id="planned"
value="planned"
aria-label="Planned"
checked={newAdventure.type === 'planned'}
on:click={() => (type = 'planned')}
/>
</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>
</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 <input
type="text" type="radio"
id="location" name="rating-2"
name="location" class="rating-hidden"
bind:value={newAdventure.location} checked={Number.isNaN(newAdventure.rating)}
class="input input-bordered w-full"
/> />
</div> <input
<div> type="radio"
<form on:submit={geocode}> name="rating-2"
<input class="mask mask-star-2 bg-orange-400"
type="text" on:click={() => (newAdventure.rating = 1)}
placeholder="Seach for a location" />
class="input input-bordered w-full max-w-xs" <input
id="search" type="radio"
name="search" name="rating-2"
bind:value={query} class="mask mask-star-2 bg-orange-400"
/> on:click={() => (newAdventure.rating = 2)}
<button type="submit">Search</button> />
</form> <input
{#if places.length > 0} type="radio"
<div class="mt-4"> name="rating-2"
<h3 class="font-bold text-lg mb-4">Search Results</h3> class="mask mask-star-2 bg-orange-400"
<ul> on:click={() => (newAdventure.rating = 3)}
{#each places as place} />
<li> <input
<button type="radio"
type="button" name="rating-2"
class="btn btn-neutral mb-2" class="mask mask-star-2 bg-orange-400"
on:click={() => { on:click={() => (newAdventure.rating = 4)}
markers = [ />
{ <input
lngLat: { lng: Number(place.lon), lat: Number(place.lat) }, type="radio"
location: place.display_name, name="rating-2"
name: place.name, class="mask mask-star-2 bg-orange-400"
activity_type: place.type on:click={() => (newAdventure.rating = 5)}
} />
]; {#if newAdventure.rating}
}} <button
> type="button"
{place.display_name} class="btn btn-sm btn-error ml-2"
</button> on:click={() => (newAdventure.rating = NaN)}
</li> >
{/each} Remove
</ul> </button>
</div>
{:else}
<p class="text-error text-lg">No results found</p>
{/if} {/if}
</div> </div>
</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>
<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"
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}
<p class="text-error text-lg">No results found</p>
{/if}
<div> <div>
<MapLibre <MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"