From a3c22448c898b412bede98532164b9810c3fe093 Mon Sep 17 00:00:00 2001
From: adeliptr <adeliptr@gmail.com>
Date: Mon, 9 Jun 2025 17:46:33 +0900
Subject: [PATCH 1/2] use unsplash API to get photos

---
 src/firebase.js                         | 16 ++++++++--------
 src/lib/components/AddPlaces.svelte     | 22 +++++-----------------
 src/lib/components/NewTripPopup.svelte  | 24 +++++++++++++++++++++++-
 src/routes/itinerary/[tid]/+page.svelte | 14 +++++---------
 src/services/unsplash.ts                | 21 +++++++++++++++++++++
 5 files changed, 62 insertions(+), 35 deletions(-)
 create mode 100644 src/services/unsplash.ts

diff --git a/src/firebase.js b/src/firebase.js
index 3cbf934..cfacfaf 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,15 +1,15 @@
 import { initializeApp, getApps, getApp } from 'firebase/app';
 import { getDatabase } from 'firebase/database';
 
-// Your web app's Firebase configuration
+// Firebase configuration
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID
 };
 
 // Initialize Firebase (with duplicate app prevention)
diff --git a/src/lib/components/AddPlaces.svelte b/src/lib/components/AddPlaces.svelte
index a2adb31..d47dea5 100644
--- a/src/lib/components/AddPlaces.svelte
+++ b/src/lib/components/AddPlaces.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { Loader } from '@googlemaps/js-api-loader';
+    import { fetchUnsplashPhoto } from '../../services/unsplash';
 
     // Extend the PlaceResult type to include our custom photoUrl
     interface ExtendedPlaceResult extends google.maps.places.PlaceResult {
@@ -58,25 +59,12 @@
             const autocomplete = new google.maps.places.Autocomplete(input, autocompleteOptions);
             autocomplete.setFields(['name', 'formatted_address', 'photos', 'place_id', 'geometry']);
 
-            autocomplete.addListener('place_changed', () => {
+            autocomplete.addListener('place_changed', async () => {
                 const place = autocomplete.getPlace() as ExtendedPlaceResult;
                 if (place && place.name) {
-                    // If the place has photos, get the URL for the first photo
-                    if (place.photos && place.photos.length > 0) {
-                        try {
-                            const photoOptions = {
-                                maxWidth: 400,
-                                maxHeight: 300
-                            };
-                            place.photoUrl = place.photos[0].getUrl(photoOptions);
-                        } catch (error) {
-                            console.error('Error getting photo URL:', error);
-                            place.photoUrl = '/placeholder.jpeg';
-                        }
-                    }
-                    else {
-                        place.photoUrl = '/placeholder.jpeg';
-                    }
+                    // Use Unsplash for the photo
+                    const unsplashUrl = await fetchUnsplashPhoto(place.name);
+                    place.photoUrl = unsplashUrl || '/placeholder.jpeg';
                     
                     selectedPlace = place;
                     lastSelectedPlaceName = input.value.trim();
diff --git a/src/lib/components/NewTripPopup.svelte b/src/lib/components/NewTripPopup.svelte
index c8cda4c..e67a323 100644
--- a/src/lib/components/NewTripPopup.svelte
+++ b/src/lib/components/NewTripPopup.svelte
@@ -145,6 +145,28 @@
         }
     }
 
+    const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
+
+    async function fetchUnsplashPhoto(query: string): Promise<string | null> {
+        try {
+            const response = await fetch(
+                `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
+            );
+
+            if (!response.ok) {
+                console.error("Failed to fetch Unsplash photo");
+                return null;
+            }
+
+            const data = await response.json();
+            const firstPhoto = data.results?.[0];
+            return firstPhoto?.urls?.regular || null;
+        } catch (error) {
+            console.error("Error fetching Unsplash photo:", error);
+            return null;
+        }
+    }
+
     async function handleStart() {
         destinationError = !destination;
         startDateError = !startDate;
@@ -174,7 +196,7 @@
             const placeDetails = {
                 name: selectedPlace.name,
                 formatted_address: selectedPlace.formatted_address,
-                photo: selectedPlace.photos?.[0]?.getUrl(),
+                photo: await fetchUnsplashPhoto(destination) || '/placeholder.jpeg',
                 location: {
                     lat: selectedPlace.geometry.location.lat(),
                     lng: selectedPlace.geometry.location.lng()
diff --git a/src/routes/itinerary/[tid]/+page.svelte b/src/routes/itinerary/[tid]/+page.svelte
index 6029bb5..8c34315 100644
--- a/src/routes/itinerary/[tid]/+page.svelte
+++ b/src/routes/itinerary/[tid]/+page.svelte
@@ -22,6 +22,7 @@
     import RecommendationPopup from '$lib/components/RecommendationPopup.svelte';
     import LoadingOverlay from '$lib/components/LoadingOverlay.svelte';
     import TurnIntoItineraryPopup from '$lib/components/TurnIntoItineraryPopup.svelte';
+    import { fetchUnsplashPhoto } from '../../../services/unsplash';
     import type { Place } from '$lib/constants/Interfaces';
 
     let tripData: any = null;
@@ -288,12 +289,6 @@
         itinerary: true
     };
 
-    let recommendedPlaces = [
-        { name: "Place name" },
-        { name: "Place name" },
-        { name: "Place name" }
-    ];
-
     let placesToVisit: any[] = [];
 
     async function handleDeletePlace(index: number) {
@@ -419,12 +414,13 @@
 
                     if (results.length > 0) {
                         const place = results[0];
-                        const photoUrl = place.photos?.[0]?.getUrl();
-                        
+                        // Use Unsplash for the photo
+                        const unsplashUrl = await fetchUnsplashPhoto(place.name || rec.name);
+
                         const newPlace = {
                             name: place.name || rec.name,
                             desc: place.formatted_address || '',
-                            image: photoUrl || '/placeholder.jpeg',
+                            image: unsplashUrl || '/placeholder.jpeg',
                             geometry: place.geometry?.location ? {
                                 lat: place.geometry.location.lat(),
                                 lng: place.geometry.location.lng()
diff --git a/src/services/unsplash.ts b/src/services/unsplash.ts
new file mode 100644
index 0000000..78ff1f3
--- /dev/null
+++ b/src/services/unsplash.ts
@@ -0,0 +1,21 @@
+const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
+
+export async function fetchUnsplashPhoto(query: string): Promise<string | null> {
+    try {
+        const response = await fetch(
+            `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
+        );
+
+        if (!response.ok) {
+            console.error("Failed to fetch Unsplash photo");
+            return null;
+        }
+
+        const data = await response.json();
+        const firstPhoto = data.results?.[0];
+        return firstPhoto?.urls?.regular || null;
+    } catch (error) {
+        console.error("Error fetching Unsplash photo:", error);
+        return null;
+    }
+} 
\ No newline at end of file

From 571bfd653eea6194c40364cd63a351dd7f0f64d2 Mon Sep 17 00:00:00 2001
From: adeliptr <adeliptr@gmail.com>
Date: Mon, 9 Jun 2025 18:11:06 +0900
Subject: [PATCH 2/2] link marker to itinerary

---
 src/lib/components/WorldMap.svelte | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/WorldMap.svelte b/src/lib/components/WorldMap.svelte
index eb96152..34034cb 100644
--- a/src/lib/components/WorldMap.svelte
+++ b/src/lib/components/WorldMap.svelte
@@ -6,10 +6,12 @@
   import '../../app.css';
   import { ref, get } from 'firebase/database';
   import { db } from '../../firebase';
+  import { goto } from '$app/navigation';
 
   let mapContainer: HTMLDivElement;
 
   interface TripLocation {
+    tid: string;
     name: string;
     location: {
       lat: number;
@@ -17,6 +19,7 @@
     };
     startDate: string;
     endDate: string;
+    hasMemory: boolean;
   }
 
   function formatDate(dateStr: string): string {
@@ -37,16 +40,19 @@
 
       const locationMap: Record<string, TripLocation[]> = {};
 
-      Object.values(snapshot.val()).forEach((trip: any) => {
+      Object.entries(snapshot.val()).forEach(([tid, trip]: [string, any]) => {
         const endDate = new Date(trip.endDate);
         if (endDate < today && trip.destination?.location) {
           const key = `${trip.destination.location.lat},${trip.destination.location.lng}`;
           if (!locationMap[key]) locationMap[key] = [];
+          const hasMemory = trip.memories && Object.keys(trip.memories).length > 0;
           locationMap[key].push({
+            tid,
             name: trip.destination.name,
             location: trip.destination.location,
             startDate: trip.startDate,
-            endDate: trip.endDate
+            endDate: trip.endDate,
+            hasMemory
           });
         }
       });
@@ -167,14 +173,23 @@
                   .attr('cy', baseY - offsetY)
                   .attr('r', 5)
                   .attr('fill', Colors.planner.med400)
-                  .attr('class', 'trip-marker');
+                  .attr('class', 'trip-marker')
+                  .attr('data-has-memory', trip.hasMemory ? 'true' : 'false')
+                  .style('cursor', 'pointer')
+                  .on('click', function () {
+                    goto(`/itinerary/${trip.tid}`);
+                  });
 
                 markerGroup.append('text')
                   .attr('x', baseX + 10)
                   .attr('y', baseY - offsetY + 4)
                   .attr('font-size', '12px')
                   .attr('class', 'trip-label')
-                  .text(`${formatDate(trip.startDate)} - ${formatDate(trip.endDate)}`);
+                  .text(`${formatDate(trip.startDate)} - ${formatDate(trip.endDate)}`)
+                  .style('cursor', 'pointer')
+                  .on('click', function () {
+                    goto(`/itinerary/${trip.tid}`);
+                  });
 
                 markerGroup
                   .style('opacity', 0)
@@ -271,10 +286,14 @@
     fill: var(--memory-500);
   }
 
-  :global(.dark .trip-marker) {
+  :global(.dark .trip-marker[data-has-memory="true"]) {
     fill: var(--memory-500);
   }
 
+  :global(.dark .trip-marker[data-has-memory="false"]) {
+    fill: var(--planner-400);
+  }
+
   :global(.dark .trip-line) {
     stroke: var(--memory-500);
   }