From 794df82ec62f7b99ab0262e880bdfeb1a1cd80a8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 21 Mar 2025 16:30:03 -0400
Subject: [PATCH] feat: Enhance AdventureModal date handling for all-day events
 and improve localization in collections page

---
 .../src/lib/components/AdventureModal.svelte  | 59 +++++++++++++++++--
 .../src/routes/collections/[id]/+page.svelte  | 32 +++++++++-
 2 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte
index 3054687..85db0a4 100644
--- a/frontend/src/lib/components/AdventureModal.svelte
+++ b/frontend/src/lib/components/AdventureModal.svelte
@@ -8,12 +8,16 @@
 
 	let fullStartDate: string = '';
 	let fullEndDate: string = '';
+	let fullStartDateOnly: string = '';
+	let fullEndDateOnly: string = '';
 	let allDay: boolean = true;
 
 	// Set full start and end dates from collection
 	if (collection && collection.start_date && collection.end_date) {
 		fullStartDate = `${collection.start_date}T00:00`;
 		fullEndDate = `${collection.end_date}T23:59`;
+		fullStartDateOnly = collection.start_date;
+		fullEndDateOnly = collection.end_date;
 	}
 
 	const dispatch = createEventDispatcher();
@@ -742,8 +746,8 @@
 										type="date"
 										class="input input-bordered w-full"
 										placeholder={$t('adventures.start_date')}
-										min={constrainDates ? fullStartDate : ''}
-										max={constrainDates ? fullEndDate : ''}
+										min={constrainDates ? fullStartDateOnly : ''}
+										max={constrainDates ? fullEndDateOnly : ''}
 										bind:value={new_start_date}
 										on:keydown={(e) => {
 											if (e.key === 'Enter') {
@@ -757,8 +761,8 @@
 										class="input input-bordered w-full"
 										placeholder={$t('adventures.end_date')}
 										bind:value={new_end_date}
-										min={constrainDates ? fullStartDate : ''}
-										max={constrainDates ? fullEndDate : ''}
+										min={constrainDates ? fullStartDateOnly : ''}
+										max={constrainDates ? fullEndDateOnly : ''}
 										on:keydown={(e) => {
 											if (e.key === 'Enter') {
 												e.preventDefault();
@@ -848,6 +852,53 @@
 												</p>
 											{/if}
 											<div>
+												<button
+													type="button"
+													class="btn btn-sm btn-neutral"
+													on:click={() => {
+														// Determine if this is an all-day event
+														const isAllDayEvent = isAllDay(visit.start_date);
+														allDay = isAllDayEvent;
+
+														if (isAllDayEvent) {
+															// For all-day events, use date only
+															new_start_date = visit.start_date.split('T')[0];
+															new_end_date = visit.end_date.split('T')[0];
+														} else {
+															// For timed events, format properly for datetime-local input
+															const startDate = new Date(visit.start_date);
+															const endDate = new Date(visit.end_date);
+
+															// Format as yyyy-MM-ddThh:mm
+															new_start_date =
+																startDate.getFullYear() +
+																'-' +
+																String(startDate.getMonth() + 1).padStart(2, '0') +
+																'-' +
+																String(startDate.getDate()).padStart(2, '0') +
+																'T' +
+																String(startDate.getHours()).padStart(2, '0') +
+																':' +
+																String(startDate.getMinutes()).padStart(2, '0');
+
+															new_end_date =
+																endDate.getFullYear() +
+																'-' +
+																String(endDate.getMonth() + 1).padStart(2, '0') +
+																'-' +
+																String(endDate.getDate()).padStart(2, '0') +
+																'T' +
+																String(endDate.getHours()).padStart(2, '0') +
+																':' +
+																String(endDate.getMinutes()).padStart(2, '0');
+														}
+
+														new_notes = visit.notes;
+														adventure.visits = adventure.visits.filter((v) => v !== visit);
+													}}
+												>
+													{$t('lodging.edit')}
+												</button>
 												<button
 													type="button"
 													class="btn btn-sm btn-error"
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index 4bdba31..2578384 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -1094,7 +1094,7 @@
 										<!-- Card Content -->
 										<div class="bg-base-200 p-6 rounded-lg shadow-lg">
 											<div class="flex justify-between items-center mb-4">
-												<span class="badge badge-lg">{orderedItem.type}</span>
+												<span class="badge badge-lg">{$t(`adventures.${orderedItem.type}`)}</span>
 												<div class="text-sm opacity-80 text-right">
 													{new Date(orderedItem.start).toLocaleDateString(undefined, {
 														month: 'short',
@@ -1106,6 +1106,36 @@
 																hour: '2-digit',
 																minute: '2-digit'
 															})}
+															-
+															{new Date(orderedItem.end).toLocaleTimeString(undefined, {
+																hour: '2-digit',
+																minute: '2-digit'
+															})}
+														</div>
+														<div>
+															<!-- Duration -->
+															{Math.round(
+																(new Date(orderedItem.end).getTime() -
+																	new Date(orderedItem.start).getTime()) /
+																	1000 /
+																	60 /
+																	60
+															)}h
+															{Math.round(
+																((new Date(orderedItem.end).getTime() -
+																	new Date(orderedItem.start).getTime()) /
+																	1000 /
+																	60 /
+																	60 -
+																	Math.floor(
+																		(new Date(orderedItem.end).getTime() -
+																			new Date(orderedItem.start).getTime()) /
+																			1000 /
+																			60 /
+																			60
+																	)) *
+																	60
+															)}m
 														</div>
 													{:else}
 														<p>{$t('adventures.all_day')} ⏱️</p>