126 lines
2.8 KiB
Svelte
126 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import PlaceCard from "./PlaceCard.svelte";
|
|
import AddPlaces from "./AddPlaces.svelte";
|
|
import { slide } from 'svelte/transition';
|
|
import { quintOut } from 'svelte/easing';
|
|
|
|
export let date;
|
|
export let isExpanded = true;
|
|
export let countryCode = 'tw'; // Default to Taiwan if not provided
|
|
|
|
interface Place {
|
|
name: string;
|
|
desc?: string;
|
|
image?: string;
|
|
time?: string;
|
|
geometry?: {
|
|
lat: number;
|
|
lng: number;
|
|
};
|
|
}
|
|
|
|
export let places: Place[] = [];
|
|
export let onPlacesUpdate: (places: Place[]) => void;
|
|
|
|
function toggleDate() {
|
|
isExpanded = !isExpanded;
|
|
}
|
|
|
|
function handlePlaceSelected(place: google.maps.places.PlaceResult) {
|
|
const newPlace = {
|
|
name: place.name || 'Unknown Place',
|
|
desc: place.formatted_address || '',
|
|
image: (place as any).photoUrl || '/placeholder.jpeg',
|
|
time: 'Add Time',
|
|
geometry: place.geometry?.location ? {
|
|
lat: place.geometry.location.lat(),
|
|
lng: place.geometry.location.lng()
|
|
} : undefined
|
|
};
|
|
|
|
const updatedPlaces = [...places, newPlace];
|
|
places = updatedPlaces;
|
|
onPlacesUpdate(updatedPlaces);
|
|
}
|
|
|
|
function handleDeletePlace(index: number) {
|
|
const updatedPlaces = places.filter((_, i) => i !== index);
|
|
places = updatedPlaces;
|
|
onPlacesUpdate(updatedPlaces);
|
|
}
|
|
</script>
|
|
|
|
<div class="date-section">
|
|
<button class="date-header" onclick={toggleDate}>
|
|
<div class="date-text">
|
|
<i class="fa-solid fa-chevron-right arrow-icon" class:rotated={isExpanded}></i>
|
|
<h3>{date}</h3>
|
|
</div>
|
|
</button>
|
|
|
|
{#if isExpanded}
|
|
<div
|
|
class="date-content"
|
|
transition:slide={{ duration: 400, easing: quintOut }}
|
|
>
|
|
{#each places as place, i}
|
|
<PlaceCard {place} onDelete={() => handleDeletePlace(i)} />
|
|
{/each}
|
|
|
|
<div class="add-places-container">
|
|
<AddPlaces
|
|
onPlaceSelected={handlePlaceSelected}
|
|
countryRestriction={countryCode}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.date-section {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.date-header {
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 1px solid var(--gray-100);
|
|
box-sizing: border-box;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.date-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin: 0;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.date-text h3 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.arrow-icon {
|
|
transition: transform 0.3s ease;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.rotated {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.date-content {
|
|
padding: 1rem 0 1rem 2rem;
|
|
}
|
|
|
|
.add-places-container {
|
|
margin-top: 1rem;
|
|
}
|
|
</style> |