andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

FIxes

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-08 21:29:15 +00:00
parent 5f30928c64
commit 74d6dd7bf8
10 changed files with 306 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/components/map/TravelTimeCard.tsx
View file

@ -1,9 +1,12 @@
import { useRef, useEffect, useCallback } from 'react';
import { useState, useRef, useEffect, useCallback } from 'react';
import { Slider } from '../ui/Slider';
import { IconButton } from '../ui/IconButton';
import { PillToggle } from '../ui/PillToggle';
import { PlaceSearchInput } from '../ui/PlaceSearchInput';
import InfoPopup from '../ui/InfoPopup';
import { CloseIcon } from '../ui/icons/CloseIcon';
import { EyeIcon } from '../ui/icons/EyeIcon';
import { InfoIcon } from '../ui/icons/InfoIcon';
import { MapPinIcon } from '../ui/icons/MapPinIcon';
import { CarIcon } from '../ui/icons/CarIcon';
import { BicycleIcon } from '../ui/icons/BicycleIcon';
@ -50,6 +53,7 @@ export function TravelTimeCard({
}: TravelTimeCardProps) {
const search = useLocationSearch(mode);
const containerRef = useRef<HTMLDivElement>(null);
const [showBestInfo, setShowBestInfo] = useState(false);
// Close dropdown on outside click
useEffect(() => {
@ -100,43 +104,52 @@ export function TravelTimeCard({
</div>
</div>
{/* Destination search */}
<div ref={containerRef} className="relative">
<PlaceSearchInput
search={search}
onSelect={selectResult}
placeholder={slug ? 'Change destination...' : 'Search destination...'}
size="xs"
inputClassName="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
portal
/>
{slug && label && (
<div className="flex items-center gap-1 mt-1">
<MapPinIcon className="w-3 h-3 text-red-500 shrink-0" />
<span className="text-xs text-warm-600 dark:text-warm-300">
{label}
</span>
</div>
)}
</div>
{/* Destination */}
{slug && label ? (
<div className="flex items-center gap-1.5 px-2 py-1 rounded border border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800">
<MapPinIcon className="w-3 h-3 text-red-500 shrink-0" />
<span className="text-xs text-navy-950 dark:text-warm-200 flex-1 truncate">
{label}
</span>
<button
onClick={() => onSetDestination('', '')}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
title="Clear destination"
>
<CloseIcon className="w-3 h-3" />
</button>
</div>
) : (
<div ref={containerRef} className="relative">
<PlaceSearchInput
search={search}
onSelect={selectResult}
placeholder="Search stations..."
size="xs"
inputClassName="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
portal
/>
</div>
)}
{/* Best-case toggle — transit only, shown when destination is set */}
{slug && mode === 'transit' && (
<label className="flex items-center gap-1.5 cursor-pointer">
<input
type="checkbox"
checked={useBest}
onChange={onToggleBest}
className="accent-teal-600 rounded"
/>
<span className="text-xs text-warm-600 dark:text-warm-300">
Best case
</span>
<span className="text-[10px] text-warm-400 dark:text-warm-500">
(optimal departure)
</span>
</label>
<div className="flex items-center gap-1.5">
<PillToggle label="Best case" active={useBest} onClick={onToggleBest} size="xs" />
<IconButton onClick={() => setShowBestInfo(true)} title="What is best case?">
<InfoIcon className="w-3 h-3" />
</IconButton>
</div>
)}
{showBestInfo && (
<InfoPopup title="Best case travel time" onClose={() => setShowBestInfo(false)}>
<p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
Uses the <strong>5th percentile</strong> travel time — the fastest realistic journey
if you time your departure to catch optimal connections. The default uses the{' '}
<strong>median</strong>, representing a typical journey regardless of when you leave.
</p>
</InfoPopup>
)}
{/* Time range slider — only show when we have data */}