New AdventureModal Accordian

backend/server/adventures/serializers.py

@@ -45,18 +45,34 @@ class AdventureSerializer(serializers.ModelSerializer):
     
     def update(self, instance, validated_data):
         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
+        updated_visit_ids = set()
         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():
                     setattr(visit, attr, value)
                 visit.save()
+                updated_visit_ids.add(visit_id)
             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
     

backend/server/adventures/views.py

@@ -105,6 +105,9 @@ class AdventureViewSet(viewsets.ModelViewSet):
     @action(detail=False, methods=['get'])
     def filtered(self, request):
         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]
         types = [t for t in types if t in valid_types]
 

frontend/src/lib/components/AdventureCard.svelte

@@ -32,16 +32,6 @@
 	let image_url: string | null = null;
 	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[] = [];
 	// makes it reactivty to changes so it updates automatically
 	$: {
@@ -258,7 +248,7 @@
 								><Launch class="w-6 h-6" />Open Details</button
 							>
 							<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>
 							{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
 								<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
@@ -270,18 +260,12 @@
 									><CheckBold class="w-6 h-6" />Mark Visited</button
 								>
 							{/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}
 									><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
 								>
 							{/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}
 								<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
 									><Plus class="w-6 h-6" />Add to Collection</button

frontend/src/lib/components/AdventureModal.svelte

@@ -69,8 +69,8 @@
 		images: adventureToEdit?.images || [],
 		user_id: adventureToEdit?.user_id || null,
 		collection: adventureToEdit?.collection || collection_id || null,
-		// visits: adventureToEdit?.visits || []
+		visits: adventureToEdit?.visits || []
-		visits: []
+		//visits: []
 	};
 
 	let markers: Point[] = [];
@@ -414,16 +414,19 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- 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'}
 		</h3>
 		{#if adventure.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 					<!-- 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="collapse collapse-plus bg-base-200 mb-4">
+						<input type="checkbox" checked />
+						<div class="collapse-title text-xl font-medium">Basic Information</div>
+						<div class="collapse-content">
 							<div>
 								<label for="name">Name</label><br />
 								<input
@@ -435,7 +438,6 @@
 									required
 								/>
 							</div>
-
 							<div>
 								<label for="link">Category</label><br />
 								<select class="select select-bordered w-full max-w-xs" bind:value={adventure.type}>
@@ -446,48 +448,7 @@
 								</select>
 							</div>
 							<div>
-						<!-- link -->
+								<label for="rating">Rating</label><br />
-						<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>
-							<label for="activity_types">Activity Types</label><br />
-							<input
-								type="text"
-								id="activity_types"
-								name="activity_types"
-								hidden
-								bind:value={adventure.activity_types}
-								class="input input-bordered w-full"
-							/>
-							<ActivityComplete bind:activities={adventure.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"
@@ -550,13 +511,39 @@
 										</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="mt-2">
+									<div class="form-control flex items-start mt-1">
-										<div>
+										<label class="label cursor-pointer flex items-start space-x-2">
-											<label for="is_public"
+											<span class="label-text">Public Adventure</span>
-												>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-											><br />
 											<input
 												type="checkbox"
 												class="toggle toggle-primary"
@@ -564,13 +551,46 @@
 												name="is_public"
 												bind:checked={adventure.is_public}
 											/>
-										</div>
+										</label>
 									</div>
 								</div>
 							{/if}
 						</div>
-						<div class="divider"></div>
+					</div>
-						<h2 class="text-2xl font-semibold mb-2 mt-2">Location Information</h2>
+
+					<div class="collapse collapse-plus bg-base-200 mb-4">
+						<input type="checkbox" />
+						<div class="collapse-title text-xl font-medium">
+							Activity Types ({adventure.activity_types?.length || 0})
+						</div>
+						<div class="collapse-content">
+							<label for="activity_types">Activity Types</label><br />
+							<input
+								type="text"
+								id="activity_types"
+								name="activity_types"
+								hidden
+								bind:value={adventure.activity_types}
+								class="input input-bordered w-full"
+							/>
+							<ActivityComplete bind:activities={adventure.activity_types} />
+						</div>
+					</div>
+
+					<div class="collapse collapse-plus bg-base-200 mb-4">
+						<input type="checkbox" />
+						<div class="collapse-title text-xl font-medium">
+							Visits ({adventure.visits.length})
+						</div>
+						<div class="collapse-content">
+							<p>hello</p>
+						</div>
+					</div>
+
+					<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 />
@@ -647,7 +667,12 @@ it would also work to just use on:click on the MapLibre component itself. -->
 							{#if region_name}
 								<p class="text-lg font-semibold mt-2">Region: {region_name} ({region_id})</p>
 							{/if}
+						</div>
+					</div>
 
+					<!-- ---OLD--- -->
+
+					<div>
 						<div class="mt-4">
 							{#if warningMessage != ''}
 								<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}
 	</div>
 </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} -->

frontend/src/lib/types.ts

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

frontend/src/routes/adventures/+page.server.ts

@@ -16,22 +16,12 @@ export const load = (async (event) => {
 		let count = 0;
 		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 order_by = event.url.searchParams.get('order_by') || 'updated_at';
@@ -46,6 +36,7 @@ export const load = (async (event) => {
 				}
 			}
 		);
+
 		if (!initialFetch.ok) {
 			console.error('Failed to fetch visited adventures');
 			return redirect(302, '/login');

frontend/src/routes/adventures/+page.svelte

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