Category frontend fixes

frontend/src/lib/components/AdventureCard.svelte

@@ -19,6 +19,7 @@
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
 	import DeleteWarning from './DeleteWarning.svelte';
 	import ImageDisplayModal from './ImageDisplayModal.svelte';
+	import { typeToString } from '$lib';
 
 	export let type: string;
 	export let user: User | null;
@@ -209,16 +210,8 @@
 			</button>
 		</div>
 		<div>
-			{#if adventure.type == 'visited'}
-				<div class="badge badge-primary">Visited</div>
-			{:else if adventure.type == 'planned'}
-				<div class="badge badge-secondary">Planned</div>
-			{:else if adventure.type == 'lodging'}
-				<div class="badge badge-success">Lodging</div>
-			{:else if adventure.type == 'dining'}
-				<div class="badge badge-accent">Dining</div>
-			{/if}
-
+			<div class="badge badge-primary">{typeToString(adventure.type)}</div>
+			<div class="badge badge-success">{adventure.visits.length > 0 ? 'Visited' : 'Planned'}</div>
 			<div class="badge badge-secondary">{adventure.is_public ? 'Public' : 'Private'}</div>
 		</div>
 		{#if adventure.location && adventure.location !== ''}
@@ -227,16 +220,13 @@
 				<p class="ml-.5">{adventure.location}</p>
 			</div>
 		{/if}
-		{#if adventure.date && adventure.date !== ''}
-			<div class="inline-flex items-center">
+		{#if adventure.visits.length > 0}
+			<!-- visited badge -->
+			<div class="flex items-center">
 				<Calendar class="w-5 h-5 mr-1" />
-				<p>
-					{new Date(adventure.date).toLocaleDateString(undefined, {
-						timeZone: 'UTC'
-					})}{adventure.end_date && adventure.end_date !== ''
-						? ' - ' +
-							new Date(adventure.end_date).toLocaleDateString(undefined, { timeZone: 'UTC' })
-						: ''}
+				<p class="ml-.5">
+					{adventure.visits.length}
+					{adventure.visits.length > 1 ? 'visits' : 'visit'}
 				</p>
 			</div>
 		{/if}

frontend/src/lib/components/AdventureModal.svelte

@@ -22,6 +22,7 @@
 	import Earth from '~icons/mdi/earth';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
+	import { ADVENTURE_TYPES } from '$lib';
 
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
@@ -37,8 +38,7 @@
 		id: '',
 		name: '',
 		type: 'visited',
-		date: null,
-		end_date: null,
+		visits: [],
 		link: null,
 		description: null,
 		activity_types: [],
@@ -57,9 +57,7 @@
 	adventure = {
 		id: adventureToEdit?.id || '',
 		name: adventureToEdit?.name || '',
-		type: adventureToEdit?.type || 'visited',
-		date: adventureToEdit?.date || null,
-		end_date: adventureToEdit?.end_date || null,
+		type: adventureToEdit?.type || 'general',
 		link: adventureToEdit?.link || null,
 		description: adventureToEdit?.description || null,
 		activity_types: adventureToEdit?.activity_types || [],
@@ -70,7 +68,9 @@
 		location: adventureToEdit?.location || null,
 		images: adventureToEdit?.images || [],
 		user_id: adventureToEdit?.user_id || null,
-		collection: adventureToEdit?.collection || collection_id || null
+		collection: adventureToEdit?.collection || collection_id || null,
+		// visits: adventureToEdit?.visits || []
+		visits: []
 	};
 
 	let markers: Point[] = [];
@@ -369,18 +369,6 @@
 			}
 		}
 
-		if (adventure.date && adventure.end_date) {
-			if (new Date(adventure.date) > new Date(adventure.end_date)) {
-				addToast('error', 'Start date must be before end date');
-				return;
-			}
-		}
-
-		if (adventure.end_date && !adventure.date) {
-			adventure.end_date = null;
-			adventure.date = null;
-		}
-
 		console.log(adventure);
 		if (adventure.id === '') {
 			let res = await fetch('/api/adventures', {
@@ -449,84 +437,14 @@
 					</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={() => (adventure.type = 'visited')}
-									checked={adventure.type == 'visited'}
-								/>
-							</label>
+						<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 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={() => (adventure.type = 'planned')}
-									checked={adventure.type == 'planned'}
-								/>
-							</label>
-						</div>
-						{#if is_collection}
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Lodging</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-blue-500"
-										on:click={() => (adventure.type = 'lodging')}
-										checked={adventure.type == 'lodging'}
-									/>
-								</label>
-							</div>
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Dining</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-blue-500"
-										on:click={() => (adventure.type = 'dining')}
-										checked={adventure.type == 'dining'}
-									/>
-								</label>
-							</div>
-						{/if}
-					</div>
-
-					<div>
-						<label for="date">{adventure.date ? 'Start Date' : 'Date'}</label><br />
-						<input
-							type="date"
-							id="date"
-							name="date"
-							min={startDate || ''}
-							max={endDate || ''}
-							bind:value={adventure.date}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					{#if adventure.date}
-						<div>
-							<label for="end_date">End Date</label><br />
-							<input
-								type="date"
-								id="end_date"
-								name="end_date"
-								min={startDate || ''}
-								max={endDate || ''}
-								bind:value={adventure.end_date}
-								class="input input-bordered w-full"
-							/>
-						</div>
-					{/if}
 					<div>
 						<!-- link -->
 						<div>

frontend/src/lib/index.ts

@@ -216,3 +216,37 @@ export function continentCodeToString(code: string) {
 			return 'Unknown';
 	}
 }
+
+export let ADVENTURE_TYPES = [
+	{ type: 'general', label: 'General 🌍' },
+	{ type: 'Outdoor', label: 'Outdoor 🏞️' },
+	{ type: 'lodging', label: 'Lodging 🛌' },
+	{ type: 'dining', label: 'Dining 🍽️' },
+	{ type: 'activity', label: 'Activity 🏄' },
+	{ type: 'attraction', label: 'Attraction 🎢' },
+	{ type: 'shopping', label: 'Shopping 🛍️' },
+	{ type: 'nightlife', label: 'Nightlife 🌃' },
+	{ type: 'event', label: 'Event 🎉' },
+	{ type: 'transportation', label: 'Transportation 🚗' },
+	{ type: 'culture', label: 'Culture 🎭' },
+	{ type: 'water_sports', label: 'Water Sports 🚤' },
+	{ type: 'hiking', label: 'Hiking 🥾' },
+	{ type: 'wildlife', label: 'Wildlife 🦒' },
+	{ type: 'historical_sites', label: 'Historical Sites 🏛️' },
+	{ type: 'music_concerts', label: 'Music & Concerts 🎶' },
+	{ type: 'fitness', label: 'Fitness 🏋️' },
+	{ type: 'art_museums', label: 'Art & Museums 🎨' },
+	{ type: 'festivals', label: 'Festivals 🎪' },
+	{ type: 'spiritual_journeys', label: 'Spiritual Journeys 🧘‍♀️' },
+	{ type: 'volunteer_work', label: 'Volunteer Work 🤝' },
+	{ type: 'other', label: 'Other' }
+];
+
+export function typeToString(type: string) {
+	const typeObj = ADVENTURE_TYPES.find((t) => t.type === type);
+	if (typeObj) {
+		return typeObj.label;
+	} else {
+		return 'Unknown';
+	}
+}

frontend/src/lib/types.ts

@@ -25,8 +25,11 @@ export type Adventure = {
 		id: string;
 		image: string;
 	}[];
-	date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
-	end_date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
+	visits: {
+		start_date: string;
+		end_date: string;
+		notes: string;
+	}[];
 	collection?: string | null;
 	latitude: number | null;
 	longitude: number | null;

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

@@ -30,7 +30,7 @@ export const load = (async (event) => {
 			}
 			typeString += 'planned';
 		} else if (!visited && !planned) {
-			typeString = 'visited,planned';
+			typeString = 'general';
 		}
 
 		const include_collections = event.url.searchParams.get('include_collections') || 'false';