20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

link marker to itinerary

Browse Source
This commit is contained in:
adeliptr 2025-06-09 18:11:06 +09:00
parent 201cc57d59
commit 571bfd653e
1 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/components/WorldMap.svelte
View File

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