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

New AdventureModal Accordian

Browse source
This commit is contained in:
Sean Morley 2024-09-30 18:03:10 -04:00
parent c6ecfca91d
commit 6cb31aa125
7 changed files with 291 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

26
backend/server/adventures/serializers.py
View file

@ -45,18 +45,34 @@ class AdventureSerializer(serializers.ModelSerializer):
def update(self, instance, validated_data): def update(self, instance, validated_data):
visits_data = validated_data.pop('visits', []) visits_data = validated_data.pop('visits', [])
instance = super().update(instance, validated_data)
# Update Adventure fields
for attr, value in validated_data.items():
setattr(instance, attr, value)
instance.save()
# Get current visits
current_visits = instance.visits.all()
current_visit_ids = set(current_visits.values_list('id', flat=True))
# Update or create visits # Update or create visits
updated_visit_ids = set()
for visit_data in visits_data: for visit_data in visits_data:
visit_id = visit_data.get('id', None) visit_id = visit_data.get('id')
if visit_id: if visit_id and visit_id in current_visit_ids:
visit = Visit.objects.get(id=visit_id, adventure=instance) visit = current_visits.get(id=visit_id)
for attr, value in visit_data.items(): for attr, value in visit_data.items():
setattr(visit, attr, value) setattr(visit, attr, value)
visit.save() visit.save()
updated_visit_ids.add(visit_id)
else: else:
Visit.objects.create(adventure=instance, **visit_data) # If no ID is provided or ID doesn't exist, create new visit
new_visit = Visit.objects.create(adventure=instance, **visit_data)
updated_visit_ids.add(new_visit.id)
# Delete visits that are not in the updated data
visits_to_delete = current_visit_ids - updated_visit_ids
instance.visits.filter(id__in=visits_to_delete).delete()
return instance return instance

3
backend/server/adventures/views.py
View file

@ -105,6 +105,9 @@ class AdventureViewSet(viewsets.ModelViewSet):
@action(detail=False, methods=['get']) @action(detail=False, methods=['get'])
def filtered(self, request): def filtered(self, request):
types = request.query_params.get('types', '').split(',') types = request.query_params.get('types', '').split(',')
# handle case where types is all
if 'all' in types:
types = [t[0] for t in ADVENTURE_TYPES]
valid_types = [t[0] for t in ADVENTURE_TYPES] valid_types = [t[0] for t in ADVENTURE_TYPES]
types = [t for t in types if t in valid_types] types = [t for t in types if t in valid_types]

22
frontend/src/lib/components/AdventureCard.svelte
View file

