From 4069bc5052b152a22bbc0e30f92ee51aca33226a Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 5 May 2024 14:00:40 +0000 Subject: [PATCH 1/5] feat: Implement lazy loading for images and update dependencies --- src/lib/components/CreateNewAdventure.svelte | 15 +++------ src/lib/components/EditModal.svelte | 15 +++------ src/lib/index.ts | 35 +++++++++++++++++--- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte index 7dd1639..1636f26 100644 --- a/src/lib/components/CreateNewAdventure.svelte +++ b/src/lib/components/CreateNewAdventure.svelte @@ -15,6 +15,7 @@ import type { Adventure } from "$lib/utils/types"; const dispatch = createEventDispatcher(); import { onMount } from "svelte"; + import { addActivityType } from "$lib"; let modal: HTMLDialogElement; onMount(() => { @@ -25,7 +26,7 @@ }); function create() { - addActivityType(); + activitySetup(); if (newAdventure.name.trim() === "") { alert("Name is required"); return; @@ -46,15 +47,9 @@ let activityInput: string = ""; - function addActivityType() { - if (activityInput.trim() !== "") { - const activities = activityInput - .split(" ") - .filter((activity) => activity.trim() !== ""); - newAdventure.activityTypes = activities; - activityInput = ""; - } - console.log(newAdventure.activityTypes); + function activitySetup() { + newAdventure = addActivityType(activityInput, newAdventure); + activityInput = ""; } diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte index b566521..8935d3a 100644 --- a/src/lib/components/EditModal.svelte +++ b/src/lib/components/EditModal.svelte @@ -4,6 +4,7 @@ import type { Adventure } from "$lib/utils/types"; const dispatch = createEventDispatcher(); import { onMount } from "svelte"; + import { addActivityType } from "$lib"; let modal: HTMLDialogElement; console.log(adventureToEdit.id); @@ -19,7 +20,7 @@ }); function submit() { - addActivityType(); + activitySetup(); dispatch("submit", adventureToEdit); console.log(adventureToEdit); } @@ -36,15 +37,9 @@ let activityInput: string = ""; - function addActivityType() { - if (activityInput.trim() !== "") { - const activities = activityInput - .split(",") - .filter((activity) => activity.trim() !== ""); - adventureToEdit.activityTypes = activities; - activityInput = ""; - } - console.log(adventureToEdit.activityTypes); + function activitySetup() { + adventureToEdit = addActivityType(activityInput, adventureToEdit); + activityInput = ""; } diff --git a/src/lib/index.ts b/src/lib/index.ts index cc1f350..1d825a7 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,5 +1,6 @@ import inspirationalQuotes from "./json/quotes.json"; import countryCodes from "./json/countries.json"; +import type { Adventure } from "./utils/types"; /** * Converts a country code to its corresponding country name. @@ -8,7 +9,8 @@ import countryCodes from "./json/countries.json"; */ export function countryCodeToName(countryCode: string): string | null { // Look up the country name using the provided country code - const countryName = countryCodes[countryCode.toLowerCase() as keyof typeof countryCodes]; + const countryName = + countryCodes[countryCode.toLowerCase() as keyof typeof countryCodes]; // Return the country name if found, otherwise return null return countryName || null; } @@ -19,10 +21,10 @@ export function countryCodeToName(countryCode: string): string | null { * @param country - The 2 digit country code representing the desired flag. * @returns The URL of the flag image. */ -export function getFlag(size:number,country: string) { +export function getFlag(size: number, country: string) { return `https://flagcdn.com/h${size}/${country}.png`; } - + /** * Generates a random string consisting of alphanumeric characters. * @returns {string} The randomly generated string. @@ -48,5 +50,30 @@ export function getRandomQuote() { const randomIndex = Math.floor(Math.random() * quotes.length); let quoteString = quotes[randomIndex].quote; let authorString = quotes[randomIndex].author; - return "\"" + quoteString + "\" - " + authorString; + return '"' + quoteString + '" - ' + authorString; +} + +/** + * Adds activity types to the adventure. + * + * @param activityInput - The input string containing activity types separated by commas. + * @param adventureToEdit - The adventure object to which the activity types will be added. + * @returns The adventure object with the updated activity types. + */ +export function addActivityType( + activityInput: string, + adventureToEdit: Adventure +) { + if (activityInput.trim() !== "") { + const activities = activityInput + .split(",") + .filter((activity) => activity.trim() !== ""); + // trims the whitespace from the activities + for (let i = 0; i < activities.length; i++) { + activities[i] = activities[i].trim(); + } + adventureToEdit.activityTypes = activities; + activityInput = ""; + } + return adventureToEdit; } From ca7592989aea27dfb89b7a757a84e03a4feb4719 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 5 May 2024 19:06:23 +0000 Subject: [PATCH 2/5] feat: Add markVisited function to AdventureCard.svelte and +page.svelte The code changes include adding a new function called markVisited to the AdventureCard.svelte and +page.svelte files. This function is responsible for marking an adventure as visited and dispatching an event to update the adventure's status. This enhancement allows users to mark adventures as visited in the planner page and triggers the corresponding API request to update the adventure's status in the database. --- src/lib/components/AdventureCard.svelte | 8 ++++ src/routes/api/visits/+server.ts | 9 +++- src/routes/planner/+page.svelte | 63 +++++++++++++++++++++++++ src/services/adventureService.ts | 31 ++++++++++++ 4 files changed, 110 insertions(+), 1 deletion(-) diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte index e5bed98..0cdd8a1 100644 --- a/src/lib/components/AdventureCard.svelte +++ b/src/lib/components/AdventureCard.svelte @@ -31,6 +31,10 @@ console.log(adventure.id); goto(`/adventure/${adventure.id}`); } + function markVisited() { + console.log(adventure.id); + dispatch("markVisited", adventure); + }
{/if} {#if type == "planner"} + { }); } - const { name, location, date, description, activityTypes, id, rating } = + const { name, location, date, description, activityTypes, id, rating, type } = body.detailAdventure; if (!name) { @@ -189,11 +189,18 @@ export async function PUT(event: RequestEvent): Promise { }); } + if (type == "featured") { + return error(400, { + message: "Featured adventures cannot be created at the moment", + }); + } + // update the adventure in the user's visited list await db .update(adventureTable) .set({ name: name, + type: type, location: location, date: date, description: description, diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte index 8e9092d..409f3d1 100644 --- a/src/routes/planner/+page.svelte +++ b/src/routes/planner/+page.svelte @@ -8,6 +8,7 @@ saveAdventure, removeAdventure, addAdventure, + changeType, } from "../../services/adventureService.js"; import SucessToast from "$lib/components/SucessToast.svelte"; import mapDrawing from "$lib/assets/adventure_map.svg"; @@ -87,6 +88,18 @@ showToast("Failed to add adventure"); } }; + + async function markVisited(event: { detail: Adventure }) { + let initialLength: number = plans.length; + let newArray = await changeType(event.detail, "mylog", plans); + if (newArray.length + 1 == initialLength) { + plans = newArray; + showToast("Adventure moved to visit log!"); + } else { + showToast("Failed to moves adventure"); + } + adventureToEdit = undefined; + } {#if isShowingToast} @@ -131,6 +144,7 @@ type="planner" on:edit={editPlan} on:remove={remove} + on:markVisited={markVisited} /> {/each}
@@ -153,3 +167,52 @@ type="planner" /> {/if} + + + + + + + My Plans | AdventureLog + + diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index 8559702..c8405dc 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -124,6 +124,37 @@ export async function addAdventure( return adventureArray; } +export async function changeType( + newAdventure: Adventure, + newType: string, + adventureArray: Adventure[] +) { + newAdventure.type = newType; + let detailAdventure = newAdventure; + + const response = await fetch("/api/visits", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ detailAdventure }), + }); + + if (response.ok) { + // remove adventure from array where id matches + adventureArray = adventureArray.filter( + (existingAdventure) => existingAdventure.id !== newAdventure.id + ); + // showToast("Adventure removed successfully!"); + } else { + console.error("Error:", response.statusText); + adventureArray = []; + } + + console.log(adventureArray); + + return adventureArray; +} /** * Increments the visit count by the specified amount. * @param {number} amount - The amount to increment the visit count by. From 76c65014b7debffdb2620fb8d27f4605d82ec15a Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 5 May 2024 19:31:22 +0000 Subject: [PATCH 3/5] New homepage --- src/routes/+page.svelte | 289 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 272 insertions(+), 17 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5e8b46c..8e905af 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,26 +12,281 @@ } -
- {#if data.user && data.user.username != ""} -

- Welcome {data.user.first_name}. Let's get Exploring! -

- {:else} -

Welcome. Let's get Exploring!

- {/if} + - Logo - - -
-
-
Logged Adventures
-
{$visitCount}
- +
+
+
+
+
+

+ Discover the World's Most Thrilling Adventures +

+

+ Discover and plan your next epic adventure with our cutting-edge + travel app. Explore breathtaking destinations, create custom + itineraries, and stay connected on the go. +

+
+
+ +
+
+ Hero
-
+ +
+
+
+
+
+ Key Features +
+

+ Discover, Plan, and Explore with Ease +

+

+ Our adventure travel app is designed to simplify your journey, + providing you with the tools and resources to plan, pack, and navigate + your next epic adventure. +

+
+
+
+ + Image +
+
    +
  • +
    +

    Trip Planning

    +

    + Easily create custom itineraries and get real-time updates on + your trip. +

    +
    +
    • +
  • +
    +

    Packing Lists

    +

    + Never forget a thing with our comprehensive packing lists. +

    +
    +
    • +
  • +
    +

    Destination Guides

    +

    + Discover the best attractions, activities, and hidden gems in + your destination. +

    +
    +
    • +
+
+
+
+
+ + Home | AdventureLog From 755dc683012f7a8e5bac4e61bc5430ce26dec8e9 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 5 May 2024 19:45:49 +0000 Subject: [PATCH 4/5] New navbar setup --- src/lib/components/Navbar copy.svelte | 169 ++++++++++++++++++++++++++ src/lib/components/Navbar.svelte | 107 +++++++++------- src/lib/components/UserAvatar.svelte | 12 ++ 3 files changed, 245 insertions(+), 43 deletions(-) create mode 100644 src/lib/components/Navbar copy.svelte diff --git a/src/lib/components/Navbar copy.svelte b/src/lib/components/Navbar copy.svelte new file mode 100644 index 0000000..7efe33f --- /dev/null +++ b/src/lib/components/Navbar copy.svelte @@ -0,0 +1,169 @@ + + +
+
+ + {#if user} + + + + + {/if} + + +
+
+ AdventureLog 🗺️ +
+ + {#if infoModalOpen} + + {/if} +
+ {#if !user} + + + {/if} + + {#if user} +

Adventures: {count}

+ + {/if} + +
+
+ +
+ +
    +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • + + +
  • + + + +
    • +
    +
+
+
+
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 7efe33f..2b325dc 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -68,55 +68,76 @@ } -
-
- - {#if user} - +
+
+
+ +
+ +
    - - - - {/if} - - -
-
+
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + +
    AdventureLog 🗺️
    - - {#if infoModalOpen} - - {/if} -
    - {#if !user} - - - {/if} - + +
    {#if user} -

    Adventures: {count}

    + {:else} + + {/if} -
    import { enhance } from "$app/forms"; import { goto } from "$app/navigation"; + import InfoModal from "./InfoModal.svelte"; export let user: any; let icon: string = ""; @@ -17,6 +18,8 @@ async function navToLog() { goto("/log"); } + + let isInfoModalOpen: boolean = false;
    @@ -42,8 +45,17 @@ {/if} +
  • + +
    • + +{#if isInfoModalOpen} + (isInfoModalOpen = false)} /> +{/if} From d4c24df0aafed355637a3e3c301967361789a557 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 5 May 2024 19:49:23 +0000 Subject: [PATCH 5/5] Fix log in and signup buttons in reactive navbar --- src/lib/components/Navbar.svelte | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 2b325dc..fdffc6d 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -89,7 +89,7 @@
    • @@ -103,6 +103,15 @@
      • + {#if !user} +
    • + +
      • +
    • + +
      • + {/if}
    AdventureLog 🗺️ @@ -129,14 +138,19 @@ >Featured + {#if !user} +
  • + +
    • +
  • + +
    • + {/if}
    {#if user} - {:else} - - {/if}