document.getElementById('fileInput')?.click()}>
+
+ = {
name: 'PlaceName',
- image: 'placeholder.jpeg',
+ image: '/placeholder.jpeg',
time: 'Add Time'
};
@@ -191,7 +191,8 @@
.place-image.detailed {
width: 30%;
- height: 100%;
+ aspect-ratio: 16 / 9;
+ height: auto;
border-radius: 20px;
}
diff --git a/src/lib/components/ProfilePicture.svelte b/src/lib/components/ProfilePicture.svelte
index 6d3b2ac..92df273 100644
--- a/src/lib/components/ProfilePicture.svelte
+++ b/src/lib/components/ProfilePicture.svelte
@@ -1,32 +1,55 @@
-
-
document.getElementById('fileInput')?.click()}>
{#if images.length === 0}
Drop image here
{:else}
diff --git a/src/lib/components/NewTripPopup.svelte b/src/lib/components/NewTripPopup.svelte
index 6514c5c..c8cda4c 100644
--- a/src/lib/components/NewTripPopup.svelte
+++ b/src/lib/components/NewTripPopup.svelte
@@ -3,16 +3,18 @@
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { Loader } from '@googlemaps/js-api-loader';
+ import { ref, child, get, set, onValue, push } from 'firebase/database';
+ import { db } from '../../firebase';
import Button from './Button.svelte';
export let showPopup = false;
- export let fromPage = 'home';
let destination = "";
+ let selectedPlace: any;
let lastSelectedPlaceName = "";
let startDate = "";
let endDate = "";
- let friends: string[] = [];
+ let tripmates: string[] = [];
let currentEmail = "";
let destinationError = false;
let startDateError = false;
@@ -24,6 +26,22 @@
const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY;
+ // Add reactive statements to clear errors when valid input is provided
+ $: if (destination) destinationError = false;
+ $: if (startDate) startDateError = false;
+ $: if (endDate) endDateError = false;
+
+ // Clear date order error when either date changes
+ $: if (startDate && endDate) {
+ const startDateTime = new Date(startDate).getTime();
+ const endDateTime = new Date(endDate).getTime();
+ if (endDateTime >= startDateTime) {
+ dateOrderError = false;
+ startDateError = false;
+ endDateError = false;
+ }
+ }
+
onMount(async () => {
if (!GOOGLE_PLACES_API_KEY) {
console.error('Google Maps API key is missing');
@@ -58,13 +76,14 @@
autocomplete = new google.maps.places.Autocomplete(input, {
types: ['(regions)']
});
- autocomplete.setFields(['name', 'formatted_address']);
+ autocomplete.setFields(['name', 'formatted_address', 'photos', 'place_id', 'geometry']);
autocomplete.addListener('place_changed', () => {
if (!autocomplete) return;
const place = autocomplete.getPlace();
if (place.name) {
destination = place.name;
+ selectedPlace = place;
lastSelectedPlaceName = input.value.trim();
destinationError = false;
}
@@ -84,7 +103,7 @@
destinationError = false;
destination = "";
}
- }, 200);
+ }, 400);
});
}
@@ -98,15 +117,15 @@
event.preventDefault();
const email = currentEmail.trim();
- if (email && isValidEmail(email) && !friends.includes(email)) {
- friends = [...friends, email];
+ if (email && isValidEmail(email) && !tripmates.includes(email)) {
+ tripmates = [...tripmates, email];
currentEmail = "";
}
}
}
function removeEmail(emailToRemove: string) {
- friends = friends.filter(email => email !== emailToRemove);
+ tripmates = tripmates.filter(email => email !== emailToRemove);
}
function handleCancel() {
@@ -114,7 +133,7 @@
destination = "";
startDate = "";
endDate = "";
- friends = [];
+ tripmates = [];
currentEmail = "";
destinationError = false;
startDateError = false;
@@ -126,7 +145,7 @@
}
}
- function handleStart() {
+ async function handleStart() {
destinationError = !destination;
startDateError = !startDate;
endDateError = !endDate;
@@ -146,12 +165,41 @@
}
if (destinationError || startDateError || endDateError) {
- // alert('Please fill in all required fields: Destination, Start Date, End Date');
return;
}
else {
- goto(`/itinerary?from=${fromPage}`);
- handleCancel();
+ const tid = crypto.randomUUID();
+
+ // Extract required place details
+ const placeDetails = {
+ name: selectedPlace.name,
+ formatted_address: selectedPlace.formatted_address,
+ photo: selectedPlace.photos?.[0]?.getUrl(),
+ location: {
+ lat: selectedPlace.geometry.location.lat(),
+ lng: selectedPlace.geometry.location.lng()
+ }
+ };
+
+ const tripData = {
+ tid,
+ destination: placeDetails,
+ startDate,
+ endDate,
+ tripmates,
+ created_at: new Date().toISOString()
+ };
+
+ try {
+ // Create a new reference for this specific trip using its ID
+ const tripRef = ref(db, `trips/${tid}`);
+ await set(tripRef, tripData);
+ console.log(`Trip saved to db with ID: ${tid}`);
+ goto(`/itinerary/${tid}`);
+ handleCancel();
+ } catch (error) {
+ console.error('Error saving trip:', error);
+ }
}
}
@@ -166,7 +214,7 @@
diff --git a/src/lib/components/PlaceCard.svelte b/src/lib/components/PlaceCard.svelte
index 24f213d..450762f 100644
--- a/src/lib/components/PlaceCard.svelte
+++ b/src/lib/components/PlaceCard.svelte
@@ -10,7 +10,7 @@
const defaultPlace: OmitStart a New Plan
-
+
{#if destinationError}
@@ -213,7 +261,7 @@
- {#each friends as email}
+ {#each tripmates as email}
{email}
@@ -224,14 +272,14 @@
id="trip-friends"
bind:value={currentEmail}
onkeydown={handleEmailInput}
- placeholder={friends.length ? "" : "Enter email addresses"}
+ placeholder={tripmates.length ? "" : "Enter email addresses"}
/>
- {#if image}
- 
- {:else}
- 
- {/if}
+
- {/if}
+
+ {#each Array(friends) as _, i}
+
\ No newline at end of file
diff --git a/src/lib/components/TripCard.svelte b/src/lib/components/TripCard.svelte
index 0aa6f74..55d8918 100644
--- a/src/lib/components/TripCard.svelte
+++ b/src/lib/components/TripCard.svelte
@@ -6,7 +6,7 @@
+ {#if images[i]}
+ 
+ {:else}
+
+ {/each}
+
+
+ {/if}
+
-
+
{#if !image}
-
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 919fecf..c72671f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,7 +29,7 @@
goto('/trips')} />
-