From 5621e906652bdbd0266bfdeb39628b738226efba Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 15 Aug 2024 19:36:42 -0400
Subject: [PATCH 01/22] new image features

---
 backend/server/adventures/admin.py            | 17 ++++++++-
 .../migrations/0001_adventure_image.py        | 19 ++++++++++
 .../migrations/0002_adventureimage.py         | 27 ++++++++++++++
 .../0002_alter_adventureimage_adventure.py    | 19 ++++++++++
 .../adventures/migrations/migrate_images.py   | 29 +++++++++++++++
 backend/server/adventures/models.py           | 10 ++++++
 backend/server/adventures/serializers.py      | 36 ++++++++++++-------
 7 files changed, 143 insertions(+), 14 deletions(-)
 create mode 100644 backend/server/adventures/migrations/0001_adventure_image.py
 create mode 100644 backend/server/adventures/migrations/0002_adventureimage.py
 create mode 100644 backend/server/adventures/migrations/0002_alter_adventureimage_adventure.py
 create mode 100644 backend/server/adventures/migrations/migrate_images.py

diff --git a/backend/server/adventures/admin.py b/backend/server/adventures/admin.py
index 00294996..7ac68427 100644
--- a/backend/server/adventures/admin.py
+++ b/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, Checklist, ChecklistItem, Collection, Transportation, Note
+from .models import Adventure, Checklist, ChecklistItem, Collection, Transportation, Note, AdventureImage
 from worldtravel.models import Country, Region, VisitedRegion
 
 
@@ -57,6 +57,20 @@ def image_display(self, obj):
         else:
             return
         
+class AdventureImageAdmin(admin.ModelAdmin):
+    list_display = ('user_id', 'image_display')
+
+    def image_display(self, obj):
+        if obj.image:  # Ensure this field matches your model's image field
+            public_url = os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')
+            public_url = public_url.replace("'", "")
+            return mark_safe(f'<img src="{public_url}/media/{obj.image.name}" width="100px" height="100px"')
+        else:
+            return
+
+    image_display.short_description = 'Image Preview'
+                                        
+        
 class CollectionAdmin(admin.ModelAdmin):
     def adventure_count(self, obj):
         return obj.adventure_set.count()
@@ -78,6 +92,7 @@ def adventure_count(self, obj):
 admin.site.register(Note)
 admin.site.register(Checklist)
 admin.site.register(ChecklistItem)
+admin.site.register(AdventureImage, AdventureImageAdmin)
 
 admin.site.site_header = 'AdventureLog Admin'
 admin.site.site_title = 'AdventureLog Admin Site'
diff --git a/backend/server/adventures/migrations/0001_adventure_image.py b/backend/server/adventures/migrations/0001_adventure_image.py
new file mode 100644
index 00000000..6906db4e
--- /dev/null
+++ b/backend/server/adventures/migrations/0001_adventure_image.py
@@ -0,0 +1,19 @@
+# Generated by Django 5.0.8 on 2024-08-15 23:20
+
+import django_resized.forms
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', 'migrate_images'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='adventure',
+            name='image',
+            field=django_resized.forms.ResizedImageField(blank=True, crop=None, force_format='WEBP', keep_meta=True, null=True, quality=75, scale=None, size=[1920, 1080], upload_to='images/'),
+        ),
+    ]
diff --git a/backend/server/adventures/migrations/0002_adventureimage.py b/backend/server/adventures/migrations/0002_adventureimage.py
new file mode 100644
index 00000000..bf80832b
--- /dev/null
+++ b/backend/server/adventures/migrations/0002_adventureimage.py
@@ -0,0 +1,27 @@
+# Generated by Django 5.0.8 on 2024-08-15 23:17
+
+import django.db.models.deletion
+import django_resized.forms
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AdventureImage',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('image', django_resized.forms.ResizedImageField(crop=None, force_format='WEBP', keep_meta=True, quality=75, scale=None, size=[1920, 1080], upload_to='images/')),
+                ('adventure', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='adventures.adventure')),
+                ('user_id', models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]
diff --git a/backend/server/adventures/migrations/0002_alter_adventureimage_adventure.py b/backend/server/adventures/migrations/0002_alter_adventureimage_adventure.py
new file mode 100644
index 00000000..b03c3ade
--- /dev/null
+++ b/backend/server/adventures/migrations/0002_alter_adventureimage_adventure.py
@@ -0,0 +1,19 @@
+# Generated by Django 5.0.8 on 2024-08-15 23:31
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0001_adventure_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='adventureimage',
+            name='adventure',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='images', to='adventures.adventure'),
+        ),
+    ]
diff --git a/backend/server/adventures/migrations/migrate_images.py b/backend/server/adventures/migrations/migrate_images.py
new file mode 100644
index 00000000..9ef361f0
--- /dev/null
+++ b/backend/server/adventures/migrations/migrate_images.py
@@ -0,0 +1,29 @@
+from django.db import migrations
+
+def move_images_to_new_model(apps, schema_editor):
+    Adventure = apps.get_model('adventures', 'Adventure')
+    AdventureImage = apps.get_model('adventures', 'AdventureImage')
+
+    for adventure in Adventure.objects.all():
+        if adventure.image:
+            AdventureImage.objects.create(
+                adventure=adventure,
+                image=adventure.image,
+                user_id=adventure.user_id,
+            )
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0001_initial'),
+        ('adventures', '0002_adventureimage'),
+    ]
+
+    operations = [
+        migrations.RunPython(move_images_to_new_model),
+        migrations.RemoveField(
+            model_name='Adventure',
+            name='image',
+        ),
+    ]
\ No newline at end of file
diff --git a/backend/server/adventures/models.py b/backend/server/adventures/models.py
index 524674dc..7c563271 100644
--- a/backend/server/adventures/models.py
+++ b/backend/server/adventures/models.py
@@ -182,3 +182,13 @@ def clean(self):
 
     def __str__(self):
         return self.name
+
+class AdventureImage(models.Model):
+    id = models.UUIDField(default=uuid.uuid4, editable=False, unique=True, primary_key=True)
+    user_id = models.ForeignKey(
+        User, on_delete=models.CASCADE, default=default_user_id)
+    image = ResizedImageField(force_format="WEBP", quality=75, upload_to='images/')
+    adventure = models.ForeignKey(Adventure, related_name='images', on_delete=models.CASCADE)
+
+    def __str__(self):
+        return self.image.url
\ No newline at end of file
diff --git a/backend/server/adventures/serializers.py b/backend/server/adventures/serializers.py
index 1aeb75a8..01b58bf1 100644
--- a/backend/server/adventures/serializers.py
+++ b/backend/server/adventures/serializers.py
@@ -2,28 +2,38 @@
 from .models import Adventure, ChecklistItem, Collection, Note, Transportation, Checklist
 from rest_framework import serializers
 
-class AdventureSerializer(serializers.ModelSerializer):
+class AdventureImageSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Adventure
+        fields = ['id', 'image']
+        read_only_fields = ['id']
 
+    def to_representation(self, instance):
+        representation = super().to_representation(instance)
+        
+        # Build the full URL for the image
+        request = self.context.get('request')
+        if request and instance.image:
+            public_url = request.build_absolute_uri(instance.image.url)
+        else:
+            public_url = f"{os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')}/media/{instance.image.name}"
+        
+        representation['image'] = public_url
+        return representation
+
+
+                                        
+class AdventureSerializer(serializers.ModelSerializer):
+    images = AdventureImageSerializer(many=True, read_only=True)
     class Meta:
         model = Adventure
-        fields = '__all__' 
+        fields = ['id', 'user_id', 'name', 'description', 'rating', 'activity_types', 'location', 'date', 'is_public', 'collection', 'created_at', 'updated_at', 'images', 'link', 'type', 'longitude', 'latitude']
         read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
 
     def to_representation(self, instance):
         representation = super().to_representation(instance)
-        if instance.image:
-            public_url = os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')
-            #print(public_url)
-            # remove any  ' from the url
-            public_url = public_url.replace("'", "")
-            representation['image'] = f"{public_url}/media/{instance.image.name}"
         return representation
     
-    def validate_activity_types(self, value):
-        if value:
-            return [activity.lower() for activity in value]
-        return value
-    
 class TransportationSerializer(serializers.ModelSerializer):
 
     class Meta:

From 6e39a9784d1934b182a4a02b2c39d6c0bec59bd8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 15 Aug 2024 21:16:02 -0400
Subject: [PATCH 02/22] carousel

---
 .../src/lib/components/AdventureCard.svelte   | 21 +++++++++++++++++--
 frontend/src/lib/types.ts                     |  5 ++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index fe7d41de..895c9681 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -154,8 +154,25 @@
 >
 	<figure>
 		<!-- svelte-ignore a11y-img-redundant-alt -->
