From 7442bd70cd9ee8d3f0d838ed24b449c430d9204c Mon Sep 17 00:00:00 2001
From: Sean Morley <mail@seanmorley.com>
Date: Tue, 6 May 2025 14:38:31 -0400
Subject: [PATCH] Update version to 0.9.0, add DateRangeDropdown component,
 enhance LodgingModal with price step, and add invalid date range message

---
 frontend/package.json                         |   2 +-
 .../lib/components/DateRangeDropdown.svelte   | 172 ++++++++++++++++++
 .../src/lib/components/LodgingModal.svelte    |   1 +
 frontend/src/locales/en.json                  |   1 +
 frontend/src/routes/datetest/+page.svelte     |  13 ++
 5 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/components/DateRangeDropdown.svelte
 create mode 100644 frontend/src/routes/datetest/+page.svelte

diff --git a/frontend/package.json b/frontend/package.json
index 96dd929..2d3d3e0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "adventurelog-frontend",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"scripts": {
 		"dev": "vite dev",
 		"django": "cd .. && cd backend/server && python3 manage.py runserver",
diff --git a/frontend/src/lib/components/DateRangeDropdown.svelte b/frontend/src/lib/components/DateRangeDropdown.svelte
new file mode 100644
index 0000000..608d8bd
--- /dev/null
+++ b/frontend/src/lib/components/DateRangeDropdown.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { Collection } from '$lib/types';
+	import TimezoneSelector from './TimezoneSelector.svelte';
+	import { t } from 'svelte-i18n';
+	export let collection: Collection | null = null;
+	import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
+	import { onMount } from 'svelte';
+
+	// Initialize with browser's timezone
+	let selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+	// Store the UTC dates as source of truth
+	export let utcStartDate: string | null = null;
+	export let utcEndDate: string | null = null;
+
+	// Local display values
+	let localStartDate: string = '';
+	let localEndDate: string = '';
+
+	let fullStartDate: string = '';
+	let fullEndDate: string = '';
+
+	let constrainDates: boolean = false;
+
+	onMount(async () => {
+		// Initialize UTC dates from transportationToEdit if available
+		localStartDate = updateLocalDate({
+			utcDate: utcStartDate,
+			timezone: selectedTimezone
+		}).localDate;
+		localEndDate = updateLocalDate({
+			utcDate: utcEndDate,
+			timezone: selectedTimezone
+		}).localDate;
+	});
+
+	if (collection && collection.start_date && collection.end_date) {
+		fullStartDate = `${collection.start_date}T00:00`;
+		fullEndDate = `${collection.end_date}T23:59`;
+	}
+
+	// Update local display dates whenever timezone or UTC dates change
+	$: {
+		localStartDate = updateLocalDate({
+			utcDate: utcStartDate,
+			timezone: selectedTimezone
+		}).localDate;
+		localEndDate = updateLocalDate({
+			utcDate: utcEndDate,
+			timezone: selectedTimezone
+		}).localDate;
+	}
+
+	// Update UTC dates when local dates change
+	function handleLocalDateChange() {
+		utcStartDate = updateUTCDate({
+			localDate: localStartDate,
+			timezone: selectedTimezone
+		}).utcDate;
+		utcEndDate = updateUTCDate({
+			localDate: localEndDate,
+			timezone: selectedTimezone
+		}).utcDate;
+	}
+</script>
+
+<div class="collapse collapse-plus bg-base-200 mb-4 rounded-lg">
+	<input type="checkbox" checked />
+	<div class="collapse-title text-xl font-semibold">
+		{$t('adventures.date_information')}
+	</div>
+	<div class="collapse-content space-y-6">
+		<!-- Timezone Selector -->
+		<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+			<TimezoneSelector bind:selectedTimezone />
+		</div>
+
+		<!-- Dates Input Section -->
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+			<!-- Start Date -->
+			<div class="flex flex-col space-y-2">
+				<label for="date" class="font-medium">
+					{$t('adventures.start_date')}
+				</label>
+
+				<input
+					type="datetime-local"
+					id="date"
+					name="date"
+					bind:value={localStartDate}
+					on:change={handleLocalDateChange}
+					min={constrainDates ? fullStartDate : ''}
+					max={constrainDates ? fullEndDate : ''}
+					class="input input-bordered w-full"
+				/>
+
+				{#if collection && collection.start_date && collection.end_date}
+					<label class="flex items-center gap-2 mt-2">
+						<input
+							type="checkbox"
+							class="toggle toggle-primary"
+							id="constrain_dates"
+							name="constrain_dates"
+							on:change={() => (constrainDates = !constrainDates)}
+						/>
+						<span class="label-text">{$t('adventures.date_constrain')}</span>
+					</label>
+				{/if}
+			</div>
+
+			<!-- End Date -->
+			{#if localStartDate}
+				<div class="flex flex-col space-y-2">
+					<label for="end_date" class="font-medium">
+						{$t('adventures.end_date')}
+					</label>
+
+					<input
+						type="datetime-local"
+						id="end_date"
+						name="end_date"
+						bind:value={localEndDate}
+						on:change={handleLocalDateChange}
+						min={constrainDates ? localStartDate : ''}
+						max={constrainDates ? fullEndDate : ''}
+						class="input input-bordered w-full"
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Validation Message -->
+		{#if !validateDateRange(localStartDate, localEndDate).valid}
+			<div role="alert" class="alert alert-error">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>{$t('adventures.invalid_date_range')}</span>
+			</div>
+		{/if}
+
+		<!-- 
+		<div role="alert" class="alert shadow-lg bg-neutral text-neutral-content mt-6">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				class="stroke-info h-6 w-6 shrink-0"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				></path>
+			</svg>
+			<span class="ml-2">
+				{$t('lodging.current_timezone')}: {selectedTimezone}
+			</span>
+		</div> -->
+	</div>
+</div>
diff --git a/frontend/src/lib/components/LodgingModal.svelte b/frontend/src/lib/components/LodgingModal.svelte
index d91155c..9a2975e 100644
--- a/frontend/src/lib/components/LodgingModal.svelte
+++ b/frontend/src/lib/components/LodgingModal.svelte
@@ -323,6 +323,7 @@
 									id="price"
 									name="price"
 									bind:value={lodging.price}
+									step="0.01"
 									class="input input-bordered w-full max-w-xs mt-1"
 								/>
 							</div>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 65c7288..20e2e90 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -62,6 +62,7 @@
 		"collection_remove_success": "Adventure removed from collection successfully!",
 		"collection_remove_error": "Error removing adventure from collection",
 		"collection_link_success": "Adventure linked to collection successfully!",
+		"invalid_date_range": "Invalid date range",
 		"no_image_found": "No image found",
 		"collection_link_error": "Error linking adventure to collection",
 		"adventure_delete_confirm": "Are you sure you want to delete this adventure? This action cannot be undone.",
diff --git a/frontend/src/routes/datetest/+page.svelte b/frontend/src/routes/datetest/+page.svelte
new file mode 100644
index 0000000..b06ba1f
--- /dev/null
+++ b/frontend/src/routes/datetest/+page.svelte
@@ -0,0 +1,13 @@
+<script>
+	import DateRangeDropdown from '$lib/components/DateRangeDropdown.svelte';
+
+	let utcStartDate = '';
+	let utcEndDate = '';
+</script>
+
+<DateRangeDropdown bind:utcStartDate bind:utcEndDate />
+
+<p>{new Date(utcStartDate).toLocaleString()} - {new Date(utcEndDate).toLocaleString()}</p>
+
+<p>UTC Start Date: {utcStartDate}</p>
+<p>UTC End Date: {utcEndDate}</p>