mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
03d6457bde
PAD-05B: a click on an obstacle on the map or on the route band opens its card in the look of the via ferrata card: the kind with its glyph, the name, how it stands to the route (on it at a distance along it, near it with the link marked unclear, or only in the area), the paddling rule its tags give with canoe read before boat, a condition as written, height, grade, hours and fees, the source with the date of the data and the OpenStreetMap link. A missing rule reads as unknown, never as allowed, and a portage way recorded as private says so. Objects only in the area show from zoom 13 on, on Leaflet and GL alike; on GL the lines only near the route are dashed as on Leaflet, one click handler picks the marker over the line, and a picked marker no longer flickers. The route band marks the obstacles on and near the route by their share of the measured line. The obstacle notice also names an answer cut at its limit. PAD-05A: the admin area gets a Paddle water data card under the addons, on desktop and phone: a search in Geofabrik's list with each region's path, the regions with their state (waiting, reading with its progress, ready with objects and data date, failed with the reason), reading again and removing after a confirmation. The list follows a read without reloading. Region changes write audit rows. Map colours of paddle objects and portages come from theme tokens read at draw time, as the via ferratas do; the ferrata layer now shares that reader. The rail takes the planner page's parts as one bag, the map hit tests of the tour layers are one helper, and the unused noWaterData string is gone from every locale.
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { useCallback, useMemo, useRef, type ReactNode } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { selectPaddleObstacle, usePaddleObstacleStore } from '../../../store/paddleObstacleStore';
|
|
import { useMapCardDismiss } from '../../Map/useMapCardDismiss';
|
|
import PaddleObstacleCard from './PaddleObstacleCard';
|
|
import { paddleObstacleDetail, type PaddleObstacleDetail } from './paddleObstacleModel';
|
|
|
|
/**
|
|
* The picked paddle object's card over the planner map (PAD-05B), where a
|
|
* via ferrata's card sits and closing as that one does: on a press outside
|
|
* it and on Escape, the press handed on so the map leaves its click alone.
|
|
* The pick lives in the obstacle store, so the map and the checklist open
|
|
* and close the same card. `extra` adds the checklist's part for the object.
|
|
*/
|
|
export default function PaddleObstacleOverlay({
|
|
onOutsidePress,
|
|
insetEnd,
|
|
bottom,
|
|
width,
|
|
extra,
|
|
}: {
|
|
onOutsidePress?: () => void;
|
|
insetEnd: number;
|
|
bottom: number;
|
|
width?: number;
|
|
extra?: (detail: PaddleObstacleDetail) => ReactNode;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const { features, related, regions, selectedRef } = usePaddleObstacleStore(
|
|
useShallow((state) => ({
|
|
features: state.features,
|
|
related: state.related,
|
|
regions: state.regions,
|
|
selectedRef: state.selectedRef,
|
|
}))
|
|
);
|
|
const detail = useMemo(
|
|
() => paddleObstacleDetail({ features, related, regions, selectedRef }),
|
|
[features, related, regions, selectedRef]
|
|
);
|
|
const close = useCallback(() => selectPaddleObstacle(null), []);
|
|
useMapCardDismiss(ref, !!detail, close, onOutsidePress);
|
|
|
|
if (!detail) return null;
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="absolute z-[20] flex justify-end transition-[bottom] duration-200 ease-out"
|
|
style={{ insetInlineEnd: insetEnd, bottom, maxWidth: `calc(100% - ${insetEnd + 32}px)` }}
|
|
data-testid="paddle-obstacle-overlay"
|
|
>
|
|
<PaddleObstacleCard detail={detail} onClose={close} width={width}>
|
|
{extra?.(detail)}
|
|
</PaddleObstacleCard>
|
|
</div>
|
|
);
|
|
}
|