lodging beta

backend/server/adventures/models.py

@@ -9,6 +9,7 @@ ADVENTURE_TYPES = [
     ('visited', 'Visited'),
     ('planned', 'Planned'),
     ('lodging', 'Lodging'),
+    ('dining', 'Dining')
 ]
 
 

frontend/src/lib/components/AdventureCard.svelte

@@ -24,8 +24,20 @@
 
 	let isCollectionModalOpen: boolean = false;
 
+	let keyword: string = '';
+
 	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
 	$: {
@@ -153,6 +165,8 @@
 				<div class="badge badge-secondary">Planned</div>
 			{:else if user?.pk == adventure.user_id && adventure.type == 'lodging'}
 				<div class="badge badge-success">Lodging</div>
+			{:else if user?.pk == adventure.user_id && adventure.type == 'dining'}
+				<div class="badge badge-accent">Dining</div>
 			{/if}
 
 			<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
@@ -197,7 +211,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 Adventure
+								<FileDocumentEdit class="w-6 h-6" />Edit {keyword}
 							</button>
 							{#if adventure.type == 'visited'}
 								<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
@@ -216,7 +230,7 @@
 								>
 							{/if}
 							<!-- change a non adventure to an adventure -->
-							{#if adventure.collection && adventure.type == 'lodging'}
+							{#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
 								>

frontend/src/lib/components/EditAdventure.svelte

@@ -222,6 +222,7 @@
 						>
 					</div>
 				</div>
+				{#if adventureToEdit.type == 'visited' || adventureToEdit.type == 'planned'}
 					<div class="mb-2">
 						<label for="activityTypes"
 							>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
@@ -236,6 +237,7 @@
 						/>
 						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
 					</div>
+				{/if}
 				<div class="mb-2">
 					<label for="image">Image </label><br />
 					<div class="flex">

frontend/src/lib/components/NewAdventure.svelte

@@ -24,6 +24,7 @@
 	import Wikipedia from '~icons/mdi/wikipedia';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
+	import AdventureCard from './AdventureCard.svelte';
 
 	let newAdventure: Adventure = {
 		id: NaN,
@@ -294,6 +295,7 @@
 						>
 					</div>
 				</div>
+				{#if newAdventure.type == 'visited' || newAdventure.type == 'planned'}
 					<div class="mb-2">
 						<label for="activityTypes"
 							>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
@@ -308,6 +310,7 @@
 						/>
 						<ActivityComplete bind:activities={newAdventure.activity_types} />
 					</div>
+				{/if}
 				<div class="mb-2">
 					<label for="rating"
 						>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label

frontend/src/lib/components/PointSelectionModal.svelte

@@ -85,7 +85,9 @@
 		if (!adventure.name) {
 			adventure.name = markers[0].name;
 		}
+		if (adventure.type == 'visited' || adventure.type == 'planned') {
 			adventure.activity_types = [...adventure.activity_types, markers[0].activity_type];
+		}
 		dispatch('submit', adventure);
 		close();
 	}

frontend/src/routes/collections/[id]/+page.svelte

@@ -11,6 +11,7 @@
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
 
 	export let data: PageData;
 
@@ -239,6 +240,15 @@
 					>
 						Lodging</button
 					>
+					<button
+						class="btn btn-primary"
+						on:click={() => {
+							isShowingCreateModal = true;
+							newType = 'dining';
+						}}
+					>
+						Dining</button
+					>
 
 					<!-- <button
 			class="btn btn-primary"
@@ -324,5 +334,35 @@
 				<p class="text-center text-lg mt-2">No adventures planned for this day.</p>
 			{/if}
 		{/each}
+		<div class="flex items-center justify-center w-10/12">
+			<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
+  it would also work to just use on:click on the MapLibre component itself. -->
+				<!-- <MapEvents on:click={addMarker} /> -->
+
+				{#each adventures as adventure}
+					{#if adventure.longitude && adventure.latitude}
+						<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
+							<Popup openOn="click" offset={[0, -10]}>
+								<div class="text-lg text-black font-bold">{adventure.name}</div>
+								<p class="font-semibold text-black text-md">
+									{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
+								</p>
+								<p>
+									{adventure.date
+										? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
+										: ''}
+								</p>
+							</Popup>
+						</DefaultMarker>
+					{/if}
+				{/each}
+			</MapLibre>
+		</div>
 	{/if}
 {/if}