-		{#if adventure.image && adventure.image !== ''}
-			<img src={adventure.image} alt="Adventure Image" class="w-full h-48 object-cover" />
+		{#if adventure.images && adventure.images.length > 0}
+			<div class="carousel w-full">
+				{#each adventure.images as image, i}
+					<div id="slide{i}" class="carousel-item relative w-full">
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
+						<div
+							class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
+						>
+							{#if i > 0}
+								<a href="#slide{i - 1}" class="btn btn-circle">❮</a>
+							{/if}
+							{#if i < adventure.images.length - 1}
+								<a href="#slide{i + 1}" class="btn btn-circle">❯</a>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
 		{:else}
 			<img
 				src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index b00cf354..17f4f519 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -19,7 +19,10 @@ export type Adventure = {
 	description?: string | null;
 	rating?: number | null;
 	link?: string | null;
-	image?: string | null;
+	images: {
+		id: string;
+		image: string;
+	}[];
 	date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
 	collection?: string | null;
 	latitude: number | null;

From 2f51f88f005ae6d024f7d557873e75643ec1df7a Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 15 Aug 2024 21:29:36 -0400
Subject: [PATCH 03/22] Add rating stars

---
 .../src/lib/components/EditAdventure.svelte   | 165 ++++++++++++------
 .../src/lib/components/NewAdventure.svelte    |  48 +++++
 .../src/routes/adventures/[id]/+page.svelte   |   4 +-
 3 files changed, 159 insertions(+), 58 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 9774a780..806cdc7d 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -279,73 +279,126 @@
 						type="number"
 						min="0"
 						max="5"
-						name="rating"
-						id="rating"
+						hidden
 						bind:value={adventureToEdit.rating}
+						id="rating"
+						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
-				</div>
-				<input
-					type="text"
-					id="latitude"
-					hidden
-					name="latitude"
-					bind:value={adventureToEdit.latitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				<input
-					type="text"
-					id="longitude"
-					hidden
-					name="longitude"
-					bind:value={adventureToEdit.longitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				{#if adventureToEdit.collection === null}
-					<div class="mb-2">
-						<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-						><br />
+					<div class="rating -ml-3 mt-1 mb-4">
 						<input
-							type="checkbox"
-							class="toggle toggle-primary"
-							id="is_public"
-							name="is_public"
-							bind:checked={adventureToEdit.is_public}
+							type="radio"
+							name="rating-2"
+							class="rating-hidden"
+							checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
 						/>
-					</div>
-				{/if}
-
-				{#if adventureToEdit.is_public}
-					<div class="bg-neutral p-4 rounded-md shadow-sm">
-						<p class=" font-semibold">Share this Adventure!</p>
-						<div class="flex items-center justify-between">
-							<p class="text-card-foreground font-mono">
-								{window.location.origin}/adventures/{adventureToEdit.id}
-							</p>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							checked={adventureToEdit.rating === 1}
+							on:click={() => (adventureToEdit.rating = 1)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 2)}
+							checked={adventureToEdit.rating === 2}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 3)}
+							checked={adventureToEdit.rating === 3}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 4)}
+							checked={adventureToEdit.rating === 4}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 5)}
+							checked={adventureToEdit.rating === 5}
+						/>
+						{#if adventureToEdit.rating}
 							<button
 								type="button"
-								on:click={() => {
-									navigator.clipboard.writeText(
-										`${window.location.origin}/adventures/${adventureToEdit.id}`
-									);
-								}}
-								class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
+								class="btn btn-sm btn-error ml-2"
+								on:click={() => (adventureToEdit.rating = NaN)}
 							>
-								Copy Link
+								Remove
 							</button>
-						</div>
+						{/if}
 					</div>
-				{/if}
+					<input
+						type="text"
+						id="latitude"
+						hidden
+						name="latitude"
+						bind:value={adventureToEdit.latitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<input
+						type="text"
+						id="longitude"
+						hidden
+						name="longitude"
+						bind:value={adventureToEdit.longitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					{#if adventureToEdit.collection === null}
+						<div class="mb-2">
+							<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+							><br />
+							<input
+								type="checkbox"
+								class="toggle toggle-primary"
+								id="is_public"
+								name="is_public"
+								bind:checked={adventureToEdit.is_public}
+							/>
+						</div>
+					{/if}
+
+					{#if adventureToEdit.is_public}
+						<div class="bg-neutral p-4 rounded-md shadow-sm">
+							<p class=" font-semibold">Share this Adventure!</p>
+							<div class="flex items-center justify-between">
+								<p class="text-card-foreground font-mono">
+									{window.location.origin}/adventures/{adventureToEdit.id}
+								</p>
+								<button
+									type="button"
+									on:click={() => {
+										navigator.clipboard.writeText(
+											`${window.location.origin}/adventures/${adventureToEdit.id}`
+										);
+									}}
+									class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
+								>
+									Copy Link
+								</button>
+							</div>
+						</div>
+					{/if}
 
-				<button
-					type="submit"
-					id="edit_adventure"
-					data-umami-event="Edit Adventure"
-					class="btn btn-primary mr-4 mt-4"
-					on:click={submit}>Edit</button
-				>
-				<!-- if there is a button in form, it will close the modal -->
-				<button class="btn mt-4" on:click={close}>Close</button>
+					<button
+						type="submit"
+						id="edit_adventure"
+						data-umami-event="Edit Adventure"
+						class="btn btn-primary mr-4 mt-4"
+						on:click={submit}>Edit</button
+					>
+					<!-- if there is a button in form, it will close the modal -->
+					<button class="btn mt-4" on:click={close}>Close</button>
+				</div>
 			</form>
 			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
 		</div>
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 48268a4d..c4bbe730 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -326,11 +326,59 @@
 						type="number"
 						min="0"
 						max="5"
+						hidden
 						bind:value={newAdventure.rating}
 						id="rating"
 						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="rating -ml-3 mt-1">
+						<input
+							type="radio"
+							name="rating-2"
+							class="rating-hidden"
+							checked={Number.isNaN(newAdventure.rating)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 1)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 2)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 3)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 4)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 5)}
+						/>
+						{#if newAdventure.rating}
+							<button
+								type="button"
+								class="btn btn-sm btn-error ml-2"
+								on:click={() => (newAdventure.rating = NaN)}
+							>
+								Remove
+							</button>
+						{/if}
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="link"
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 1e6b0f50..2ad349c5 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -92,10 +92,10 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					{#if adventure.image}
+					{#if adventure.images && adventure.images.length > 0}
 						<div>
 							<img
-								src={adventure.image}
+								src={adventure.images[0].image}
 								alt={adventure.name}
 								width="1200"
 								height="600"

From e4de8a39a48ce053588647e1f84f1988cd4b1475 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 15 Aug 2024 21:36:21 -0400
Subject: [PATCH 04/22] textfield for description

---
 frontend/src/lib/components/EditAdventure.svelte | 13 +++++++------
 frontend/src/lib/components/NewAdventure.svelte  | 15 ++++++---------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 806cdc7d..61f68c5d 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -215,17 +215,16 @@
 					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
 					><br />
 					<div class="flex">
-						<input
-							type="text"
+						<textarea
 							id="description"
 							name="description"
 							bind:value={adventureToEdit.description}
-							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+							class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
 						/>
-						<button class="btn btn-neutral ml-2" type="button" on:click={generateDesc}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
-						>
 					</div>
+					<button class="btn btn-neutral" type="button" on:click={generateDesc}
+						><Wikipedia class="inline-block -mt-1  mb-1 w-6 h-6" />Generate Description</button
+					>
 				</div>
 				{#if adventureToEdit.type == 'visited' || adventureToEdit.type == 'planned'}
 					<div class="mb-2">
@@ -337,6 +336,8 @@
 							</button>
 						{/if}
 					</div>
+				</div>
+				<div class="mb-2">
 					<input
 						type="text"
 						id="latitude"
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index c4bbe730..ef1cf0d1 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -285,22 +285,19 @@
 					/>
 				</div>
 				<div class="mb-2">
-					<label for="description"
-						>Description<iconify-icon icon="mdi:notebook" class="text-lg ml-1 -mb-0.5"
-						></iconify-icon></label
+					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
 					><br />
 					<div class="flex">
-						<input
-							type="text"
+						<textarea
 							id="description"
 							name="description"
 							bind:value={newAdventure.description}
-							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+							class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
 						/>
-						<button class="btn btn-neutral ml-2" type="button" on:click={generateDesc}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
-						>
 					</div>
+					<button class="btn btn-neutral" type="button" on:click={generateDesc}
+						><Wikipedia class="inline-block -mt-1  mb-1 w-6 h-6" />Generate Description</button
+					>
 				</div>
 				{#if newAdventure.type == 'visited' || newAdventure.type == 'planned'}
 					<div class="mb-2">

From 03927a2394852c78f6a59134774724360e141cfd Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 16 Aug 2024 20:31:39 -0400
Subject: [PATCH 05/22] upload

---
 backend/server/adventures/serializers.py      |  6 +-
 backend/server/adventures/urls.py             |  3 +-
 backend/server/adventures/views.py            | 85 ++++++++++++++++++-
 .../src/routes/adventures/+page.server.ts     | 17 +++-
 4 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/backend/server/adventures/serializers.py b/backend/server/adventures/serializers.py
index 01b58bf1..1395afa5 100644
--- a/backend/server/adventures/serializers.py
+++ b/backend/server/adventures/serializers.py
@@ -1,11 +1,11 @@
 import os
-from .models import Adventure, ChecklistItem, Collection, Note, Transportation, Checklist
+from .models import Adventure, AdventureImage, ChecklistItem, Collection, Note, Transportation, Checklist
 from rest_framework import serializers
 
 class AdventureImageSerializer(serializers.ModelSerializer):
     class Meta:
-        model = Adventure
-        fields = ['id', 'image']
+        model = AdventureImage
+        fields = ['id', 'image', 'adventure']
         read_only_fields = ['id']
 
     def to_representation(self, instance):
diff --git a/backend/server/adventures/urls.py b/backend/server/adventures/urls.py
index 8bdd6b73..00e9cd43 100644
--- a/backend/server/adventures/urls.py
+++ b/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, ChecklistViewSet, CollectionViewSet, NoteViewSet, StatsViewSet, GenerateDescription, ActivityTypesView, TransportationViewSet
+from .views import AdventureViewSet, ChecklistViewSet, CollectionViewSet, NoteViewSet, StatsViewSet, GenerateDescription, ActivityTypesView, TransportationViewSet, AdventureImageViewSet
 
 router = DefaultRouter()
 router.register(r'adventures', AdventureViewSet, basename='adventures')
@@ -11,6 +11,7 @@
 router.register(r'transportations', TransportationViewSet, basename='transportations')
 router.register(r'notes', NoteViewSet, basename='notes')
 router.register(r'checklists', ChecklistViewSet, basename='checklists')
+router.register(r'images', AdventureImageViewSet, basename='images')
 
 
 urlpatterns = [
diff --git a/backend/server/adventures/views.py b/backend/server/adventures/views.py
index 4ba7bf86..1a91b2b7 100644
--- a/backend/server/adventures/views.py
+++ b/backend/server/adventures/views.py
@@ -1,12 +1,13 @@
+import uuid
 import requests
 from django.db import transaction
 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, Checklist, Collection, Transportation, Note
+from .models import Adventure, Checklist, Collection, Transportation, Note, AdventureImage
 from worldtravel.models import VisitedRegion, Region, Country
-from .serializers import AdventureSerializer, CollectionSerializer, NoteSerializer, TransportationSerializer, ChecklistSerializer
+from .serializers import AdventureImageSerializer, AdventureSerializer, CollectionSerializer, NoteSerializer, TransportationSerializer, ChecklistSerializer
 from rest_framework.permissions import IsAuthenticated
 from django.db.models import Q, Prefetch
 from .permissions import IsOwnerOrReadOnly, IsPublicReadOnly
@@ -528,5 +529,85 @@ def get_queryset(self):
         user = self.request.user
         return Checklist.objects.filter(user_id=user)
 
+    def perform_create(self, serializer):
+        serializer.save(user_id=self.request.user)
+
+class AdventureImageViewSet(viewsets.ModelViewSet):
+    serializer_class = AdventureImageSerializer
+    permission_classes = [IsAuthenticated]\
+    
+    # make sure that when creating and updating an image, the user is authenticated and the adventure user is the same as the authenticated user
+    def create(self, request, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+        adventure_id = request.data.get('adventure')
+        try:
+            adventure = Adventure.objects.get(id=adventure_id)
+        except Adventure.DoesNotExist:
+            return Response({"error": "Adventure not found"}, status=status.HTTP_404_NOT_FOUND)
+        
+        if adventure.user_id != request.user:
+            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+        
+        return super().create(request, *args, **kwargs)
+    
+    def update(self, request, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+        
+        adventure_id = request.data.get('adventure')
+        try:
+            adventure = Adventure.objects.get(id=adventure_id)
+        except Adventure.DoesNotExist:
+            return Response({"error": "Adventure not found"}, status=status.HTTP_404_NOT_FOUND)
+        
+        if adventure.user_id != request.user:
+            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+        
+        return super().update(request, *args, **kwargs)
+    
+    def destroy(self, request, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+        
+        instance = self.get_object()
+        adventure = instance.adventure
+        if adventure.user_id != request.user:
+            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+        
+        return super().destroy(request, *args, **kwargs)
+    
+    def partial_update(self, request, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+        
+        instance = self.get_object()
+        adventure = instance.adventure
+        if adventure.user_id != request.user:
+            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+        
+        return super().partial_update(request, *args, **kwargs)
+    
+    @action(detail=False, methods=['GET'], url_path='(?P<adventure_id>[0-9a-f-]+)')
+    def adventure_images(self, request, adventure_id=None, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+        
+        try:
+            adventure_uuid = uuid.UUID(adventure_id)
+        except ValueError:
+            return Response({"error": "Invalid adventure ID"}, status=status.HTTP_400_BAD_REQUEST)
+        
+        queryset = AdventureImage.objects.filter(
+            Q(adventure__id=adventure_uuid) & Q(user_id=request.user)
+        )
+        
+        serializer = self.get_serializer(queryset, many=True, context={'request': request})
+        return Response(serializer.data)
+
+    def get_queryset(self):
+        # This method is used for list and retrieve actions
+        return AdventureImage.objects.filter(user_id=self.request.user)
+
     def perform_create(self, serializer):
         serializer.save(user_id=self.request.user)
\ No newline at end of file
diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts
index ed0e38a1..29b12fda 100644
--- a/frontend/src/routes/adventures/+page.server.ts
+++ b/frontend/src/routes/adventures/+page.server.ts
@@ -159,7 +159,7 @@ export const actions: Actions = {
 		}
 		formDataToSend.append('rating', rating ? rating.toString() : '');
 		formDataToSend.append('link', link || '');
-		formDataToSend.append('image', image);
+		// formDataToSend.append('image', image);
 
 		// log each key-value pair in the FormData
 		for (let pair of formDataToSend.entries()) {
@@ -233,6 +233,21 @@ export const actions: Actions = {
 		let image_url = new_id.image;
 		let link_url = new_id.link;
 
+		if (image && image.size > 0) {
+			let imageForm = new FormData();
+			imageForm.append('image', image);
+			imageForm.append('adventure', id);
+			let imageRes = await fetch(`${serverEndpoint}/api/images/`, {
+				method: 'POST',
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				},
+				body: imageForm
+			});
+			let data = await imageRes.json();
+			console.log(data);
+		}
+
 		return { id, user_id, image_url, link };
 	},
 	edit: async (event) => {

From a264da39f5df444c4ee9e8a429348224fbe424f2 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 07:58:07 -0400
Subject: [PATCH 06/22] feat: Add location and activity type to Point type

chore: Update adventure image upload logic
---
 .../src/lib/components/NewAdventure.svelte    | 688 +++++++++---------
 frontend/src/lib/types.ts                     |   2 +
 .../src/routes/adventures/+page.server.ts     |  12 +
 3 files changed, 357 insertions(+), 345 deletions(-)

diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index ef1cf0d1..a19ee826 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -13,6 +13,11 @@
 	export let latitude: number | null = null;
 	export let collection_id: string | null = null;
 
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	let markers: Point[] = [];
+	let query: string = '';
+	let places: OpenStreetMapPlace[] = [];
+
 	import MapMarker from '~icons/mdi/map-marker';
 	import Calendar from '~icons/mdi/calendar';
 	import Notebook from '~icons/mdi/notebook';
@@ -32,13 +37,13 @@
 		id: '',
 		type: type,
 		name: '',
-		location: '',
-		date: '',
+		location: null,
+		date: null,
 		description: '',
 		activity_types: [],
 		rating: NaN,
 		link: '',
-		image: '',
+		images: [],
 		user_id: NaN,
 		latitude: null,
 		longitude: null,
@@ -52,6 +57,35 @@
 		reverseGeocode();
 	}
 
+	$: if (markers.length > 0) {
+		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
+		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
+		if (!newAdventure.location) {
+			newAdventure.location = markers[0].location;
+		}
+		if (!newAdventure.name) {
+			newAdventure.name = markers[0].name;
+		}
+	}
+
+	async function geocode(e: Event | null) {
+		if (e) {
+			e.preventDefault();
+		}
+		if (!query) {
+			alert('Please enter a location');
+			return;
+		}
+		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
+			headers: {
+				'User-Agent': `AdventureLog / ${appVersion} `
+			}
+		});
+		console.log(res);
+		let data = (await res.json()) as OpenStreetMapPlace[];
+		places = data;
+	}
+
 	async function reverseGeocode() {
 		let res = await fetch(
 			`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
@@ -96,369 +130,333 @@
 		}
 	}
 
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
-		let data = await res.json();
-		if (data.extract) {
-			newAdventure.description = data.extract;
-		}
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		const form = event.target as HTMLFormElement;
-		const formData = new FormData(form);
-
-		const response = await fetch(form.action, {
-			method: form.method,
-			body: formData
-		});
+	// async function generateDesc() {
+	// 	let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
+	// 	let data = await res.json();
+	// 	if (data.extract) {
+	// 		newAdventure.description = data.extract;
+	// 	}
+	// }
 
-		if (response.ok) {
-			const result = await response.json();
-			const data = JSON.parse(result.data); // Parsing the JSON string in the data field
-
-			if (data[1] !== undefined) {
-				// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
-				console.log(data);
-				let id = data[1];
-				let user_id = data[2];
-				let image_url = data[3];
-				let link = data[4];
-				if (newAdventure.is_public) {
-					navigator.clipboard.writeText(`${window.location.origin}/adventures/${id}`);
-				}
-				newAdventure.image = image_url;
-				newAdventure.id = id;
-				newAdventure.user_id = user_id;
-				newAdventure.link = link;
-				// turn the activity_types string into an array by splitting it at the commas
-				if (typeof newAdventure.activity_types === 'string') {
-					newAdventure.activity_types = (newAdventure.activity_types as string)
-						.split(',')
-						.map((activity_type) => activity_type.trim())
-						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
+	function addMarker(e: CustomEvent<any>) {
+		markers = [];
+		markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
+		console.log(markers);
+	}
 
-					// Remove duplicates
-					newAdventure.activity_types = Array.from(new Set(newAdventure.activity_types));
+	function imageSubmit() {
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				if (result.data.success) {
+					newAdventure.images.push(result.data.id);
+				} else {
+					addToast('error', result.data.error || 'Failed to upload image');
 				}
-				console.log(newAdventure);
-				dispatch('create', newAdventure);
-				addToast('success', 'Adventure created successfully!');
-				close();
 			}
-		}
+		};
 	}
 
-	function handleImageFetch(event: CustomEvent) {
-		const file = event.detail.file;
-		if (file && fileInput) {
-			// Create a DataTransfer object and add the file
-			const dataTransfer = new DataTransfer();
-			dataTransfer.items.add(file);
-
-			// Set the files property of the file input
-			fileInput.files = dataTransfer.files;
-
-			// Update the adventureToEdit object
-			newAdventure.image = file;
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		console.log(newAdventure);
+		let res = await fetch('/api/adventures/', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(newAdventure)
+		});
+		let data = await res.json();
+		if (data.id) {
+			newAdventure = data as Adventure;
+		} else {
+			addToast('error', 'Failed to create adventure');
 		}
-		isImageFetcherOpen = false;
-	}
-
-	function setLongLat(event: CustomEvent<Adventure>) {
-		console.log(event.detail);
-		isPointModalOpen = false;
 	}
 </script>
 
-{#if isPointModalOpen}
-	<PointSelectionModal
-		query={newAdventure.name}
-		on:close={() => (isPointModalOpen = false)}
-		on:submit={setLongLat}
-		bind:adventure={newAdventure}
-	/>
-{/if}
-
-{#if isImageFetcherOpen}
-	<ImageFetcher
-		on:image={handleImageFetch}
-		name={newAdventure.name}
-		on:close={() => (isImageFetcherOpen = false)}
-	/>
-{/if}
-
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<h3 class="font-bold text-lg">New {type} Adventure</h3>
-		<div
-			class="modal-action items-center"
-			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
-		>
-			<form
-				method="post"
-				style="width: 100%;"
-				on:submit={handleSubmit}
-				action="/adventures?/create"
-			>
-				<div class="join">
-					<input
-						class="join-item btn btn-neutral"
-						type="radio"
-						name="type"
-						id="visited"
-						value="visited"
-						aria-label="Visited"
-						checked={newAdventure.type === 'visited'}
-						on:click={() => (type = 'visited')}
-					/>
-					<input
-						class="join-item btn btn-neutral"
-						type="radio"
-						name="type"
-						id="planned"
-						value="planned"
-						aria-label="Planned"
-						checked={newAdventure.type === 'planned'}
-						on:click={() => (type = 'planned')}
-					/>
-				</div>
-
-				<input
-					type="text"
-					name="type"
-					id="type"
-					value={type}
-					hidden
-					readonly
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				<div class="mb-2">
-					<label for="name">Name</label><br />
-					<input
-						type="text"
-						id="name"
-						name="name"
-						bind:value={newAdventure.name}
-						class="input input-bordered w-full max-w-xs mt-1"
-						required
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<input
-						type="text"
-						id="location"
-						name="location"
-						bind:value={newAdventure.location}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="mb-2 mt-2">
-						<button
-							type="button"
-							class="btn btn-secondary"
-							on:click={() => (isPointModalOpen = true)}
-							><Map class="inline-block w-6 h-6" />{newAdventure.latitude && newAdventure.longitude
-								? 'Change'
-								: 'Select'} Location</button
-						>
+		{#if newAdventure.id === ''}
+			<div class="modal-action items-center">
+				<form
+					method="post"
+					style="width: 100%;"
+					on:submit={handleSubmit}
+					action="/adventures/create"
+				>
+					<!-- Grid layout for form fields -->
+					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<div>
+							<label for="name">Name</label><br />
+							<input
+								type="text"
+								id="name"
+								name="name"
+								bind:value={newAdventure.name}
+								class="input input-bordered w-full"
+								required
+							/>
+						</div>
+						<div class="join">
+							<input
+								class="join-item btn btn-neutral"
+								type="radio"
+								name="type"
+								id="visited"
+								value="visited"
+								aria-label="Visited"
+								checked={newAdventure.type === 'visited'}
+								on:click={() => (type = 'visited')}
+							/>
+							<input
+								class="join-item btn btn-neutral"
+								type="radio"
+								name="type"
+								id="planned"
+								value="planned"
+								aria-label="Planned"
+								checked={newAdventure.type === 'planned'}
+								on:click={() => (type = 'planned')}
+							/>
+						</div>
+						<div>
+							<label for="location">Location</label><br />
+							<input
+								type="text"
+								id="location"
+								name="location"
+								bind:value={newAdventure.location}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<label for="date">Date</label><br />
+							<input
+								type="date"
+								id="date"
+								name="date"
+								min={startDate || ''}
+								max={endDate || ''}
+								bind:value={newAdventure.date}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<label for="description">Description</label><br />
+							<textarea
+								id="description"
+								name="description"
+								bind:value={newAdventure.description}
+								class="textarea textarea-bordered w-full h-32"
+							></textarea>
+						</div>
+						<div>
+							<label for="activity_types">Activity Types</label><br />
+							<input
+								type="text"
+								id="activity_types"
+								name="activity_types"
+								hidden
+								bind:value={newAdventure.activity_types}
+								class="input input-bordered w-full"
+							/>
+							<ActivityComplete bind:activities={newAdventure.activity_types} />
+						</div>
+						<div>
+							<label for="rating"
+								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+							><br />
+							<input
+								type="number"
+								min="0"
+								max="5"
+								hidden
+								bind:value={newAdventure.rating}
+								id="rating"
+								name="rating"
+								class="input input-bordered w-full max-w-xs mt-1"
+							/>
+							<div class="rating -ml-3 mt-1">
+								<input
+									type="radio"
+									name="rating-2"
+									class="rating-hidden"
+									checked={Number.isNaN(newAdventure.rating)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (newAdventure.rating = 1)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (newAdventure.rating = 2)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (newAdventure.rating = 3)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (newAdventure.rating = 4)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (newAdventure.rating = 5)}
+								/>
+								{#if newAdventure.rating}
+									<button
+										type="button"
+										class="btn btn-sm btn-error ml-2"
+										on:click={() => (newAdventure.rating = NaN)}
+									>
+										Remove
+									</button>
+								{/if}
+							</div>
+							<!-- link -->
+							<div>
+								<label for="link">Link</label><br />
+								<input
+									type="text"
+									id="link"
+									name="link"
+									bind:value={newAdventure.link}
+									class="input input-bordered w-full"
+								/>
+							</div>
+							<div>
+								<div>
+									<label for="is_public"
+										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+									><br />
+									<input
+										type="checkbox"
+										class="toggle toggle-primary"
+										id="is_public"
+										name="is_public"
+										bind:checked={newAdventure.is_public}
+									/>
+								</div>
+								{#if newAdventure.is_public}
+									<p>
+										The link to this adventure will be copied to your clipboard once it is created!
+									</p>
+								{/if}
+							</div>
+						</div>
 					</div>
-				</div>
-				<div class="mb-2">
-					<label for="date"
-						>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
-						></iconify-icon></label
-					><br />
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={startDate || ''}
-						max={endDate || ''}
-						bind:value={newAdventure.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<div class="flex">
-						<textarea
-							id="description"
-							name="description"
-							bind:value={newAdventure.description}
-							class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
-						/>
-					</div>
-					<button class="btn btn-neutral" type="button" on:click={generateDesc}
-						><Wikipedia class="inline-block -mt-1  mb-1 w-6 h-6" />Generate Description</button
-					>
-				</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
-						><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={newAdventure.activity_types}
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<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
-					><br />
-					<input
-						type="number"
-						min="0"
-						max="5"
-						hidden
-						bind:value={newAdventure.rating}
-						id="rating"
-						name="rating"
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="rating -ml-3 mt-1">
-						<input
-							type="radio"
-							name="rating-2"
-							class="rating-hidden"
-							checked={Number.isNaN(newAdventure.rating)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (newAdventure.rating = 1)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (newAdventure.rating = 2)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (newAdventure.rating = 3)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (newAdventure.rating = 4)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (newAdventure.rating = 5)}
-						/>
-						{#if newAdventure.rating}
-							<button
-								type="button"
-								class="btn btn-sm btn-error ml-2"
-								on:click={() => (newAdventure.rating = NaN)}
-							>
-								Remove
-							</button>
-						{/if}
+					<h2 class="text-2xl font-semibold mb-2">Location Information</h2>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<div>
+							<label for="latitude">Location</label><br />
+							<input
+								type="text"
+								id="location"
+								name="location"
+								bind:value={newAdventure.location}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<form on:submit={geocode}>
+								<input
+									type="text"
+									placeholder="Seach for a location"
+									class="input input-bordered w-full max-w-xs"
+									id="search"
+									name="search"
+									bind:value={query}
+								/>
+								<button type="submit">Search</button>
+							</form>
+							{#if places.length > 0}
+								<div class="mt-4">
+									<h3 class="font-bold text-lg mb-4">Search Results</h3>
+									<ul>
+										{#each places as place}
+											<li>
+												<button
+													type="button"
+													class="btn btn-neutral mb-2"
+													on:click={() => {
+														markers = [
+															{
+																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+																location: place.display_name,
+																name: place.name,
+																activity_type: place.type
+															}
+														];
+													}}
+												>
+													{place.display_name}
+												</button>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{:else}
+								<p class="text-error text-lg">No results found</p>
+							{/if}
+						</div>
 					</div>
-				</div>
-				<div class="mb-2">
-					<label for="link"
-						>Link <iconify-icon icon="mdi:link" class="text-xl -mb-1"></iconify-icon></label
-					><br />
-					<input
-						type="text"
-						id="link"
-						name="link"
-						bind:value={newAdventure.link}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="image">Image </label><br />
-					<div class="flex">
-						<input
-							type="file"
-							id="image"
-							name="image"
-							bind:value={image}
-							bind:this={fileInput}
-							class="file-input file-input-bordered w-full max-w-xs mt-1"
-						/>
-						<button
-							class="btn btn-neutral ml-2"
-							type="button"
-							on:click={() => (isImageFetcherOpen = true)}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
+					<div>
+						<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 markers as marker}
+								<DefaultMarker lngLat={marker.lngLat} />
+							{/each}
+						</MapLibre>
 					</div>
-				</div>
-				<div class="mb-2">
-					<input
-						type="text"
-						id="latitude"
-						hidden
-						name="latitude"
-						bind:value={newAdventure.latitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
-					/>
-					<input
-						type="checkbox"
-						class="toggle toggle-primary"
-						id="is_public"
-						name="is_public"
-						bind:checked={newAdventure.is_public}
-					/>
-				</div>
-				{#if newAdventure.is_public}
-					<p>The link to this adventure will be copied to your clipboard once it is created!</p>
-				{/if}
-				<div class="mb-2">
-					<input
-						type="text"
-						id="longitude"
-						name="longitude"
-						hidden
-						bind:value={newAdventure.longitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<input
-						type="text"
-						id="collection"
-						name="collection"
-						hidden
-						bind:value={newAdventure.collection}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
 
-					<button
-						id="new_adventure"
-						data-umami-event="Create new Adventure"
-						type="submit"
-						class="btn btn-primary mr-4 mt-4">Create</button
+					<div class="mt-4">
+						<button type="submit" class="btn btn-primary">Create</button>
+						<button type="button" class="btn" on:click={close}>Close</button>
+					</div>
+				</form>
+			</div>
+		{:else}
+			<p>Upload images here</p>
+			<p>{newAdventure.id}</p>
+			<div class="mb-2">
+				<label for="image">Image </label><br />
+				<div class="flex">
+					<form
+						method="POST"
+						action="adventures?/image"
+						use:enhance={imageSubmit}
+						enctype="multipart/form-data"
 					>
-					<button type="button" class="btn mt-4" on:click={close}>Close</button>
+						<input type="file" name="image" bind:this={fileInput} accept="image/*" id="image" />
+						<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
+						<button type="submit">Upload Image</button>
+					</form>
 				</div>
-			</form>
-		</div>
+			</div>
+		{/if}
 	</div>
 </dialog>
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 17f4f519..07c829e1 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -58,6 +58,8 @@ export type Point = {
 		lng: number;
 	};
 	name: string;
+	location: string;
+	activity_type: string;
 };
 
 export type Collection = {
diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts
index 29b12fda..829a890a 100644
--- a/frontend/src/routes/adventures/+page.server.ts
+++ b/frontend/src/routes/adventures/+page.server.ts
@@ -425,5 +425,17 @@ export const actions: Actions = {
 		let image_url = adventure.image;
 		let link_url = adventure.link;
 		return { image_url, link_url };
+	},
+	image: async (event) => {
+		let formData = await event.request.formData();
+		let res = await fetch(`${serverEndpoint}/api/images/`, {
+			method: 'POST',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			},
+			body: formData
+		});
+		let data = await res.json();
+		return data;
 	}
 };

From 0479026b118256d5e45a0a4654e79991aa1c5b1c Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 11:12:15 -0400
Subject: [PATCH 07/22] Edit modal

---
 .../src/lib/components/EditAdventure.svelte   | 751 ++++++++++--------
 .../src/lib/components/NewAdventure.svelte    |  59 +-
 2 files changed, 455 insertions(+), 355 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 61f68c5d..5f02074b 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -1,37 +1,102 @@
 <script lang="ts">
-	export let adventureToEdit: Adventure;
 	import { createEventDispatcher } from 'svelte';
-	import type { Adventure } from '$lib/types';
-	const dispatch = createEventDispatcher();
+	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
 	import { onMount } from 'svelte';
+	import { enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
-	let modal: HTMLDialogElement;
+
+	export let type: string = 'visited';
+
+	export let longitude: number | null = null;
+	export let latitude: number | null = null;
+
+	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
+	let markers: Point[] = [];
+	let query: string = '';
+	let places: OpenStreetMapPlace[] = [];
+	let images: { id: string; image: string }[] = [];
+
+	import Earth from '~icons/mdi/earth';
+	import ActivityComplete from './ActivityComplete.svelte';
+	import { appVersion } from '$lib/config';
 
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
 
-	console.log(adventureToEdit.id);
+	export let adventureToEdit: Adventure;
+
+	images = adventureToEdit.images || [];
 
-	let originalName = adventureToEdit.name;
+	if (longitude && latitude) {
+		adventureToEdit.latitude = latitude;
+		adventureToEdit.longitude = longitude;
+		reverseGeocode();
+	}
 
-	let isPointModalOpen: boolean = false;
-	let isImageFetcherOpen: boolean = false;
+	$: {
+		if (!adventureToEdit.rating) {
+			adventureToEdit.rating = NaN;
+		}
+	}
+
+	let isDetails: boolean = true;
+
+	function saveAndClose() {
+		dispatch('saveEdit', adventureToEdit);
+		close();
+	}
+
+	$: if (markers.length > 0) {
+		adventureToEdit.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
+		adventureToEdit.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
+		if (!adventureToEdit.location) {
+			adventureToEdit.location = markers[0].location;
+		}
+		if (!adventureToEdit.name) {
+			adventureToEdit.name = markers[0].name;
+		}
+	}
+
+	async function geocode(e: Event | null) {
+		if (e) {
+			e.preventDefault();
+		}
+		if (!query) {
+			alert('Please enter a location');
+			return;
+		}
+		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
+			headers: {
+				'User-Agent': `AdventureLog / ${appVersion} `
+			}
+		});
+		console.log(res);
+		let data = (await res.json()) as OpenStreetMapPlace[];
+		places = data;
+	}
+
+	async function reverseGeocode() {
+		let res = await fetch(
+			`https://nominatim.openstreetmap.org/search?q=${adventureToEdit.latitude},${adventureToEdit.longitude}&format=jsonv2`,
+			{
+				headers: {
+					'User-Agent': `AdventureLog / ${appVersion} `
+				}
+			}
+		);
+		let data = (await res.json()) as OpenStreetMapPlace[];
+		if (data.length > 0) {
+			adventureToEdit.name = data[0]?.name || '';
+			adventureToEdit.activity_types?.push(data[0]?.type || '');
+			adventureToEdit.location = data[0]?.display_name || '';
+		}
+		console.log(data);
+	}
 
 	let fileInput: HTMLInputElement;
-	let image: File;
 
-	import MapMarker from '~icons/mdi/map-marker';
-	import Map from '~icons/mdi/map';
-	import Calendar from '~icons/mdi/calendar';
-	import Notebook from '~icons/mdi/notebook';
-	import ClipboardList from '~icons/mdi/clipboard-list';
-	import Star from '~icons/mdi/star';
-	import Attachment from '~icons/mdi/attachment';
-	import PointSelectionModal from './PointSelectionModal.svelte';
-	import Earth from '~icons/mdi/earth';
-	import Wikipedia from '~icons/mdi/wikipedia';
-	import ImageFetcher from './ImageFetcher.svelte';
-	import ActivityComplete from './ActivityComplete.svelte';
+	const dispatch = createEventDispatcher();
+	let modal: HTMLDialogElement;
 
 	onMount(async () => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@@ -40,8 +105,6 @@
 		}
 	});
 
-	function submit() {}
-
 	function close() {
 		dispatch('close');
 	}
@@ -52,324 +115,322 @@
 		}
 	}
 
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
-		let data = await res.json();
-		if (data.extract) {
-			adventureToEdit.description = data.extract;
-		}
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		const form = event.target as HTMLFormElement;
-		const formData = new FormData(form);
-
-		const response = await fetch(form.action, {
-			method: form.method,
-			body: formData
-		});
+	// async function generateDesc() {
+	// 	let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
+	// 	let data = await res.json();
+	// 	if (data.extract) {
+	// 		adventureToEdit.description = data.extract;
+	// 	}
+	// }
 
-		if (response.ok) {
-			const result = await response.json();
-			const data = JSON.parse(result.data);
-			console.log(data);
+	function addMarker(e: CustomEvent<any>) {
+		markers = [];
+		markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
+		console.log(markers);
+	}
 
-			if (data) {
-				if (typeof adventureToEdit.activity_types === 'string') {
-					adventureToEdit.activity_types = (adventureToEdit.activity_types as string)
-						.split(',')
-						.map((activity_type) => activity_type.trim())
-						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
+	function imageSubmit() {
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				if (result.data.id && result.data.image) {
+					adventureToEdit.images = [...adventureToEdit.images, result.data];
+					images = [...images, result.data];
+					addToast('success', 'Image uploaded');
 
-					// Remove duplicates
-					adventureToEdit.activity_types = Array.from(new Set(adventureToEdit.activity_types));
+					fileInput.value = '';
+					console.log(adventureToEdit);
+				} else {
+					addToast('error', result.data.error || 'Failed to upload image');
 				}
-
-				adventureToEdit.image = data[1];
-				adventureToEdit.link = data[2];
-				addToast('success', 'Adventure edited successfully!');
-				dispatch('saveEdit', adventureToEdit);
-				close();
-			} else {
-				addToast('warning', 'Error editing adventure');
-				console.log('Error editing adventure');
 			}
-		}
+		};
 	}
 
-	function handleImageFetch(event: CustomEvent) {
-		const file = event.detail.file;
-		if (file && fileInput) {
-			// Create a DataTransfer object and add the file
-			const dataTransfer = new DataTransfer();
-			dataTransfer.items.add(file);
-
-			// Set the files property of the file input
-			fileInput.files = dataTransfer.files;
-
-			// Update the adventureToEdit object
-			adventureToEdit.image = file;
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		console.log(adventureToEdit);
+		let res = await fetch(`/api/adventures/${adventureToEdit.id}`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(adventureToEdit)
+		});
+		let data = await res.json();
+		if (data.id) {
+			adventureToEdit = data as Adventure;
+			isDetails = false;
+			addToast('success', 'Adventure updated');
+		} else {
+			addToast('error', 'Failed to update adventure');
 		}
-		isImageFetcherOpen = false;
-	}
-
-	function setLongLat(event: CustomEvent<Adventure>) {
-		console.log(event.detail);
-		isPointModalOpen = false;
 	}
 </script>
 
-{#if isPointModalOpen}
-	<PointSelectionModal
-		bind:adventure={adventureToEdit}
-		on:close={() => (isPointModalOpen = false)}
-		on:submit={setLongLat}
-		query={adventureToEdit.name}
-	/>
-{/if}
-
-{#if isImageFetcherOpen}
-	<ImageFetcher
-		on:image={handleImageFetch}
-		name={adventureToEdit.name}
-		on:close={() => (isImageFetcherOpen = false)}
-	/>
-{/if}
-
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <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">Edit Adventure: {originalName}</h3>
-		<div
-			class="modal-action items-center"
-			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
-		>
-			<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/adventures?/edit">
-				<div class="mb-2">
-					<input
-						type="text"
-						id="adventureId"
-						name="adventureId"
-						hidden
-						readonly
-						bind:value={adventureToEdit.id}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<input
-						type="text"
-						id="type"
-						name="type"
-						hidden
-						readonly
-						bind:value={adventureToEdit.type}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<label for="name">Name</label><br />
-					<input
-						type="text"
-						name="name"
-						id="name"
-						bind:value={adventureToEdit.name}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<input
-						type="text"
-						id="location"
-						name="location"
-						bind:value={adventureToEdit.location}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="mb-2 mt-2">
-						<button
-							type="button"
-							class="btn btn-secondary"
-							on:click={() => (isPointModalOpen = true)}
-						>
-							<Map class="inline-block w-6 h-6" />{adventureToEdit.latitude &&
-							adventureToEdit.longitude
-								? 'Change'
-								: 'Select'}
-							Location</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={startDate || ''}
-						max={endDate || ''}
-						bind:value={adventureToEdit.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<div class="flex">
-						<textarea
-							id="description"
-							name="description"
-							bind:value={adventureToEdit.description}
-							class="textarea textarea-bordered h-32 w-full max-w-xl mt-1 mb-2"
-						/>
-					</div>
-					<button class="btn btn-neutral" type="button" on:click={generateDesc}
-						><Wikipedia class="inline-block -mt-1  mb-1 w-6 h-6" />Generate Description</button
-					>
-				</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
-						><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={adventureToEdit.activity_types}
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
-					</div>
-				{/if}
-				<div class="mb-2">
-					<label for="image">Image </label><br />
-					<div class="flex">
-						<input
-							type="file"
-							id="image"
-							name="image"
-							bind:value={image}
-							bind:this={fileInput}
-							class="file-input file-input-bordered w-full max-w-xs mt-1"
-						/>
-						<button
-							class="btn btn-neutral ml-2"
-							type="button"
-							on:click={() => (isImageFetcherOpen = true)}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
-					/>
-					<input
-						type="url"
-						id="link"
-						name="link"
-						bind:value={adventureToEdit.link}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="rating">Rating <Star class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
-					<input
-						type="number"
-						min="0"
-						max="5"
-						hidden
-						bind:value={adventureToEdit.rating}
-						id="rating"
-						name="rating"
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="rating -ml-3 mt-1 mb-4">
-						<input
-							type="radio"
-							name="rating-2"
-							class="rating-hidden"
-							checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							checked={adventureToEdit.rating === 1}
-							on:click={() => (adventureToEdit.rating = 1)}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (adventureToEdit.rating = 2)}
-							checked={adventureToEdit.rating === 2}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (adventureToEdit.rating = 3)}
-							checked={adventureToEdit.rating === 3}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (adventureToEdit.rating = 4)}
-							checked={adventureToEdit.rating === 4}
-						/>
-						<input
-							type="radio"
-							name="rating-2"
-							class="mask mask-star-2 bg-orange-400"
-							on:click={() => (adventureToEdit.rating = 5)}
-							checked={adventureToEdit.rating === 5}
-						/>
-						{#if adventureToEdit.rating}
-							<button
-								type="button"
-								class="btn btn-sm btn-error ml-2"
-								on:click={() => (adventureToEdit.rating = NaN)}
-							>
-								Remove
-							</button>
-						{/if}
-					</div>
-				</div>
-				<div class="mb-2">
-					<input
-						type="text"
-						id="latitude"
-						hidden
-						name="latitude"
-						bind:value={adventureToEdit.latitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<input
-						type="text"
-						id="longitude"
-						hidden
-						name="longitude"
-						bind:value={adventureToEdit.longitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					{#if adventureToEdit.collection === null}
-						<div class="mb-2">
-							<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">Edit {type} Adventure</h3>
+		{#if adventureToEdit.id === '' || isDetails}
+			<div class="modal-action items-center">
+				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
+					<!-- Grid layout for form fields -->
+					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
+						<div>
+							<label for="name">Name</label><br />
+							<input
+								type="text"
+								id="name"
+								name="name"
+								bind:value={adventureToEdit.name}
+								class="input input-bordered w-full"
+								required
+							/>
+						</div>
+						<div class="join">
+							<input
+								class="join-item btn btn-neutral"
+								type="radio"
+								name="type"
+								id="visited"
+								value="visited"
+								aria-label="Visited"
+								checked={adventureToEdit.type === 'visited'}
+								on:click={() => (type = 'visited')}
+							/>
+							<input
+								class="join-item btn btn-neutral"
+								type="radio"
+								name="type"
+								id="planned"
+								value="planned"
+								aria-label="Planned"
+								checked={adventureToEdit.type === 'planned'}
+								on:click={() => (type = 'planned')}
+							/>
+						</div>
+						<div>
+							<label for="location">Location</label><br />
+							<input
+								type="text"
+								id="location"
+								name="location"
+								bind:value={adventureToEdit.location}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<label for="date">Date</label><br />
+							<input
+								type="date"
+								id="date"
+								name="date"
+								min={startDate || ''}
+								max={endDate || ''}
+								bind:value={adventureToEdit.date}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<label for="description">Description</label><br />
+							<textarea
+								id="description"
+								name="description"
+								bind:value={adventureToEdit.description}
+								class="textarea textarea-bordered w-full h-32"
+							></textarea>
+						</div>
+						<div>
+							<label for="activity_types">Activity Types</label><br />
+							<input
+								type="text"
+								id="activity_types"
+								name="activity_types"
+								hidden
+								bind:value={adventureToEdit.activity_types}
+								class="input input-bordered w-full"
+							/>
+							<ActivityComplete bind:activities={adventureToEdit.activity_types} />
+						</div>
+						<div>
+							<label for="rating"
+								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
 							><br />
 							<input
-								type="checkbox"
-								class="toggle toggle-primary"
-								id="is_public"
-								name="is_public"
-								bind:checked={adventureToEdit.is_public}
+								type="number"
+								min="0"
+								max="5"
+								hidden
+								bind:value={adventureToEdit.rating}
+								id="rating"
+								name="rating"
+								class="input input-bordered w-full max-w-xs mt-1"
 							/>
+							<div class="rating -ml-3 mt-1">
+								<input
+									type="radio"
+									name="rating-2"
+									class="rating-hidden"
+									checked={Number.isNaN(adventureToEdit.rating)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventureToEdit.rating = 1)}
+									checked={adventureToEdit.rating === 1}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventureToEdit.rating = 2)}
+									checked={adventureToEdit.rating === 2}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventureToEdit.rating = 3)}
+									checked={adventureToEdit.rating === 3}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventureToEdit.rating = 4)}
+									checked={adventureToEdit.rating === 4}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventureToEdit.rating = 5)}
+									checked={adventureToEdit.rating === 5}
+								/>
+								{#if adventureToEdit.rating}
+									<button
+										type="button"
+										class="btn btn-sm btn-error ml-2"
+										on:click={() => (adventureToEdit.rating = NaN)}
+									>
+										Remove
+									</button>
+								{/if}
+							</div>
 						</div>
-					{/if}
+						<div>
+							<!-- link -->
+							<div>
+								<label for="link">Link</label><br />
+								<input
+									type="text"
+									id="link"
+									name="link"
+									bind:value={adventureToEdit.link}
+									class="input input-bordered w-full"
+								/>
+							</div>
+						</div>
+						<div>
+							<div>
+								<div>
+									<label for="is_public"
+										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+									><br />
+									<input
+										type="checkbox"
+										class="toggle toggle-primary"
+										id="is_public"
+										name="is_public"
+										bind:checked={adventureToEdit.is_public}
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="divider"></div>
+					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<div>
+							<label for="latitude">Location</label><br />
+							<input
+								type="text"
+								id="location"
+								name="location"
+								bind:value={adventureToEdit.location}
+								class="input input-bordered w-full"
+							/>
+						</div>
+						<div>
+							<form on:submit={geocode}>
+								<input
+									type="text"
+									placeholder="Seach for a location"
+									class="input input-bordered w-full max-w-xs"
+									id="search"
+									name="search"
+									bind:value={query}
+								/>
+								<button type="submit">Search</button>
+							</form>
+							{#if places.length > 0}
+								<div class="mt-4">
+									<h3 class="font-bold text-lg mb-4">Search Results</h3>
+									<ul>
+										{#each places as place}
+											<li>
+												<button
+													type="button"
+													class="btn btn-neutral mb-2"
+													on:click={() => {
+														markers = [
+															{
+																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+																location: place.display_name,
+																name: place.name,
+																activity_type: place.type
+															}
+														];
+													}}
+												>
+													{place.display_name}
+												</button>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{:else}
+								<p class="text-error text-lg">No results found</p>
+							{/if}
+						</div>
+					</div>
+					<div>
+						<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 markers as marker}
+								<DefaultMarker lngLat={marker.lngLat} />
+							{/each}
+						</MapLibre>
+					</div>
 
+					<div class="mt-4">
+						<button type="submit" class="btn btn-primary">Save & Next</button>
+						<button type="button" class="btn" on:click={close}>Close</button>
+					</div>
 					{#if adventureToEdit.is_public}
-						<div class="bg-neutral p-4 rounded-md shadow-sm">
+						<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
 							<p class=" font-semibold">Share this Adventure!</p>
 							<div class="flex items-center justify-between">
 								<p class="text-card-foreground font-mono">
@@ -389,19 +450,41 @@
 							</div>
 						</div>
 					{/if}
-
-					<button
-						type="submit"
-						id="edit_adventure"
-						data-umami-event="Edit Adventure"
-						class="btn btn-primary mr-4 mt-4"
-						on:click={submit}>Edit</button
+				</form>
+			</div>
+		{:else}
+			<p>Upload images here</p>
+			<p>{adventureToEdit.id}</p>
+			<div class="mb-2">
+				<label for="image">Image </label><br />
+				<div class="flex">
+					<form
+						method="POST"
+						action="adventures?/image"
+						use:enhance={imageSubmit}
+						enctype="multipart/form-data"
 					>
-					<!-- if there is a button in form, it will close the modal -->
-					<button class="btn mt-4" on:click={close}>Close</button>
+						<input
+							type="file"
+							name="image"
+							class="file-input file-input-bordered w-full max-w-xs"
+							bind:this={fileInput}
+							accept="image/*"
+							id="image"
+						/>
+						<input type="hidden" name="adventure" value={adventureToEdit.id} id="adventure" />
+						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
+					</form>
+				</div>
+				<div class=" inline-flex gap-2">
+					{#each images as image}
+						<img src={image.image} alt={image.id} class="w-32 h-32" />
+					{/each}
 				</div>
-			</form>
-			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
-		</div>
+			</div>
+			<div class="mt-4">
+				<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
+			</div>
+		{/if}
 	</div>
 </dialog>
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index a19ee826..3fb8e25f 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -4,8 +4,6 @@
 	import { onMount } from 'svelte';
 	import { enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
-	import PointSelectionModal from './PointSelectionModal.svelte';
-	import ImageFetcher from './ImageFetcher.svelte';
 
 	export let type: string = 'visited';
 
@@ -13,20 +11,13 @@
 	export let latitude: number | null = null;
 	export let collection_id: string | null = null;
 
-	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
 	let markers: Point[] = [];
 	let query: string = '';
 	let places: OpenStreetMapPlace[] = [];
+	let images: { id: string; image: string }[] = [];
 
-	import MapMarker from '~icons/mdi/map-marker';
-	import Calendar from '~icons/mdi/calendar';
-	import Notebook from '~icons/mdi/notebook';
-	import ClipboardList from '~icons/mdi/clipboard-list';
-	import Star from '~icons/mdi/star';
-	import Attachment from '~icons/mdi/attachment';
-	import Map from '~icons/mdi/map';
 	import Earth from '~icons/mdi/earth';
-	import Wikipedia from '~icons/mdi/wikipedia';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
 
@@ -57,6 +48,11 @@
 		reverseGeocode();
 	}
 
+	function saveAndClose() {
+		dispatch('create', newAdventure);
+		close();
+	}
+
 	$: if (markers.length > 0) {
 		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
 		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
@@ -104,12 +100,8 @@
 		console.log(data);
 	}
 
-	let image: File;
 	let fileInput: HTMLInputElement;
 
-	let isPointModalOpen: boolean = false;
-	let isImageFetcherOpen: boolean = false;
-
 	const dispatch = createEventDispatcher();
 	let modal: HTMLDialogElement;
 
@@ -147,8 +139,13 @@
 	function imageSubmit() {
 		return async ({ result }: any) => {
 			if (result.type === 'success') {
-				if (result.data.success) {
-					newAdventure.images.push(result.data.id);
+				if (result.data.id && result.data.image) {
+					newAdventure.images = [...newAdventure.images, result.data];
+					images = [...images, result.data];
+					addToast('success', 'Image uploaded');
+
+					fileInput.value = '';
+					console.log(newAdventure);
 				} else {
 					addToast('error', result.data.error || 'Failed to upload image');
 				}
@@ -191,7 +188,7 @@
 				>
 					<!-- Grid layout for form fields -->
 					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
 						<div>
 							<label for="name">Name</label><br />
 							<input
@@ -329,6 +326,8 @@
 									</button>
 								{/if}
 							</div>
+						</div>
+						<div>
 							<!-- link -->
 							<div>
 								<label for="link">Link</label><br />
@@ -340,6 +339,8 @@
 									class="input input-bordered w-full"
 								/>
 							</div>
+						</div>
+						<div>
 							<div>
 								<div>
 									<label for="is_public"
@@ -361,7 +362,8 @@
 							</div>
 						</div>
 					</div>
-					<h2 class="text-2xl font-semibold mb-2">Location Information</h2>
+					<div class="divider"></div>
+					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
 					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 						<div>
 							<label for="latitude">Location</label><br />
@@ -451,11 +453,26 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						use:enhance={imageSubmit}
 						enctype="multipart/form-data"
 					>
-						<input type="file" name="image" bind:this={fileInput} accept="image/*" id="image" />
+						<input
+							type="file"
+							name="image"
+							class="file-input file-input-bordered w-full max-w-xs"
+							bind:this={fileInput}
+							accept="image/*"
+							id="image"
+						/>
 						<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
-						<button type="submit">Upload Image</button>
+						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
 					</form>
 				</div>
+				<div class=" inline-flex gap-2">
+					{#each images as image}
+						<img src={image.image} alt={image.id} class="w-32 h-32" />
+					{/each}
+				</div>
+			</div>
+			<div class="mt-4">
+				<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
 			</div>
 		{/if}
 	</div>

From 9c75af5b7f36cc90dda80480b71016e503ff4ac8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 13:30:00 -0400
Subject: [PATCH 08/22] Edit modal

---
 backend/server/adventures/views.py            |  18 +--
 .../src/lib/components/EditAdventure.svelte   | 140 ++++++++++--------
 2 files changed, 87 insertions(+), 71 deletions(-)

diff --git a/backend/server/adventures/views.py b/backend/server/adventures/views.py
index 1a91b2b7..8f506f8b 100644
--- a/backend/server/adventures/views.py
+++ b/backend/server/adventures/views.py
@@ -534,7 +534,7 @@ def perform_create(self, serializer):
 
 class AdventureImageViewSet(viewsets.ModelViewSet):
     serializer_class = AdventureImageSerializer
-    permission_classes = [IsAuthenticated]\
+    permission_classes = [IsAuthenticated]
     
     # make sure that when creating and updating an image, the user is authenticated and the adventure user is the same as the authenticated user
     def create(self, request, *args, **kwargs):
@@ -566,16 +566,16 @@ def update(self, request, *args, **kwargs):
         
         return super().update(request, *args, **kwargs)
     
-    def destroy(self, request, *args, **kwargs):
-        if not request.user.is_authenticated:
-            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+    # def destroy(self, request, *args, **kwargs):
+    #     if not request.user.is_authenticated:
+    #         return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
         
-        instance = self.get_object()
-        adventure = instance.adventure
-        if adventure.user_id != request.user:
-            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+    #     instance = self.get_object()
+    #     adventure = instance.adventure
+    #     if adventure.user_id != request.user:
+    #         return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
         
-        return super().destroy(request, *args, **kwargs)
+    #     return super().destroy(request, *args, **kwargs)
     
     def partial_update(self, request, *args, **kwargs):
         if not request.user.is_authenticated:
diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 5f02074b..9ccbd1a6 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -5,8 +5,6 @@
 	import { enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
 
-	export let type: string = 'visited';
-
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
 
@@ -19,6 +17,7 @@
 	import Earth from '~icons/mdi/earth';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
+	import NewAdventure from './NewAdventure.svelte';
 
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
@@ -39,6 +38,19 @@
 		}
 	}
 
+	async function removeImage(id: string) {
+		let res = await fetch(`/api/images/${id}/`, {
+			method: 'DELETE'
+		});
+		let data = await res.json();
+		if (data.id) {
+			images = images.filter((image) => image.id !== id);
+			addToast('success', 'Image removed');
+		} else {
+			addToast('error', 'Failed to remove image');
+		}
+	}
+
 	let isDetails: boolean = true;
 
 	function saveAndClose() {
@@ -172,7 +184,7 @@
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">Edit {type} Adventure</h3>
+		<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
 		{#if adventureToEdit.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
@@ -190,38 +202,33 @@
 								required
 							/>
 						</div>
-						<div class="join">
-							<input
-								class="join-item btn btn-neutral"
-								type="radio"
-								name="type"
-								id="visited"
-								value="visited"
-								aria-label="Visited"
-								checked={adventureToEdit.type === 'visited'}
-								on:click={() => (type = 'visited')}
-							/>
-							<input
-								class="join-item btn btn-neutral"
-								type="radio"
-								name="type"
-								id="planned"
-								value="planned"
-								aria-label="Planned"
-								checked={adventureToEdit.type === 'planned'}
-								on:click={() => (type = 'planned')}
-							/>
-						</div>
 						<div>
-							<label for="location">Location</label><br />
-							<input
-								type="text"
-								id="location"
-								name="location"
-								bind:value={adventureToEdit.location}
-								class="input input-bordered w-full"
-							/>
+							<div class="form-control">
+								<label class="label cursor-pointer">
+									<span class="label-text">Visited</span>
+									<input
+										type="radio"
+										name="radio-10"
+										class="radio checked:bg-red-500"
+										on:click={() => (adventureToEdit.type = 'visited')}
+										checked={adventureToEdit.type == 'visited'}
+									/>
+								</label>
+							</div>
+							<div class="form-control">
+								<label class="label cursor-pointer">
+									<span class="label-text">Planned</span>
+									<input
+										type="radio"
+										name="radio-10"
+										class="radio checked:bg-blue-500"
+										on:click={() => (adventureToEdit.type = 'planned')}
+										checked={adventureToEdit.type == 'planned'}
+									/>
+								</label>
+							</div>
 						</div>
+
 						<div>
 							<label for="date">Date</label><br />
 							<input
@@ -234,6 +241,19 @@
 								class="input input-bordered w-full"
 							/>
 						</div>
+						<div>
+							<!-- link -->
+							<div>
+								<label for="link">Link</label><br />
+								<input
+									type="text"
+									id="link"
+									name="link"
+									bind:value={adventureToEdit.link}
+									class="input input-bordered w-full"
+								/>
+							</div>
+						</div>
 						<div>
 							<label for="description">Description</label><br />
 							<textarea
@@ -322,35 +342,6 @@
 								{/if}
 							</div>
 						</div>
-						<div>
-							<!-- link -->
-							<div>
-								<label for="link">Link</label><br />
-								<input
-									type="text"
-									id="link"
-									name="link"
-									bind:value={adventureToEdit.link}
-									class="input input-bordered w-full"
-								/>
-							</div>
-						</div>
-						<div>
-							<div>
-								<div>
-									<label for="is_public"
-										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-									><br />
-									<input
-										type="checkbox"
-										class="toggle toggle-primary"
-										id="is_public"
-										name="is_public"
-										bind:checked={adventureToEdit.is_public}
-									/>
-								</div>
-							</div>
-						</div>
 					</div>
 					<div class="divider"></div>
 					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
@@ -425,6 +416,23 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						</MapLibre>
 					</div>
 
+					<div>
+						<div>
+							<div>
+								<label for="is_public"
+									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+								><br />
+								<input
+									type="checkbox"
+									class="toggle toggle-primary"
+									id="is_public"
+									name="is_public"
+									bind:checked={adventureToEdit.is_public}
+								/>
+							</div>
+						</div>
+					</div>
+
 					<div class="mt-4">
 						<button type="submit" class="btn btn-primary">Save & Next</button>
 						<button type="button" class="btn" on:click={close}>Close</button>
@@ -478,6 +486,14 @@ it would also work to just use on:click on the MapLibre component itself. -->
 				</div>
 				<div class=" inline-flex gap-2">
 					{#each images as image}
+						<!-- remove button -->
+						<button
+							type="button"
+							class="btn btn-error"
+							on:click={() => {
+								removeImage(image.id);
+							}}
+						/>
 						<img src={image.image} alt={image.id} class="w-32 h-32" />
 					{/each}
 				</div>

From 6b9cd486036cc21e02f85089fdca789d927ff4a8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 13:59:49 -0400
Subject: [PATCH 09/22] remove image

---
 backend/server/adventures/views.py            | 34 +++++++++++++------
 .../src/lib/components/EditAdventure.svelte   |  9 ++---
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/backend/server/adventures/views.py b/backend/server/adventures/views.py
index 8f506f8b..ba69054d 100644
--- a/backend/server/adventures/views.py
+++ b/backend/server/adventures/views.py
@@ -535,8 +535,16 @@ def perform_create(self, serializer):
 class AdventureImageViewSet(viewsets.ModelViewSet):
     serializer_class = AdventureImageSerializer
     permission_classes = [IsAuthenticated]
-    
-    # make sure that when creating and updating an image, the user is authenticated and the adventure user is the same as the authenticated user
+
+    def dispatch(self, request, *args, **kwargs):
+        print(f"Method: {request.method}")
+        return super().dispatch(request, *args, **kwargs)
+
+    @action(detail=True, methods=['post'])
+    def image_delete(self, request, *args, **kwargs):
+        return self.destroy(request, *args, **kwargs)
+
+
     def create(self, request, *args, **kwargs):
         if not request.user.is_authenticated:
             return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
@@ -566,16 +574,21 @@ def update(self, request, *args, **kwargs):
         
         return super().update(request, *args, **kwargs)
     
-    # def destroy(self, request, *args, **kwargs):
-    #     if not request.user.is_authenticated:
-    #         return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+    def perform_destroy(self, instance):
+        print("perform_destroy")
+        return super().perform_destroy(instance)
+
+    def destroy(self, request, *args, **kwargs):
+        print("destroy")
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
         
-    #     instance = self.get_object()
-    #     adventure = instance.adventure
-    #     if adventure.user_id != request.user:
-    #         return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
+        instance = self.get_object()
+        adventure = instance.adventure
+        if adventure.user_id != request.user:
+            return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
         
-    #     return super().destroy(request, *args, **kwargs)
+        return super().destroy(request, *args, **kwargs)
     
     def partial_update(self, request, *args, **kwargs):
         if not request.user.is_authenticated:
@@ -606,7 +619,6 @@ def adventure_images(self, request, adventure_id=None, *args, **kwargs):
         return Response(serializer.data)
 
     def get_queryset(self):
-        # This method is used for list and retrieve actions
         return AdventureImage.objects.filter(user_id=self.request.user)
 
     def perform_create(self, serializer):
diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 9ccbd1a6..da038cc6 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -39,12 +39,13 @@
 	}
 
 	async function removeImage(id: string) {
-		let res = await fetch(`/api/images/${id}/`, {
-			method: 'DELETE'
+		let res = await fetch(`/api/images/${id}/image_delete`, {
+			method: 'POST'
 		});
-		let data = await res.json();
-		if (data.id) {
+		if (res.status === 204) {
 			images = images.filter((image) => image.id !== id);
+			adventureToEdit.images = images;
+			console.log(images);
 			addToast('success', 'Image removed');
 		} else {
 			addToast('error', 'Failed to remove image');

From b9ebbafd761d8d2b5deba1d8bb7cf8ac32dece12 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 14:13:23 -0400
Subject: [PATCH 10/22] remove image

---
 .../src/lib/components/EditAdventure.svelte   | 379 +++++++++--------
 .../src/lib/components/NewAdventure.svelte    | 398 +++++++++---------
 2 files changed, 382 insertions(+), 395 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index da038cc6..e68ad1e9 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -184,222 +184,221 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
 		{#if adventureToEdit.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 					<!-- Grid layout for form fields -->
 					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
-						<div>
-							<label for="name">Name</label><br />
-							<input
-								type="text"
-								id="name"
-								name="name"
-								bind:value={adventureToEdit.name}
-								class="input input-bordered w-full"
-								required
-							/>
-						</div>
-						<div>
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Visited</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-red-500"
-										on:click={() => (adventureToEdit.type = 'visited')}
-										checked={adventureToEdit.type == 'visited'}
-									/>
-								</label>
-							</div>
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Planned</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-blue-500"
-										on:click={() => (adventureToEdit.type = 'planned')}
-										checked={adventureToEdit.type == 'planned'}
-									/>
-								</label>
-							</div>
-						</div>
-
-						<div>
-							<label for="date">Date</label><br />
-							<input
-								type="date"
-								id="date"
-								name="date"
-								min={startDate || ''}
-								max={endDate || ''}
-								bind:value={adventureToEdit.date}
-								class="input input-bordered w-full"
-							/>
-						</div>
-						<div>
-							<!-- link -->
-							<div>
-								<label for="link">Link</label><br />
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
+					<div>
+						<label for="name">Name</label><br />
+						<input
+							type="text"
+							id="name"
+							name="name"
+							bind:value={adventureToEdit.name}
+							class="input input-bordered w-full"
+							required
+						/>
+					</div>
+					<div>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Visited</span>
 								<input
-									type="text"
-									id="link"
-									name="link"
-									bind:value={adventureToEdit.link}
-									class="input input-bordered w-full"
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-red-500"
+									on:click={() => (adventureToEdit.type = 'visited')}
+									checked={adventureToEdit.type == 'visited'}
 								/>
-							</div>
+							</label>
 						</div>
-						<div>
-							<label for="description">Description</label><br />
-							<textarea
-								id="description"
-								name="description"
-								bind:value={adventureToEdit.description}
-								class="textarea textarea-bordered w-full h-32"
-							></textarea>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Planned</span>
+								<input
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-blue-500"
+									on:click={() => (adventureToEdit.type = 'planned')}
+									checked={adventureToEdit.type == 'planned'}
+								/>
+							</label>
 						</div>
+					</div>
+
+					<div>
+						<label for="date">Date</label><br />
+						<input
+							type="date"
+							id="date"
+							name="date"
+							min={startDate || ''}
+							max={endDate || ''}
+							bind:value={adventureToEdit.date}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<!-- link -->
 						<div>
-							<label for="activity_types">Activity Types</label><br />
+							<label for="link">Link</label><br />
 							<input
 								type="text"
-								id="activity_types"
-								name="activity_types"
-								hidden
-								bind:value={adventureToEdit.activity_types}
+								id="link"
+								name="link"
+								bind:value={adventureToEdit.link}
 								class="input input-bordered w-full"
 							/>
-							<ActivityComplete bind:activities={adventureToEdit.activity_types} />
 						</div>
-						<div>
-							<label for="rating"
-								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-							><br />
+					</div>
+					<div>
+						<label for="description">Description</label><br />
+						<textarea
+							id="description"
+							name="description"
+							bind:value={adventureToEdit.description}
+							class="textarea textarea-bordered w-full h-32"
+						></textarea>
+					</div>
+					<div>
+						<label for="activity_types">Activity Types</label><br />
+						<input
+							type="text"
+							id="activity_types"
+							name="activity_types"
+							hidden
+							bind:value={adventureToEdit.activity_types}
+							class="input input-bordered w-full"
+						/>
+						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
+					</div>
+					<div>
+						<label for="rating"
+							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+						><br />
+						<input
+							type="number"
+							min="0"
+							max="5"
+							hidden
+							bind:value={adventureToEdit.rating}
+							id="rating"
+							name="rating"
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+						<div class="rating -ml-3 mt-1">
 							<input
-								type="number"
-								min="0"
-								max="5"
-								hidden
-								bind:value={adventureToEdit.rating}
-								id="rating"
-								name="rating"
-								class="input input-bordered w-full max-w-xs mt-1"
+								type="radio"
+								name="rating-2"
+								class="rating-hidden"
+								checked={Number.isNaN(adventureToEdit.rating)}
 							/>
-							<div class="rating -ml-3 mt-1">
-								<input
-									type="radio"
-									name="rating-2"
-									class="rating-hidden"
-									checked={Number.isNaN(adventureToEdit.rating)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 1)}
-									checked={adventureToEdit.rating === 1}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 2)}
-									checked={adventureToEdit.rating === 2}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 3)}
-									checked={adventureToEdit.rating === 3}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 4)}
-									checked={adventureToEdit.rating === 4}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 5)}
-									checked={adventureToEdit.rating === 5}
-								/>
-								{#if adventureToEdit.rating}
-									<button
-										type="button"
-										class="btn btn-sm btn-error ml-2"
-										on:click={() => (adventureToEdit.rating = NaN)}
-									>
-										Remove
-									</button>
-								{/if}
-							</div>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 1)}
+								checked={adventureToEdit.rating === 1}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 2)}
+								checked={adventureToEdit.rating === 2}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 3)}
+								checked={adventureToEdit.rating === 3}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 4)}
+								checked={adventureToEdit.rating === 4}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 5)}
+								checked={adventureToEdit.rating === 5}
+							/>
+							{#if adventureToEdit.rating}
+								<button
+									type="button"
+									class="btn btn-sm btn-error ml-2"
+									on:click={() => (adventureToEdit.rating = NaN)}
+								>
+									Remove
+								</button>
+							{/if}
 						</div>
+						<!-- </div> -->
 					</div>
 					<div class="divider"></div>
 					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<div>
-							<label for="latitude">Location</label><br />
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
+					<div>
+						<label for="latitude">Location</label><br />
+						<input
+							type="text"
+							id="location"
+							name="location"
+							bind:value={adventureToEdit.location}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<form on:submit={geocode} class="mt-2">
 							<input
 								type="text"
-								id="location"
-								name="location"
-								bind:value={adventureToEdit.location}
-								class="input input-bordered w-full"
+								placeholder="Seach for a location"
+								class="input input-bordered w-full max-w-xs"
+								id="search"
+								name="search"
+								bind:value={query}
 							/>
-						</div>
-						<div>
-							<form on:submit={geocode}>
-								<input
-									type="text"
-									placeholder="Seach for a location"
-									class="input input-bordered w-full max-w-xs"
-									id="search"
-									name="search"
-									bind:value={query}
-								/>
-								<button type="submit">Search</button>
-							</form>
-							{#if places.length > 0}
-								<div class="mt-4">
-									<h3 class="font-bold text-lg mb-4">Search Results</h3>
-									<ul>
-										{#each places as place}
-											<li>
-												<button
-													type="button"
-													class="btn btn-neutral mb-2"
-													on:click={() => {
-														markers = [
-															{
-																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-																location: place.display_name,
-																name: place.name,
-																activity_type: place.type
-															}
-														];
-													}}
-												>
-													{place.display_name}
-												</button>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{:else}
-								<p class="text-error text-lg">No results found</p>
-							{/if}
-						</div>
+							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+						</form>
 					</div>
+					{#if places.length > 0}
+						<div class="mt-4 max-w-full">
+							<h3 class="font-bold text-lg mb-4">Search Results</h3>
+
+							<div class="flex flex-wrap">
+								{#each places as place}
+									<button
+										type="button"
+										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
+										on:click={() => {
+											markers = [
+												{
+													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+													location: place.display_name,
+													name: place.name,
+													activity_type: place.type
+												}
+											];
+										}}
+									>
+										{place.display_name}
+									</button>
+								{/each}
+							</div>
+						</div>
+					{:else}
+						<p class="text-error text-lg">No results found</p>
+					{/if}
+					<!-- </div> -->
 					<div>
 						<MapLibre
 							style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 3fb8e25f..48239db1 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -56,12 +56,11 @@
 	$: if (markers.length > 0) {
 		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
 		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		if (!newAdventure.location) {
-			newAdventure.location = markers[0].location;
-		}
-		if (!newAdventure.name) {
-			newAdventure.name = markers[0].name;
-		}
+		// if (!newAdventure.location) {
+		newAdventure.location = markers[0].location;
+		// }
+
+		newAdventure.name = markers[0].name;
 	}
 
 	async function geocode(e: Event | null) {
@@ -176,7 +175,7 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<h3 class="font-bold text-lg">New {type} Adventure</h3>
 		{#if newAdventure.id === ''}
 			<div class="modal-action items-center">
@@ -188,236 +187,225 @@
 				>
 					<!-- Grid layout for form fields -->
 					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
-						<div>
-							<label for="name">Name</label><br />
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
+					<div>
+						<label for="name">Name</label><br />
+						<input
+							type="text"
+							id="name"
+							name="name"
+							bind:value={newAdventure.name}
+							class="input input-bordered w-full"
+							required
+						/>
+					</div>
+					<div class="join">
+						<input
+							class="join-item btn btn-neutral"
+							type="radio"
+							name="type"
+							id="visited"
+							value="visited"
+							aria-label="Visited"
+							checked={newAdventure.type === 'visited'}
+							on:click={() => (type = 'visited')}
+						/>
+						<input
+							class="join-item btn btn-neutral"
+							type="radio"
+							name="type"
+							id="planned"
+							value="planned"
+							aria-label="Planned"
+							checked={newAdventure.type === 'planned'}
+							on:click={() => (type = 'planned')}
+						/>
+					</div>
+
+					<div>
+						<label for="date">Date</label><br />
+						<input
+							type="date"
+							id="date"
+							name="date"
+							min={startDate || ''}
+							max={endDate || ''}
+							bind:value={newAdventure.date}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<label for="description">Description</label><br />
+						<textarea
+							id="description"
+							name="description"
+							bind:value={newAdventure.description}
+							class="textarea textarea-bordered w-full h-32"
+						></textarea>
+					</div>
+					<div>
+						<label for="activity_types">Activity Types</label><br />
+						<input
+							type="text"
+							id="activity_types"
+							name="activity_types"
+							hidden
+							bind:value={newAdventure.activity_types}
+							class="input input-bordered w-full"
+						/>
+						<ActivityComplete bind:activities={newAdventure.activity_types} />
+					</div>
+					<div>
+						<label for="rating"
+							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+						><br />
+						<input
+							type="number"
+							min="0"
+							max="5"
+							hidden
+							bind:value={newAdventure.rating}
+							id="rating"
+							name="rating"
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+						<div class="rating -ml-3 mt-1">
 							<input
-								type="text"
-								id="name"
-								name="name"
-								bind:value={newAdventure.name}
-								class="input input-bordered w-full"
-								required
+								type="radio"
+								name="rating-2"
+								class="rating-hidden"
+								checked={Number.isNaN(newAdventure.rating)}
 							/>
-						</div>
-						<div class="join">
 							<input
-								class="join-item btn btn-neutral"
 								type="radio"
-								name="type"
-								id="visited"
-								value="visited"
-								aria-label="Visited"
-								checked={newAdventure.type === 'visited'}
-								on:click={() => (type = 'visited')}
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 1)}
 							/>
 							<input
-								class="join-item btn btn-neutral"
 								type="radio"
-								name="type"
-								id="planned"
-								value="planned"
-								aria-label="Planned"
-								checked={newAdventure.type === 'planned'}
-								on:click={() => (type = 'planned')}
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 2)}
 							/>
-						</div>
-						<div>
-							<label for="location">Location</label><br />
 							<input
-								type="text"
-								id="location"
-								name="location"
-								bind:value={newAdventure.location}
-								class="input input-bordered w-full"
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 3)}
 							/>
-						</div>
-						<div>
-							<label for="date">Date</label><br />
 							<input
-								type="date"
-								id="date"
-								name="date"
-								min={startDate || ''}
-								max={endDate || ''}
-								bind:value={newAdventure.date}
-								class="input input-bordered w-full"
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 4)}
 							/>
-						</div>
-						<div>
-							<label for="description">Description</label><br />
-							<textarea
-								id="description"
-								name="description"
-								bind:value={newAdventure.description}
-								class="textarea textarea-bordered w-full h-32"
-							></textarea>
-						</div>
-						<div>
-							<label for="activity_types">Activity Types</label><br />
 							<input
-								type="text"
-								id="activity_types"
-								name="activity_types"
-								hidden
-								bind:value={newAdventure.activity_types}
-								class="input input-bordered w-full"
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 5)}
 							/>