@ -32,16 +32,6 @@
let image_url: string | null = null; let image_url: string | null = null;
export let adventure: Adventure; export let adventure: Adventure;
if (adventure.type == 'visited') {
keyword = 'Adventure';
} else if (adventure.type == 'planned') {
keyword = 'Adventure';
} else if (adventure.type == 'lodging') {
keyword = 'Lodging';
} else if (adventure.type == 'dining') {
keyword = 'Dining';
}
let activityTypes: string[] = []; let activityTypes: string[] = [];
// makes it reactivty to changes so it updates automatically // makes it reactivty to changes so it updates automatically
$: { $: {
@ -258,7 +248,7 @@
><Launch class="w-6 h-6" />Open Details</button ><Launch class="w-6 h-6" />Open Details</button
> >
<button class="btn btn-neutral mb-2" on:click={editAdventure}> <button class="btn btn-neutral mb-2" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />Edit {keyword} <FileDocumentEdit class="w-6 h-6" />Edit Adventure
</button> </button>
{#if adventure.type == 'visited' && user?.pk == adventure.user_id} {#if adventure.type == 'visited' && user?.pk == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={changeType('planned')} <button class="btn btn-neutral mb-2" on:click={changeType('planned')}
@ -270,18 +260,12 @@
><CheckBold class="w-6 h-6" />Mark Visited</button ><CheckBold class="w-6 h-6" />Mark Visited</button
> >
{/if} {/if}
<!-- remove from adventure --> <!-- remove from collection -->
{#if adventure.collection && (adventure.type == 'visited' || adventure.type == 'planned') && user?.pk == adventure.user_id} {#if adventure.collection && user?.pk == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection} <button class="btn btn-neutral mb-2" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button ><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
> >
{/if} {/if}
<!-- change a non adventure to an adventure -->
{#if (adventure.collection && adventure.type == 'lodging') || adventure.type == 'dining'}
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" />Change to Visit</button
>
{/if}
{#if !adventure.collection} {#if !adventure.collection}
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)} <button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />Add to Collection</button ><Plus class="w-6 h-6" />Add to Collection</button

459
frontend/src/lib/components/AdventureModal.svelte
View file

@ -69,8 +69,8 @@
images: adventureToEdit?.images || [], images: adventureToEdit?.images || [],
user_id: adventureToEdit?.user_id || null, user_id: adventureToEdit?.user_id || null,
collection: adventureToEdit?.collection || collection_id || null, collection: adventureToEdit?.collection || collection_id || null,
// visits: adventureToEdit?.visits || [] visits: adventureToEdit?.visits || []
visits: [] //visits: []
}; };
let markers: Point[] = []; let markers: Point[] = [];
@ -414,65 +414,156 @@
<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-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg"> <h3 class="font-bold text-2xl">
{adventureToEdit ? 'Edit Adventure' : 'New Adventure'} {adventureToEdit ? 'Edit Adventure' : 'New Adventure'}
</h3> </h3>
{#if adventure.id === '' || isDetails} {#if adventure.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>
<!-- <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 class="collapse collapse-plus bg-base-200 mb-4">
<label for="name">Name</label><br /> <input type="checkbox" checked />
<input <div class="collapse-title text-xl font-medium">Basic Information</div>
type="text" <div class="collapse-content">
id="name" <div>
name="name" <label for="name">Name</label><br />
bind:value={adventure.name} <input
class="input input-bordered w-full" type="text"
required id="name"
/> name="name"
bind:value={adventure.name}
class="input input-bordered w-full"
required
/>
</div>
<div>
<label for="link">Category</label><br />
<select class="select select-bordered w-full max-w-xs" bind:value={adventure.type}>
<option disabled selected>Select Adventure Type</option>
{#each ADVENTURE_TYPES as type}
<option value={type.type}>{type.label}</option>
{/each}
</select>
</div>
<div>
<label for="rating">Rating</label><br />
<input
type="number"
min="0"
max="5"
hidden
bind:value={adventure.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(adventure.rating)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 1)}
checked={adventure.rating === 1}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 2)}
checked={adventure.rating === 2}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 3)}
checked={adventure.rating === 3}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 4)}
checked={adventure.rating === 4}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 5)}
checked={adventure.rating === 5}
/>
{#if adventure.rating}
<button
type="button"
class="btn btn-sm btn-error ml-2"
on:click={() => (adventure.rating = NaN)}
>
Remove
</button>
{/if}
</div>
</div>
<div>
<div>
<label for="link">Link</label><br />
<input
type="text"
id="link"
name="link"
bind:value={adventure.link}
class="input input-bordered w-full"
/>
</div>
</div>
<div>
<label for="description">Description</label><br />
<textarea
id="description"
name="description"
bind:value={adventure.description}
class="textarea textarea-bordered w-full h-32"
></textarea>
<div class="mt-2">
<button type="button" class="btn btn-neutral" on:click={generateDesc}
>Generate Description</button
>
<p class="text-red-500">{wikiError}</p>
</div>
</div>
{#if !collection_id}
<div>
<div class="form-control flex items-start mt-1">
<label class="label cursor-pointer flex items-start space-x-2">
<span class="label-text">Public Adventure</span>
<input
type="checkbox"
class="toggle toggle-primary"
id="is_public"
name="is_public"
bind:checked={adventure.is_public}
/>
</label>
</div>
</div>
{/if}
</div>
</div> </div>
<div> <div class="collapse collapse-plus bg-base-200 mb-4">
<label for="link">Category</label><br /> <input type="checkbox" />
<select class="select select-bordered w-full max-w-xs" bind:value={adventure.type}> <div class="collapse-title text-xl font-medium">
<option disabled selected>Select Adventure Type</option> Activity Types ({adventure.activity_types?.length || 0})
{#each ADVENTURE_TYPES as type}
<option value={type.type}>{type.label}</option>
{/each}
</select>
</div>
<div>
<!-- link -->
<div>
<label for="link">Link</label><br />
<input
type="text"
id="link"
name="link"
bind:value={adventure.link}
class="input input-bordered w-full"
/>
</div> </div>
</div> <div class="collapse-content">
<div>
<label for="description">Description</label><br />
<textarea
id="description"
name="description"
bind:value={adventure.description}
class="textarea textarea-bordered w-full h-32"
></textarea>
<div class="mt-2">
<button type="button" class="btn btn-neutral" on:click={generateDesc}
>Generate Description</button
>
<p class="text-red-500">{wikiError}</p>
</div>
<div>
<label for="activity_types">Activity Types</label><br /> <label for="activity_types">Activity Types</label><br />
<input <input
type="text" type="text"
@ -484,170 +575,104 @@
/> />
<ActivityComplete bind:activities={adventure.activity_types} /> <ActivityComplete bind:activities={adventure.activity_types} />
</div> </div>
<div> </div>
<label for="rating"
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label <div class="collapse collapse-plus bg-base-200 mb-4">
><br /> <input type="checkbox" />
<input <div class="collapse-title text-xl font-medium">
type="number" Visits ({adventure.visits.length})
min="0"
max="5"
hidden
bind:value={adventure.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(adventure.rating)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 1)}
checked={adventure.rating === 1}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 2)}
checked={adventure.rating === 2}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 3)}
checked={adventure.rating === 3}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 4)}
checked={adventure.rating === 4}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventure.rating = 5)}
checked={adventure.rating === 5}
/>
{#if adventure.rating}
<button
type="button"
class="btn btn-sm btn-error ml-2"
on:click={() => (adventure.rating = NaN)}
>
Remove
</button>
{/if}
</div>
{#if !collection_id}
<div>
<div class="mt-2">
<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={adventure.is_public}
/>
</div>
</div>
</div>
{/if}
</div> </div>
<div class="divider"></div> <div class="collapse-content">
<h2 class="text-2xl font-semibold mb-2 mt-2">Location Information</h2> <p>hello</p>
<!-- <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={adventure.location}
class="input input-bordered w-full"
/>
</div> </div>
<div> </div>
<form on:submit={geocode} class="mt-2">
<div class="collapse collapse-plus bg-base-200 mb-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">Location Information</div>
<div class="collapse-content">
<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
<div>
<label for="latitude">Location</label><br />
<input <input
type="text" type="text"
placeholder="Seach for a location" id="location"
class="input input-bordered w-full max-w-xs mb-2" name="location"
id="search" bind:value={adventure.location}
name="search" class="input input-bordered w-full"
bind:value={query}
/> />
<button class="btn btn-neutral -mt-1" type="submit">Search</button>
<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
>Clear Map</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
}
];
checkPointInRegion();
}}
>
{place.display_name}
</button>
{/each}
</div>
</div> </div>
{:else if noPlaces} <div>
<p class="text-error text-lg">No results found</p> <form on:submit={geocode} class="mt-2">
{/if} <input
<!-- </div> --> type="text"
<div> placeholder="Seach for a location"
<MapLibre class="input input-bordered w-full max-w-xs mb-2"
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" id="search"
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full" name="search"
standardControls bind:value={query}
> />
<!-- MapEvents gives you access to map events even from other components inside the map, <button class="btn btn-neutral -mt-1" type="submit">Search</button>
<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
>Clear Map</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
}
];
checkPointInRegion();
}}
>
{place.display_name}
</button>
{/each}
</div>
</div>
{:else if noPlaces}
<p class="text-error text-lg">No results found</p>
{/if}
<!-- </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
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. --> it would also work to just use on:click on the MapLibre component itself. -->
<MapEvents on:click={addMarker} /> <MapEvents on:click={addMarker} />
{#each markers as marker} {#each markers as marker}
<DefaultMarker lngLat={marker.lngLat} /> <DefaultMarker lngLat={marker.lngLat} />
{/each} {/each}
</MapLibre> </MapLibre>
</div>
{#if region_name}
<p class="text-lg font-semibold mt-2">Region: {region_name} ({region_id})</p>
{/if}
</div> </div>
{#if region_name} </div>
<p class="text-lg font-semibold mt-2">Region: {region_name} ({region_id})</p>
{/if}
<!-- ---OLD--- -->
<div>
<div class="mt-4"> <div class="mt-4">
{#if warningMessage != ''} {#if warningMessage != ''}
<div role="alert" class="alert alert-warning mb-2"> <div role="alert" class="alert alert-warning mb-2">
@ -769,3 +794,29 @@ it would also work to just use on:click on the MapLibre component itself. -->
{/if} {/if}
</div> </div>
</dialog> </dialog>
<!-- {#each adventure.visits as visit}
<div class="flex flex-row">
<p>
{new Date(visit.start_date).toLocaleDateString(undefined, { timeZone: 'UTC' })}
{#if visit.end_date}
- {new Date(visit.end_date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})}
{/if}
</p>
<button
type="button"
class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
on:click={() => {
adventure.visits = adventure.visits.filter((v) => v.id !== visit.id);
}}
>
Remove
</button>
</div>
{/each}
{#if adventure.visits.length == 0}
<p>No visits</p>
{/if} -->

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

@ -26,6 +26,7 @@ export type Adventure = {
image: string; image: string;
}[]; }[];
visits: { visits: {
id: string;
start_date: string; start_date: string;
end_date: string; end_date: string;
notes: string; notes: string;

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

@ -16,22 +16,12 @@ export const load = (async (event) => {
let count = 0; let count = 0;
let adventures: Adventure[] = []; let adventures: Adventure[] = [];
const visited = event.url.searchParams.get('visited'); // const visited = event.url.searchParams.get('visited');
const planned = event.url.searchParams.get('planned'); // const planned = event.url.searchParams.get('planned');
let typeString: string = ''; let typeString: string = 'all';
if (visited == 'on') { // *** FOR NOW TYPESTRING IS ALWAYS 'ALL' BECAUSE WE DON'T HAVE A WAY TO FILTER BY VISITED/PLANNED YET ***
typeString += 'visited';
}
if (planned == 'on') {
if (typeString) {
typeString += ',';
}
typeString += 'planned';
} else if (!visited && !planned) {
typeString = 'general';
}
const include_collections = event.url.searchParams.get('include_collections') || 'false'; const include_collections = event.url.searchParams.get('include_collections') || 'false';
const order_by = event.url.searchParams.get('order_by') || 'updated_at'; const order_by = event.url.searchParams.get('order_by') || 'updated_at';
@ -46,6 +36,7 @@ export const load = (async (event) => {
} }
} }
); );
if (!initialFetch.ok) { if (!initialFetch.ok) {
console.error('Failed to fetch visited adventures'); console.error('Failed to fetch visited adventures');
return redirect(302, '/login'); return redirect(302, '/login');

6
frontend/src/routes/adventures/+page.svelte
View file

@ -216,9 +216,9 @@
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg"> <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
<!-- Sidebar content here --> <!-- Sidebar content here -->
<div class="form-control"> <div class="form-control">
<h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3> <!-- <h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3> -->
<form method="get"> <form method="get">
<label class="label cursor-pointer"> <!-- <label class="label cursor-pointer">
<span class="label-text">Completed</span> <span class="label-text">Completed</span>
<input <input
type="checkbox" type="checkbox"
@ -237,7 +237,7 @@
class="checkbox checkbox-primary" class="checkbox checkbox-primary"
checked={currentSort.planned} checked={currentSort.planned}
/> />
</label> </label> -->
<!-- <div class="divider"></div> --> <!-- <div class="divider"></div> -->
<h3 class="text-center font-bold text-lg mb-4">Sort</h3> <h3 class="text-center font-bold text-lg mb-4">Sort</h3>
<p class="text-lg font-semibold mb-2">Order Direction</p> <p class="text-lg font-semibold mb-2">Order Direction</p>