From 32c0b6135e7bd1ca887a3be50f7c3cd48b698214 Mon Sep 17 00:00:00 2001
From: adeliptr <adeliptr@gmail.com>
Date: Sat, 7 Jun 2025 16:21:52 +0900
Subject: [PATCH] fix memory path in db

---
 src/lib/components/NewMemoryPopup.svelte      |  47 ++++---
 src/lib/constants/Interfaces.ts               |  29 ++++
 src/routes/itinerary/[tid]/+page.svelte       |  13 +-
 src/routes/trips/+page.svelte                 |  18 +--
 src/routes/viewimage/+page.svelte             |  29 ++--
 .../[tripId]/[memoryId]/+page.svelte          | 125 ++++++++++++++++++
 6 files changed, 200 insertions(+), 61 deletions(-)
 create mode 100644 src/lib/constants/Interfaces.ts
 create mode 100644 src/routes/viewimage/[tripId]/[memoryId]/+page.svelte

diff --git a/src/lib/components/NewMemoryPopup.svelte b/src/lib/components/NewMemoryPopup.svelte
index 927a174..e7a25ad 100644
--- a/src/lib/components/NewMemoryPopup.svelte
+++ b/src/lib/components/NewMemoryPopup.svelte
@@ -8,9 +8,8 @@
     import { db } from '../../firebase';
   
     export let showPopup = false;
-    export let onAddMemory = () => {};
+    // export let onAddMemory = () => {};
     export let onCancel = () => {};
-    export let tid: string;
 
     let startDate = '';
     let endDate = '';
@@ -28,22 +27,24 @@
 
     let tripOptions: { value: string; label: string }[] = [];
 
