Add support for end date to adventure

backend/server/adventures/migrations/0003_adventure_end_date.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.8 on 2024-08-18 16:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0002_alter_adventureimage_adventure'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='adventure',
+            name='end_date',
+            field=models.DateField(blank=True, null=True),
+        ),
+    ]

backend/server/adventures/models.py

@@ -46,6 +46,7 @@ class Adventure(models.Model):
     link = models.URLField(blank=True, null=True)
     image = ResizedImageField(force_format="WEBP", quality=75, null=True, blank=True, upload_to='images/')
     date = models.DateField(blank=True, null=True)
+    end_date = models.DateField(blank=True, null=True)
     is_public = models.BooleanField(default=False)
     longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
     latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)

backend/server/adventures/serializers.py

@@ -37,7 +37,7 @@ class AdventureSerializer(serializers.ModelSerializer):
     images = AdventureImageSerializer(many=True, read_only=True)
     class Meta:
         model = Adventure
-        fields = ['id', 'user_id', 'name', 'description', 'rating', 'activity_types', 'location', 'date', 'is_public', 'collection', 'created_at', 'updated_at', 'images', 'link', 'type', 'longitude', 'latitude']
+        fields = ['id', 'user_id', 'name', 'description', 'rating', 'activity_types', 'location', 'date', 'is_public', 'collection', 'created_at', 'updated_at', 'images', 'link', 'type', 'longitude', 'latitude', 'end_date']
         read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
 
     def to_representation(self, instance):

frontend/src/lib/components/AdventureCard.svelte

@@ -221,7 +221,14 @@
 		{#if adventure.date && adventure.date !== ''}
 			<div class="inline-flex items-center">
 				<Calendar class="w-5 h-5 mr-1" />
-				<p>{new Date(adventure.date).toLocaleDateString(undefined, { timeZone: 'UTC' })}</p>
+				<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>
 			</div>
 		{/if}
 		{#if adventure.activity_types && adventure.activity_types.length > 0}

frontend/src/lib/components/AdventureModal.svelte

@@ -34,6 +34,7 @@
 		name: adventureToEdit?.name || '',
 		type: adventureToEdit?.type || 'visited',
 		date: adventureToEdit?.date || null,
+		end_date: adventureToEdit?.end_date || null,
 		link: adventureToEdit?.link || null,
 		description: adventureToEdit?.description || null,
 		activity_types: adventureToEdit?.activity_types || [],
@@ -286,6 +287,14 @@
 
 	async function handleSubmit(event: Event) {
 		event.preventDefault();
+
+		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;
+			}
+		}
+
 		console.log(adventure);
 		if (adventure.id === '') {
 			let res = await fetch('/api/adventures', {
@@ -374,7 +383,7 @@
 					</div>
 
 					<div>
-						<label for="date">Date</label><br />
+						<label for="date">Date (or start date)</label><br />
 						<input
 							type="date"
 							id="date"
@@ -385,6 +394,18 @@
 							class="input input-bordered w-full"
 						/>
 					</div>
+					<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>
 					<div>
 						<!-- link -->
 						<div>

frontend/src/lib/components/NewCollection.svelte

@@ -9,7 +9,7 @@
 
 	let newCollection: Collection = {
 		user_id: NaN,
-		id: NaN,
+		id: '',
 		name: '',
 		description: '',
 		adventures: [] as Adventure[],
@@ -41,6 +41,12 @@
 		const form = event.target as HTMLFormElement;
 		const formData = new FormData(form);
 
+		// make sure that start_date is before end_date
+		if (new Date(newCollection.start_date ?? '') > new Date(newCollection.end_date ?? '')) {
+			addToast('error', 'Start date must be before end date');
+			return;
+		}
+
 		const response = await fetch(form.action, {
 			method: form.method,
 			body: formData

frontend/src/lib/types.ts

@@ -24,6 +24,7 @@ export type Adventure = {
 		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
 	collection?: string | null;
 	latitude: number | null;
 	longitude: number | null;

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

@@ -192,7 +192,12 @@
 									<span class="text-sm text-muted-foreground"
 										>{new Date(adventure.date).toLocaleDateString(undefined, {
 											timeZone: 'UTC'
-										})}</span
+										})}{adventure.end_date && adventure.end_date !== ''
+											? ' - ' +
+												new Date(adventure.end_date).toLocaleDateString(undefined, {
+													timeZone: 'UTC'
+												})
+											: ''}</span
 									>
 								</div>
 							{/if}

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

@@ -184,6 +184,8 @@
 		on:close={() => (isAdventureModalOpen = false)}
 		on:save={saveOrCreate}
 		collection_id={collection.id}
+		startDate={collection.start_date}
+		endDate={collection.end_date}
 	/>
 {/if}