Merge pull request #166 from seanmorley15/development

Checklist Update

backend/server/adventures/admin.py

@@ -1,7 +1,7 @@
 import os
 from django.contrib import admin
 from django.utils.html import mark_safe
-from .models import Adventure, Collection, Transportation, Note
+from .models import Adventure, Checklist, ChecklistItem, Collection, Transportation, Note
 from worldtravel.models import Country, Region, VisitedRegion
 
 
@@ -76,6 +76,8 @@ admin.site.register(Region, RegionAdmin)
 admin.site.register(VisitedRegion)
 admin.site.register(Transportation)
 admin.site.register(Note)
+admin.site.register(Checklist)
+admin.site.register(ChecklistItem)
 
 admin.site.site_header = 'AdventureLog Admin'
 admin.site.site_title = 'AdventureLog Admin Site'

backend/server/adventures/migrations/0020_checklist_checklistitem.py

@@ -0,0 +1,41 @@
+# Generated by Django 5.0.7 on 2024-08-05 19:52
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0019_collection_updated_at'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Checklist',
+            fields=[
+                ('id', models.AutoField(primary_key=True, serialize=False)),
+                ('name', models.CharField(max_length=200)),
+                ('date', models.DateField(blank=True, null=True)),
+                ('is_public', models.BooleanField(default=False)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('collection', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='adventures.collection')),
+                ('user_id', models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='ChecklistItem',
+            fields=[
+                ('id', models.AutoField(primary_key=True, serialize=False)),
+                ('name', models.CharField(max_length=200)),
+                ('is_checked', models.BooleanField(default=False)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('checklist', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='adventures.checklist')),
+                ('user_id', models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

backend/server/adventures/models.py

@@ -134,3 +134,43 @@ class Note(models.Model):
 
     def __str__(self):
         return self.name
+    
+class Checklist(models.Model):
+    id = models.AutoField(primary_key=True)
+    user_id = models.ForeignKey(
+        User, on_delete=models.CASCADE, default=default_user_id)
+    name = models.CharField(max_length=200)
+    date = models.DateField(blank=True, null=True)
+    is_public = models.BooleanField(default=False)
+    collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    def clean(self):
+        if self.collection:
+            if self.collection.is_public and not self.is_public:
+                raise ValidationError('Checklists associated with a public collection must be public. Collection: ' + self.collection.name + ' Checklist: ' + self.name)
+            if self.user_id != self.collection.user_id:
+                raise ValidationError('Checklists must be associated with collections owned by the same user. Collection owner: ' + self.collection.user_id.username + ' Checklist owner: ' + self.user_id.username)
+
+    def __str__(self):
+        return self.name
+
+class ChecklistItem(models.Model):
+    id = models.AutoField(primary_key=True)
+    user_id = models.ForeignKey(
+        User, on_delete=models.CASCADE, default=default_user_id)
+    name = models.CharField(max_length=200)
+    is_checked = models.BooleanField(default=False)
+    checklist = models.ForeignKey('Checklist', on_delete=models.CASCADE)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    def clean(self):
+        if self.checklist.is_public and not self.checklist.is_public:
+            raise ValidationError('Checklist items associated with a public checklist must be public. Checklist: ' + self.checklist.name + ' Checklist item: ' + self.name)
+        if self.user_id != self.checklist.user_id:
+            raise ValidationError('Checklist items must be associated with checklists owned by the same user. Checklist owner: ' + self.checklist.user_id.username + ' Checklist item owner: ' + self.user_id.username)
+
+    def __str__(self):
+        return self.name

backend/server/adventures/serializers.py

@@ -1,5 +1,5 @@
 import os
-from .models import Adventure, Collection, Note, Transportation
+from .models import Adventure, ChecklistItem, Collection, Note, Transportation, Checklist
 from rest_framework import serializers
 
 class AdventureSerializer(serializers.ModelSerializer):
@@ -32,7 +32,7 @@ class TransportationSerializer(serializers.ModelSerializer):
             'link', 'date', 'flight_number', 'from_location', 'to_location', 
             'is_public', 'collection', 'created_at', 'updated_at'
         ]
-        read_only_fields = ['id', 'created_at', 'updated_at']
+        read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
 
     def validate(self, data):
         # Check if the collection is public and the transportation is not
@@ -65,7 +65,7 @@ class NoteSerializer(serializers.ModelSerializer):
             'id', 'user_id', 'name', 'content', 'date', 'links', 
             'is_public', 'collection', 'created_at', 'updated_at'
         ]
-        read_only_fields = ['id', 'created_at', 'updated_at']
+        read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
 
     def validate(self, data):
         # Check if the collection is public and the transportation is not
@@ -90,13 +90,119 @@ class NoteSerializer(serializers.ModelSerializer):
         validated_data['user_id'] = self.context['request'].user
         return super().create(validated_data)
     
+class ChecklistItemSerializer(serializers.ModelSerializer):
+        class Meta:
+            model = ChecklistItem
+            fields = [
+                'id', 'user_id', 'name', 'is_checked', 'checklist', 'created_at', 'updated_at'
+            ]
+            read_only_fields = ['id', 'created_at', 'updated_at', 'user_id', 'checklist']
+    
+        def validate(self, data):
+            # Check if the checklist is public and the checklist item is not
+            checklist = data.get('checklist')
+            is_checked = data.get('is_checked', False)
+            if checklist and checklist.is_public and not is_checked:
+                raise serializers.ValidationError(
+                    'Checklist items associated with a public checklist must be checked.'
+                )
+    
+            # Check if the user owns the checklist
+            request = self.context.get('request')
+            if request and checklist and checklist.user_id != request.user:
+                raise serializers.ValidationError(
+                    'Checklist items must be associated with checklists owned by the same user.'
+                )
+    
+            return data
+    
+        def create(self, validated_data):
+            # Set the user_id to the current user
+            validated_data['user_id'] = self.context['request'].user
+            return super().create(validated_data)
+    
+    
+class ChecklistSerializer(serializers.ModelSerializer):
+    items = ChecklistItemSerializer(many=True, source='checklistitem_set')
+    class Meta:
+        model = Checklist
+        fields = [
+            'id', 'user_id', 'name', 'date', 'is_public', 'collection', 'created_at', 'updated_at', 'items'
+        ]
+        read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
+    
+    def create(self, validated_data):
+        items_data = validated_data.pop('checklistitem_set')
+        checklist = Checklist.objects.create(**validated_data)
+        for item_data in items_data:
+            ChecklistItem.objects.create(checklist=checklist, **item_data)
+        return checklist
+    
+    def update(self, instance, validated_data):
+        items_data = validated_data.pop('checklistitem_set', [])
+        
+        # Update Checklist fields
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+        instance.save()
+        
+        # Get current items
+        current_items = instance.checklistitem_set.all()
+        current_item_ids = set(current_items.values_list('id', flat=True))
+        
+        # Update or create items
+        updated_item_ids = set()
+        for item_data in items_data:
+            item_id = item_data.get('id')
+            if item_id:
+                if item_id in current_item_ids:
+                    item = current_items.get(id=item_id)
+                    for attr, value in item_data.items():
+                        setattr(item, attr, value)
+                    item.save()
+                    updated_item_ids.add(item_id)
+                else:
+                    # If ID is provided but doesn't exist, create new item
+                    ChecklistItem.objects.create(checklist=instance, **item_data)
+            else:
+                # If no ID is provided, create new item
+                ChecklistItem.objects.create(checklist=instance, **item_data)
+        
+        # Delete items that are not in the updated data
+        items_to_delete = current_item_ids - updated_item_ids
+        instance.checklistitem_set.filter(id__in=items_to_delete).delete()
+        
+        return instance
+
+    def validate(self, data):
+        # Check if the collection is public and the checklist is not
+        collection = data.get('collection')
+        is_public = data.get('is_public', False)
+        if collection and collection.is_public and not is_public:
+            raise serializers.ValidationError(
+                'Checklists associated with a public collection must be public.'
+            )
+
+        # Check if the user owns the checklist
+        request = self.context.get('request')
+        if request and collection and collection.user_id != request.user:
+            raise serializers.ValidationError(
+                'Checklists must be associated with collections owned by the same user.'
+            )
+
+        return data
+
+   
+
+
 class CollectionSerializer(serializers.ModelSerializer):
     adventures = AdventureSerializer(many=True, read_only=True, source='adventure_set')
     transportations = TransportationSerializer(many=True, read_only=True, source='transportation_set')
     notes = NoteSerializer(many=True, read_only=True, source='note_set')
+    checklists = ChecklistSerializer(many=True, read_only=True, source='checklist_set')
 
     class Meta:
         model = Collection
         # fields are all plus the adventures field
-        fields = ['id', 'description', 'user_id', 'name', 'is_public', 'adventures', 'created_at', 'start_date', 'end_date', 'transportations', 'notes', 'updated_at']
+        fields = ['id', 'description', 'user_id', 'name', 'is_public', 'adventures', 'created_at', 'start_date', 'end_date', 'transportations', 'notes', 'updated_at', 'checklists']
         read_only_fields = ['id', 'created_at', 'updated_at']

backend/server/adventures/urls.py

@@ -1,6 +1,6 @@
 from django.urls import include, path
 from rest_framework.routers import DefaultRouter
-from .views import AdventureViewSet, CollectionViewSet, NoteViewSet, StatsViewSet, GenerateDescription, ActivityTypesView, TransportationViewSet
+from .views import AdventureViewSet, ChecklistViewSet, CollectionViewSet, NoteViewSet, StatsViewSet, GenerateDescription, ActivityTypesView, TransportationViewSet
 
 router = DefaultRouter()
 router.register(r'adventures', AdventureViewSet, basename='adventures')
@@ -10,6 +10,7 @@ router.register(r'generate', GenerateDescription, basename='generate')
 router.register(r'activity-types', ActivityTypesView, basename='activity-types')
 router.register(r'transportations', TransportationViewSet, basename='transportations')
 router.register(r'notes', NoteViewSet, basename='notes')
+router.register(r'checklists', ChecklistViewSet, basename='checklists')
 
 
 urlpatterns = [

backend/server/adventures/views.py

@@ -4,9 +4,9 @@ from rest_framework.decorators import action
 from rest_framework import viewsets
 from django.db.models.functions import Lower
 from rest_framework.response import Response
-from .models import Adventure, Collection, Transportation, Note
+from .models import Adventure, Checklist, Collection, Transportation, Note
 from worldtravel.models import VisitedRegion, Region, Country
-from .serializers import AdventureSerializer, CollectionSerializer, NoteSerializer, TransportationSerializer
+from .serializers import AdventureSerializer, CollectionSerializer, NoteSerializer, TransportationSerializer, ChecklistSerializer
 from rest_framework.permissions import IsAuthenticated
 from django.db.models import Q, Prefetch
 from .permissions import IsOwnerOrReadOnly, IsPublicReadOnly
@@ -310,19 +310,23 @@ class CollectionViewSet(viewsets.ModelViewSet):
             # For other actions, only include user's own collections
             adventures = Collection.objects.filter(user_id=self.request.user.id)
         
-        adventures = adventures.prefetch_related(
+        # adventures = adventures.prefetch_related(
-            Prefetch('adventure_set', queryset=Adventure.objects.filter(
+        #     Prefetch('adventure_set', queryset=Adventure.objects.filter(
-                Q(is_public=True) | Q(user_id=self.request.user.id)
+        #         Q(is_public=True) | Q(user_id=self.request.user.id)
-            ))
+        #     ))
-        ).prefetch_related(
+        # ).prefetch_related(
-            Prefetch('transportation_set', queryset=Transportation.objects.filter(
+        #     Prefetch('transportation_set', queryset=Transportation.objects.filter(
-                Q(is_public=True) | Q(user_id=self.request.user.id)
+        #         Q(is_public=True) | Q(user_id=self.request.user.id)
-            ))
+        #     ))
-        ).prefetch_related(
+        # ).prefetch_related(
-            Prefetch('note_set', queryset=Note.objects.filter(
+        #     Prefetch('note_set', queryset=Note.objects.filter(
-                Q(is_public=True) | Q(user_id=self.request.user.id)
+        #         Q(is_public=True) | Q(user_id=self.request.user.id)
-            ))
+        #     ))
-        )
+        # ).prefetch_related(
+        #     Prefetch('checklist_set', queryset=Checklist.objects.filter(
+        #         Q(is_public=True) | Q(user_id=self.request.user.id)
+        #     ))
+        # )
         return self.apply_sorting(adventures)
 
     def perform_create(self, serializer):
@@ -493,3 +497,38 @@ class NoteViewSet(viewsets.ModelViewSet):
 
     def perform_create(self, serializer):
         serializer.save(user_id=self.request.user)
+
+class ChecklistViewSet(viewsets.ModelViewSet):
+    queryset = Checklist.objects.all()
+    serializer_class = ChecklistSerializer
+    permission_classes = [IsAuthenticated]
+    filterset_fields = ['is_public', 'collection']
+
+    # return error message if user is not authenticated on the root endpoint
+    def list(self, request, *args, **kwargs):
+        # Prevent listing all adventures
+        return Response({"detail": "Listing all checklists is not allowed."},
+                        status=status.HTTP_403_FORBIDDEN)
+    
+    @action(detail=False, methods=['get'])
+    def all(self, request):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=400)
+        queryset = Checklist.objects.filter(
+            Q(user_id=request.user.id)
+        )
+        serializer = self.get_serializer(queryset, many=True)
+        return Response(serializer.data)
+    
+
+    def get_queryset(self):
+        
+        """
+        This view should return a list of all checklists
+        for the currently authenticated user.
+        """
+        user = self.request.user
+        return Checklist.objects.filter(user_id=user)
+
+    def perform_create(self, serializer):
+        serializer.save(user_id=self.request.user)

frontend/src/lib/components/ChecklistCard.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { addToast } from '$lib/toasts';
+	import type { Checklist, User } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import Launch from '~icons/mdi/launch';
+	import TrashCan from '~icons/mdi/trash-can';
+	import Calendar from '~icons/mdi/calendar';
+
+	export let checklist: Checklist;
+	export let user: User | null = null;
+
+	function editChecklist() {
+		dispatch('edit', checklist);
+	}
+
+	async function deleteChecklist() {
+		const res = await fetch(`/api/checklists/${checklist.id}`, {
+			method: 'DELETE'
+		});
+		if (res.ok) {
+			addToast('success', 'Checklist deleted successfully');
+			dispatch('delete', checklist.id);
+		} else {
+			addToast('Failed to delete checklist', 'error');
+		}
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+	<div class="card-body">
+		<div class="flex justify-between">
+			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
+				{checklist.name}
+			</h2>
+		</div>
+		<div class="badge badge-neutral">Checklist</div>
+		{#if checklist.items.length > 0}
+			<p>{checklist.items.length} {checklist.items.length > 1 ? 'Items' : 'Item'}</p>
+		{/if}
+		{#if checklist.date && checklist.date !== ''}
+			<div class="inline-flex items-center">
+				<Calendar class="w-5 h-5 mr-1" />
+				<p>{new Date(checklist.date).toLocaleDateString('en-US', { timeZone: 'UTC' })}</p>
+			</div>
+		{/if}
+		<div class="card-actions justify-end">
+			<!-- <button class="btn btn-neutral mb-2" on:click={() => goto(`/notes/${note.id}`)}
+				><Launch class="w-6 h-6" />Open Details</button
+			> -->
+			<button class="btn btn-neutral mb-2" on:click={editChecklist}>
+				<Launch class="w-6 h-6" />Open
+			</button>
+			{#if checklist.user_id == user?.pk}
+				<button
+					id="delete_adventure"
+					data-umami-event="Delete Checklist"
+					class="btn btn-warning"
+					on:click={deleteChecklist}><TrashCan class="w-6 h-6" /></button
+				>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/components/ChecklistModal.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { isValidUrl } from '$lib';
+	import type { Collection, Checklist, User, ChecklistItem } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+
+	export let checklist: Checklist | null = null;
+	export let collection: Collection;
+	export let user: User | null = null;
+
+	let items: ChecklistItem[] = [];
+
+	items = checklist?.items || [];
+
+	let warning: string | null = '';
+
+	let newStatus: boolean = false;
+	let newItem: string = '';
+
+	function addItem() {
+		if (newItem.trim() == '') {
+			warning = 'Item cannot be empty';
+			return;
+		}
+		if (newChecklist.items.find((item) => item.name.trim() == newItem)) {
+			warning = 'Item already exists';
+			return;
+		}
+		items = [
+			...items,
+			{
+				name: newItem,
+				is_checked: newStatus,
+				id: 0,
+				user_id: 0,
+				checklist: 0,
+				created_at: '',
+				updated_at: ''
+			}
+		];
+
+		newChecklist.items = items;
+
+		newItem = '';
+		newStatus = false;
+		warning = '';
+	}
+
+	let newChecklist = {
+		name: checklist?.name || '',
+		date: checklist?.date || undefined || null,
+		items: checklist?.items || [],
+		collection: collection.id,
+		is_public: collection.is_public
+	};
+
+	let initialName: string = checklist?.name || '';
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function removeItem(i: number) {
+		items = items.filter((_, index) => index !== i);
+		newChecklist.items = items;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+
+	async function save() {
+		// handles empty date
+		if (newChecklist.date == '') {
+			newChecklist.date = null;
+		}
+
+		if (checklist && checklist.id) {
+			console.log('newNote', newChecklist);
+			const res = await fetch(`/api/checklists/${checklist.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(newChecklist)
+			});
+			if (res.ok) {
+				let data = await res.json();
+				if (data) {
+					dispatch('save', data);
+				}
+			} else {
+				console.error('Failed to save checklist');
+			}
+		} else {
+			console.log('newNote', newChecklist);
+			const res = await fetch(`/api/checklists/`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(newChecklist)
+			});
+			if (res.ok) {
+				let data = await res.json();
+				if (data) {
+					dispatch('create', data);
+				}
+			} else {
+				let data = await res.json();
+				console.error('Failed to save checklist', data);
+				console.error('Failed to save checklist');
+			}
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">Checklist Editor</h3>
+		{#if initialName}
+			<p class="font-semibold text-md mb-2">Editing note {initialName}</p>
+		{/if}
+
+		{#if (checklist && user?.pk == checklist?.user_id) || !checklist}
+			<form on:submit|preventDefault>
+				<div class="form-control mb-2">
+					<label for="name">Name</label>
+					<input
+						type="text"
+						id="name"
+						class="input input-bordered w-full max-w-xs"
+						bind:value={newChecklist.name}
+					/>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Date</label>
+					<input
+						type="date"
+						id="date"
+						name="date"
+						min={collection.start_date || ''}
+						max={collection.end_date || ''}
+						bind:value={newChecklist.date}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="form-control mb-2 flex flex-row">
+					<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
+					<input
+						type="text"
+						id="new_item"
+						placeholder="New Item"
+						name="new_item"
+						bind:value={newItem}
+						class="input input-bordered w-full max-w-xs mt-1"
+						on:keydown={(e) => {
+							if (e.key === 'Enter') {
+								e.preventDefault();
+								addItem();
+							}
+						}}
+					/>
+					<button
+						type="button"
+						class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
+						on:click={addItem}
+					>
+						Add
+					</button>
+				</div>
+				{#if items.length > 0}
+					<div class="divider"></div>
+					<h2 class=" text-xl font-semibold mb-4 -mt-3">Items</h2>
+				{/if}
+
+				{#each items as item, i}
+					<div class="form-control mb-2 flex flex-row">
+						<input type="checkbox" bind:checked={item.is_checked} class="checkbox mt-4 mr-2" />
+						<input
+							type="text"
+							id="item_{i}"
+							name="item_{i}"
+							bind:value={item.name}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
+							on:click={() => removeItem(i)}
+						>
+							Remove
+						</button>
+					</div>
+				{/each}
+
+				{#if warning}
+					<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>{warning}</span>
+					</div>
+				{/if}
+
+				<button class="btn btn-primary mr-1" on:click={save}>Save</button>
+				<button class="btn btn-neutral" on:click={close}>Close</button>
+
+				{#if collection.is_public}
+					<div role="alert" class="alert mt-4">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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>This checklist is public because it is in a public collection.</span>
+					</div>
+				{/if}
+			</form>
+		{:else}
+			<form>
+				<div class="form-control mb-2">
+					<label for="name">Name</label>
+					<input
+						type="text"
+						id="name"
+						class="input input-bordered w-full max-w-xs"
+						bind:value={newChecklist.name}
+						readonly
+					/>
+				</div>
+				<div class="form-control mb-2">
+					<label for="content">Date</label>
+					<input
+						type="date"
+						id="date"
+						name="date"
+						min={collection.start_date || ''}
+						max={collection.end_date || ''}
+						bind:value={newChecklist.date}
+						readonly
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+
+				{#if items.length > 0}
+					<div class="divider"></div>
+					<h2 class=" text-xl font-semibold mb-4 -mt-3">Items</h2>
+				{/if}
+
+				{#each items as item, i}
+					<div class="form-control mb-2 flex flex-row">
+						<input
+							type="checkbox"
+							checked={item.is_checked}
+							class="checkbox mt-4 mr-2"
+							readonly={true}
+							disabled
+						/>
+						<input
+							type="text"
+							id="item_{i}"
+							name="item_{i}"
+							bind:value={item.name}
+							readonly
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+				{/each}
+
+				<button class="btn btn-neutral" on:click={close}>Close</button>
+			</form>
+		{/if}
+	</div>
+</dialog>

frontend/src/lib/components/NoteCard.svelte

@@ -7,6 +7,7 @@
 
 	import Launch from '~icons/mdi/launch';
 	import TrashCan from '~icons/mdi/trash-can';
+	import Calendar from '~icons/mdi/calendar';
 
 	export let note: Note;
 	export let user: User | null = null;
@@ -32,9 +33,20 @@
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
 	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{note.name}</h2>
+		<div class="flex justify-between">
+			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
+				{note.name}
+			</h2>
+		</div>
+		<div class="badge badge-neutral">Note</div>
 		{#if note.links && note.links.length > 0}
-			<p>{note.links.length} links</p>
+			<p>{note.links.length} {note.links.length > 1 ? 'Links' : 'Link'}</p>
+		{/if}
+		{#if note.date && note.date !== ''}
+			<div class="inline-flex items-center">
+				<Calendar class="w-5 h-5 mr-1" />
+				<p>{new Date(note.date).toLocaleDateString('en-US', { timeZone: 'UTC' })}</p>
+			</div>
 		{/if}
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-neutral mb-2" on:click={() => goto(`/notes/${note.id}`)}

frontend/src/lib/index.ts

@@ -1,5 +1,5 @@
 import inspirationalQuotes from './json/quotes.json';
-import type { Adventure, Collection } from './types';
+import type { Adventure, Checklist, Collection, Note, Transportation } from './types';
 
 export function getRandomQuote() {
 	const quotes = inspirationalQuotes.quotes;
@@ -74,3 +74,107 @@ export function isValidUrl(url: string) {
 		return false;
 	}
 }
+
+export function groupAdventuresByDate(
+	adventures: Adventure[],
+	startDate: Date,
+	numberOfDays: number
+): Record<string, Adventure[]> {
+	const groupedAdventures: Record<string, Adventure[]> = {};
+
+	for (let i = 0; i < numberOfDays; i++) {
+		const currentDate = new Date(startDate);
+		currentDate.setDate(startDate.getDate() + i);
+		const dateString = currentDate.toISOString().split('T')[0];
+		groupedAdventures[dateString] = [];
+	}
+
+	adventures.forEach((adventure) => {
+		if (adventure.date) {
+			const adventureDate = new Date(adventure.date).toISOString().split('T')[0];
+			if (groupedAdventures[adventureDate]) {
+				groupedAdventures[adventureDate].push(adventure);
+			}
+		}
+	});
+
+	return groupedAdventures;
+}
+
+export function groupTransportationsByDate(
+	transportations: Transportation[],
+	startDate: Date,
+	numberOfDays: number
+): Record<string, Transportation[]> {
+	const groupedTransportations: Record<string, Transportation[]> = {};
+
+	for (let i = 0; i < numberOfDays; i++) {
+		const currentDate = new Date(startDate);
+		currentDate.setDate(startDate.getDate() + i);
+		const dateString = currentDate.toISOString().split('T')[0];
+		groupedTransportations[dateString] = [];
+	}
+
+	transportations.forEach((transportation) => {
+		if (transportation.date) {
+			const transportationDate = new Date(transportation.date).toISOString().split('T')[0];
+			if (groupedTransportations[transportationDate]) {
+				groupedTransportations[transportationDate].push(transportation);
+			}
+		}
+	});
+
+	return groupedTransportations;
+}
+
+export function groupNotesByDate(
+	notes: Note[],
+	startDate: Date,
+	numberOfDays: number
+): Record<string, Note[]> {
+	const groupedNotes: Record<string, Note[]> = {};
+
+	for (let i = 0; i < numberOfDays; i++) {
+		const currentDate = new Date(startDate);
+		currentDate.setDate(startDate.getDate() + i);
+		const dateString = currentDate.toISOString().split('T')[0];
+		groupedNotes[dateString] = [];
+	}
+
+	notes.forEach((note) => {
+		if (note.date) {
+			const noteDate = new Date(note.date).toISOString().split('T')[0];
+			if (groupedNotes[noteDate]) {
+				groupedNotes[noteDate].push(note);
+			}
+		}
+	});
+
+	return groupedNotes;
+}
+
+export function groupChecklistsByDate(
+	checklists: Checklist[],
+	startDate: Date,
+	numberOfDays: number
+): Record<string, Checklist[]> {
+	const groupedChecklists: Record<string, Checklist[]> = {};
+
+	for (let i = 0; i < numberOfDays; i++) {
+		const currentDate = new Date(startDate);
+		currentDate.setDate(startDate.getDate() + i);
+		const dateString = currentDate.toISOString().split('T')[0];
+		groupedChecklists[dateString] = [];
+	}
+
+	checklists.forEach((checklist) => {
+		if (checklist.date) {
+			const noteDate = new Date(checklist.date).toISOString().split('T')[0];
+			if (groupedChecklists[noteDate]) {
+				groupedChecklists[noteDate].push(checklist);
+			}
+		}
+	});
+
+	return groupedChecklists;
+}

frontend/src/lib/types.ts

@@ -69,6 +69,7 @@ export type Collection = {
 	end_date?: string;
 	transportations?: Transportation[];
 	notes?: Note[];
+	checklists?: Checklist[];
 };
 
 export type OpenStreetMapPlace = {
@@ -118,3 +119,25 @@ export type Note = {
 	created_at: string; // ISO 8601 date string
 	updated_at: string; // ISO 8601 date string
 };
+
+export type Checklist = {
+	id: number;
+	user_id: number;
+	name: string;
+	items: ChecklistItem[];
+	date: string | null; // ISO 8601 date string
+	is_public: boolean;
+	collection: number | null;
+	created_at: string; // ISO 8601 date string
+	updated_at: string; // ISO 8601 date string
+};
+
+export type ChecklistItem = {
+	id: number;
+	user_id: number;
+	name: string;
+	is_checked: boolean;
+	checklist: number;
+	created_at: string; // ISO 8601 date string
+	updated_at: string; // ISO 8601 date string
+};

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Adventure, Collection, Note, Transportation } from '$lib/types';
+	import type { Adventure, Checklist, Collection, Note, Transportation } from '$lib/types';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
@@ -18,6 +18,15 @@
 	import NoteCard from '$lib/components/NoteCard.svelte';
 	import NoteModal from '$lib/components/NoteModal.svelte';
 
+	import {
+		groupAdventuresByDate,
+		groupNotesByDate,
+		groupTransportationsByDate,
+		groupChecklistsByDate
+	} from '$lib';
+	import ChecklistCard from '$lib/components/ChecklistCard.svelte';
+	import ChecklistModal from '$lib/components/ChecklistModal.svelte';
+
 	export let data: PageData;
 	console.log(data);
 
@@ -30,6 +39,7 @@
 
 	let transportations: Transportation[] = [];
 	let notes: Note[] = [];
+	let checklists: Checklist[] = [];
 
 	let numberOfDays: number = NaN;
 
@@ -42,6 +52,7 @@
 	let isShowingLinkModal: boolean = false;
 	let isShowingCreateModal: boolean = false;
 	let isShowingTransportationModal: boolean = false;
+	let isShowingChecklistModal: boolean = false;
 
 	onMount(() => {
 		if (data.props.adventure) {
@@ -63,84 +74,15 @@
 		if (collection.notes) {
 			notes = collection.notes;
 		}
+		if (collection.checklists) {
+			checklists = collection.checklists;
+		}
 	});
 
 	function deleteAdventure(event: CustomEvent<number>) {
 		adventures = adventures.filter((a) => a.id !== event.detail);
 	}
 
-	function groupAdventuresByDate(
-		adventures: Adventure[],
-		startDate: Date
-	): Record<string, Adventure[]> {
-		const groupedAdventures: Record<string, Adventure[]> = {};
-
-		for (let i = 0; i < numberOfDays; i++) {
-			const currentDate = new Date(startDate);
-			currentDate.setDate(startDate.getDate() + i);
-			const dateString = currentDate.toISOString().split('T')[0];
-			groupedAdventures[dateString] = [];
-		}
-
-		adventures.forEach((adventure) => {
-			if (adventure.date) {
-				const adventureDate = new Date(adventure.date).toISOString().split('T')[0];
-				if (groupedAdventures[adventureDate]) {
-					groupedAdventures[adventureDate].push(adventure);
-				}
-			}
-		});
-
-		return groupedAdventures;
-	}
-
-	function groupTransportationsByDate(
-		transportations: Transportation[],
-		startDate: Date
-	): Record<string, Transportation[]> {
-		const groupedTransportations: Record<string, Transportation[]> = {};
-
-		for (let i = 0; i < numberOfDays; i++) {
-			const currentDate = new Date(startDate);
-			currentDate.setDate(startDate.getDate() + i);
-			const dateString = currentDate.toISOString().split('T')[0];
-			groupedTransportations[dateString] = [];
-		}
-
-		transportations.forEach((transportation) => {
-			if (transportation.date) {
-				const transportationDate = new Date(transportation.date).toISOString().split('T')[0];
-				if (groupedTransportations[transportationDate]) {
-					groupedTransportations[transportationDate].push(transportation);
-				}
-			}
-		});
-
-		return groupedTransportations;
-	}
-
-	function groupNotesByDate(notes: Note[], startDate: Date): Record<string, Note[]> {
-		const groupedNotes: Record<string, Note[]> = {};
-
-		for (let i = 0; i < numberOfDays; i++) {
-			const currentDate = new Date(startDate);
-			currentDate.setDate(startDate.getDate() + i);
-			const dateString = currentDate.toISOString().split('T')[0];
-			groupedNotes[dateString] = [];
-		}
-
-		notes.forEach((note) => {
-			if (note.date) {
-				const noteDate = new Date(note.date).toISOString().split('T')[0];
-				if (groupedNotes[noteDate]) {
-					groupedNotes[noteDate].push(note);
-				}
-			}
-		});
-
-		return groupedNotes;
-	}
-
 	function createAdventure(event: CustomEvent<Adventure>) {
 		adventures = [event.detail, ...adventures];
 		isShowingCreateModal = false;
@@ -188,6 +130,7 @@
 	let isTransportationEditModalOpen: boolean = false;
 	let isNoteModalOpen: boolean = false;
 	let noteToEdit: Note | null;
+	let checklistToEdit: Checklist | null;
 
 	let newType: string;
 
@@ -270,6 +213,28 @@
 	/>
 {/if}
 
+{#if isShowingChecklistModal}
+	<ChecklistModal
+		{collection}
+		user={data.user}
+		checklist={checklistToEdit}
+		on:close={() => (isShowingChecklistModal = false)}
+		on:create={(event) => {
+			checklists = [event.detail, ...checklists];
+			isShowingChecklistModal = false;
+		}}
+		on:save={(event) => {
+			checklists = checklists.map((checklist) => {
+				if (checklist.id === event.detail.id) {
+					return event.detail;
+				}
+				return checklist;
+			});
+			isShowingChecklistModal = false;
+		}}
+	/>
+{/if}
+
 {#if isShowingCreateModal}
 	<NewAdventure
 		type={newType}
@@ -399,6 +364,16 @@
 						>
 							Note</button
 						>
+						<button
+							class="btn btn-primary"
+							on:click={() => {
+								isShowingChecklistModal = true;
+								newType = '';
+								checklistToEdit = null;
+							}}
+						>
+							Checklist</button
+						>
 
 						<!-- <button
 			class="btn btn-primary"
@@ -489,7 +464,27 @@
 		</div>
 	{/if}
 
+	{#if checklists.length > 0}
+		<h1 class="text-center font-bold text-4xl mt-4 mb-4">Checklists</h1>
+		<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+			{#each checklists as checklist}
+				<ChecklistCard
+					{checklist}
+					user={data.user || null}
+					on:delete={(event) => {
+						checklists = checklists.filter((n) => n.id != event.detail);
+					}}
+					on:edit={(event) => {
+						checklistToEdit = event.detail;
+						isShowingChecklistModal = true;
+					}}
+				/>
+			{/each}
+		</div>
+	{/if}
+
 	{#if collection.start_date && collection.end_date}
+		<div class="divider"></div>
 		<h1 class="text-center font-bold text-4xl mt-4">Itinerary by Date</h1>
 		{#if numberOfDays}
 			<p class="text-center text-lg pl-16 pr-16">Duration: {numberOfDays} days</p>
@@ -499,20 +494,29 @@
 				collection.end_date
 			).toLocaleDateString('en-US', { timeZone: 'UTC' })}
 		</p>
-		<div class="divider"></div>
 
 		{#each Array(numberOfDays) as _, i}
 			{@const currentDate = new Date(collection.start_date)}
 			{@const temp = currentDate.setDate(currentDate.getDate() + i)}
 			{@const dateString = currentDate.toISOString().split('T')[0]}
-			{@const dayAdventures = groupAdventuresByDate(adventures, new Date(collection.start_date))[
+			{@const dayAdventures = groupAdventuresByDate(
-				dateString
+				adventures,
-			]}
+				new Date(collection.start_date),
+				numberOfDays
+			)[dateString]}
 			{@const dayTransportations = groupTransportationsByDate(
 				transportations,
-				new Date(collection.start_date)
+				new Date(collection.start_date),
+				numberOfDays
+			)[dateString]}
+			{@const dayNotes = groupNotesByDate(notes, new Date(collection.start_date), numberOfDays)[
+				dateString
+			]}
+			{@const dayChecklists = groupChecklistsByDate(
+				checklists,
+				new Date(collection.start_date),
+				numberOfDays
 			)[dateString]}
-			{@const dayNotes = groupNotesByDate(notes, new Date(collection.start_date))[dateString]}
 
 			<h2 class="text-center font-semibold text-2xl mb-2 mt-4">
 				Day {i + 1} - {currentDate.toLocaleDateString('en-US', { timeZone: 'UTC' })}
@@ -560,8 +564,23 @@
 						/>
 					{/each}
 				{/if}
+				{#if dayChecklists.length > 0}
+					{#each dayChecklists as checklist}
+						<ChecklistCard
+							{checklist}
+							user={data.user || null}
+							on:delete={(event) => {
+								notes = notes.filter((n) => n.id != event.detail);
+							}}
+							on:edit={(event) => {
+								checklistToEdit = event.detail;
+								isShowingChecklistModal = true;
+							}}
+						/>
+					{/each}
+				{/if}
 
-				{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0}
+				{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0 && dayChecklists.length == 0}
 					<p class="text-center text-lg mt-2">Nothing planned for this day. Enjoy the journey!</p>
 				{/if}
 			</div>