-							<ActivityComplete bind:activities={newAdventure.activity_types} />
+							{#if newAdventure.rating}
+								<button
+									type="button"
+									class="btn btn-sm btn-error ml-2"
+									on:click={() => (newAdventure.rating = NaN)}
+								>
+									Remove
+								</button>
+							{/if}
 						</div>
+					</div>
+					<div>
+						<!-- link -->
 						<div>
-							<label for="rating"
-								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-							><br />
+							<label for="link">Link</label><br />
 							<input
-								type="number"
-								min="0"
-								max="5"
-								hidden
-								bind:value={newAdventure.rating}
-								id="rating"
-								name="rating"
-								class="input input-bordered w-full max-w-xs mt-1"
+								type="text"
+								id="link"
+								name="link"
+								bind:value={newAdventure.link}
+								class="input input-bordered w-full"
 							/>
-							<div class="rating -ml-3 mt-1">
-								<input
-									type="radio"
-									name="rating-2"
-									class="rating-hidden"
-									checked={Number.isNaN(newAdventure.rating)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 1)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 2)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 3)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 4)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 5)}
-								/>
-								{#if newAdventure.rating}
-									<button
-										type="button"
-										class="btn btn-sm btn-error ml-2"
-										on:click={() => (newAdventure.rating = NaN)}
-									>
-										Remove
-									</button>
-								{/if}
-							</div>
 						</div>
+					</div>
+					<div>
 						<div>
-							<!-- link -->
 							<div>
-								<label for="link">Link</label><br />
+								<label for="is_public"
+									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+								><br />
 								<input
-									type="text"
-									id="link"
-									name="link"
-									bind:value={newAdventure.link}
-									class="input input-bordered w-full"
+									type="checkbox"
+									class="toggle toggle-primary"
+									id="is_public"
+									name="is_public"
+									bind:checked={newAdventure.is_public}
 								/>
 							</div>
+							{#if newAdventure.is_public}
+								<p>
+									The link to this adventure will be copied to your clipboard once it is created!
+								</p>
+							{/if}
 						</div>
-						<div>
-							<div>
-								<div>
-									<label for="is_public"
-										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-									><br />
-									<input
-										type="checkbox"
-										class="toggle toggle-primary"
-										id="is_public"
-										name="is_public"
-										bind:checked={newAdventure.is_public}
-									/>
-								</div>
-								{#if newAdventure.is_public}
-									<p>
-										The link to this adventure will be copied to your clipboard once it is created!
-									</p>
-								{/if}
-							</div>
-						</div>
+						<!-- </div> -->
 					</div>
 					<div class="divider"></div>
 					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<div>
-							<label for="latitude">Location</label><br />
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
+					<div>
+						<label for="latitude">Location</label><br />
+						<input
+							type="text"
+							id="location"
+							name="location"
+							bind:value={newAdventure.location}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<form on:submit={geocode} class="mt-2">
 							<input
 								type="text"
-								id="location"
-								name="location"
-								bind:value={newAdventure.location}
-								class="input input-bordered w-full"
+								placeholder="Seach for a location"
+								class="input input-bordered w-full max-w-xs"
+								id="search"
+								name="search"
+								bind:value={query}
 							/>
-						</div>
-						<div>
-							<form on:submit={geocode}>
-								<input
-									type="text"
-									placeholder="Seach for a location"
-									class="input input-bordered w-full max-w-xs"
-									id="search"
-									name="search"
-									bind:value={query}
-								/>
-								<button type="submit">Search</button>
-							</form>
-							{#if places.length > 0}
-								<div class="mt-4">
-									<h3 class="font-bold text-lg mb-4">Search Results</h3>
-									<ul>
-										{#each places as place}
-											<li>
-												<button
-													type="button"
-													class="btn btn-neutral mb-2"
-													on:click={() => {
-														markers = [
-															{
-																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-																location: place.display_name,
-																name: place.name,
-																activity_type: place.type
-															}
-														];
-													}}
-												>
-													{place.display_name}
-												</button>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{:else}
-								<p class="text-error text-lg">No results found</p>
-							{/if}
-						</div>
+							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+						</form>
 					</div>
+					{#if places.length > 0}
+						<div class="mt-4 max-w-full">
+							<h3 class="font-bold text-lg mb-4">Search Results</h3>
+
+							<div class="flex flex-wrap">
+								{#each places as place}
+									<button
+										type="button"
+										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
+										on:click={() => {
+											markers = [
+												{
+													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+													location: place.display_name,
+													name: place.name,
+													activity_type: place.type
+												}
+											];
+										}}
+									>
+										{place.display_name}
+									</button>
+								{/each}
+							</div>
+						</div>
+					{:else}
+						<p class="text-error text-lg">No results found</p>
+					{/if}
 					<div>
 						<MapLibre
 							style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"

From 167154bed483f2635c2586e9a5de54ebf8fe8f0b Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 14:21:55 -0400
Subject: [PATCH 11/22] chore: Refactor adventure form components and improve
 image handling

---
 .../src/lib/components/EditAdventure.svelte   |  9 +-
 .../src/lib/components/NewAdventure.svelte    | 82 ++++++++++++-------
 2 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index e68ad1e9..44b5cb30 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -22,6 +22,8 @@
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
 
+	let noPlaces: boolean = false;
+
 	export let adventureToEdit: Adventure;
 
 	images = adventureToEdit.images || [];
@@ -86,6 +88,11 @@
 		console.log(res);
 		let data = (await res.json()) as OpenStreetMapPlace[];
 		places = data;
+		if (data.length === 0) {
+			noPlaces = true;
+		} else {
+			noPlaces = false;
+		}
 	}
 
 	async function reverseGeocode() {
@@ -395,7 +402,7 @@
 								{/each}
 							</div>
 						</div>
-					{:else}
+					{:else if noPlaces}
 						<p class="text-error text-lg">No results found</p>
 					{/if}
 					<!-- </div> -->
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 48239db1..1e10f465 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -24,6 +24,9 @@
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
 
+	let noPlaces: boolean = false;
+	let wikiError: string = '';
+
 	let newAdventure: Adventure = {
 		id: '',
 		type: type,
@@ -79,6 +82,12 @@
 		console.log(res);
 		let data = (await res.json()) as OpenStreetMapPlace[];
 		places = data;
+
+		if (data.length === 0) {
+			noPlaces = true;
+		} else {
+			noPlaces = false;
+		}
 	}
 
 	async function reverseGeocode() {
@@ -121,13 +130,16 @@
 		}
 	}
 
-	// async function generateDesc() {
-	// 	let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
-	// 	let data = await res.json();
-	// 	if (data.extract) {
-	// 		newAdventure.description = data.extract;
-	// 	}
-	// }
+	async function generateDesc() {
+		let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
+		let data = await res.json();
+		if (data.extract && data.extract.length > 0) {
+			newAdventure.description = data.extract;
+			wikiError = '';
+		} else {
+			wikiError = 'No description found';
+		}
+	}
 
 	function addMarker(e: CustomEvent<any>) {
 		markers = [];
@@ -176,7 +188,7 @@
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">New {type} Adventure</h3>
+		<h3 class="font-bold text-lg">New {newAdventure.type} Adventure</h3>
 		{#if newAdventure.id === ''}
 			<div class="modal-action items-center">
 				<form
@@ -199,27 +211,31 @@
 							required
 						/>
 					</div>
-					<div class="join">
-						<input
-							class="join-item btn btn-neutral"
-							type="radio"
-							name="type"
-							id="visited"
-							value="visited"
-							aria-label="Visited"
-							checked={newAdventure.type === 'visited'}
-							on:click={() => (type = 'visited')}
-						/>
-						<input
-							class="join-item btn btn-neutral"
-							type="radio"
-							name="type"
-							id="planned"
-							value="planned"
-							aria-label="Planned"
-							checked={newAdventure.type === 'planned'}
-							on:click={() => (type = 'planned')}
-						/>
+					<div>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Visited</span>
+								<input
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-red-500"
+									on:click={() => (newAdventure.type = 'visited')}
+									checked={newAdventure.type == 'visited'}
+								/>
+							</label>
+						</div>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Planned</span>
+								<input
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-blue-500"
+									on:click={() => (newAdventure.type = 'planned')}
+									checked={newAdventure.type == 'planned'}
+								/>
+							</label>
+						</div>
 					</div>
 
 					<div>
@@ -242,6 +258,10 @@
 							bind:value={newAdventure.description}
 							class="textarea textarea-bordered w-full h-32"
 						></textarea>
+						<button class="btn btn-neutral" type="button" on:click={generateDesc}
+							>Search Wikipedia</button
+						>
+						<p class="text-red-500">{wikiError}</p>
 					</div>
 					<div>
 						<label for="activity_types">Activity Types</label><br />
@@ -403,7 +423,7 @@
 								{/each}
 							</div>
 						</div>
-					{:else}
+					{:else if noPlaces}
 						<p class="text-error text-lg">No results found</p>
 					{/if}
 					<div>
@@ -431,7 +451,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 			</div>
 		{:else}
 			<p>Upload images here</p>
-			<p>{newAdventure.id}</p>
+			<!-- <p>{newAdventure.id}</p> -->
 			<div class="mb-2">
 				<label for="image">Image </label><br />
 				<div class="flex">

From 254a0d9498920443ed67979d687d09332da2af18 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 14:34:14 -0400
Subject: [PATCH 12/22] image card

---
 .../src/lib/components/AdventureCard.svelte   | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index 895c9681..b232e8e6 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -129,6 +129,20 @@
 		dispatch('edit', adventure);
 	}
 
+	let currentSlide = 0;
+
+	function nextSlide() {
+		currentSlide = (currentSlide + 1) % adventure.images.length;
+	}
+
+	function prevSlide() {
+		currentSlide = (currentSlide - 1 + adventure.images.length) % adventure.images.length;
+	}
+
+	function goToSlide(index: number) {
+		currentSlide = index;
+	}
+
 	function link() {
 		dispatch('link', adventure);
 	}
@@ -153,27 +167,27 @@
 	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 text-base-content"
 >
 	<figure>
-		<!-- svelte-ignore a11y-img-redundant-alt -->
 		{#if adventure.images && adventure.images.length > 0}
 			<div class="carousel w-full">
 				{#each adventure.images as image, i}
-					<div id="slide{i}" class="carousel-item relative w-full">
-						<!-- svelte-ignore a11y-missing-attribute -->
+					<div
+						class="carousel-item w-full"
+						style="display: {i === currentSlide ? 'block' : 'none'}"
+					>
 						<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
-						<div
-							class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
-						>
-							{#if i > 0}
-								<a href="#slide{i - 1}" class="btn btn-circle">❮</a>
-							{/if}
-							{#if i < adventure.images.length - 1}
-								<a href="#slide{i + 1}" class="btn btn-circle">❯</a>
-							{/if}
+						<div class="flex justify-center w-full py-2 gap-2">
+							{#each adventure.images as _, i}
+								<button
+									on:click={() => goToSlide(i)}
+									class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
+								>
+							{/each}
 						</div>
 					</div>
 				{/each}
 			</div>
 		{:else}
+			<!-- svelte-ignore a11y-img-redundant-alt -->
 			<img
 				src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
 				alt="No image available"

From 48ac320238db8aff652b614fad3381dc0f3f27e3 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 14:38:24 -0400
Subject: [PATCH 13/22] image card

---
 .../src/lib/components/EditAdventure.svelte   | 45 +++++++++----------
 .../src/lib/components/NewAdventure.svelte    |  4 +-
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 44b5cb30..cd972631 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -349,10 +349,25 @@
 								</button>
 							{/if}
 						</div>
-						<!-- </div> -->
+						<div>
+							<div class="mt-2">
+								<div>
+									<label for="is_public"
+										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+									><br />
+									<input
+										type="checkbox"
+										class="toggle toggle-primary"
+										id="is_public"
+										name="is_public"
+										bind:checked={adventureToEdit.is_public}
+									/>
+								</div>
+							</div>
+						</div>
 					</div>
 					<div class="divider"></div>
-					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
+					<h2 class="text-2xl font-semibold mb-2 mt-2">Location Information</h2>
 					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
 					<div>
 						<label for="latitude">Location</label><br />
@@ -369,7 +384,7 @@
 							<input
 								type="text"
 								placeholder="Seach for a location"
-								class="input input-bordered w-full max-w-xs"
+								class="input input-bordered w-full max-w-xs mb-2"
 								id="search"
 								name="search"
 								bind:value={query}
@@ -423,23 +438,6 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						</MapLibre>
 					</div>
 
-					<div>
-						<div>
-							<div>
-								<label for="is_public"
-									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-								><br />
-								<input
-									type="checkbox"
-									class="toggle toggle-primary"
-									id="is_public"
-									name="is_public"
-									bind:checked={adventureToEdit.is_public}
-								/>
-							</div>
-						</div>
-					</div>
-
 					<div class="mt-4">
 						<button type="submit" class="btn btn-primary">Save & Next</button>
 						<button type="button" class="btn" on:click={close}>Close</button>
@@ -469,7 +467,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 			</div>
 		{:else}
 			<p>Upload images here</p>
-			<p>{adventureToEdit.id}</p>
+			<!-- <p>{adventureToEdit.id}</p> -->
 			<div class="mb-2">
 				<label for="image">Image </label><br />
 				<div class="flex">
@@ -499,8 +497,9 @@ it would also work to just use on:click on the MapLibre component itself. -->
 							class="btn btn-error"
 							on:click={() => {
 								removeImage(image.id);
-							}}
-						/>
+							}}>X</button
+						>
+
 						<img src={image.image} alt={image.id} class="w-32 h-32" />
 					{/each}
 				</div>
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 1e10f465..fa4a00d0 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -352,7 +352,7 @@
 					</div>
 					<div>
 						<div>
-							<div>
+							<div class="mt-2">
 								<label for="is_public"
 									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
 								><br />
@@ -390,7 +390,7 @@
 							<input
 								type="text"
 								placeholder="Seach for a location"
-								class="input input-bordered w-full max-w-xs"
+								class="input input-bordered w-full max-w-xs mb-2"
 								id="search"
 								name="search"
 								bind:value={query}

From d7db09693a786f7f23c993511c74881c1597db92 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 15:18:43 -0400
Subject: [PATCH 14/22] autofetch features

---
 .../src/lib/components/EditAdventure.svelte   | 87 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index cd972631..5e5592ae 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import { enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
+	import { deserialize } from '$app/forms';
 
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
@@ -17,7 +18,6 @@
 	import Earth from '~icons/mdi/earth';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
-	import NewAdventure from './NewAdventure.svelte';
 
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
@@ -26,6 +26,9 @@
 
 	export let adventureToEdit: Adventure;
 
+	let url: string = '';
+	let imageError: string = '';
+
 	images = adventureToEdit.images || [];
 
 	if (longitude && latitude) {
@@ -40,6 +43,8 @@
 		}
 	}
 
+	let imageSearch: string = adventureToEdit.name || '';
+
 	async function removeImage(id: string) {
 		let res = await fetch(`/api/images/${id}/image_delete`, {
 			method: 'POST'
@@ -72,6 +77,60 @@
 		}
 	}
 
+	async function fetchImage() {
+		let res = await fetch(url);
+		let data = await res.blob();
+		if (!data) {
+			imageError = 'No image found at that URL.';
+			return;
+		}
+		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
+		let formData = new FormData();
+		formData.append('image', file);
+		formData.append('adventure', adventureToEdit.id);
+		let res2 = await fetch(`/adventures?/image`, {
+			method: 'POST',
+			body: formData
+		});
+		let data2 = await res2.json();
+		console.log(data2);
+		if (data2.type === 'success') {
+			images = [...images, data2];
+			adventureToEdit.images = images;
+			addToast('success', 'Image uploaded');
+		} else {
+			addToast('error', 'Failed to upload image');
+		}
+	}
+
+	async function fetchWikiImage() {
+		let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
+		let data = await res.json();
+		if (data.source) {
+			let imageUrl = data.source;
+			let res = await fetch(imageUrl);
+			let blob = await res.blob();
+			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
+			let formData = new FormData();
+			formData.append('image', file);
+			formData.append('adventure', adventureToEdit.id);
+			let res2 = await fetch(`/adventures?/image`, {
+				method: 'POST',
+				body: formData
+			});
+			if (res2.ok) {
+				let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
+				console.log(newData);
+				let newImage = { id: newData.data.id, image: newData.data.image };
+				console.log(newImage);
+				images = [...images, newImage];
+				adventureToEdit.images = images;
+				addToast('success', 'Image uploaded');
+			} else {
+				addToast('error', 'Failed to upload image');
+			}
+		}
+	}
 	async function geocode(e: Event | null) {
 		if (e) {
 			e.preventDefault();
@@ -489,6 +548,32 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
 					</form>
 				</div>
+				<div class="mt-2">
+					<label for="url">URL</label><br />
+					<input
+						type="text"
+						id="url"
+						name="url"
+						bind:value={url}
+						class="input input-bordered w-full"
+					/>
+					<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
+						>Fetch Image</button
+					>
+				</div>
+				<div class="mt-2">
+					<label for="name">Wikipedia</label><br />
+					<input
+						type="text"
+						id="name"
+						name="name"
+						bind:value={imageSearch}
+						class="input input-bordered w-full"
+					/>
+					<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
+						>Fetch Image</button
+					>
+				</div>
 				<div class=" inline-flex gap-2">
 					{#each images as image}
 						<!-- remove button -->

From 620c7298a9a0787d76e89af60e2e9c4dfc244077 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 16:28:56 -0400
Subject: [PATCH 15/22] better error managment

---
 .../src/lib/components/EditAdventure.svelte   |  34 +++--
 .../src/lib/components/NewAdventure.svelte    | 129 +++++++++++++++++-
 2 files changed, 149 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 5e5592ae..23e38726 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -28,6 +28,7 @@
 
 	let url: string = '';
 	let imageError: string = '';
+	let wikiImageError: string = '';
 
 	images = adventureToEdit.images || [];
 
@@ -106,6 +107,10 @@
 	async function fetchWikiImage() {
 		let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
 		let data = await res.json();
+		if (!res.ok) {
+			wikiImageError = 'Failed to fetch image';
+			return;
+		}
 		if (data.source) {
 			let imageUrl = data.source;
 			let res = await fetch(imageUrl);
@@ -128,6 +133,7 @@
 				addToast('success', 'Image uploaded');
 			} else {
 				addToast('error', 'Failed to upload image');
+				wikiImageError = 'Failed to upload image';
 			}
 		}
 	}
@@ -574,18 +580,24 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						>Fetch Image</button
 					>
 				</div>
-				<div class=" inline-flex gap-2">
+				<div class="divider"></div>
+				{#if images.length > 0}
+					<h1 class="font-semibold text-xl">My Images</h1>
+				{:else}
+					<h1 class="font-semibold text-xl">No Images</h1>
+				{/if}
+				<div class="flex flex-wrap gap-2 mt-2">
 					{#each images as image}
-						<!-- remove button -->
-						<button
-							type="button"
-							class="btn btn-error"
-							on:click={() => {
-								removeImage(image.id);
-							}}>X</button
-						>
-
-						<img src={image.image} alt={image.id} class="w-32 h-32" />
+						<div class="relative h-32 w-32">
+							<button
+								type="button"
+								class="absolute top-0 left-0 btn btn-error btn-sm z-10"
+								on:click={() => removeImage(image.id)}
+							>
+								X
+							</button>
+							<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
+						</div>
 					{/each}
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index fa4a00d0..b6b1d151 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { enhance } from '$app/forms';
+	import { deserialize, enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
 
 	export let type: string = 'visited';
@@ -26,6 +26,7 @@
 
 	let noPlaces: boolean = false;
 	let wikiError: string = '';
+	let wikiImageError: string = '';
 
 	let newAdventure: Adventure = {
 		id: '',
@@ -66,6 +67,10 @@
 		newAdventure.name = markers[0].name;
 	}
 
+	let url: string = '';
+	let imageSearch: string = '';
+	let imageError: string = '';
+
 	async function geocode(e: Event | null) {
 		if (e) {
 			e.preventDefault();
@@ -90,6 +95,81 @@
 		}
 	}
 
+	async function fetchImage() {
+		let res = await fetch(url);
+		let data = await res.blob();
+		if (!data) {
+			imageError = 'No image found at that URL.';
+			return;
+		}
+		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
+		let formData = new FormData();
+		formData.append('image', file);
+		formData.append('adventure', newAdventure.id);
+		let res2 = await fetch(`/adventures?/image`, {
+			method: 'POST',
+			body: formData
+		});
+		let data2 = await res2.json();
+		console.log(data2);
+		if (data2.type === 'success') {
+			images = [...images, data2];
+			newAdventure.images = images;
+			addToast('success', 'Image uploaded');
+		} else {
+			addToast('error', 'Failed to upload image');
+		}
+	}
+
+	async function fetchWikiImage() {
+		let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
+		let data = await res.json();
+		if (!res.ok) {
+			wikiImageError = 'Failed to fetch image';
+			return;
+		}
+		if (data.source) {
+			let imageUrl = data.source;
+			let res = await fetch(imageUrl);
+
+			let blob = await res.blob();
+			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
+			let formData = new FormData();
+			formData.append('image', file);
+			formData.append('adventure', newAdventure.id);
+			let res2 = await fetch(`/adventures?/image`, {
+				method: 'POST',
+				body: formData
+			});
+			if (res2.ok) {
+				let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
+				console.log(newData);
+				let newImage = { id: newData.data.id, image: newData.data.image };
+				console.log(newImage);
+				images = [...images, newImage];
+				newAdventure.images = images;
+				addToast('success', 'Image uploaded');
+			} else {
+				addToast('error', 'Failed to upload image');
+				wikiImageError = 'Failed to upload image';
+			}
+		}
+	}
+
+	async function removeImage(id: string) {
+		let res = await fetch(`/api/images/${id}/image_delete`, {
+			method: 'POST'
+		});
+		if (res.status === 204) {
+			images = images.filter((image) => image.id !== id);
+			newAdventure.images = images;
+			console.log(images);
+			addToast('success', 'Image removed');
+		} else {
+			addToast('error', 'Failed to remove image');
+		}
+	}
+
 	async function reverseGeocode() {
 		let res = await fetch(
 			`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
@@ -177,6 +257,7 @@
 		let data = await res.json();
 		if (data.id) {
 			newAdventure = data as Adventure;
+			imageSearch = newAdventure.name;
 		} else {
 			addToast('error', 'Failed to create adventure');
 		}
@@ -473,9 +554,51 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
 					</form>
 				</div>
-				<div class=" inline-flex gap-2">
+				<div class="mt-2">
+					<label for="url">URL</label><br />
+					<input
+						type="text"
+						id="url"
+						name="url"
+						bind:value={url}
+						class="input input-bordered w-full"
+					/>
+					<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
+						>Fetch Image</button
+					>
+				</div>
+				<div class="mt-2">
+					<label for="name">Wikipedia</label><br />
+					<input
+						type="text"
+						id="name"
+						name="name"
+						bind:value={imageSearch}
+						class="input input-bordered w-full"
+					/>
+					<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
+						>Fetch Image</button
+					>
+					<p class="text-red-500">{wikiImageError}</p>
+				</div>
+				<div class="divider"></div>
+				{#if images.length > 0}
+					<h1 class="font-semibold text-xl">My Images</h1>
+				{:else}
+					<h1 class="font-semibold text-xl">No Images</h1>
+				{/if}
+				<div class="flex flex-wrap gap-2 mt-2">
 					{#each images as image}
-						<img src={image.image} alt={image.id} class="w-32 h-32" />
+						<div class="relative h-32 w-32">
+							<button
+								type="button"
+								class="absolute top-0 left-0 btn btn-error btn-sm z-10"
+								on:click={() => removeImage(image.id)}
+							>
+								X
+							</button>
+							<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
+						</div>
 					{/each}
 				</div>
 			</div>

From d552c503495b37ce551ce9997ed04c20f9b17af1 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 17:22:01 -0400
Subject: [PATCH 16/22] adventure view

---
 .../src/lib/components/AdventureCard.svelte   |  8 ----
 .../src/routes/adventures/[id]/+page.svelte   | 43 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index b232e8e6..2e090ff4 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -131,14 +131,6 @@
 
 	let currentSlide = 0;
 
-	function nextSlide() {
-		currentSlide = (currentSlide + 1) % adventure.images.length;
-	}
-
-	function prevSlide() {
-		currentSlide = (currentSlide - 1 + adventure.images.length) % adventure.images.length;
-	}
-
 	function goToSlide(index: number) {
 		currentSlide = index;
 	}
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 2ad349c5..6b9ff2ae 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -26,6 +26,12 @@
 
 	let adventure: Adventure;
 
+	let currentSlide = 0;
+
+	function goToSlide(index: number) {
+		currentSlide = index;
+	}
+
 	let notFound: boolean = false;
 	let isEditModalOpen: boolean = false;
 
@@ -92,7 +98,7 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					{#if adventure.images && adventure.images.length > 0}
+					<!-- {#if adventure.images && adventure.images.length > 0}
 						<div>
 							<img
 								src={adventure.images[0].image}
@@ -103,7 +109,42 @@
 								style="aspect-ratio: 1200 / 600; object-fit: cover;"
 							/>
 						</div>
+					{/if} -->
+					{#if adventure.images && adventure.images.length > 0}
+						<div class="carousel w-full">
+							{#each adventure.images as image, i}
+								<div
+									class="carousel-item w-full"
+									style="display: {i === currentSlide ? 'block' : 'none'}"
+								>
+									<img
+										src={image.image}
+										width="1200"
+										height="600"
+										class="w-full h-auto object-cover rounded-lg"
+										style="aspect-ratio: 1200 / 600; object-fit: cover;"
+										alt={adventure.name}
+									/>
+									<div class="flex justify-center w-full py-2 gap-2">
+										{#each adventure.images as _, i}
+											<button
+												on:click={() => goToSlide(i)}
+												class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
+											>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<!-- svelte-ignore a11y-img-redundant-alt -->
+						<img
+							src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
+							alt="No image available"
+							class="w-full h-48 object-cover"
+						/>
 					{/if}
+
 					<div class="grid gap-4">
 						<div class="flex items-center justify-between">
 							<div>

From c35795144e3f2928cdc6a2ea167a0ecd79137ff6 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 17:34:52 -0400
Subject: [PATCH 17/22] chore: Refactor CollectionCard component and improve
 dropdown menu styling

---
 .../src/lib/components/CollectionCard.svelte  | 87 ++++++++++---------
 .../src/lib/components/EditAdventure.svelte   | 11 +++
 .../src/routes/adventures/[id]/+page.svelte   | 21 -----
 3 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/frontend/src/lib/components/CollectionCard.svelte b/frontend/src/lib/components/CollectionCard.svelte
index df07f461..0270eb7d 100644
--- a/frontend/src/lib/components/CollectionCard.svelte
+++ b/frontend/src/lib/components/CollectionCard.svelte
@@ -112,50 +112,51 @@
 			</p>{/if}
 
 		<div class="card-actions justify-end">
-			<div class="dropdown dropdown-end">
-				<div tabindex="0" role="button" class="btn btn-neutral">
-					<DotsHorizontal class="w-6 h-6" />
-				</div>
-				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-				<ul
-					tabindex="0"
-					class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
-				>
-					{#if type != 'link'}
-						<button
-							class="btn btn-neutral mb-2"
-							on:click={() => goto(`/collections/${collection.id}`)}
-							><Launch class="w-5 h-5 mr-1" />Open Details</button
-						>
-						{#if !collection.is_archived}
-							<button class="btn btn-neutral mb-2" on:click={editAdventure}>
-								<FileDocumentEdit class="w-6 h-6" />Edit Collection
-							</button>
-						{/if}
-						{#if collection.is_archived}
-							<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(false)}>
-								<ArchiveArrowUp class="w-6 h-6 mr-1" />Unarchive
-							</button>
-						{:else}
-							<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(true)}>
-								<ArchiveArrowDown class="w-6 h-6 mr" />Archive
-							</button>
+			{#if type == 'link'}
+				<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
+					<Plus class="w-5 h-5 mr-1" />
+				</button>
+			{:else}
+				<div class="dropdown dropdown-end">
+					<div tabindex="0" role="button" class="btn btn-neutral">
+						<DotsHorizontal class="w-6 h-6" />
+					</div>
+					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<ul
+						tabindex="0"
+						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+					>
+						{#if type != 'link'}
+							<button
+								class="btn btn-neutral mb-2"
+								on:click={() => goto(`/collections/${collection.id}`)}
+								><Launch class="w-5 h-5 mr-1" />Open Details</button
+							>
+							{#if !collection.is_archived}
+								<button class="btn btn-neutral mb-2" on:click={editAdventure}>
+									<FileDocumentEdit class="w-6 h-6" />Edit Collection
+								</button>
+							{/if}
+							{#if collection.is_archived}
+								<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(false)}>
+									<ArchiveArrowUp class="w-6 h-6 mr-1" />Unarchive
+								</button>
+							{:else}
+								<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(true)}>
+									<ArchiveArrowDown class="w-6 h-6 mr" />Archive
+								</button>
+							{/if}
+							<button
+								id="delete_adventure"
+								data-umami-event="Delete Adventure"
+								class="btn btn-warning"
+								on:click={() => (isWarningModalOpen = true)}
+								><TrashCan class="w-6 h-6" />Delete</button
+							>
 						{/if}
-						<button
-							id="delete_adventure"
-							data-umami-event="Delete Adventure"
-							class="btn btn-warning"
-							on:click={() => (isWarningModalOpen = true)}
-							><TrashCan class="w-6 h-6" />Delete</button
-						>
-					{/if}
-					{#if type == 'link'}
-						<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
-							<Plus class="w-5 h-5 mr-1" />
-						</button>
-					{/if}
-				</ul>
-			</div>
+					</ul>
+				</div>
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 23e38726..985ef5b7 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -32,6 +32,17 @@
 
 	images = adventureToEdit.images || [];
 
+	if (adventureToEdit.longitude && adventureToEdit.latitude) {
+		markers = [
+			{
+				lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
+				location: adventureToEdit.location || '',
+				name: adventureToEdit.name,
+				activity_type: ''
+			}
+		];
+	}
+
 	if (longitude && latitude) {
 		adventureToEdit.latitude = latitude;
 		adventureToEdit.longitude = longitude;
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 6b9ff2ae..bbb0afbe 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -98,18 +98,6 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					<!-- {#if adventure.images && adventure.images.length > 0}
-						<div>
-							<img
-								src={adventure.images[0].image}
-								alt={adventure.name}
-								width="1200"
-								height="600"
-								class="w-full h-auto object-cover rounded-lg"
-								style="aspect-ratio: 1200 / 600; object-fit: cover;"
-							/>
-						</div>
-					{/if} -->
 					{#if adventure.images && adventure.images.length > 0}
 						<div class="carousel w-full">
 							{#each adventure.images as image, i}
@@ -136,21 +124,12 @@
 								</div>
 							{/each}
 						</div>
-					{:else}
-						<!-- svelte-ignore a11y-img-redundant-alt -->
-						<img
-							src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
-							alt="No image available"
-							class="w-full h-48 object-cover"
-						/>
 					{/if}
-
 					<div class="grid gap-4">
 						<div class="flex items-center justify-between">
 							<div>
 								<h1 class="text-4xl mt-2 font-bold">{adventure.name}</h1>
 							</div>
-
 							<div class="flex items-center gap-1">
 								{#if adventure.rating !== undefined && adventure.rating !== null}
 									<div class="flex justify-center items-center">

From f0efdaa933690a4f67f4b6f432a339517797f224 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 22:40:27 -0400
Subject: [PATCH 18/22] new adventure modal

---
 ...Adventure.svelte => AdventureModal.svelte} | 199 +++---
 .../src/lib/components/NewAdventure.svelte    | 610 ------------------
 frontend/src/lib/types.ts                     |   2 +-
 frontend/src/routes/adventures/+page.svelte   |  66 +-
 .../src/routes/adventures/[id]/+page.svelte   |   7 +-
 frontend/src/routes/collections/+page.svelte  |   7 +-
 .../src/routes/collections/[id]/+page.svelte  |  72 +--
 .../routes/collections/archived/+page.svelte  |  12 +-
 frontend/src/routes/map/+page.svelte          |   9 +-
 frontend/src/routes/search/+page.svelte       |  19 +-
 10 files changed, 197 insertions(+), 806 deletions(-)
 rename frontend/src/lib/components/{EditAdventure.svelte => AdventureModal.svelte} (75%)
 delete mode 100644 frontend/src/lib/components/NewAdventure.svelte

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/AdventureModal.svelte
similarity index 75%
rename from frontend/src/lib/components/EditAdventure.svelte
rename to frontend/src/lib/components/AdventureModal.svelte
index 985ef5b7..64d94b9d 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/AdventureModal.svelte
@@ -8,6 +8,7 @@
 
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
+	export let collection_id: string | null = null;
 
 	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
 	let markers: Point[] = [];
@@ -24,38 +25,56 @@
 
 	let noPlaces: boolean = false;
 
-	export let adventureToEdit: Adventure;
+	export let adventureToEdit: Adventure | null = null;
+
+	let adventure: Adventure = {
+		id: adventureToEdit?.id || '',
+		name: adventureToEdit?.name || '',
+		type: adventureToEdit?.type || 'visited',
+		date: adventureToEdit?.date || null,
+		link: adventureToEdit?.link || null,
+		description: adventureToEdit?.description || null,
+		activity_types: adventureToEdit?.activity_types || [],
+		rating: adventureToEdit?.rating || NaN,
+		is_public: adventureToEdit?.is_public || false,
+		latitude: adventureToEdit?.latitude || NaN,
+		longitude: adventureToEdit?.longitude || NaN,
+		location: adventureToEdit?.location || null,
+		images: adventureToEdit?.images || [],
+		user_id: adventureToEdit?.user_id || null,
+		collection: adventureToEdit?.collection || collection_id || null
+	};
 
 	let url: string = '';
 	let imageError: string = '';
 	let wikiImageError: string = '';
 
-	images = adventureToEdit.images || [];
+	images = adventure.images || [];
 
-	if (adventureToEdit.longitude && adventureToEdit.latitude) {
+	if (adventure.longitude && adventure.latitude) {
 		markers = [
 			{
-				lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
-				location: adventureToEdit.location || '',
-				name: adventureToEdit.name,
+				lngLat: { lng: adventure.longitude, lat: adventure.latitude },
+				location: adventure.location || '',
+				name: adventure.name,
 				activity_type: ''
 			}
 		];
 	}
 
 	if (longitude && latitude) {
-		adventureToEdit.latitude = latitude;
-		adventureToEdit.longitude = longitude;
+		adventure.latitude = latitude;
+		adventure.longitude = longitude;
 		reverseGeocode();
 	}
 
 	$: {
-		if (!adventureToEdit.rating) {
-			adventureToEdit.rating = NaN;
+		if (!adventure.rating) {
+			adventure.rating = NaN;
 		}
 	}
 
-	let imageSearch: string = adventureToEdit.name || '';
+	let imageSearch: string = adventure.name || '';
 
 	async function removeImage(id: string) {
 		let res = await fetch(`/api/images/${id}/image_delete`, {
@@ -63,7 +82,7 @@
 		});
 		if (res.status === 204) {
 			images = images.filter((image) => image.id !== id);
-			adventureToEdit.images = images;
+			adventure.images = images;
 			console.log(images);
 			addToast('success', 'Image removed');
 		} else {
@@ -74,18 +93,18 @@
 	let isDetails: boolean = true;
 
 	function saveAndClose() {
-		dispatch('saveEdit', adventureToEdit);
+		dispatch('save', adventure);
 		close();
 	}
 
 	$: if (markers.length > 0) {
-		adventureToEdit.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
-		adventureToEdit.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		if (!adventureToEdit.location) {
-			adventureToEdit.location = markers[0].location;
+		adventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
+		adventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
+		if (!adventure.location) {
+			adventure.location = markers[0].location;
 		}
-		if (!adventureToEdit.name) {
-			adventureToEdit.name = markers[0].name;
+		if (!adventure.name) {
+			adventure.name = markers[0].name;
 		}
 	}
 
@@ -99,7 +118,7 @@
 		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
 		let formData = new FormData();
 		formData.append('image', file);
-		formData.append('adventure', adventureToEdit.id);
+		formData.append('adventure', adventure.id);
 		let res2 = await fetch(`/adventures?/image`, {
 			method: 'POST',
 			body: formData
@@ -108,7 +127,7 @@
 		console.log(data2);
 		if (data2.type === 'success') {
 			images = [...images, data2];
-			adventureToEdit.images = images;
+			adventure.images = images;
 			addToast('success', 'Image uploaded');
 		} else {
 			addToast('error', 'Failed to upload image');
@@ -129,7 +148,7 @@
 			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
 			let formData = new FormData();
 			formData.append('image', file);
-			formData.append('adventure', adventureToEdit.id);
+			formData.append('adventure', adventure.id);
 			let res2 = await fetch(`/adventures?/image`, {
 				method: 'POST',
 				body: formData
@@ -140,7 +159,7 @@
 				let newImage = { id: newData.data.id, image: newData.data.image };
 				console.log(newImage);
 				images = [...images, newImage];
-				adventureToEdit.images = images;
+				adventure.images = images;
 				addToast('success', 'Image uploaded');
 			} else {
 				addToast('error', 'Failed to upload image');
@@ -173,7 +192,7 @@
 
 	async function reverseGeocode() {
 		let res = await fetch(
-			`https://nominatim.openstreetmap.org/search?q=${adventureToEdit.latitude},${adventureToEdit.longitude}&format=jsonv2`,
+			`https://nominatim.openstreetmap.org/search?q=${adventure.latitude},${adventure.longitude}&format=jsonv2`,
 			{
 				headers: {
 					'User-Agent': `AdventureLog / ${appVersion} `
@@ -182,9 +201,19 @@
 		);
 		let data = (await res.json()) as OpenStreetMapPlace[];
 		if (data.length > 0) {
-			adventureToEdit.name = data[0]?.name || '';
-			adventureToEdit.activity_types?.push(data[0]?.type || '');
-			adventureToEdit.location = data[0]?.display_name || '';
+			adventure.name = data[0]?.name || '';
+			adventure.activity_types?.push(data[0]?.type || '');
+			adventure.location = data[0]?.display_name || '';
+			if (longitude && latitude) {
+				markers = [
+					{
+						lngLat: { lng: longitude, lat: latitude },
+						location: data[0]?.display_name || '',
+						name: data[0]?.name || '',
+						activity_type: data[0]?.type || ''
+					}
+				];
+			}
 		}
 		console.log(data);
 	}
@@ -229,12 +258,12 @@
 		return async ({ result }: any) => {
 			if (result.type === 'success') {
 				if (result.data.id && result.data.image) {
-					adventureToEdit.images = [...adventureToEdit.images, result.data];
+					adventure.images = [...adventure.images, result.data];
 					images = [...images, result.data];
 					addToast('success', 'Image uploaded');
 
 					fileInput.value = '';
-					console.log(adventureToEdit);
+					console.log(adventure);
 				} else {
 					addToast('error', result.data.error || 'Failed to upload image');
 				}
@@ -244,21 +273,39 @@
 
 	async function handleSubmit(event: Event) {
 		event.preventDefault();
-		console.log(adventureToEdit);
-		let res = await fetch(`/api/adventures/${adventureToEdit.id}`, {
-			method: 'PUT',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(adventureToEdit)
-		});
-		let data = await res.json();
-		if (data.id) {
-			adventureToEdit = data as Adventure;
-			isDetails = false;
-			addToast('success', 'Adventure updated');
+		console.log(adventure);
+		if (adventure.id === '') {
+			let res = await fetch('/api/adventures', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(adventure)
+			});
+			let data = await res.json();
+			if (data.id) {
+				adventure = data as Adventure;
+				isDetails = false;
+				addToast('success', 'Adventure created');
+			} else {
+				addToast('error', 'Failed to create adventure');
+			}
 		} else {
-			addToast('error', 'Failed to update adventure');
+			let res = await fetch(`/api/adventures/${adventure.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(adventure)
+			});
+			let data = await res.json();
+			if (data.id) {
+				adventure = data as Adventure;
+				isDetails = false;
+				addToast('success', 'Adventure updated');
+			} else {
+				addToast('error', 'Failed to update adventure');
+			}
 		}
 	}
 </script>
@@ -268,8 +315,8 @@
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
-		{#if adventureToEdit.id === '' || isDetails}
+		<h3 class="font-bold text-lg">Edit {adventure.type} Adventure</h3>
+		{#if adventure.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 					<!-- Grid layout for form fields -->
@@ -281,7 +328,7 @@
 							type="text"
 							id="name"
 							name="name"
-							bind:value={adventureToEdit.name}
+							bind:value={adventure.name}
 							class="input input-bordered w-full"
 							required
 						/>
@@ -294,8 +341,8 @@
 									type="radio"
 									name="radio-10"
 									class="radio checked:bg-red-500"
-									on:click={() => (adventureToEdit.type = 'visited')}
-									checked={adventureToEdit.type == 'visited'}
+									on:click={() => (adventure.type = 'visited')}
+									checked={adventure.type == 'visited'}
 								/>
 							</label>
 						</div>
@@ -306,8 +353,8 @@
 									type="radio"
 									name="radio-10"
 									class="radio checked:bg-blue-500"
-									on:click={() => (adventureToEdit.type = 'planned')}
-									checked={adventureToEdit.type == 'planned'}
+									on:click={() => (adventure.type = 'planned')}
+									checked={adventure.type == 'planned'}
 								/>
 							</label>
 						</div>
@@ -321,7 +368,7 @@
 							name="date"
 							min={startDate || ''}
 							max={endDate || ''}
-							bind:value={adventureToEdit.date}
+							bind:value={adventure.date}
 							class="input input-bordered w-full"
 						/>
 					</div>
@@ -333,7 +380,7 @@
 								type="text"
 								id="link"
 								name="link"
-								bind:value={adventureToEdit.link}
+								bind:value={adventure.link}
 								class="input input-bordered w-full"
 							/>
 						</div>
@@ -343,7 +390,7 @@
 						<textarea
 							id="description"
 							name="description"
-							bind:value={adventureToEdit.description}
+							bind:value={adventure.description}
 							class="textarea textarea-bordered w-full h-32"
 						></textarea>
 					</div>
@@ -354,10 +401,10 @@
 							id="activity_types"
 							name="activity_types"
 							hidden
-							bind:value={adventureToEdit.activity_types}
+							bind:value={adventure.activity_types}
 							class="input input-bordered w-full"
 						/>
-						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
+						<ActivityComplete bind:activities={adventure.activity_types} />
 					</div>
 					<div>
 						<label for="rating"
@@ -368,7 +415,7 @@
 							min="0"
 							max="5"
 							hidden
-							bind:value={adventureToEdit.rating}
+							bind:value={adventure.rating}
 							id="rating"
 							name="rating"
 							class="input input-bordered w-full max-w-xs mt-1"
@@ -378,48 +425,48 @@
 								type="radio"
 								name="rating-2"
 								class="rating-hidden"
-								checked={Number.isNaN(adventureToEdit.rating)}
+								checked={Number.isNaN(adventure.rating)}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 1)}
-								checked={adventureToEdit.rating === 1}
+								on:click={() => (adventure.rating = 1)}
+								checked={adventure.rating === 1}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 2)}
-								checked={adventureToEdit.rating === 2}
+								on:click={() => (adventure.rating = 2)}
+								checked={adventure.rating === 2}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 3)}
-								checked={adventureToEdit.rating === 3}
+								on:click={() => (adventure.rating = 3)}
+								checked={adventure.rating === 3}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 4)}
-								checked={adventureToEdit.rating === 4}
+								on:click={() => (adventure.rating = 4)}
+								checked={adventure.rating === 4}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 5)}
-								checked={adventureToEdit.rating === 5}
+								on:click={() => (adventure.rating = 5)}
+								checked={adventure.rating === 5}
 							/>
-							{#if adventureToEdit.rating}
+							{#if adventure.rating}
 								<button
 									type="button"
 									class="btn btn-sm btn-error ml-2"
-									on:click={() => (adventureToEdit.rating = NaN)}
+									on:click={() => (adventure.rating = NaN)}
 								>
 									Remove
 								</button>
@@ -436,7 +483,7 @@
 										class="toggle toggle-primary"
 										id="is_public"
 										name="is_public"
-										bind:checked={adventureToEdit.is_public}
+										bind:checked={adventure.is_public}
 									/>
 								</div>
 							</div>
@@ -451,7 +498,7 @@
 							type="text"
 							id="location"
 							name="location"
-							bind:value={adventureToEdit.location}
+							bind:value={adventure.location}
 							class="input input-bordered w-full"
 						/>
 					</div>
@@ -518,18 +565,18 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						<button type="submit" class="btn btn-primary">Save & Next</button>
 						<button type="button" class="btn" on:click={close}>Close</button>
 					</div>
-					{#if adventureToEdit.is_public}
+					{#if adventure.is_public}
 						<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
 							<p class=" font-semibold">Share this Adventure!</p>
 							<div class="flex items-center justify-between">
 								<p class="text-card-foreground font-mono">
-									{window.location.origin}/adventures/{adventureToEdit.id}
+									{window.location.origin}/adventures/{adventure.id}
 								</p>
 								<button
 									type="button"
 									on:click={() => {
 										navigator.clipboard.writeText(
-											`${window.location.origin}/adventures/${adventureToEdit.id}`
+											`${window.location.origin}/adventures/${adventure.id}`
 										);
 									}}
 									class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
@@ -549,7 +596,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 				<div class="flex">
 					<form
 						method="POST"
-						action="adventures?/image"
+						action="/adventures?/image"
 						use:enhance={imageSubmit}
 						enctype="multipart/form-data"
 					>
@@ -561,7 +608,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 							accept="image/*"
 							id="image"
 						/>
-						<input type="hidden" name="adventure" value={adventureToEdit.id} id="adventure" />
+						<input type="hidden" name="adventure" value={adventure.id} id="adventure" />
 						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
 					</form>
 				</div>
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
deleted file mode 100644
index b6b1d151..00000000
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ /dev/null
@@ -1,610 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
-	import { onMount } from 'svelte';
-	import { deserialize, enhance } from '$app/forms';
-	import { addToast } from '$lib/toasts';
-
-	export let type: string = 'visited';
-
-	export let longitude: number | null = null;
-	export let latitude: number | null = null;
-	export let collection_id: string | null = null;
-
-	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
-	let markers: Point[] = [];
-	let query: string = '';
-	let places: OpenStreetMapPlace[] = [];
-	let images: { id: string; image: string }[] = [];
-
-	import Earth from '~icons/mdi/earth';
-	import ActivityComplete from './ActivityComplete.svelte';
-	import { appVersion } from '$lib/config';
-
-	export let startDate: string | null = null;
-	export let endDate: string | null = null;
-
-	let noPlaces: boolean = false;
-	let wikiError: string = '';
-	let wikiImageError: string = '';
-
-	let newAdventure: Adventure = {
-		id: '',
-		type: type,
-		name: '',
-		location: null,
-		date: null,
-		description: '',
-		activity_types: [],
-		rating: NaN,
-		link: '',
-		images: [],
-		user_id: NaN,
-		latitude: null,
-		longitude: null,
-		is_public: false,
-		collection: collection_id || ''
-	};
-
-	if (longitude && latitude) {
-		newAdventure.latitude = latitude;
-		newAdventure.longitude = longitude;
-		reverseGeocode();
-	}
-
-	function saveAndClose() {
-		dispatch('create', newAdventure);
-		close();
-	}
-
-	$: if (markers.length > 0) {
-		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
-		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		// if (!newAdventure.location) {
-		newAdventure.location = markers[0].location;
-		// }
-
-		newAdventure.name = markers[0].name;
-	}
-
-	let url: string = '';
-	let imageSearch: string = '';
-	let imageError: string = '';
-
-	async function geocode(e: Event | null) {
-		if (e) {
-			e.preventDefault();
-		}
-		if (!query) {
-			alert('Please enter a location');
-			return;
-		}
-		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
-			headers: {
-				'User-Agent': `AdventureLog / ${appVersion} `
-			}
-		});
-		console.log(res);
-		let data = (await res.json()) as OpenStreetMapPlace[];
-		places = data;
-
-		if (data.length === 0) {
-			noPlaces = true;
-		} else {
-			noPlaces = false;
-		}
-	}
-
-	async function fetchImage() {
-		let res = await fetch(url);
-		let data = await res.blob();
-		if (!data) {
-			imageError = 'No image found at that URL.';
-			return;
-		}
-		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
-		let formData = new FormData();
-		formData.append('image', file);
-		formData.append('adventure', newAdventure.id);
-		let res2 = await fetch(`/adventures?/image`, {
-			method: 'POST',
-			body: formData
-		});
-		let data2 = await res2.json();
-		console.log(data2);
-		if (data2.type === 'success') {
-			images = [...images, data2];
-			newAdventure.images = images;
-			addToast('success', 'Image uploaded');
-		} else {
-			addToast('error', 'Failed to upload image');
-		}
-	}
-
-	async function fetchWikiImage() {
-		let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
-		let data = await res.json();
-		if (!res.ok) {
-			wikiImageError = 'Failed to fetch image';
-			return;
-		}
-		if (data.source) {
-			let imageUrl = data.source;
-			let res = await fetch(imageUrl);
-
-			let blob = await res.blob();
-			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
-			let formData = new FormData();
-			formData.append('image', file);
-			formData.append('adventure', newAdventure.id);
-			let res2 = await fetch(`/adventures?/image`, {
-				method: 'POST',
-				body: formData
-			});
-			if (res2.ok) {
-				let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
-				console.log(newData);
-				let newImage = { id: newData.data.id, image: newData.data.image };
-				console.log(newImage);
-				images = [...images, newImage];
-				newAdventure.images = images;
-				addToast('success', 'Image uploaded');
-			} else {
-				addToast('error', 'Failed to upload image');
-				wikiImageError = 'Failed to upload image';
-			}
-		}
-	}
-
-	async function removeImage(id: string) {
-		let res = await fetch(`/api/images/${id}/image_delete`, {
-			method: 'POST'
-		});
-		if (res.status === 204) {
-			images = images.filter((image) => image.id !== id);
-			newAdventure.images = images;
-			console.log(images);
-			addToast('success', 'Image removed');
-		} else {
-			addToast('error', 'Failed to remove image');
-		}
-	}
-
-	async function reverseGeocode() {
-		let res = await fetch(
-			`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
-			{
-				headers: {
-					'User-Agent': `AdventureLog / ${appVersion} `
-				}
-			}
-		);
-		let data = (await res.json()) as OpenStreetMapPlace[];
-		if (data.length > 0) {
-			newAdventure.name = data[0]?.name || '';
-			newAdventure.activity_types?.push(data[0]?.type || '');
-			newAdventure.location = data[0]?.display_name || '';
-		}
-		console.log(data);
-	}
-
-	let fileInput: HTMLInputElement;
-
-	const dispatch = createEventDispatcher();
-	let modal: HTMLDialogElement;
-
-	onMount(async () => {
-		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
-		if (modal) {
-			modal.showModal();
-		}
-	});
-
-	function close() {
-		dispatch('close');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			close();
-		}
-	}
-
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
-		let data = await res.json();
-		if (data.extract && data.extract.length > 0) {
-			newAdventure.description = data.extract;
-			wikiError = '';
-		} else {
-			wikiError = 'No description found';
-		}
-	}
-
-	function addMarker(e: CustomEvent<any>) {
-		markers = [];
-		markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
-		console.log(markers);
-	}
-
-	function imageSubmit() {
-		return async ({ result }: any) => {
-			if (result.type === 'success') {
-				if (result.data.id && result.data.image) {
-					newAdventure.images = [...newAdventure.images, result.data];
-					images = [...images, result.data];
-					addToast('success', 'Image uploaded');
-
-					fileInput.value = '';
-					console.log(newAdventure);
-				} else {
-					addToast('error', result.data.error || 'Failed to upload image');
-				}
-			}
-		};
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		console.log(newAdventure);
-		let res = await fetch('/api/adventures/', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(newAdventure)
-		});
-		let data = await res.json();
-		if (data.id) {
-			newAdventure = data as Adventure;
-			imageSearch = newAdventure.name;
-		} else {
-			addToast('error', 'Failed to create adventure');
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">New {newAdventure.type} Adventure</h3>
-		{#if newAdventure.id === ''}
-			<div class="modal-action items-center">
-				<form
-					method="post"
-					style="width: 100%;"
-					on:submit={handleSubmit}
-					action="/adventures/create"
-				>
-					<!-- Grid layout for form fields -->
-					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
-					<div>
-						<label for="name">Name</label><br />
-						<input
-							type="text"
-							id="name"
-							name="name"
-							bind:value={newAdventure.name}
-							class="input input-bordered w-full"
-							required
-						/>
-					</div>
-					<div>
-						<div class="form-control">
-							<label class="label cursor-pointer">
-								<span class="label-text">Visited</span>
-								<input
-									type="radio"
-									name="radio-10"
-									class="radio checked:bg-red-500"
-									on:click={() => (newAdventure.type = 'visited')}
-									checked={newAdventure.type == 'visited'}
-								/>
-							</label>
-						</div>
-						<div class="form-control">
-							<label class="label cursor-pointer">
-								<span class="label-text">Planned</span>
-								<input
-									type="radio"
-									name="radio-10"
-									class="radio checked:bg-blue-500"
-									on:click={() => (newAdventure.type = 'planned')}
-									checked={newAdventure.type == 'planned'}
-								/>
-							</label>
-						</div>
-					</div>
-
-					<div>
-						<label for="date">Date</label><br />
-						<input
-							type="date"
-							id="date"
-							name="date"
-							min={startDate || ''}
-							max={endDate || ''}
-							bind:value={newAdventure.date}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					<div>
-						<label for="description">Description</label><br />
-						<textarea
-							id="description"
-							name="description"
-							bind:value={newAdventure.description}
-							class="textarea textarea-bordered w-full h-32"
-						></textarea>
-						<button class="btn btn-neutral" type="button" on:click={generateDesc}
-							>Search Wikipedia</button
-						>
-						<p class="text-red-500">{wikiError}</p>
-					</div>
-					<div>
-						<label for="activity_types">Activity Types</label><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={newAdventure.activity_types}
-							class="input input-bordered w-full"
-						/>
-						<ActivityComplete bind:activities={newAdventure.activity_types} />
-					</div>
-					<div>
-						<label for="rating"
-							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-						><br />
-						<input
-							type="number"
-							min="0"
-							max="5"
-							hidden
-							bind:value={newAdventure.rating}
-							id="rating"
-							name="rating"
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<div class="rating -ml-3 mt-1">
-							<input
-								type="radio"
-								name="rating-2"
-								class="rating-hidden"
-								checked={Number.isNaN(newAdventure.rating)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 1)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 2)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 3)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 4)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 5)}
-							/>
-							{#if newAdventure.rating}
-								<button
-									type="button"
-									class="btn btn-sm btn-error ml-2"
-									on:click={() => (newAdventure.rating = NaN)}
-								>
-									Remove
-								</button>
-							{/if}
-						</div>
-					</div>
-					<div>
-						<!-- link -->
-						<div>
-							<label for="link">Link</label><br />
-							<input
-								type="text"
-								id="link"
-								name="link"
-								bind:value={newAdventure.link}
-								class="input input-bordered w-full"
-							/>
-						</div>
-					</div>
-					<div>
-						<div>
-							<div class="mt-2">
-								<label for="is_public"
-									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-								><br />
-								<input
-									type="checkbox"
-									class="toggle toggle-primary"
-									id="is_public"
-									name="is_public"
-									bind:checked={newAdventure.is_public}
-								/>
-							</div>
-							{#if newAdventure.is_public}
-								<p>
-									The link to this adventure will be copied to your clipboard once it is created!
-								</p>
-							{/if}
-						</div>
-						<!-- </div> -->
-					</div>
-					<div class="divider"></div>
-					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
-					<div>
-						<label for="latitude">Location</label><br />
-						<input
-							type="text"
-							id="location"
-							name="location"
-							bind:value={newAdventure.location}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					<div>
-						<form on:submit={geocode} class="mt-2">
-							<input
-								type="text"
-								placeholder="Seach for a location"
-								class="input input-bordered w-full max-w-xs mb-2"
-								id="search"
-								name="search"
-								bind:value={query}
-							/>
-							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
-						</form>
-					</div>
-					{#if places.length > 0}
-						<div class="mt-4 max-w-full">
-							<h3 class="font-bold text-lg mb-4">Search Results</h3>
-
-							<div class="flex flex-wrap">
-								{#each places as place}
-									<button
-										type="button"
-										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
-										on:click={() => {
-											markers = [
-												{
-													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-													location: place.display_name,
-													name: place.name,
-													activity_type: place.type
-												}
-											];
-										}}
-									>
-										{place.display_name}
-									</button>
-								{/each}
-							</div>
-						</div>
-					{:else if noPlaces}
-						<p class="text-error text-lg">No results found</p>
-					{/if}
-					<div>
-						<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 markers as marker}
-								<DefaultMarker lngLat={marker.lngLat} />
-							{/each}
-						</MapLibre>
-					</div>
-
-					<div class="mt-4">
-						<button type="submit" class="btn btn-primary">Create</button>
-						<button type="button" class="btn" on:click={close}>Close</button>
-					</div>
-				</form>
-			</div>
-		{:else}
-			<p>Upload images here</p>
-			<!-- <p>{newAdventure.id}</p> -->
-			<div class="mb-2">
-				<label for="image">Image </label><br />
-				<div class="flex">
-					<form
-						method="POST"
-						action="adventures?/image"
-						use:enhance={imageSubmit}
-						enctype="multipart/form-data"
-					>
-						<input
-							type="file"
-							name="image"
-							class="file-input file-input-bordered w-full max-w-xs"
-							bind:this={fileInput}
-							accept="image/*"
-							id="image"
-						/>
-						<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
-						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
-					</form>
-				</div>
-				<div class="mt-2">
-					<label for="url">URL</label><br />
-					<input
-						type="text"
-						id="url"
-						name="url"
-						bind:value={url}
-						class="input input-bordered w-full"
-					/>
-					<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
-						>Fetch Image</button
-					>
-				</div>
-				<div class="mt-2">
-					<label for="name">Wikipedia</label><br />
-					<input
-						type="text"
-						id="name"
-						name="name"
-						bind:value={imageSearch}
-						class="input input-bordered w-full"
-					/>
-					<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
-						>Fetch Image</button
-					>
-					<p class="text-red-500">{wikiImageError}</p>
-				</div>
-				<div class="divider"></div>
-				{#if images.length > 0}
-					<h1 class="font-semibold text-xl">My Images</h1>
-				{:else}
-					<h1 class="font-semibold text-xl">No Images</h1>
-				{/if}
-				<div class="flex flex-wrap gap-2 mt-2">
-					{#each images as image}
-						<div class="relative h-32 w-32">
-							<button
-								type="button"
-								class="absolute top-0 left-0 btn btn-error btn-sm z-10"
-								on:click={() => removeImage(image.id)}
-							>
-								X
-							</button>
-							<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
-						</div>
-					{/each}
-				</div>
-			</div>
-			<div class="mt-4">
-				<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
-			</div>
-		{/if}
-	</div>
-</dialog>
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 07c829e1..2a299dd7 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -11,7 +11,7 @@ export type User = {
 
 export type Adventure = {
 	id: string;
-	user_id: number;
+	user_id: number | null;
 	type: string;
 	name: string;
 	location?: string | null;
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 5882cc5f..7c92963b 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -3,8 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import type { Adventure } from '$lib/types';
 
@@ -95,31 +94,31 @@
 		}
 	}
 
-	let adventureToEdit: Adventure;
-	let isEditModalOpen: boolean = false;
+	let adventureToEdit: Adventure | null = null;
+	let isAdventureModalOpen: boolean = false;
 
 	function deleteAdventure(event: CustomEvent<string>) {
 		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
 	}
 
-	function createAdventure(event: CustomEvent<Adventure>) {
-		adventures = [event.detail, ...adventures];
-		isShowingCreateModal = false;
+	// function that save changes to an existing adventure or creates a new one if it doesn't exist
+	function saveOrCreate(event: CustomEvent<Adventure>) {
+		if (adventures.find((adventure) => adventure.id === event.detail.id)) {
+			adventures = adventures.map((adventure) => {
+				if (adventure.id === event.detail.id) {
+					return event.detail;
+				}
+				return adventure;
+			});
+		} else {
+			adventures = [event.detail, ...adventures];
+		}
+		isAdventureModalOpen = false;
 	}
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
-	}
-
-	function saveEdit(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
+		isAdventureModalOpen = true;
 	}
 
 	let sidebarOpen = false;
@@ -129,19 +128,11 @@
 	}
 </script>
 
-{#if isShowingCreateModal}
-	<NewAdventure
-		type={newType}
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-	/>
-{/if}
-
-{#if isEditModalOpen}
-	<EditAdventure
+{#if isAdventureModalOpen}
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:close={() => (isAdventureModalOpen = false)}
+		on:save={saveOrCreate}
 	/>
 {/if}
 
@@ -160,21 +151,14 @@
 				<button
 					class="btn btn-primary"
 					on:click={() => {
-						isShowingCreateModal = true;
+						isAdventureModalOpen = true;
 						newType = 'visited';
+						adventureToEdit = null;
 					}}
 				>
-					Visited Adventure</button
-				>
-				<button
-					class="btn btn-primary"
-					on:click={() => {
-						isShowingCreateModal = true;
-						newType = 'planned';
-					}}
-				>
-					Planned Adventure</button
+					Adventure</button
 				>
+
 				<!-- <button
 			class="btn btn-primary"
 			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index bbb0afbe..cdb2dbcc 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -36,7 +36,8 @@
 	let isEditModalOpen: boolean = false;
 
 	import ClipboardList from '~icons/mdi/clipboard-list';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditAdventure from '$lib/components/AdventureModal.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	onMount(() => {
 		if (data.props.adventure) {
@@ -75,10 +76,10 @@
 {/if}
 
 {#if isEditModalOpen}
-	<EditAdventure
+	<AdventureModal
 		adventureToEdit={adventure}
 		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={saveEdit}
 	/>
 {/if}
 
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 59427ffd..d675948b 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { enhance, deserialize } from '$app/forms';
+	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import EditCollection from '$lib/components/EditCollection.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import NewCollection from '$lib/components/NewCollection.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import type { Adventure, Collection } from '$lib/types';
+	import type { Collection } from '$lib/types';
 
 	import Plus from '~icons/mdi/plus';
 
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index 3f8cb864..408590b6 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -8,9 +8,7 @@
 	import Plus from '~icons/mdi/plus';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import AdventureLink from '$lib/components/AdventureLink.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
 	import TransportationCard from '$lib/components/TransportationCard.svelte';
 	import EditTransportation from '$lib/components/EditTransportation.svelte';
@@ -26,6 +24,7 @@
 	} from '$lib';
 	import ChecklistCard from '$lib/components/ChecklistCard.svelte';
 	import ChecklistModal from '$lib/components/ChecklistModal.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	export let data: PageData;
 	console.log(data);
@@ -83,11 +82,6 @@
 		adventures = adventures.filter((a) => a.id !== event.detail);
 	}
 
-	function createAdventure(event: CustomEvent<Adventure>) {
-		adventures = [event.detail, ...adventures];
-		isShowingCreateModal = false;
-	}
-
 	async function addAdventure(event: CustomEvent<Adventure>) {
 		console.log(event.detail);
 		if (adventures.find((a) => a.id === event.detail.id)) {
@@ -124,9 +118,9 @@
 		});
 	}
 
-	let adventureToEdit: Adventure;
+	let adventureToEdit: Adventure | null = null;
 	let transportationToEdit: Transportation;
-	let isEditModalOpen: boolean = false;
+	let isAdventureModalOpen: boolean = false;
 	let isTransportationEditModalOpen: boolean = false;
 	let isNoteModalOpen: boolean = false;
 	let noteToEdit: Note | null;
@@ -136,7 +130,7 @@
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
+		isAdventureModalOpen = true;
 	}
 
 	function saveNewTransportation(event: CustomEvent<Transportation>) {
@@ -149,14 +143,18 @@
 		isTransportationEditModalOpen = false;
 	}
 
-	function saveEdit(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
+	function saveOrCreate(event: CustomEvent<Adventure>) {
+		if (adventures.find((adventure) => adventure.id === event.detail.id)) {
+			adventures = adventures.map((adventure) => {
+				if (adventure.id === event.detail.id) {
+					return event.detail;
+				}
+				return adventure;
+			});
+		} else {
+			adventures = [event.detail, ...adventures];
+		}
+		isAdventureModalOpen = false;
 	}
 </script>
 
@@ -180,13 +178,12 @@
 	/>
 {/if}
 
-{#if isEditModalOpen}
-	<EditAdventure
+{#if isAdventureModalOpen}
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
+		on:close={() => (isAdventureModalOpen = false)}
+		on:save={saveOrCreate}
+		collection_id={collection.id}
 	/>
 {/if}
 
@@ -235,17 +232,6 @@
 	/>
 {/if}
 
-{#if isShowingCreateModal}
-	<NewAdventure
-		type={newType}
-		collection_id={collection.id}
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
-	/>
-{/if}
-
 {#if isShowingTransportationModal}
 	<NewTransportation
 		on:close={() => (isShowingTransportationModal = false)}
@@ -312,21 +298,13 @@
 						<button
 							class="btn btn-primary"
 							on:click={() => {
-								isShowingCreateModal = true;
-								newType = 'visited';
+								isAdventureModalOpen = true;
+								adventureToEdit = null;
 							}}
 						>
-							Visited Adventure</button
-						>
-						<button
-							class="btn btn-primary"
-							on:click={() => {
-								isShowingCreateModal = true;
-								newType = 'planned';
-							}}
-						>
-							Planned Adventure</button
+							Adventure</button
 						>
+
 						<button
 							class="btn btn-primary"
 							on:click={() => {
diff --git a/frontend/src/routes/collections/archived/+page.svelte b/frontend/src/routes/collections/archived/+page.svelte
index d9cf53c7..4179f3c3 100644
--- a/frontend/src/routes/collections/archived/+page.svelte
+++ b/frontend/src/routes/collections/archived/+page.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
-	import { enhance, deserialize } from '$app/forms';
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
-	import EditCollection from '$lib/components/EditCollection.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
-	import NewCollection from '$lib/components/NewCollection.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import type { Adventure, Collection } from '$lib/types';
-
-	import Plus from '~icons/mdi/plus';
+	import type { Collection } from '$lib/types';
 
 	export let data: any;
 	console.log(data);
 
 	let collections: Collection[] = data.props.adventures || [];
 
-	function deleteCollection(event: CustomEvent<number>) {
+	function deleteCollection(event: CustomEvent<string>) {
 		collections = collections.filter((collection) => collection.id !== event.detail);
 	}
 </script>
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index 236207b4..1a0f484c 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -1,7 +1,6 @@
 <script>
 	// @ts-nocheck
-
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import {
 		DefaultMarker,
 		MapEvents,
@@ -142,11 +141,11 @@
 </div>
 
 {#if createModalOpen}
-	<NewAdventure
+	<AdventureModal
 		on:close={() => (createModalOpen = false)}
-		longitude={newLongitude}
+		on:save={createNewAdventure}
 		latitude={newLatitude}
-		on:create={createNewAdventure}
+		longitude={newLongitude}
 	/>
 {/if}
 
diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte
index bc849a06..ed005aee 100644
--- a/frontend/src/routes/search/+page.svelte
+++ b/frontend/src/routes/search/+page.svelte
@@ -4,9 +4,10 @@
 	import type { Adventure, OpenStreetMapPlace } from '$lib/types';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditAdventure from '$lib/components/AdventureModal.svelte';
 	import { appVersion } from '$lib/config';
 	import { goto } from '$app/navigation';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	export let data: PageData;
 
@@ -59,29 +60,31 @@
 	}
 
 	let adventureToEdit: Adventure;
-	let isEditModalOpen: boolean = false;
+	let isAdventureModalOpen: boolean = false;
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
+		isAdventureModalOpen = true;
 	}
 
 	function saveEdit(event: CustomEvent<Adventure>) {
+		console.log(event.detail);
 		myAdventures = myAdventures.map((adventure) => {
 			if (adventure.id === event.detail.id) {
 				return event.detail;
 			}
 			return adventure;
 		});
-		isEditModalOpen = false;
+		isAdventureModalOpen = false;
+		console.log(myAdventures);
 	}
 </script>
 
-{#if isEditModalOpen}
-	<EditAdventure
+{#if isAdventureModalOpen}
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:close={() => (isAdventureModalOpen = false)}
+		on:save={filterByProperty}
 	/>
 {/if}
 

From c87a0d2a414e3e64df4989f2d6f81584eaa6cc1f Mon Sep 17 00:00:00 2001
From: Sean Morley <98704938+seanmorley15@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:43:27 -0400
Subject: [PATCH 19/22] Delete frontend/src/lib/components/EditAdventure.svelte

---
 .../src/lib/components/EditAdventure.svelte   | 363 ------------------
 1 file changed, 363 deletions(-)
 delete mode 100644 frontend/src/lib/components/EditAdventure.svelte

diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
deleted file mode 100644
index 6654fba4..00000000
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ /dev/null
@@ -1,363 +0,0 @@
-<script lang="ts">
-	export let adventureToEdit: Adventure;
-	import { createEventDispatcher } from 'svelte';
-	import type { Adventure } from '$lib/types';
-	const dispatch = createEventDispatcher();
-	import { onMount } from 'svelte';
-	import { addToast } from '$lib/toasts';
-	let modal: HTMLDialogElement;
-
-	export let startDate: string | null = null;
-	export let endDate: string | null = null;
-
-	console.log(adventureToEdit.id);
-
-	let originalName = adventureToEdit.name;
-
-	let isPointModalOpen: boolean = false;
-	let isImageFetcherOpen: boolean = false;
-	let wikiError: string = '';
-
-	let fileInput: HTMLInputElement;
-	let image: File;
-
-	import MapMarker from '~icons/mdi/map-marker';
-	import Map from '~icons/mdi/map';
-	import Calendar from '~icons/mdi/calendar';
-	import Notebook from '~icons/mdi/notebook';
-	import ClipboardList from '~icons/mdi/clipboard-list';
-	import Star from '~icons/mdi/star';
-	import Attachment from '~icons/mdi/attachment';
-	import PointSelectionModal from './PointSelectionModal.svelte';
-	import Earth from '~icons/mdi/earth';
-	import Wikipedia from '~icons/mdi/wikipedia';
-	import ImageFetcher from './ImageFetcher.svelte';
-	import ActivityComplete from './ActivityComplete.svelte';
-
-	onMount(async () => {
-		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
-		if (modal) {
-			modal.showModal();
-		}
-	});
-
-	function submit() {}
-
-	function close() {
-		dispatch('close');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			close();
-		}
-	}
-
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
-		let data = await res.json();
-		if (!res.ok) {
-			wikiError = 'No article found';
-		}
-		if (data.extract) {
-			wikiError = '';
-			adventureToEdit.description = data.extract;
-		} else {
-			wikiError = 'No description found';
-		}
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		const form = event.target as HTMLFormElement;
-		const formData = new FormData(form);
-
-		const response = await fetch(form.action, {
-			method: form.method,
-			body: formData
-		});
-
-		if (response.ok) {
-			const result = await response.json();
-			const data = JSON.parse(result.data);
-			console.log(data);
-
-			if (data) {
-				if (typeof adventureToEdit.activity_types === 'string') {
-					adventureToEdit.activity_types = (adventureToEdit.activity_types as string)
-						.split(',')
-						.map((activity_type) => activity_type.trim())
-						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
-
-					// Remove duplicates
-					adventureToEdit.activity_types = Array.from(new Set(adventureToEdit.activity_types));
-				}
-
-				adventureToEdit.image = data[1];
-				adventureToEdit.link = data[2];
-				addToast('success', 'Adventure edited successfully!');
-				dispatch('saveEdit', adventureToEdit);
-				close();
-			} else {
-				addToast('warning', 'Error editing adventure');
-				console.log('Error editing adventure');
-			}
-		}
-	}
-
-	function handleImageFetch(event: CustomEvent) {
-		const file = event.detail.file;
-		if (file && fileInput) {
-			// Create a DataTransfer object and add the file
-			const dataTransfer = new DataTransfer();
-			dataTransfer.items.add(file);
-
-			// Set the files property of the file input
-			fileInput.files = dataTransfer.files;
-
-			// Update the adventureToEdit object
-			adventureToEdit.image = file;
-		}
-		isImageFetcherOpen = false;
-	}
-
-	function setLongLat(event: CustomEvent<Adventure>) {
-		console.log(event.detail);
-		isPointModalOpen = false;
-	}
-</script>
-
-{#if isPointModalOpen}
-	<PointSelectionModal
-		bind:adventure={adventureToEdit}
-		on:close={() => (isPointModalOpen = false)}
-		on:submit={setLongLat}
-		query={adventureToEdit.name}
-	/>
-{/if}
-
-{#if isImageFetcherOpen}
-	<ImageFetcher
-		on:image={handleImageFetch}
-		name={adventureToEdit.name}
-		on:close={() => (isImageFetcherOpen = false)}
-	/>
-{/if}
-
-<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">Edit Adventure: {originalName}</h3>
-		<div
-			class="modal-action items-center"
-			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
-		>
-			<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/adventures?/edit">
-				<div class="mb-2">
-					<input
-						type="text"
-						id="adventureId"
-						name="adventureId"
-						hidden
-						readonly
-						bind:value={adventureToEdit.id}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<input
-						type="text"
-						id="type"
-						name="type"
-						hidden
-						readonly
-						bind:value={adventureToEdit.type}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<label for="name">Name</label><br />
-					<input
-						type="text"
-						name="name"
-						id="name"
-						bind:value={adventureToEdit.name}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<input
-						type="text"
-						id="location"
-						name="location"
-						bind:value={adventureToEdit.location}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="mb-2 mt-2">
-						<button
-							type="button"
-							class="btn btn-secondary"
-							on:click={() => (isPointModalOpen = true)}
-						>
-							<Map class="inline-block w-6 h-6" />{adventureToEdit.latitude &&
-							adventureToEdit.longitude
-								? 'Change'
-								: 'Select'}
-							Location</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={startDate || ''}
-						max={endDate || ''}
-						bind:value={adventureToEdit.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<div class="flex">
-						<input
-							type="text"
-							id="description"
-							name="description"
-							bind:value={adventureToEdit.description}
-							class="input input-bordered w-full max-w-xs mt-1 mb-2"
-						/>
-						<button class="btn btn-neutral ml-2" type="button" on:click={generateDesc}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
-						>
-					</div>
-					{#if wikiError}
-						<p class="text-red-500">{wikiError}</p>
-					{/if}
-				</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
-						><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={adventureToEdit.activity_types}
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
-					</div>
-				{/if}
-				<div class="mb-2">
-					<label for="image">Image </label><br />
-					<div class="flex">
-						<input
-							type="file"
-							id="image"
-							name="image"
-							bind:value={image}
-							bind:this={fileInput}
-							class="file-input file-input-bordered w-full max-w-xs mt-1"
-						/>
-						<button
-							class="btn btn-neutral ml-2"
-							type="button"
-							on:click={() => (isImageFetcherOpen = true)}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
-					/>
-					<input
-						type="url"
-						id="link"
-						name="link"
-						bind:value={adventureToEdit.link}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="rating">Rating <Star class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
-					<input
-						type="number"
-						min="0"
-						max="5"
-						name="rating"
-						id="rating"
-						bind:value={adventureToEdit.rating}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<input
-					type="text"
-					id="latitude"
-					hidden
-					name="latitude"
-					bind:value={adventureToEdit.latitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				<input
-					type="text"
-					id="longitude"
-					hidden
-					name="longitude"
-					bind:value={adventureToEdit.longitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				{#if adventureToEdit.collection === null}
-					<div class="mb-2">
-						<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-						><br />
-						<input
-							type="checkbox"
-							class="toggle toggle-primary"
-							id="is_public"
-							name="is_public"
-							bind:checked={adventureToEdit.is_public}
-						/>
-					</div>
-				{/if}
-
-				{#if adventureToEdit.is_public}
-					<div class="bg-neutral p-4 rounded-md shadow-sm">
-						<p class=" font-semibold">Share this Adventure!</p>
-						<div class="flex items-center justify-between">
-							<p class="text-card-foreground font-mono break-words break-all">
-								{window.location.origin + '/adventures/' + adventureToEdit.id}
-							</p>
-							<button
-								type="button"
-								on:click={() => {
-									navigator.clipboard.writeText(
-										`${window.location.origin}/adventures/${adventureToEdit.id}`
-									);
-								}}
-								class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
-							>
-								Copy Link
-							</button>
-						</div>
-					</div>
-				{/if}
-
-				<button
-					type="submit"
-					id="edit_adventure"
-					data-umami-event="Edit Adventure"
-					class="btn btn-primary mr-4 mt-4"
-					on:click={submit}>Edit</button
-				>
-				<!-- if there is a button in form, it will close the modal -->
-				<button class="btn mt-4" on:click={close}>Close</button>
-			</form>
-			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
-		</div>
-	</div>
-</dialog>

From 987b228b7d27f63289a84da32bd90e35b33d8c6f Mon Sep 17 00:00:00 2001
From: Sean Morley <98704938+seanmorley15@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:43:32 -0400
Subject: [PATCH 20/22] Delete frontend/src/lib/components/NewAdventure.svelte

---
 .../src/lib/components/NewAdventure.svelte    | 436 ------------------
 1 file changed, 436 deletions(-)
 delete mode 100644 frontend/src/lib/components/NewAdventure.svelte

diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
deleted file mode 100644
index 4f114f73..00000000
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ /dev/null
@@ -1,436 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
-	import { onMount } from 'svelte';
-	import { enhance } from '$app/forms';
-	import { addToast } from '$lib/toasts';
-	import PointSelectionModal from './PointSelectionModal.svelte';
-	import ImageFetcher from './ImageFetcher.svelte';
-
-	export let type: string = 'visited';
-
-	export let longitude: number | null = null;
-	export let latitude: number | null = null;
-	export let collection_id: string | null = null;
-
-	import MapMarker from '~icons/mdi/map-marker';
-	import Calendar from '~icons/mdi/calendar';
-	import Notebook from '~icons/mdi/notebook';
-	import ClipboardList from '~icons/mdi/clipboard-list';
-	import Star from '~icons/mdi/star';
-	import Attachment from '~icons/mdi/attachment';
-	import Map from '~icons/mdi/map';
-	import Earth from '~icons/mdi/earth';
-	import Wikipedia from '~icons/mdi/wikipedia';
-	import ActivityComplete from './ActivityComplete.svelte';
-	import { appVersion } from '$lib/config';
-
-	export let startDate: string | null = null;
-	export let endDate: string | null = null;
-
-	let wikiError: string = '';
-
-	let newAdventure: Adventure = {
-		id: '',
-		type: type,
-		name: '',
-		location: '',
-		date: '',
-		description: '',
-		activity_types: [],
-		rating: NaN,
-		link: '',
-		image: '',
-		user_id: NaN,
-		latitude: null,
-		longitude: null,
-		is_public: false,
-		collection: collection_id || ''
-	};
-
-	if (longitude && latitude) {
-		newAdventure.latitude = latitude;
-		newAdventure.longitude = longitude;
-		reverseGeocode();
-	}
-
-	async function reverseGeocode() {
-		let res = await fetch(
-			`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
-			{
-				headers: {
-					'User-Agent': `AdventureLog / ${appVersion} `
-				}
-			}
-		);
-		let data = (await res.json()) as OpenStreetMapPlace[];
-		if (data.length > 0) {
-			newAdventure.name = data[0]?.name || '';
-			newAdventure.activity_types?.push(data[0]?.type || '');
-			newAdventure.location = data[0]?.display_name || '';
-		}
-		console.log(data);
-	}
-
-	let image: File;
-	let fileInput: HTMLInputElement;
-
-	let isPointModalOpen: boolean = false;
-	let isImageFetcherOpen: boolean = false;
-
-	const dispatch = createEventDispatcher();
-	let modal: HTMLDialogElement;
-
-	onMount(async () => {
-		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
-		if (modal) {
-			modal.showModal();
-		}
-	});
-
-	function close() {
-		dispatch('close');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			if (isImageFetcherOpen) {
-				isImageFetcherOpen = false;
-			} else if (isPointModalOpen) {
-				isPointModalOpen = false;
-			} else {
-				close(); // Closes the main adventure modal
-			}
-		}
-	}
-
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
-		let data = await res.json();
-		if (!res.ok) {
-			wikiError = 'No article found';
-		}
-		if (data.extract) {
-			wikiError = '';
-			newAdventure.description = data.extract;
-		} else {
-			wikiError = 'No description found';
-		}
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		const form = event.target as HTMLFormElement;
-		const formData = new FormData(form);
-
-		const response = await fetch(form.action, {
-			method: form.method,
-			body: formData
-		});
-
-		if (response.ok) {
-			const result = await response.json();
-			const data = JSON.parse(result.data); // Parsing the JSON string in the data field
-
-			if (data[1] !== undefined) {
-				// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
-				console.log(data);
-				let id = data[1];
-				let user_id = data[2];
-				let image_url = data[3];
-				let link = data[4];
-				if (newAdventure.is_public) {
-					navigator.clipboard.writeText(`${window.location.origin}/adventures/${id}`);
-				}
-				newAdventure.image = image_url;
-				newAdventure.id = id;
-				newAdventure.user_id = user_id;
-				newAdventure.link = link;
-				// turn the activity_types string into an array by splitting it at the commas
-				if (typeof newAdventure.activity_types === 'string') {
-					newAdventure.activity_types = (newAdventure.activity_types as string)
-						.split(',')
-						.map((activity_type) => activity_type.trim())
-						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
-
-					// Remove duplicates
-					newAdventure.activity_types = Array.from(new Set(newAdventure.activity_types));
-				}
-				console.log(newAdventure);
-				dispatch('create', newAdventure);
-				addToast('success', 'Adventure created successfully!');
-				close();
-			}
-		}
-	}
-
-	function handleImageFetch(event: CustomEvent) {
-		const file = event.detail.file;
-		if (file && fileInput) {
-			// Create a DataTransfer object and add the file
-			const dataTransfer = new DataTransfer();
-			dataTransfer.items.add(file);
-
-			// Set the files property of the file input
-			fileInput.files = dataTransfer.files;
-
-			// Update the adventureToEdit object
-			newAdventure.image = file;
-		}
-		isImageFetcherOpen = false;
-	}
-
-	function setLongLat(event: CustomEvent<Adventure>) {
-		console.log(event.detail);
-		isPointModalOpen = false;
-	}
-</script>
-
-{#if isPointModalOpen}
-	<PointSelectionModal
-		query={newAdventure.name}
-		on:close={() => (isPointModalOpen = false)}
-		on:submit={setLongLat}
-		bind:adventure={newAdventure}
-	/>
-{/if}
-
-{#if isImageFetcherOpen}
-	<ImageFetcher
-		on:image={handleImageFetch}
-		name={newAdventure.name}
-		on:close={() => (isImageFetcherOpen = false)}
-	/>
-{/if}
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">New {type} Adventure</h3>
-		<div
-			class="modal-action items-center"
-			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
-		>
-			<form
-				method="post"
-				style="width: 100%;"
-				on:submit={handleSubmit}
-				action="/adventures?/create"
-			>
-				<div class="join">
-					<input
-						class="join-item btn btn-neutral"
-						type="radio"
-						name="type"
-						id="visited"
-						value="visited"
-						aria-label="Visited"
-						checked={newAdventure.type === 'visited'}
-						on:click={() => (type = 'visited')}
-					/>
-					<input
-						class="join-item btn btn-neutral"
-						type="radio"
-						name="type"
-						id="planned"
-						value="planned"
-						aria-label="Planned"
-						checked={newAdventure.type === 'planned'}
-						on:click={() => (type = 'planned')}
-					/>
-				</div>
-
-				<input
-					type="text"
-					name="type"
-					id="type"
-					value={type}
-					hidden
-					readonly
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				<div class="mb-2">
-					<label for="name">Name</label><br />
-					<input
-						type="text"
-						id="name"
-						name="name"
-						bind:value={newAdventure.name}
-						class="input input-bordered w-full max-w-xs mt-1"
-						required
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-					><br />
-					<input
-						type="text"
-						id="location"
-						name="location"
-						bind:value={newAdventure.location}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<div class="mb-2 mt-2">
-						<button
-							type="button"
-							class="btn btn-secondary"
-							on:click={() => (isPointModalOpen = true)}
-							><Map class="inline-block w-6 h-6" />{newAdventure.latitude && newAdventure.longitude
-								? 'Change'
-								: 'Select'} Location</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<label for="date"
-						>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
-						></iconify-icon></label
-					><br />
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={startDate || ''}
-						max={endDate || ''}
-						bind:value={newAdventure.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="description"
-						>Description<iconify-icon icon="mdi:notebook" class="text-lg ml-1 -mb-0.5"
-						></iconify-icon></label
-					><br />
-					<div class="flex">
-						<input
-							type="text"
-							id="description"
-							name="description"
-							bind:value={newAdventure.description}
-							class="input input-bordered w-full max-w-xs mt-1 mb-2"
-						/>
-						<button class="btn btn-neutral ml-2" type="button" on:click={generateDesc}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Generate Description</button
-						>
-					</div>
-					{#if wikiError}
-						<p class="text-red-500">{wikiError}</p>
-					{/if}
-				</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
-						><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={newAdventure.activity_types}
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<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
-					><br />
-					<input
-						type="number"
-						min="0"
-						max="5"
-						bind:value={newAdventure.rating}
-						id="rating"
-						name="rating"
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="link"
-						>Link <iconify-icon icon="mdi:link" class="text-xl -mb-1"></iconify-icon></label
-					><br />
-					<input
-						type="text"
-						id="link"
-						name="link"
-						bind:value={newAdventure.link}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="image">Image </label><br />
-					<div class="flex">
-						<input
-							type="file"
-							id="image"
-							name="image"
-							bind:value={image}
-							bind:this={fileInput}
-							class="file-input file-input-bordered w-full max-w-xs mt-1"
-						/>
-						<button
-							class="btn btn-neutral ml-2"
-							type="button"
-							on:click={() => (isImageFetcherOpen = true)}
-							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
-						>
-					</div>
-				</div>
-				<div class="mb-2">
-					<input
-						type="text"
-						id="latitude"
-						hidden
-						name="latitude"
-						bind:value={newAdventure.latitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="mb-2">
-					<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
-					/>
-					<input
-						type="checkbox"
-						class="toggle toggle-primary"
-						id="is_public"
-						name="is_public"
-						bind:checked={newAdventure.is_public}
-					/>
-				</div>
-				{#if newAdventure.is_public}
-					<p>The link to this adventure will be copied to your clipboard once it is created!</p>
-				{/if}
-				<div class="mb-2">
-					<input
-						type="text"
-						id="longitude"
-						name="longitude"
-						hidden
-						bind:value={newAdventure.longitude}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-					<input
-						type="text"
-						id="collection"
-						name="collection"
-						hidden
-						bind:value={newAdventure.collection}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-
-					<button
-						id="new_adventure"
-						data-umami-event="Create new Adventure"
-						type="submit"
-						class="btn btn-primary mr-4 mt-4">Create</button
-					>
-					<button type="button" class="btn mt-4" on:click={close}>Close</button>
-				</div>
-			</form>
-		</div>
-	</div>
-</dialog>

From add2e2bafa7dc908850ab0fedd3e757346f84822 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 22:48:57 -0400
Subject: [PATCH 21/22] Wikipedia description fetch

---
 .../src/lib/components/AdventureModal.svelte  | 388 +++++++++---------
 frontend/src/routes/adventures/+page.svelte   |   4 -
 2 files changed, 205 insertions(+), 187 deletions(-)

diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte
index 64d94b9d..f1e30648 100644
--- a/frontend/src/lib/components/AdventureModal.svelte
+++ b/frontend/src/lib/components/AdventureModal.svelte
@@ -23,6 +23,8 @@
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
 
+	let wikiError: string = '';
+
 	let noPlaces: boolean = false;
 
 	export let adventureToEdit: Adventure | null = null;
@@ -57,7 +59,8 @@
 				lngLat: { lng: adventure.longitude, lat: adventure.latitude },
 				location: adventure.location || '',
 				name: adventure.name,
-				activity_type: ''
+				activity_type: '',
+				lng: 0
 			}
 		];
 	}
@@ -210,7 +213,8 @@
 						lngLat: { lng: longitude, lat: latitude },
 						location: data[0]?.display_name || '',
 						name: data[0]?.name || '',
-						activity_type: data[0]?.type || ''
+						activity_type: data[0]?.type || '',
+						lng: 0
 					}
 				];
 			}
@@ -240,17 +244,28 @@
 		}
 	}
 
-	// async function generateDesc() {
-	// 	let res = await fetch(`/api/generate/desc/?name=${adventureToEdit.name}`);
-	// 	let data = await res.json();
-	// 	if (data.extract) {
-	// 		adventureToEdit.description = data.extract;
-	// 	}
-	// }
+	async function generateDesc() {
+		let res = await fetch(`/api/generate/desc/?name=${adventure.name}`);
+		let data = await res.json();
+		if (data.extract?.length > 0) {
+			adventure.description = data.extract;
+		} else {
+			wikiError = 'No description found';
+		}
+	}
 
 	function addMarker(e: CustomEvent<any>) {
 		markers = [];
-		markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
+		markers = [
+			...markers,
+			{
+				lngLat: e.detail.lngLat,
+				name: '',
+				location: '',
+				activity_type: '',
+				lng: 0
+			}
+		];
 		console.log(markers);
 	}
 
@@ -393,199 +408,206 @@
 							bind:value={adventure.description}
 							class="textarea textarea-bordered w-full h-32"
 						></textarea>
-					</div>
-					<div>
-						<label for="activity_types">Activity Types</label><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={adventure.activity_types}
-							class="input input-bordered w-full"
-						/>
-						<ActivityComplete bind:activities={adventure.activity_types} />
-					</div>
-					<div>
-						<label for="rating"
-							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-						><br />
-						<input
-							type="number"
-							min="0"
-							max="5"
-							hidden
-							bind:value={adventure.rating}
-							id="rating"
-							name="rating"
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<div class="rating -ml-3 mt-1">
-							<input
-								type="radio"
-								name="rating-2"
-								class="rating-hidden"
-								checked={Number.isNaN(adventure.rating)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventure.rating = 1)}
-								checked={adventure.rating === 1}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventure.rating = 2)}
-								checked={adventure.rating === 2}
-							/>
+						<div class="mt-2">
+							<button type="button" class="btn btn-neutral" on:click={generateDesc}
+								>Generate Description</button
+							>
+							<p class="text-red-500">{wikiError}</p>
+						</div>
+						<div>
+							<label for="activity_types">Activity Types</label><br />
 							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventure.rating = 3)}
-								checked={adventure.rating === 3}
+								type="text"
+								id="activity_types"
+								name="activity_types"
+								hidden
+								bind:value={adventure.activity_types}
+								class="input input-bordered w-full"
 							/>
+							<ActivityComplete bind:activities={adventure.activity_types} />
+						</div>
+						<div>
+							<label for="rating"
+								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+							><br />
 							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventure.rating = 4)}
-								checked={adventure.rating === 4}
+								type="number"
+								min="0"
+								max="5"
+								hidden
+								bind:value={adventure.rating}
+								id="rating"
+								name="rating"
+								class="input input-bordered w-full max-w-xs mt-1"
 							/>
+							<div class="rating -ml-3 mt-1">
+								<input
+									type="radio"
+									name="rating-2"
+									class="rating-hidden"
+									checked={Number.isNaN(adventure.rating)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventure.rating = 1)}
+									checked={adventure.rating === 1}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventure.rating = 2)}
+									checked={adventure.rating === 2}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventure.rating = 3)}
+									checked={adventure.rating === 3}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventure.rating = 4)}
+									checked={adventure.rating === 4}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (adventure.rating = 5)}
+									checked={adventure.rating === 5}
+								/>
+								{#if adventure.rating}
+									<button
+										type="button"
+										class="btn btn-sm btn-error ml-2"
+										on:click={() => (adventure.rating = NaN)}
+									>
+										Remove
+									</button>
+								{/if}
+							</div>
+							<div>
+								<div class="mt-2">
+									<div>
+										<label for="is_public"
+											>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+										><br />
+										<input
+											type="checkbox"
+											class="toggle toggle-primary"
+											id="is_public"
+											name="is_public"
+											bind:checked={adventure.is_public}
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="divider"></div>
+						<h2 class="text-2xl font-semibold mb-2 mt-2">Location Information</h2>
+						<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
+						<div>
+							<label for="latitude">Location</label><br />
 							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventure.rating = 5)}
-								checked={adventure.rating === 5}
+								type="text"
+								id="location"
+								name="location"
+								bind:value={adventure.location}
+								class="input input-bordered w-full"
 							/>
-							{#if adventure.rating}
-								<button
-									type="button"
-									class="btn btn-sm btn-error ml-2"
-									on:click={() => (adventure.rating = NaN)}
-								>
-									Remove
-								</button>
-							{/if}
 						</div>
 						<div>
-							<div class="mt-2">
-								<div>
-									<label for="is_public"
-										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-									><br />
-									<input
-										type="checkbox"
-										class="toggle toggle-primary"
-										id="is_public"
-										name="is_public"
-										bind:checked={adventure.is_public}
-									/>
+							<form on:submit={geocode} class="mt-2">
+								<input
+									type="text"
+									placeholder="Seach for a location"
+									class="input input-bordered w-full max-w-xs mb-2"
+									id="search"
+									name="search"
+									bind:value={query}
+								/>
+								<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+							</form>
+						</div>
+						{#if places.length > 0}
+							<div class="mt-4 max-w-full">
+								<h3 class="font-bold text-lg mb-4">Search Results</h3>
+
+								<div class="flex flex-wrap">
+									{#each places as place}
+										<button
+											type="button"
+											class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
+											on:click={() => {
+												markers = [
+													{
+														lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+														location: place.display_name,
+														name: place.name,
+														activity_type: place.type,
+														lng: 0
+													}
+												];
+											}}
+										>
+											{place.display_name}
+										</button>
+									{/each}
 								</div>
 							</div>
+						{:else if noPlaces}
+							<p class="text-error text-lg">No results found</p>
+						{/if}
+						<!-- </div> -->
+						<div>
+							<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 markers as marker}
+									<DefaultMarker lngLat={marker.lngLat} />
+								{/each}
+							</MapLibre>
 						</div>
-					</div>
-					<div class="divider"></div>
-					<h2 class="text-2xl font-semibold mb-2 mt-2">Location Information</h2>
-					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
-					<div>
-						<label for="latitude">Location</label><br />
-						<input
-							type="text"
-							id="location"
-							name="location"
-							bind:value={adventure.location}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					<div>
-						<form on:submit={geocode} class="mt-2">
-							<input
-								type="text"
-								placeholder="Seach for a location"
-								class="input input-bordered w-full max-w-xs mb-2"
-								id="search"
-								name="search"
-								bind:value={query}
-							/>
-							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
-						</form>
-					</div>
-					{#if places.length > 0}
-						<div class="mt-4 max-w-full">
-							<h3 class="font-bold text-lg mb-4">Search Results</h3>
 
-							<div class="flex flex-wrap">
-								{#each places as place}
+						<div class="mt-4">
+							<button type="submit" class="btn btn-primary">Save & Next</button>
+							<button type="button" class="btn" on:click={close}>Close</button>
+						</div>
+						{#if adventure.is_public}
+							<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
+								<p class=" font-semibold">Share this Adventure!</p>
+								<div class="flex items-center justify-between">
+									<p class="text-card-foreground font-mono">
+										{window.location.origin}/adventures/{adventure.id}
+									</p>
 									<button
 										type="button"
-										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
 										on:click={() => {
-											markers = [
-												{
-													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-													location: place.display_name,
-													name: place.name,
-													activity_type: place.type
-												}
-											];
+											navigator.clipboard.writeText(
+												`${window.location.origin}/adventures/${adventure.id}`
+											);
 										}}
+										class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
 									>
-										{place.display_name}
+										Copy Link
 									</button>
-								{/each}
+								</div>
 							</div>
-						</div>
-					{:else if noPlaces}
-						<p class="text-error text-lg">No results found</p>
-					{/if}
-					<!-- </div> -->
-					<div>
-						<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 markers as marker}
-								<DefaultMarker lngLat={marker.lngLat} />
-							{/each}
-						</MapLibre>
-					</div>
-
-					<div class="mt-4">
-						<button type="submit" class="btn btn-primary">Save & Next</button>
-						<button type="button" class="btn" on:click={close}>Close</button>
+						{/if}
 					</div>
-					{#if adventure.is_public}
-						<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
-							<p class=" font-semibold">Share this Adventure!</p>
-							<div class="flex items-center justify-between">
-								<p class="text-card-foreground font-mono">
-									{window.location.origin}/adventures/{adventure.id}
-								</p>
-								<button
-									type="button"
-									on:click={() => {
-										navigator.clipboard.writeText(
-											`${window.location.origin}/adventures/${adventure.id}`
-										);
-									}}
-									class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
-								>
-									Copy Link
-								</button>
-							</div>
-						</div>
-					{/if}
 				</form>
 			</div>
 		{:else}
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 7c92963b..c4f9cefa 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -22,9 +22,6 @@
 		includeCollections: true
 	};
 
-	let isShowingCreateModal: boolean = false;
-	let newType: string = '';
-
 	let resultsPerPage: number = 25;
 
 	let count = data.props.count || 0;
@@ -152,7 +149,6 @@
 					class="btn btn-primary"
 					on:click={() => {
 						isAdventureModalOpen = true;
-						newType = 'visited';
 						adventureToEdit = null;
 					}}
 				>

From d1a49b7dd9e262e052325571df88ff58e58ce745 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 18 Aug 2024 08:43:49 -0400
Subject: [PATCH 22/22] Fixed image generation in serializer

---
 backend/server/adventures/serializers.py | 28 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/backend/server/adventures/serializers.py b/backend/server/adventures/serializers.py
index 1395afa5..cdcaef9a 100644
--- a/backend/server/adventures/serializers.py
+++ b/backend/server/adventures/serializers.py
@@ -8,17 +8,27 @@ class Meta:
         fields = ['id', 'image', 'adventure']
         read_only_fields = ['id']
 
-    def to_representation(self, instance):
-        representation = super().to_representation(instance)
+    # def to_representation(self, instance):
+    #     representation = super().to_representation(instance)
         
-        # Build the full URL for the image
-        request = self.context.get('request')
-        if request and instance.image:
-            public_url = request.build_absolute_uri(instance.image.url)
-        else:
-            public_url = f"{os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')}/media/{instance.image.name}"
+    #     # Build the full URL for the image
+    #     request = self.context.get('request')
+    #     if request and instance.image:
+    #         public_url = request.build_absolute_uri(instance.image.url)
+    #     else:
+    #         public_url = f"{os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')}/media/{instance.image.name}"
         
-        representation['image'] = public_url
+    #     representation['image'] = public_url
+    #     return representation
+
+    def to_representation(self, instance):
+        representation = super().to_representation(instance)
+        if instance.image:
+            public_url = os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/')
+            #print(public_url)
+            # remove any  ' from the url
+            public_url = public_url.replace("'", "")
+            representation['image'] = f"{public_url}/media/{instance.image.name}"
         return representation