fix memory path in db

2025-06-07 16:21:52 +09:00 · 2025-06-07 16:21:52 +09:00 · 32c0b6135e
commit 32c0b6135e
parent 6325ec86fe
6 changed files with 200 additions and 61 deletions
--- 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}
--- a/src/lib/constants/Interfaces.ts
+++ 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;
+    };
+}
--- 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[];
--- 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;
--- 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>
--- a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
+++ 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>