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

has issues

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-25 13:20:17 +01:00
parent 2e112d7398
commit c645b0f1d4
96 changed files with 2147083 additions and 5787 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/components/map/map-page/DesktopMapPage.tsx
View file

@ -13,8 +13,10 @@ import type { useMapData } from '../../../hooks/useMapData';
import type { useTutorial } from '../../../hooks/useTutorial';
import type { TravelTimeEntry } from '../../../hooks/useTravelTime';
import type { getTutorialStyles } from '../../../lib/tutorial-styles';
import type { OverlayId } from '../../../lib/overlays';
import type { SearchedLocation } from '../LocationSearch';
import { MapPinIcon } from '../../ui/icons/MapPinIcon';
import { EyeIcon } from '../../ui/icons/EyeIcon';
import { IndeterminateProgressBar } from '../../ui/IndeterminateProgressBar';
import type { MapFlyTo, PaneResizeHandlers } from './types';
import { MapFallback, PaneFallback } from './Fallbacks';
@ -35,6 +37,7 @@ interface DesktopMapPageProps {
filtersPane: ReactNode;
mapData: MapData;
pois: POI[];
activeOverlays: Set<OverlayId>;
mapViewFeature: string | null;
filterRange: [number, number] | null;
viewSource: 'drag' | 'eye' | null;
@ -59,6 +62,9 @@ interface DesktopMapPageProps {
poiPaneOpen: boolean;
onTogglePoiPane: () => void;
poiPane: ReactNode;
overlayPaneOpen: boolean;
onToggleOverlayPane: () => void;
overlayPane: ReactNode;
showSelectionPane: boolean;
rightPaneWidth: number;
rightPaneHandlers: PaneResizeHandlers;
@ -81,6 +87,7 @@ export function DesktopMapPage({
filtersPane,
mapData,
pois,
activeOverlays,
mapViewFeature,
filterRange,
viewSource,
@ -105,6 +112,9 @@ export function DesktopMapPage({
poiPaneOpen,
onTogglePoiPane,
poiPane,
overlayPaneOpen,
onToggleOverlayPane,
overlayPane,
showSelectionPane,
rightPaneWidth,
rightPaneHandlers,
@ -168,6 +178,7 @@ export function DesktopMapPage({
postcodeData={mapData.postcodeData}
usePostcodeView={mapData.usePostcodeView}
pois={pois}
activeOverlays={activeOverlays}
onViewChange={mapData.handleViewChange}
viewFeature={mapViewFeature}
colorRange={mapData.colorRange}
@ -197,16 +208,30 @@ export function DesktopMapPage({
totalCount={totalCount}
/>
</Suspense>
<button
data-tutorial="poi-button"
onClick={onTogglePoiPane}
className={`absolute bottom-4 right-4 z-10 px-3 py-2 rounded-lg shadow-lg bg-white dark:bg-warm-800 flex items-center gap-2 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 dark:text-warm-400 hover:text-teal-600 dark:hover:text-teal-400'}`}
>
<MapPinIcon className="w-5 h-5" />
<span className="text-sm font-medium">{t('poiPane.pointsOfInterest')}</span>
</button>
<div className="absolute bottom-4 right-4 z-10 flex flex-col items-end gap-2">
<button
onClick={onToggleOverlayPane}
className={`flex items-center gap-2 rounded-lg bg-white px-3 py-2 shadow-lg dark:bg-warm-800 ${overlayPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 hover:text-teal-600 dark:text-warm-400 dark:hover:text-teal-400'}`}
>
<EyeIcon className="h-5 w-5" filled={overlayPaneOpen} />
<span className="text-sm font-medium">Overlays</span>
</button>
<button
data-tutorial="poi-button"
onClick={onTogglePoiPane}
className={`flex items-center gap-2 rounded-lg bg-white px-3 py-2 shadow-lg dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 hover:text-teal-600 dark:text-warm-400 dark:hover:text-teal-400'}`}
>
<MapPinIcon className="h-5 w-5" />
<span className="text-sm font-medium">{t('poiPane.pointsOfInterest')}</span>
</button>
</div>
{overlayPaneOpen && (
<div className="absolute bottom-28 right-4 z-10 flex h-[220px] min-h-0 w-80 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
{overlayPane}
</div>
)}
{poiPaneOpen && (
<div className="absolute bottom-14 right-4 z-10 flex h-[60vh] min-h-0 w-80 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
<div className="absolute bottom-28 right-4 z-10 flex h-[60vh] min-h-0 w-80 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
{poiPane}
</div>
)}