Merge pull request #77 from seanmorley15/development

Development

src/lib/components/CreateNewAdventure.svelte

@@ -163,12 +163,14 @@
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
       </form>
-      <button class="btn btn-secondary" on:click={generate}
-        >Generate Description</button
-      >
-      <button class="btn btn-secondary" on:click={searchImage}
-        >Search for Image</button
-      >
+      <div class="flex items-center justify-center flex-wrap gap-4 mt-4">
+        <button class="btn btn-secondary" on:click={generate}
+          >Generate Description</button
+        >
+        <button class="btn btn-secondary" on:click={searchImage}
+          >Search for Image</button
+        >
+      </div>
     </div>
   </div>
 </dialog>

src/lib/components/EditModal.svelte

@@ -4,7 +4,7 @@
   import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
-  import { addActivityType } from "$lib";
+  import { addActivityType, generateDescription, getImage } from "$lib";
   let modal: HTMLDialogElement;
 
   console.log(adventureToEdit.id);
@@ -41,6 +41,28 @@
     adventureToEdit = addActivityType(activityInput, adventureToEdit);
     activityInput = "";
   }
+
+  async function generate() {
+    try {
+      console.log(adventureToEdit.name);
+      const desc = await generateDescription(adventureToEdit.name);
+      adventureToEdit.description = desc;
+      // Do something with the updated newAdventure object
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
+
+  async function searchImage() {
+    try {
+      const imageUrl = await getImage(adventureToEdit.name);
+      adventureToEdit.imageUrl = imageUrl;
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -124,6 +146,14 @@
         <!-- 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">
+        <button class="btn btn-secondary" on:click={generate}
+          >Generate Description</button
+        >
+        <button class="btn btn-secondary" on:click={searchImage}
+          >Search for Image</button
+        >
+      </div>
     </div>
   </div>
 </dialog>

src/lib/components/Navbar.svelte

@@ -97,7 +97,9 @@
         {/if}
       </ul>
     </div>
-    <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
+    <a class="btn btn-ghost text-xl" href="/"
+      >AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-8" /></a
+    >
   </div>
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1 gap-2">

src/routes/planner/+page.svelte

@@ -242,7 +242,7 @@
   {/each}
 </div>
 
-{#if adventuresPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip && tripPlans.length == 0}
+{#if adventuresPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip && tripPlans.length > 0}
   <div class="flex flex-col items-center justify-center mt-16">
     <article class="prose mb-4"><h2>Add some plans!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
@@ -284,13 +284,20 @@
   {/each}
 </div>
 
-{#if tripPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip}
+{#if tripPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip && adventuresPlans.length > 0}
   <div class="flex flex-col items-center justify-center mt-16">
     <article class="prose mb-4"><h2>Add some trips!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
   </div>
 {/if}
 
+{#if tripPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip && adventuresPlans.length == 0}
+  <div class="flex flex-col items-center justify-center mt-16">
+    <article class="prose mb-4"><h2>Add some trips and plans!</h2></article>
+    <img src={mapDrawing} width="25%" alt="Logo" />
+  </div>
+{/if}
+
 <svelte:head>
   <title>My Plans | AdventureLog</title>
   <meta

src/routes/worldtravel/+page.svelte

@@ -12,19 +12,21 @@
 
 <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
 
-{#each data.response as item}
-  <button
-    class="btn btn-primary mr-4 mb-2"
-    on:click={() => nav(item.country_code)}
-    >{item.name}
-    <img
-      src={getFlag(24, item.country_code)}
-      class="inline-block -mt-1 mr-1"
-      alt="Flag"
-    /></button
-  >
-  <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
-{/each}
+<div class="flex items-center justify-center flex-wrap">
+  {#each data.response as item}
+    <button
+      class="btn btn-primary mr-2 ml-2 mb-2"
+      on:click={() => nav(item.country_code)}
+      >{item.name}
+      <img
+        src={getFlag(24, item.country_code)}
+        class="inline-block -mt-1 mr-1"
+        alt="Flag"
+      /></button
+    >
+    <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
+  {/each}
+</div>
 
 <svelte:head>
   <title>WorldTravel | AdventureLog</title>