Scarriffle/Trainpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ebenen Regio und S-Bahn getrennt; Lade-Symbol pulsiert bei reduzierter Bewegung

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
This commit is contained in:
Claude
2026-10-22 13:35:39 +02:00
parent a7daa76535
commit b5350ae22e
5 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+5 -4
View File
@@ -122,14 +122,15 @@ function setMode(mode) {
}
for (const m of MODES) document.getElementById("btn-" + m).onclick = () => setMode(m);
// ---------- Ebenen: Fernverkehr / Nahverkehr / Tram / U-Bahn, einzeln oder alle ----------
// ---------- Ebenen: Fernverkehr / Regionalzug / S-Bahn / Tram / U-Bahn, einzeln oder alle ----------
const LAYER_FILTERS = {
local: ["all", ["==", ["get", "mode"], "rail"], ["!", ["get", "fv"]]], long: ["get", "fv"],
long: ["get", "fv"], regio: ["all", ["==", ["get", "mode"], "rail"], ["!", ["get", "fv"]], ["!", ["get", "sb"]]],
sbahn: ["get", "sb"],
tram: ["==", ["get", "mode"], "tram"], subway: ["==", ["get", "mode"], "subway"],
};
const ALL_LAYERS = Object.keys(LAYER_FILTERS);
const layerOf = (p) => (p.mode === "rail" ? (p.fv ? "long" : "local") : p.mode);
const layerOf = (p) => (p.mode === "rail" ? (p.fv ? "long" : p.sb ? "sbahn" : "regio") : p.mode);
let shown = new Set(ALL_LAYERS);
function setLayers(list) {
shown = new Set(list.filter((k) => k in LAYER_FILTERS));
@@ -173,7 +174,7 @@ async function getJSON(url) {
function updateHint() {
// nur Trams/U-Bahnen gewählt, aber zu weit weg: sonst wäre die Karte einfach leer
const onlyCity = !shown.has("long") && !shown.has("local");
const onlyCity = !["long", "regio", "sbahn"].some((k) => shown.has(k));
document.getElementById("hint").hidden = !(onlyCity && map.getZoom() < URBAN_Z);
}
map.on("zoomend", updateHint);
web/index.html
+3 -2
View File
@@ -23,8 +23,9 @@
</div>
<div class="seg" role="group" aria-label="Verkehrsmittel">
<button id="flt-all" aria-pressed="true">Alle</button>
<button id="flt-long" aria-pressed="false">Fernverkehr</button>
<button id="flt-local" aria-pressed="false" title="Regionalzüge und S-Bahnen">Nahverkehr</button>
<button id="flt-long" aria-pressed="false" title="Fernverkehr (ICE, IC, TGV …)">Fern</button>
<button id="flt-regio" aria-pressed="false" title="Regionalzüge (RE, RB, TER, Sprinter …)">Regio</button>
<button id="flt-sbahn" aria-pressed="false">S-Bahn</button>
<button id="flt-tram" aria-pressed="false">Tram</button>
<button id="flt-subway" aria-pressed="false">U-Bahn</button>
</div>
web/style.css
+3 -1
View File
@@ -65,4 +65,6 @@ h1::before { content: ""; display: inline-block; width: 10px; height: 10px; bord
#loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #loading::before { animation: none; } }
/* System will weniger Bewegung (Windows "Animationseffekte" aus): Pulsieren statt Drehen */
@media (prefers-reduced-motion: reduce) { #loading::before { animation: pulse 1.6s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .3; } }