{t.stopPickerMapHint || "Kattints egy megállóra a térképen"}
);
}
/* ============================================================
StopTimetableModal — megálló-néző ("departure board")
Egy kiválasztott megálló összes indulása, vonal-chipekkel
szűrhetően, teljes napi listával, "most"-hoz görgetve.
A megálló-keresőt a city-app.jsx StopSearch komponense adja
(window.StopSearch) — ezért egyelőre csak a city.html oldalon
használható.
============================================================ */
function StopTimetableModal({ onClose, dayType, lang, initialStop, initialMode }) {
const U = window.BUS_UTILS;
const fmt = (m) => U.fmtTime(m);
const t = (window.I18N && window.I18N[lang || "hu"]) || window.I18N?.hu || {};
const _now = new Date();
const nowMins = _now.getHours() * 60 + _now.getMinutes();
// initialStop: pl. térképi megállóra kattintva rögtön a listanézet nyílik, kereső nélkül
const [selectedStop, setSelectedStop] = React.useState(initialStop || null);
const modalRef = React.useRef(null);
// A TELJES modal (nem csak a benne lévő StopPickerMap) megy fullscreenbe -- így
// amikor fullscreenben megállót választasz a térképen, a modal nem lép ki a
// fullscreenből (csak a belső nézet vált térképről listára UGYANAZON a
// fullscreen elemen belül), nincs "eltűnő térkép" / összefutó state-váltás.
const [modalFsState, setModalFsState] = React.useState(false);
// Fullscreen térképnézetből nyitva a body-ba portalozott modal a fullscreen elem
// mögé kerülne (a böngésző csak a fullscreen-elem leszármazottait mutatja) —
// ezért a modalt magába a fullscreen elembe portalozzuk, így a térkép fullscreen
// marad és a modal felette nyílik (✕-szel zárva fullscreen is marad).
// ESC-re viszont a böngésző mindenképp kilép a fullscreenből (nem előzhető meg,
// és az ESC keydown-t gyakran el is nyeli) — ilyenkor a modalt is bezárjuk, hogy
// egyetlen ESC egyszerre zárja mindkettőt, ne maradjon ott a modal egy második
// ESC-ig a térkép-konténerben ragadva (villódzás).
const [portalTarget, setPortalTarget] = React.useState(() => document.fullscreenElement || document.body);
const openedInFullscreenRef = React.useRef(!!document.fullscreenElement);
React.useEffect(() => {
const h = () => {
// A modal saját fullscreen-állapota (setFsState a StopPickerMap ⛶ gombjához) --
// mindig frissül, függetlenül az alábbi ágaktól.
setModalFsState(!!document.fullscreenElement);
// Ha a most fullscreenbe/fullscreenből váltó elem MAGA a modal (vagy annak
// leszármazottja, pl. a `Node.contains` önmagára is igaz) -- ez a fenti, ÚJ,
// "a modal maga megy fullscreenbe" eset, NEM a "kívülről nyitott fullscreen
// térkép" eset -- nem szabad újra-portálni a modalt önmaga leszármazottjába
// (körkörös DOM-művelet lenne, ami miatt a böngésző azonnal, néma csendben
// kilépne a fullscreenből). Ilyenkor a portalTarget-et békén hagyjuk.
if (modalRef.current && document.fullscreenElement && modalRef.current.contains(document.fullscreenElement)) {
return;
}
if (openedInFullscreenRef.current && !document.fullscreenElement) {
setPortalTarget(document.body);
handleClose();
return;
}
setPortalTarget(document.fullscreenElement || document.body);
};
document.addEventListener('fullscreenchange', h);
return () => document.removeEventListener('fullscreenchange', h);
}, []);
// Globális jelző: amíg a megálló-néző nyitva van, az alatta lévő rétegek
// (térkép-komponensek fullscreen-ESC kezelői, BusTimetableModal ESC-je)
// ne reagáljanak az ESC-re — rétegzett zárás, mindig a legfelső záródik.
React.useEffect(() => {
window.__stopViewerOpen = true;
return () => { window.__stopViewerOpen = false; };
}, []);
// Chromium Keyboard Lock: amíg a modal (vagy egy leszármazottja) fullscreenben
// van, lefoglaljuk az ESC-et, így az NEM lépteti ki natívan a böngészőt a
// fullscreenből, hanem eljut a mi keydown-kezelőnkhöz (lásd lentebb), ami a
// vissza-nyíllal egyező logikával dönt (lista→választó-nézet, vagy zárás).
// FONTOS: ezt a `modalFsState`-hez kötjük (NEM egy mountkor egyszer rögzített
// reffel), mert a modal most már UTÓLAG is fullscreenbe léphet (a StopPickerMap
// ⛶ gombjával) — ekkor a "csak ha már fullscreenben nyílt meg" feltétel sosem
// teljesült volna, és a böngésző az ELSŐ ESC-et a JS-ünk megkerülésével,
// némán elnyelte volna (a modal ilyenkor csak kilépett fullscreenből, a
// belső nézet -- lista/térkép -- nem váltott, két további ESC kellett a
// teljes bezáráshoz). Nem támogatott böngészőben (Firefox/Safari) marad a
// fallback: egy ESC a fullscreent és a modalt együtt zárja.
React.useEffect(() => {
if (!modalFsState || !navigator.keyboard || !navigator.keyboard.lock) return;
navigator.keyboard.lock(['Escape']).catch(() => {});
return () => {
// A lock feloldását megvárakoztatjuk az ESC felengedéséig (+ rövid ráhagyás):
// ha a modal záró ESC-je közben oldanánk fel, a böngésző a keyup-ot / az
// ismétlődő keydown-t már lock nélkül látná, és kiléptetné a fullscreent is.
let done = false;
const doUnlock = () => {
if (done) return; done = true;
window.removeEventListener('keyup', onUp);
try { navigator.keyboard.unlock(); } catch (e) {}
};
const onUp = (e) => { if (e.key === 'Escape') setTimeout(doUnlock, 100); };
window.addEventListener('keyup', onUp);
setTimeout(doUnlock, 1200); // fallback, ha nem ESC zárta a modalt
};
}, [modalFsState]);
const [activeDayType, setActiveDayType] = React.useState(dayType || "workday");
const [activeIds, setActiveIds] = React.useState(null); // null = minden vonal aktív
const [viewMode, setViewMode] = React.useState(initialMode === 'intercity' ? 'intercity' : 'city'); // 'city' | 'intercity'
const [pickerViewMode, setPickerViewMode] = React.useState('list'); // 'list' | 'map' -- a megálló-választó nézet módja
const intercitySupported = !!window.INTERCITY_BUSES_FULL;
// Az utoljára kiválasztott megálló neve -- vissza-lépéskor (vissza-nyíl vagy ESC)
// a kereső mezőben megmarad, nem ugrik vissza üresre (a lista nézetnél); nem
// önmagában a "kiválasztott" state, mert az `selectedStop`-nak null-ra kell
// váltania, hogy a lista/térkép nézet visszaváltson.
const [lastStopQuery, setLastStopQuery] = React.useState(initialStop || "");
// Vissza-lépéskor (selectedStop truthy -> null) a fókusz explicit a választó-nézet
// első érdemi vezérlőjére kerüljön -- enélkül a korábban fókuszált elem (pl. a
// "Vissza" gomb) `display:none` alá kerül, a böngésző elveszíti róla a fókuszt,
// és tipikusan a -ra esik vissza (rossz billentyűzetes/screen reader UX-nél).
const prevSelectedStopRef = React.useRef(selectedStop);
React.useEffect(() => {
if (prevSelectedStopRef.current && !selectedStop) {
const target = pickerViewMode === 'map'
? document.getElementById('picker-map-toggle-btn')
: document.getElementById('stop-viewer-search');
target?.focus();
}
prevSelectedStopRef.current = selectedStop;
}, [selectedStop, pickerViewMode]);
function toggleModalFullscreen() {
if (!document.fullscreenElement) {
modalRef.current?.requestFullscreen().catch(e => console.error('StopTimetableModal fullscreen hiba:', e.name, e.message));
} else {
document.exitFullscreen();
}
}
// --- Modal boilerplate (history back, ESC, scroll-lock, fókusz) ---
const didPushRef = React.useRef(false);
React.useEffect(() => {
history.pushState({ stopTimetableModal: true }, "");
didPushRef.current = true;
function onPop() { didPushRef.current = false; onClose(); }
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []);
function handleClose() {
if (didPushRef.current) { didPushRef.current = false; history.back(); }
else onClose();
}
React.useEffect(() => {
_modalOpenCount++;
document.body.style.overflow = 'hidden';
return () => {
_modalOpenCount--;
if (_modalOpenCount === 0) document.body.style.overflow = '';
};
}, []);
React.useEffect(() => {
const handler = (e) => {
if (e.key !== 'Escape') return;
window.__escGuardUntil = Date.now() + 600;
// Indulási-lista nézetben az ESC ugyanazt csinálja, mint a vissza-nyíl
// (egy lépést lép vissza a választó-nézetre) -- csak a választó-nézetnél
// zárja be a teljes modalt.
if (selectedStop) { setSelectedStop(null); setActiveIds(null); }
else handleClose();
};
document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, [selectedStop]);
const closeButtonRef = React.useRef(null);
const triggerRef = React.useRef(null);
React.useEffect(() => {
triggerRef.current = document.activeElement;
closeButtonRef.current?.focus();
return () => { triggerRef.current?.focus(); };
}, []);
React.useEffect(() => {
const modal = modalRef.current;
if (!modal) return;
function trap(e) {
if (e.key !== 'Tab') return;
const focusable = Array.from(modal.querySelectorAll(
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
));
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === first) { e.preventDefault(); last.focus(); }
} else {
if (document.activeElement === last) { e.preventDefault(); first.focus(); }
}
}
modal.addEventListener('keydown', trap);
return () => modal.removeEventListener('keydown', trap);
}, []);
// --- Adatok ---
// A StopPickerMap-nak stabil (nem minden render-nél újra-létrehozott) tömb-referencia
// kell, különben a benne lévő useEffect([platforms]) minden render-nél újraépítené a
// Leaflet térképet, nullázva a zoom/pan állapotot -- pontosan ez történt korábban.
const pickerMapPlatforms = React.useMemo(() => {
if (viewMode === 'intercity') return (window._intercityPlatforms && window._intercityPlatforms()) || [];
return (window._cityPlatforms && window._cityPlatforms()) || [];
}, [viewMode]);
const dirsAtStop = React.useMemo(() => {
if (!selectedStop || viewMode !== 'city' || !window.getCityRoutesForPlatformLabel) return [];
return window.getCityRoutesForPlatformLabel(selectedStop);
}, [selectedStop, viewMode]);
const intercityDirsAtStop = React.useMemo(() => {
if (!selectedStop || viewMode !== 'intercity' || !window.getIntercityRoutesForPlatformLabel) return [];
return window.getIntercityRoutesForPlatformLabel(selectedStop);
}, [selectedStop, viewMode]);
// Egyedi vonalak a chipekhez (id szerint dedupelve, numerikusan rendezve)
const lines = React.useMemo(() => {
const map = new Map();
for (const b of dirsAtStop) if (!map.has(b.id)) map.set(b.id, b);
for (const b of intercityDirsAtStop) if (!map.has(b.id)) map.set(b.id, b);
return [...map.values()].sort((a, b) => {
const na = parseFloat(a.id), nb = parseFloat(b.id);
if (na !== nb) return na - nb;
return a.id.localeCompare(b.id);
});
}, [dirsAtStop, intercityDirsAtStop]);
function isActive(id) {
return activeIds === null ? true : activeIds.has(id);
}
function toggleLine(id) {
const next = new Set(activeIds === null ? lines.map(l => l.id) : activeIds);
if (next.has(id)) next.delete(id); else next.add(id);
setActiveIds(next);
}
// Összefésült indulási lista. Platform- (spId-) alapú lekérdezéssel, mind
// helyi, mind helyközi módban -- egy megállónév ugyanis több külön fizikai
// pontot is jelenthet (pl. körjáratos buszoknál, vagy különböző vonalak
// közös nevű, de más helyen lévő megállóinál), ezt a `selectedStop` platform-
// címke már egyértelműen azonosítja, nincs szükség név-alapú kereséshez.
const mergedDeps = React.useMemo(() => {
const out = [];
if (viewMode === 'city' && selectedStop && window.getCityDeparturesForPlatformLabel) {
for (const e of window.getCityDeparturesForPlatformLabel(selectedStop, activeDayType)) {
if (isActive(e.bus.id)) out.push(e);
}
}
if (viewMode === 'intercity' && selectedStop && window.getIntercityDeparturesForPlatformLabel) {
for (const e of window.getIntercityDeparturesForPlatformLabel(selectedStop, activeDayType)) {
if (isActive(e.bus.id)) out.push(e);
}
}
return out.sort((a, b) => a.mins - b.mins);
}, [dirsAtStop, activeIds, activeDayType, selectedStop, viewMode]);
const nextIdx = mergedDeps.findIndex(d => d.mins >= nowMins);
// "Most"-hoz görgetés (lista közepére), megálló/nap/szűrő váltásnál újra
const listRef = React.useRef(null);
const nextRowRef = React.useRef(null);
React.useEffect(() => {
const list = listRef.current, row = nextRowRef.current;
if (list && row) {
list.scrollTop = row.offsetTop - list.clientHeight / 2 + row.clientHeight / 2;
}
}, [selectedStop, activeDayType, mergedDeps]);
// Lábjegyzet-magyarázatok az aktuális listában előforduló jelölésekhez.
// Vonalanként gyűjtjük, mert ugyanaz a betű más vonalon mást jelenthet;
// az összetett jelöléseket (pl. "Hv") karakterenként bontjuk (backlog #9).
const usedFootnotes = React.useMemo(() => {
const map = new Map(); // "busId|char" -> { busId, color, char, text }
for (const d of mergedDeps) {
if (!d.note) continue;
const fn = d.bus.footnotes || {};
for (const ch of String(d.note)) {
const raw = fn[ch] || fn[ch.toUpperCase()];
if (!raw) continue;
const key = d.bus.id + '|' + ch.toUpperCase();
if (map.has(key)) continue;
const [huText, enText] = raw.split(' / ');
map.set(key, { busId: d.bus.id, color: d.bus.color, char: ch, text: lang === "hu" ? huText : (enText || huText) });
}
}
return [...map.values()];
}, [mergedDeps, lang]);
const isDesktop = window.innerWidth >= 640;
const headerColor = '#1a2a3a';
const dayTabs = (['workday', 'schoolholiday', 'weekend']).map(dt => {
const label = dt === 'workday' ? (t.workday || 'Hétköznap') : dt === 'schoolholiday' ? (t.schoolHolidayLabel || 'Tanszünet') : (t.weekend || 'Hétvége');
const hasData = viewMode === 'intercity'
? intercityDirsAtStop.some(route => route.trips.some(tr => tr.dayTypes.includes(window._dayTypeCat(dt))))
: dirsAtStop.some(b => b.departures[dt] && Object.keys(b.departures[dt]).length > 0);
if (selectedStop && !hasData && dt !== activeDayType) return null;
return (
);
});
const modal = (
{/* Megálló-választó nézet -- MINDIG renderelve marad (nem szűnik meg, amikor egy
megálló ki van választva), csak CSS-sel elrejtve. Enélkül a StopPickerMap Leaflet-
példánya minden "vissza"-lépésnél újra létrejönne, elveszítve a zoom/pan állapotot. */}
{/* Indulási-lista nézet -- szintén mindig renderelve, csak elrejtve, a fentivel
szimmetrikusan (ugyanaz az indoklás: ne szűnjön meg állapotváltáskor). */}
{activeIds !== null && activeIds.size === 0
? (t.stopViewerNoLine || "Válassz legalább egy vonalat")
: (t.stopViewerNoDeps || "Ezen a napon nincs indulás erről a megállóról")}