-    ////////// THIS PART - load destination, startDate, and endDate from previous trip ////////
     onMount(() => {
+        // reference to the trips node
         const tripsRef = ref(db, 'trips');
-        onValue(tripsRef, snapshot => {
+
+        // listen for changes in the trips data
+        onValue(tripsRef, (snapshot) => {
             const options: { value: string; label: string }[] = [];
             snapshot.forEach(child => {
-            const val = child.val();
-            const tripId = child.key;
-            const { name } = val.destination;
-            const start = new Date(val.startDate);
-            const end = new Date(val.endDate);
-            const format = (d: Date) => `${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
-            options.push({
-                value: tripId,
-                label: `${name} (${format(start)} - ${format(end)})`
-            });
+                const val = child.val();
+                const tripId = child.key;
+                const { name } = val.destination;
+                const start = new Date(val.startDate);
+                const end = new Date(val.endDate);
+                const format = (d: Date) => `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}/${String(d.getFullYear())}`;
+                options.push({
+                    value: tripId,
+                    label: `${name} (${format(start)} - ${format(end)})`
+                });
             });
             tripOptions = options;
         });
@@ -64,8 +65,9 @@
             const tripRef = ref(db, `trips/${selectedTripId}`);
             onValue(tripRef, (snapshot) => {
                 const val = snapshot.val();
-                startDate = val.startDate;
-                endDate = val.endDate;
+                startDate = new Date(val.startDate).toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+                endDate = new Date(val.endDate).toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+                console.log(`startDate: ${startDate}, endDate: ${endDate}`);
             });
         }
     }
@@ -159,6 +161,7 @@
 
         const finalLocation = isCustomLocation() ? customLocation : selectedLocation;
 
+        console.log(`startDate = ${startDate}, endDate = ${endDate}, location = ${location}`)
         const newMemory = {
             location: finalLocation,
             startDate,
@@ -166,20 +169,21 @@
             images: images.map(file => URL.createObjectURL(file)),
             createdAt: new Date().toISOString()
         };
-        ////////// THIS PART - add memory node on trips /////////
         try {
-            const memoryRef = ref(db, `trips/${tid}/memories`);
+            console.log(`tid = ${selectedTripId}`);
+            const memoryRef = ref(db, `trips/${selectedTripId}/memories`);
             const newMemory = {
                 location: finalLocation,
-                startDate,
-                endDate,
+                startDate: startDate,
+                endDate: endDate,
+                // TODO: change this to use non-local URL
                 images: images.map(file => URL.createObjectURL(file)),
                 createdAt: new Date().toISOString()
             };
             const addedRef = await push(memoryRef, newMemory);
 
             reset();
-            goto(`/viewimage?id=${addedRef.key}`);
+            goto(`/viewimage/${selectedTripId}/${addedRef.key}`);
         } catch (error) {
             console.error('Error saving memory:', error);
         }
@@ -206,7 +210,6 @@
 
             <div class="input-form">
                 <label for="location">Load from past trips</label>
-                <!-- THIS PART - binding informaions to dropdown options-->
                 <select bind:value={selectedTripId}>
                     <option value="" disabled>Select location</option>
                     {#each tripOptions as opt}
diff --git a/src/lib/constants/Interfaces.ts b/src/lib/constants/Interfaces.ts
new file mode 100644
index 0000000..74dd133
--- /dev/null
+++ b/src/lib/constants/Interfaces.ts
@@ -0,0 +1,29 @@
+// the trip data structure saved in the database
+export interface Trip {
+    tid: string;
+    destination: {
+        name: string;
+        photo: string;
+        formatted_address: string;
+        location: {
+            lat: number;
+            lng: number;
+        }
+    };
+    startDate: string;
+    endDate: string;
+    tripmates: string[];
+    created_at: string;
+}
+
+// the place data structure saved in the database
+export interface Place {
+    name: string;
+    desc?: string;
+    image?: string;
+    time?: string;
+    geometry?: {
+        lat: number;
+        lng: number;
+    };
+}
\ No newline at end of file
diff --git a/src/routes/itinerary/[tid]/+page.svelte b/src/routes/itinerary/[tid]/+page.svelte
index caf38b8..6029bb5 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 type { Place } from '$lib/constants/Interfaces';
 
     let tripData: any = null;
     let tripDates: string[] = [];
@@ -29,18 +30,6 @@
     let countryCode = 'tw'; // country code to restrict the autocomplete search
     let showTurnIntoItineraryPopup = false;
     let isDistributingPlaces = false;
-    
-    // the place data structure saved in the database
-    interface Place {
-        name: string;
-        desc?: string;
-        image?: string;
-        time?: string;
-        geometry?: {
-            lat: number;
-            lng: number;
-        };
-    }
 
     interface DatePlaces {
         placesPlanned: Place[];
diff --git a/src/routes/trips/+page.svelte b/src/routes/trips/+page.svelte
index acd270e..9d6d2d4 100644
--- a/src/routes/trips/+page.svelte
+++ b/src/routes/trips/+page.svelte
@@ -7,23 +7,7 @@
     import { onMount } from 'svelte';
     import { ref, onValue } from 'firebase/database';
     import { db } from '../../firebase';
-    
-    interface Trip {
-        tid: string;
-        destination: {
-            name: string;
-            photo: string;
-            formatted_address: string;
-            location: {
-                lat: number;
-                lng: number;
-            }
-        };
-        startDate: string;
-        endDate: string;
-        tripmates: string[];
-        created_at: string;
-    }
+    import type { Trip } from '$lib/constants/Interfaces';
 
     let activeTab = "Ongoing Trips";
     let showNewTripPopup = false;
diff --git a/src/routes/viewimage/+page.svelte b/src/routes/viewimage/+page.svelte
index 152831b..fe6f146 100644
--- a/src/routes/viewimage/+page.svelte
+++ b/src/routes/viewimage/+page.svelte
@@ -2,26 +2,34 @@
   import '../../app.css';
   import Nav from '$lib/components/Nav.svelte';
   import Button from '$lib/components/Button.svelte';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { onMount } from 'svelte';
-  import { getDatabase, ref, get } from 'firebase/database';
+  import { ref, get } from 'firebase/database';
   import { db } from '../../firebase';
 
   let memoryId = '';
+  /**
+   * @type {{ location: any; startDate: any; endDate: any; images: any; } | null}
+   */
   let memory = null;
+  let tripId = '';
 
   $: {
-    const q = $page.url.searchParams;
-    memoryId = q.get('id') ?? '';
+    tripId = page.params.tripId;
+    memoryId = page.params.memoryId;
   }
 
   onMount(async () => {
-    if (memoryId) {
-      const snapshot = await get(ref(db, `memories/${memoryId}`));
-      if (snapshot.exists()) {
-        memory = snapshot.val();
-      } else {
-        console.error('No memory found');
+    if (tripId && memoryId) {
+      try {
+        const snapshot = await get(ref(db, `trips/${tripId}/memories/${memoryId}`));
+        if (snapshot.exists()) {
+          memory = snapshot.val();
+        } else {
+          console.error('No memory found');
+        }
+      } catch (error) {
+        console.error('Error fetching memory:', error);
       }
     }
   });
@@ -50,6 +58,7 @@
 
       <div class="image-list">
         {#each memory.images as img}
+          <!-- svelte-ignore a11y_img_redundant_alt -->
           <img src={typeof img === 'string' ? img : URL.createObjectURL(img)} alt="Memory image" />
         {/each}
       </div>
diff --git a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
new file mode 100644
index 0000000..5dce965
--- /dev/null
+++ b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
@@ -0,0 +1,125 @@
+<script>
+  import '../../../../app.css';
+  import Nav from '$lib/components/Nav.svelte';
+  import Button from '$lib/components/Button.svelte';
+  import { page } from '$app/state';
+  import { onMount } from 'svelte';
+  import { ref, get } from 'firebase/database';
+  import { db } from '../../../../firebase';
+
+  let memoryId = '';
+  /**
+   * @type {{ location: any; startDate: any; endDate: any; images: any; } | null}
+   */
+  let memory = null;
+  let tripId = '';
+
+  // Subscribe to page store to get URL parameters
+  $: {
+    tripId = page.params.tripId;
+    memoryId = page.params.memoryId;
+  }
+
+  onMount(async () => {
+    if (tripId && memoryId) {
+      try {
+        const snapshot = await get(ref(db, `trips/${tripId}/memories/${memoryId}`));
+        if (snapshot.exists()) {
+          memory = snapshot.val();
+        } else {
+          console.error('No memory found');
+        }
+      } catch (error) {
+        console.error('Error fetching memory:', error);
+      }
+    }
+  });
+
+  let gradientColors = ['#e74c3c', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6'];
+  $: gradientStyle = `
+    conic-gradient(
+      ${gradientColors.map((c, i) => `${c} ${i * 72}deg ${(i + 1) * 72}deg`).join(',')}
+    )
+  `;
+</script>
+
+<main>
+  <Nav activeTab="MyMemory" darkMode={true}/>
+
+  <div class="content">
+    {#if memory}
+      <div class="header">
+        <h1>{memory.location}</h1>
+        <p>{memory.startDate} - {memory.endDate}</p>
+      </div>
+
+      <div class="wheel-container">
+        <div class="gradient-wheel" style="background-image: {gradientStyle};"></div>
+      </div>
+
+      <div class="image-list">
+        {#each memory.images as img}
+          <!-- svelte-ignore a11y_img_redundant_alt -->
+          <img src={typeof img === 'string' ? img : URL.createObjectURL(img)} alt="Memory image" />
+        {/each}
+      </div>
+    {:else}
+      <p class="empty">Loading memory...</p>
+    {/if}
+  </div>
+</main>
+
+<style>
+  main {
+    height: 100vh;
+    background-color: var(--black);
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .content {
+    flex: 1;
+    padding: 2rem 1rem;
+    overflow-y: auto;
+  }
+
+  .header {
+    text-align: center;
+    color: var(--white);
+    margin-bottom: 2rem;
+  }
+
+  .gradient-wheel {
+    width: 300px;
+    height: 300px;
+    margin: 2rem auto;
+    border-radius: 50%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .wheel-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .image-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+
+  .image-list img {
+    width: 80%;
+    max-width: 500px;
+    border-radius: 12px;
+  }
+
+  .empty {
+    color: var(--gray-400);
+    text-align: center;
+    margin-top: 4rem;
+  }
+</style> 
\ No newline at end of file