From af50e0f04da1ffce78fc587d42b937438daa81a8 Mon Sep 17 00:00:00 2001 From: kritzl Date: Wed, 5 Jun 2024 11:49:38 +0200 Subject: [PATCH 01/14] minor template and layout fixes --- elevators.js | 49 +++++++++++++++++++++++++++---------------------- index.html | 2 +- style.css | 23 ++++++++++++++++++++--- style.css.map | 2 +- style.scss | 29 ++++++++++++++++++++++++++--- 5 files changed, 75 insertions(+), 30 deletions(-) diff --git a/elevators.js b/elevators.js index 7a86eae..f302008 100644 --- a/elevators.js +++ b/elevators.js @@ -249,8 +249,6 @@ function renderData() { let elevatorsTemplate = ''; let previewTemplate = ''; - let templateHasOsmButton = false; - for (const elevator of station.elevators) { let linesTemplate = '
Linien: '; for (const line of elevator.lines) { @@ -273,9 +271,14 @@ function renderData() { const tags = nodeInfo['tags']; if (tags['highway'] === 'elevator') { osmTemplate = '
'; - osmTemplate += `
Link zur Karte
-Auf Karte anzeigen -
`; + osmTemplate += `
+
Link zur Karte
+
+ + Auf Karte anzeigen + +
+
`; if (tags.hasOwnProperty('description')) { osmTemplate += `
Beschreibung
${tags['description']}
`; } @@ -289,7 +292,7 @@ Auf Karte anzeigen osmTemplate += `
Fahrräder
${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
`; } - osmTemplate += '
'; + osmTemplate += '
'; } else { console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); } @@ -346,7 +349,13 @@ Auf Karte anzeigen
${osmTemplate ? `
-

Daten von OpenStreetMap

+
+

Daten von OpenStreetMap

+ +
${osmTemplate}
` : ``}
`; - - templateHasOsmButton = templateHasOsmButton || !osmTemplate; } const template = `
  • @@ -384,20 +391,18 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
  • `; listContainer.insertAdjacentHTML('beforeend', template); - if (templateHasOsmButton) { - //immediate invocation - (function () { - listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => { - e.addEventListener('click', (ev) => { - ev.target.querySelector('.spinner').classList.remove('hidden'); - loadOsmData().then(() => { - ev.target.classList.add('hidden'); - renderData(); - }); - }) + //immediate invocation + (function () { + listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => { + e.addEventListener('click', (ev) => { + ev.target.querySelector('.spinner').classList.remove('hidden'); + loadOsmData().then(() => { + ev.target.classList.add('hidden'); + renderData(); + }); }) - }()); - } + }) + }()); } diff --git a/index.html b/index.html index 56a2226..9770960 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@ diff --git a/style.css b/style.css index 3d8da66..35e2dc8 100644 --- a/style.css +++ b/style.css @@ -60,7 +60,7 @@ } .text-red { - color: #e32d2d; + color: #971616; } .text-orange { @@ -147,6 +147,17 @@ button:hover { background-color: var(--station-bg-hover); border-color: var(--station-border-hover); } +button.size-s { + font-size: 0.8rem; + padding: var(--space-s) var(--space-m); +} +button.size-m { + padding: var(--space-m) var(--space-l); +} +button.size-l { + font-size: 1.5rem; + padding: var(--space-m) var(--space-l); +} div#updateInfo { display: flex; @@ -336,8 +347,14 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm border-radius: var(--item-radius); padding: var(--space-l); } -ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm h4 { - margin-top: 0; +ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading { + display: flex; + align-items: center; + gap: var(--space-l); + margin-bottom: var(--space-l); +} +ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading h4 { + margin: 0; } ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm dl div dt { min-width: 18ch; diff --git a/style.css.map b/style.css.map index 13e0328..cd7fca4 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKE;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAQA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index b8dda69..a57dd41 100644 --- a/style.scss +++ b/style.scss @@ -65,7 +65,7 @@ $mediumBreakpoint: 800px; } .text-red { - color: #e32d2d; + color: #971616; } .text-orange { @@ -164,6 +164,20 @@ button { background-color: var(--station-bg-hover); border-color: var(--station-border-hover); } + + &.size-s { + font-size: 0.8rem; + padding: var(--space-s) var(--space-m); + } + + &.size-m { + padding: var(--space-m) var(--space-l); + } + + &.size-l { + font-size: 1.5rem; + padding: var(--space-m) var(--space-l); + } } div#updateInfo { @@ -371,10 +385,19 @@ ul#stationList { border-radius: var(--item-radius); padding: var(--space-l); - h4 { - margin-top: 0; + .osmHeading{ + display: flex; + align-items: center; + gap: var(--space-l); + margin-bottom: var(--space-l); + + h4 { + margin: 0; + } } + + dl { div { dt { From 14a514e3e4dea12821b0334c0a4ada22dea9fc87 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 11:27:16 +0200 Subject: [PATCH 02/14] some major improvements - filter by station type - sort by distance (WIP) - detect old data structure and clear localStorage if not compatible - add substitue coordinates for stations without valid osm node - improve responsive styles --- elevators.js | 377 ++++++++++++++++++++++++++++++++++++++++---------- index.html | 37 ++++- style.css | 209 +++++++++++++++++++++++----- style.css.map | 2 +- style.scss | 229 +++++++++++++++++++++++++++--- 5 files changed, 726 insertions(+), 128 deletions(-) diff --git a/elevators.js b/elevators.js index f302008..5f4fc3b 100644 --- a/elevators.js +++ b/elevators.js @@ -3,8 +3,64 @@ const internalData = { stations: [], }; let geolocationPermission = false; -let geolocation = [null, null]; +let geolocation = null; const openStations = new Set(); +let sortByDistance = false; + +const substituteCoordinates = [ + { + name: 'Borgweg (Stadtpark)', + coordinates: [53.5907696, 10.0147719], + }, + { + name: 'Emilienstraße', + coordinates: [53.5716862, 9.9525424], + }, + { + name: 'Garstedt', + coordinates: [53.6844739, 9.9860415], + }, + { + name: 'Hagenbecks Tierpark', + coordinates: [53.5925874, 9.9440359], + }, + { + name: 'Hauptbahnhof Nord', + coordinates: [53.5541197, 10.0061270], + }, + { + name: 'Hoheneichen', + coordinates: [53.6355141, 10.0677176], + }, + { + name: 'Kornweg (Klein Borstel)', + coordinates: [53.6324430, 10.0541722], + }, + { + name: 'Lauenbrück', + coordinates: [53.1971209, 9.5640765], + }, + { + name: 'Lutterothstraße', + coordinates: [53.5819938, 9.9476215], + }, + { + name: 'Meckelfeld', + coordinates: [53.4248897, 10.0291223], + }, + { + name: 'Sengelmannstraße (City Nord)', + coordinates: [53.6093953, 10.0220004], + }, + { + name: 'St.Pauli', + coordinates: [53.5507957, 9.9700752], + }, + { + name: 'Winsen(Luhe)', + coordinates: [53.3534304, 10.2086841], + }, +] Object.defineProperty(String.prototype, 'capitalize', { @@ -15,12 +71,17 @@ Object.defineProperty(String.prototype, 'capitalize', { }); async function loadElevators() { - const res = await fetch('https://www.hvv.de/elevators', {referrer: ""}); + document.querySelector('#errorMessage').classList.add('hidden'); + const res = await fetch('https://www.hvv.de/elevators', { + referrer: "", + }).catch(e => { + document.querySelector('#errorMessage').classList.remove('hidden'); + }); const data = await res.json(); const stations = data['stations']; - stations.sort(sortStations) + stations.sort(sortStations); internalData.lastUpdate = new Date(data['lastUpdate']); let stationIndex = 0; @@ -102,7 +163,10 @@ async function loadElevators() { } } - localStorage.setItem("internal_data", JSON.stringify(internalData)); + localStorage.setItem("internal_data", JSON.stringify({ + api: 'v1', + ...internalData + })); } const dateTimeStyle = new Intl.DateTimeFormat('de-DE', { @@ -119,12 +183,55 @@ async function loadOsmData() { } } - const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {}); - const osmJson = await osmData.json(); + const osmResponse = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {}); + const osmJson = await osmResponse.json(); if (!osmJson.hasOwnProperty('elements')) return; - localStorage.setItem("osm_data", JSON.stringify(osmJson)); + const osmNodes = {}; + for await (const node of osmJson.elements) { + if (node.hasOwnProperty('tags')) { + const tags = node['tags']; + if (tags['highway'] === 'elevator') { + osmNodes[node['id']] = node; + } else { + console.warn(`OSM Node is not an elevator. (NodeID: ${node['id']})`); + } + } else { + console.warn(`OSM Node has no Tags. (NodeID: ${node['id']})`); + } + } + + //update coordinates in stations + for (const stationIndex in internalData.stations) { + const station = internalData.stations[stationIndex]; + for (const elevator of station.elevators) { + const node = osmNodes[elevator.osmNodeId] + if (node) { + internalData.stations[stationIndex]['coordinates'] = [ + node['lat'], + node['lon'], + ] + } + } + + if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) { + const substitute = substituteCoordinates.filter(subs => subs.name === internalData.stations[stationIndex].name) + if (substitute.length) { + internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates; + } + } + } + + localStorage.setItem("osm_data", JSON.stringify({ + api: 'v1', + lastUpdate: new Date(), + nodes: osmNodes + })); + localStorage.setItem("internal_data", JSON.stringify({ + api: 'v1', + ...internalData + })); } function distance([lat1, lon1], [lat2, lon2]) { @@ -145,9 +252,12 @@ function distance([lat1, lon1], [lat2, lon2]) { function registerGeolocationWatcher() { navigator.geolocation.watchPosition((pos) => { - geolocation = [pos.coords.latitude, pos.coords.longitude] + if (geolocation === null) { + geolocation = [pos.coords.latitude, pos.coords.longitude]; + renderData(geolocation); + } }, (e) => { - console.log(e) + console.warn(e) }, { enableHighAccuracy: true, timeout: 5000, @@ -177,8 +287,6 @@ function allowGeolocation() { checkGeolocationPermission() -document.querySelector('#stationsNearMe').addEventListener('click', allowGeolocation) - function sortStations(stationA, stationB) { const nameA = stationA.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase const nameB = stationB.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase @@ -193,6 +301,20 @@ function sortStations(stationA, stationB) { return 0; } +function sortStationsByDistance(stationA, stationB) { + const distanceA = stationA.distance; // ignore upper and lowercase + const distanceB = stationB.distance; // ignore upper and lowercase + if (distanceA < distanceB) { + return -1; + } + if (distanceA > distanceB) { + return 1; + } + + // names must be equal + return 0; +} + function getType(line) { const type = line.replace(/[^A-z]/g, ""); switch (type) { @@ -218,7 +340,7 @@ function getTypes(lines) { return types; } -function renderData() { +function renderData(location = null) { const ls = JSON.parse(localStorage.getItem("internal_data")); if (!ls) return; internalData.lastUpdate = ls['lastUpdate']; @@ -230,6 +352,18 @@ function renderData() { return; } + if ( + location !== null + && ( + location.length !== 2 + || typeof location[0] !== 'number' + || typeof location[1] !== 'number' + ) + ) { + console.error('No valid location provided') + return; + } + document.querySelector('#updateInfo').classList.remove('hidden'); document.querySelector('#loadElevators').classList.remove('hidden'); document.querySelector('#filters').classList.remove('hidden'); @@ -241,18 +375,57 @@ function renderData() { //clear list before update listContainer.innerHTML = ''; - const stations = internalData['stations']; + let stations = [...internalData['stations']]; for (const stationIndex in stations) { const station = stations[stationIndex]; + station.id = stationIndex; + + if (location !== null) { + if (station.hasOwnProperty('coordinates')) { + station.distance = distance(location, station.coordinates); + } else { + console.log('station has no position:', station.name); + } + } + } + + stations = stations.sort(sortStationsByDistance); + + for (const stationIndex in stations) { + const station = stations[stationIndex]; + + if (location !== null) { + if (station.hasOwnProperty('coordinates')) { + station.distance = distance(location, station.coordinates); + } else { + console.log('station has no position:', station.name); + } + } let elevatorsTemplate = ''; let previewTemplate = ''; for (const elevator of station.elevators) { - let linesTemplate = '
    Linien: '; - for (const line of elevator.lines) { - linesTemplate += `${line.line}`; + const stateTemplate = ` + `; + + let linesTemplate = ''; + linesTemplate = `
    ${stateTemplate}`; + if (elevator.lines.length) { + linesTemplate = `
    ${stateTemplate}`; + linesTemplate += `
    Linien: `; + for (const line of elevator.lines) { + linesTemplate += `${line.line}`; + } + linesTemplate += '
    '; } linesTemplate += '
    '; @@ -264,41 +437,32 @@ function renderData() { let osmTemplate = ''; if (osmData) { - const nodes = osmData.elements.filter(node => node.id === elevator.osmNodeId) - if (nodes.length) { - const nodeInfo = nodes[0]; - if (nodeInfo.hasOwnProperty('tags')) { - const tags = nodeInfo['tags']; - if (tags['highway'] === 'elevator') { - osmTemplate = '
    '; - osmTemplate += `
    -
    Link zur Karte
    -
    - - Auf Karte anzeigen - -
    -
    `; - if (tags.hasOwnProperty('description')) { - osmTemplate += `
    Beschreibung
    ${tags['description']}
    `; - } - if (tags.hasOwnProperty('level')) { - osmTemplate += `
    Ebenen
    ${tags['level'].split(';').sort().join(', ')}
    `; - } - if (tags.hasOwnProperty('wheelchair')) { - osmTemplate += `
    Rollstühle
    ${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; - } - if (tags.hasOwnProperty('bicycle')) { - osmTemplate += `
    Fahrräder
    ${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
    `; - } + const node = osmData.nodes[elevator.osmNodeId] + if (node) { - osmTemplate += '
    '; - } else { - console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); - } - } else { - console.warn(`OSM Node has no Tags. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); + osmTemplate = '
    '; + osmTemplate += `
    +
    Link zur Karte
    +
    + + Auf Karte anzeigen + +
    +
    `; + if (node.tags.hasOwnProperty('description')) { + osmTemplate += `
    Beschreibung
    ${node.tags['description']}
    `; } + if (node.tags.hasOwnProperty('level')) { + osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort().join(', ')}
    `; + } + if (node.tags.hasOwnProperty('wheelchair')) { + osmTemplate += `
    Rollstühle
    ${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; + } + if (node.tags.hasOwnProperty('bicycle')) { + osmTemplate += `
    Fahrräder
    ${node.tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
    `; + } + + osmTemplate += '
    '; } else { console.warn(`OSM Node not found (deleted). At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); } @@ -310,19 +474,10 @@ function renderData() { previewTemplate += `` - elevatorsTemplate += `
  • - - + ${stateTemplate}
    - ${elevator.lines.length ? `${linesTemplate}` : ''} + ${linesTemplate} ${elevator.instCause !== '' ? `
    ${elevator.instCause}
    ` : ''} ${elevator.levels.length ? levelsTemplate : elevator.description}
    @@ -365,11 +520,14 @@ function renderData() {
  • `; } - const template = `
  • + const template = `
  • +
    ${station.types.sort().map(t => `${t}`).join('')}
    + ${typeof station.distance !== 'undefined' ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` : ''} +

    ${station.name}

    -
    +
    Aufzüge anzeigen -
    @@ -393,7 +551,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state. //immediate invocation (function () { - listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => { + listContainer.querySelectorAll(`#station_${station.id} .loadOSM`).forEach(e => { e.addEventListener('click', (ev) => { ev.target.querySelector('.spinner').classList.remove('hidden'); loadOsmData().then(() => { @@ -416,6 +574,8 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state. } }); }) + + filterData(); } document.querySelector('#loadElevators') @@ -424,7 +584,6 @@ document.querySelector('#loadElevators') loadElevators().then(() => { e.target.querySelector('.spinner').classList.add('hidden'); renderData(); - filterData(); }); }) @@ -434,19 +593,65 @@ document.querySelector('#initialLoad') loadElevators().then(() => { e.target.classList.add('hidden'); renderData(); - filterData(); }); }) -renderData(); +document.querySelector('#loadOsm') + .addEventListener('click', (e) => { + e.target.querySelector('.spinner').classList.remove('hidden'); + loadOsmData().then(() => { + e.target.querySelector('.spinner').classList.add('hidden'); + renderData(); + closeDialog('#dialog_osm'); + }); + }) + +document.querySelector('#stationsNearMe') + .addEventListener('click', async (e) => { + e.target.querySelector('.spinner').classList.remove('hidden'); + if (!sortByDistance) { + if (JSON.parse(localStorage.getItem("osm_data")) === null) { + openDialog('#dialog_osm'); + } else { + if (geolocationPermission !== 'granted') { + allowGeolocation(); + } else { + // If geolocation is already set. + // If not the location watcher will re-render our data. + if (geolocation !== null) { + renderData(geolocation) + } + sortByDistance = e.target.ariaPressed = true; + } + } + } else { + sortByDistance = e.target.ariaPressed = false; + + renderData(); + } + e.target.querySelector('.spinner').classList.add('hidden'); + }) function filterData() { const searchString = document.querySelector('#searchStation').value; + const typeU = document.querySelector('button.typeChip[data-type="U"]'); + const typeS = document.querySelector('button.typeChip[data-type="S"]'); + const typeA = document.querySelector('button.typeChip[data-type="A"]'); + const typeR = document.querySelector('button.typeChip[data-type="R"]'); + const activeTypes = []; + if(typeU.ariaPressed === 'true') activeTypes.push('U'); + if(typeS.ariaPressed === 'true') activeTypes.push('S'); + if(typeA.ariaPressed === 'true') activeTypes.push('A'); + if(typeR.ariaPressed === 'true') activeTypes.push('R'); if (internalData) { for (const stationIndex in internalData.stations) { - const matches = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; - document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !matches); + const matchesSearch = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; + let matchesType = false; + internalData.stations[stationIndex].types.forEach(type => { + if(activeTypes.includes(type)) matchesType = true; + }) + document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !(matchesSearch && matchesType)); } } } @@ -455,4 +660,36 @@ document.querySelector('#searchStation').addEventListener('input', (e) => { filterData(); }) -filterData() \ No newline at end of file +document.querySelectorAll('button.typeChip').forEach(e => { + e.addEventListener('click', (event) => { + e.ariaPressed = e.ariaPressed === 'true' ? 'false' : 'true'; + filterData(); + }) +}) + +function openDialog(selector) { + document.querySelector('body').classList.add('has-dialog') + document.querySelector('#dialog_layer').classList.add('active') + document.querySelector(selector).classList.remove('hidden') +} + +function closeDialog(selector) { + document.querySelector('body').classList.remove('has-dialog') + document.querySelector('#dialog_layer').classList.remove('active') + document.querySelector(selector).classList.add('hidden') +} + +// data api version check +const check_internal = JSON.parse(localStorage.getItem("internal_data")); +const check_osm = JSON.parse(localStorage.getItem("osm_data")); +if (check_internal === null || check_internal.hasOwnProperty('api') && check_internal.api === 'v1') { + if (check_osm === null || check_osm.hasOwnProperty('api') && check_osm.api === 'v1') { + renderData(); + } else { + console.log('osm_data: version mismatch') + localStorage.removeItem('osm_data'); + } +} else { + console.log('internal_data: version mismatch') + localStorage.removeItem('internal_data'); +} diff --git a/index.html b/index.html index 9770960..58e4796 100644 --- a/index.html +++ b/index.html @@ -37,10 +37,17 @@ + +
    + + +
    + +
    \ No newline at end of file diff --git a/style.css b/style.css index 35e2dc8..94a7483 100644 --- a/style.css +++ b/style.css @@ -10,6 +10,18 @@ --color-gray-800: hsl(12, 6%, 15%); --color-gray-900: hsl(24, 10%, 10%); --color-gray-950: hsl(20, 14%, 4%); + --color-red: #971616; + --color-orange: #cc6300; + --color-green: #19942e; + --bg-type-u: #006ab3; + --bg-type-s: #1a962b; + --bg-type-a: #f39100; + --bg-type-r: #000000; + --bg-type-u-disabled: #c3cfd7; + --bg-type-s-disabled: #c6d4c8; + --bg-type-a-disabled: #dfd8cf; + --bg-type-r-disabled: #b3b3b3; + --color-type-disabled: var(--color-gray-400); --bg: var(--color-gray-50); --text: var(--color-gray-950); --text-secondary: var(--color-gray-700); @@ -52,23 +64,64 @@ --station-border: var(--color-gray-600); --station-border-hover: var(--color-gray-400); --elevator-bg: var(--color-gray-900); + --bg-type-u-disabled: #627f93; + --bg-type-s-disabled: #688b6d; + --bg-type-a-disabled: #aa987f; + --bg-type-r-disabled: #333333; + --color-type-disabled: var(--color-gray-200); } } +body.has-dialog { + overflow: hidden; +} + +.dialogs { + display: none; + position: fixed; + overflow-y: auto; + max-width: 100vw; + padding: 1em; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.3); +} +.dialogs.active { + display: block; +} + +[role=dialog] { + box-sizing: border-box; + max-width: 800px; + margin: 0 auto; + padding: 15px; + border-radius: 1rem; + background-color: var(--background); + color: var(--color); + position: relative; +} +[role=dialog] button.close-modal { + position: absolute; + top: 0; + right: 0; +} + .hidden { display: none !important; } .text-red { - color: #971616; + color: var(--color-red); } .text-orange { - color: #cc6300; + color: var(--color-orange); } .text-green { - color: #19942e; + color: var(--color-green); } body { @@ -125,6 +178,8 @@ main { } footer { + display: flex; + justify-content: center; margin: 1em auto; max-width: 960px; } @@ -147,6 +202,9 @@ button:hover { background-color: var(--station-bg-hover); border-color: var(--station-border-hover); } +button[aria-pressed=true] { + background-color: var(--nav-bg-visited); +} button.size-s { font-size: 0.8rem; padding: var(--space-s) var(--space-m); @@ -168,12 +226,23 @@ div#updateInfo { div#filters { display: flex; + flex-wrap: wrap; gap: var(--space-m); - justify-items: stretch; + justify-content: stretch; } div#filters button, div#filters input { font-size: 1.5rem; } +div#filters > * { + width: 100%; + justify-content: center; + text-align: center; +} +@media screen and (min-width: 576px) { + div#filters > * { + width: auto; + } +} button#initialLoad { font-size: 1.5rem; @@ -183,6 +252,14 @@ button.loadOSM { width: fit-content; } +div#errorMessage { + border: solid 2px var(--color-red); + border-radius: var(--item-radius); + padding: var(--space-xl) var(--space-xl); + margin-top: var(--space-l); + font-size: 1.5rem; +} + ul#stationList { padding: 0; list-style: none; @@ -202,9 +279,20 @@ ul#stationList > li.station > div.stationSummary { display: flex; gap: var(--space-m); } -ul#stationList > li.station > div.stationSummary div.typeList { +ul#stationList > li.station > div.stationSummary div.symbol { + position: relative; +} +ul#stationList > li.station > div.stationSummary div.symbol div.typeList { flex-shrink: 0; } +ul#stationList > li.station > div.stationSummary div.symbol div.distance { + position: absolute; + width: 100%; + bottom: -2lh; + text-align: center; + color: var(--text-secondary); + font-size: 0.9em; +} ul#stationList > li.station > div.stationSummary div.stationTitle { align-self: stretch; flex-grow: 1; @@ -286,19 +374,26 @@ ul#stationList > li.station > details > ul > li.elevator { display: flex; align-items: start; flex-wrap: nowrap; - padding: var(--space-m); gap: var(--space-m); position: relative; - margin: 0 1rem 1rem; - padding-right: var(--space-2xl); + margin: 0 var(--space-s) var(--space-s); + padding: var(--space-s); } @media screen and (min-width: 576px) { ul#stationList > li.station > details > ul > li.elevator { margin: 0 var(--space-2xl) 1rem; + padding: var(--space-m); + padding-right: var(--space-2xl); } } -ul#stationList > li.station > details > ul > li.elevator > span { +ul#stationList > li.station > details > ul > li.elevator > .stateIcon { flex-shrink: 0; + display: none; +} +@media screen and (min-width: 576px) { + ul#stationList > li.station > details > ul > li.elevator > .stateIcon { + display: inline; + } } ul#stationList > li.station > details > ul > li.elevator:not(:first-child):before { content: ""; @@ -326,11 +421,25 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .ele font-weight: bold; grid-column: 1/-1; } -ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .lineList { +ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow { + grid-column: 1/-1; + display: flex; + gap: var(--space-m); +} +@media screen and (min-width: 576px) { + ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow.hiddenOnDesktop { + display: none; + } +} +@media screen and (min-width: 576px) { + ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow .stateIcon { + display: none; + } +} +ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow .lineList { display: flex; gap: var(--space-m); align-items: center; - grid-column: 1/-1; min-height: var(--space-2xl); } ul#stationList > li.station > details > ul > li.elevator > div.elevatorData hr { @@ -350,6 +459,7 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading { display: flex; align-items: center; + flex-wrap: wrap; gap: var(--space-l); margin-bottom: var(--space-l); } @@ -414,7 +524,7 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl d font-weight: bold; min-width: 15ch; } -@media (max-width: 576px) { +@media (max-width: 400px) { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dt { width: 100%; } @@ -430,66 +540,101 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl d } } -span.lineChip, span.typeChip { +span.lineChip, span.typeChip, button.typeChip { font-weight: bold; font-size: 0.8em; text-align: center; box-sizing: border-box; } -span.lineChip[data-type=U], span.typeChip[data-type=U] { - background-color: #006ab3; +span.lineChip[data-type=U], span.typeChip[data-type=U], button.typeChip[data-type=U] { + background-color: var(--bg-type-u); color: #ffffff; } -span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1] { +span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1], button.typeChip[data-type=U][data-line=U1] { background-color: #006ab3; } -span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2] { +span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2], button.typeChip[data-type=U][data-line=U2] { background-color: #e2001a; } -span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3] { +span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3], button.typeChip[data-type=U][data-line=U3] { background-color: #ffdd00; color: #000000; } -span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4] { +span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4], button.typeChip[data-type=U][data-line=U4] { background-color: #0098a1; } -span.lineChip[data-type=S], span.typeChip[data-type=S] { - background-color: #1a962b; +span.lineChip[data-type=S], span.typeChip[data-type=S], button.typeChip[data-type=S] { + background-color: var(--bg-type-s); color: #ffffff; } -span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1] { +span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1], button.typeChip[data-type=S][data-line=S1] { background-color: #1a962b; } -span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2] { +span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2], button.typeChip[data-type=S][data-line=S2] { background-color: #b51143; } -span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3] { +span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3], button.typeChip[data-type=S][data-line=S3] { background-color: #622181; } -span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4] { +span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4], button.typeChip[data-type=S][data-line=S4] { background-color: #be148e; } -span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5] { +span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5], button.typeChip[data-type=S][data-line=S5] { background-color: #0089bb; } -span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6] { +span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6], button.typeChip[data-type=S][data-line=S6] { background-color: #d3da00; color: #000000; } -span.lineChip[data-type=A], span.typeChip[data-type=A] { - background-color: #f39100; +span.lineChip[data-type=A], span.typeChip[data-type=A], button.typeChip[data-type=A] { + background-color: var(--bg-type-a); color: #ffffff; } -span.lineChip[data-type=R], span.typeChip[data-type=R] { - background-color: #000000; +span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] { + background-color: var(--bg-type-r); color: #ffffff; } @media (prefers-color-scheme: dark) { - span.lineChip[data-type=R], span.typeChip[data-type=R] { + span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] { border: solid 2px #ffffff; } } +div#typeFilter { + display: flex; + flex-grow: 1; + flex-wrap: nowrap; + flex-shrink: 0; + min-height: var(--space-2xl); + gap: var(--space-m); +} +div#typeFilter button.typeChip { + padding: 0; + height: 100%; + aspect-ratio: 1/1; + justify-content: center; + align-items: center; +} +div#typeFilter button.typeChip[data-type=U], div#typeFilter button.typeChip[data-type=S], div#typeFilter button.typeChip[data-type=A], div#typeFilter button.typeChip[data-type=R] { + border: solid 2px var(--station-border); +} +div#typeFilter button.typeChip[data-type=U][aria-pressed=false], div#typeFilter button.typeChip[data-type=S][aria-pressed=false], div#typeFilter button.typeChip[data-type=A][aria-pressed=false], div#typeFilter button.typeChip[data-type=R][aria-pressed=false] { + background-color: var(--color-gray-500); + color: var(--color-type-disabled); +} +div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=U] { + background-color: var(--bg-type-u-disabled); +} +div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=S] { + background-color: var(--bg-type-s-disabled); +} +div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=A] { + background-color: var(--bg-type-a-disabled); +} +div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=R] { + background-color: var(--bg-type-r-disabled); +} + span.lineChip { padding: 0.3em 0.6em; min-width: 4ch; diff --git a/style.css.map b/style.css.map index cd7fca4..0ae8de6 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAQA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index a57dd41..52ae926 100644 --- a/style.scss +++ b/style.scss @@ -1,4 +1,7 @@ +@use 'sass:color'; + $mobileBreakpoint: 576px; +$smallBreakpoint: 400px; $mediumBreakpoint: 800px; :root { @@ -14,6 +17,24 @@ $mediumBreakpoint: 800px; --color-gray-900: hsl(24, 10%, 10%); --color-gray-950: hsl(20, 14%, 4%); + --color-red: #971616; + --color-orange: #cc6300; + --color-green: #19942e; + + + $colorTypeU: #006ab3; + $colorTypeS: #1a962b; + $colorTypeA: #f39100; + $colorTypeR: #000000; + --bg-type-u: #{$colorTypeU}; + --bg-type-s: #{$colorTypeS}; + --bg-type-a: #{$colorTypeA}; + --bg-type-r: #{$colorTypeR}; + --bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +70%)}; + --bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +70%)}; + --bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +70%)}; + --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +70%)}; + --color-type-disabled: var(--color-gray-400); --bg: var(--color-gray-50); --text: var(--color-gray-950); @@ -47,6 +68,13 @@ $mediumBreakpoint: 800px; --station-border: var(--color-gray-600); --station-border-hover: var(--color-gray-400); --elevator-bg: var(--color-gray-900); + + --bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +20%)}; + --bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +20%)}; + --bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +20%)}; + --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +20%)}; + --color-type-disabled: var(--color-gray-200); + } --elevator-list-gap: 3rem; @@ -60,20 +88,63 @@ $mediumBreakpoint: 800px; --space-2xl: 3rem; } +body { + &.has-dialog { + overflow: hidden; + } +} + +.dialogs { + display: none; + position: fixed; + overflow-y: auto; + max-width: 100vw; + padding: 1em; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgb(0 0 0 / 30%); + + &.active { + display: block; + } +} + + +[role="dialog"] { + box-sizing: border-box; + max-width: 800px; + margin: 0 auto; + padding: 15px; + border-radius: 1rem; + background-color: var(--background); + color: var(--color); + position: relative; + + button { + &.close-modal { + position: absolute; + top: 0; + right: 0; + } + } +} + .hidden { display: none !important; } .text-red { - color: #971616; + color: var(--color-red); } .text-orange { - color: #cc6300; + color: var(--color-orange); } .text-green { - color: #19942e; + color: var(--color-green); } body { @@ -142,6 +213,8 @@ main { } footer { + display: flex; + justify-content: center; margin: 1em auto; max-width: 960px; } @@ -165,6 +238,10 @@ button { border-color: var(--station-border-hover); } + &[aria-pressed='true'] { + background-color: var(--nav-bg-visited); + } + &.size-s { font-size: 0.8rem; padding: var(--space-s) var(--space-m); @@ -189,12 +266,22 @@ div#updateInfo { div#filters { display: flex; + flex-wrap: wrap; gap: var(--space-m); - justify-items: stretch; + justify-content: stretch; button, input { font-size: 1.5rem; } + + > * { + width: 100%; + justify-content: center; + text-align: center; + @media screen and (min-width: $mobileBreakpoint) { + width: auto; + } + } } button#initialLoad { @@ -205,6 +292,14 @@ button.loadOSM { width: fit-content; } +div#errorMessage { + border: solid 2px var(--color-red); + border-radius: var(--item-radius); + padding: var(--space-xl) var(--space-xl); + margin-top: var(--space-l); + font-size: 1.5rem; +} + ul#stationList { padding: 0; list-style: none; @@ -220,12 +315,35 @@ ul#stationList { position: relative; padding: var(--space-m); + //div.distance { + // display: flex; + // justify-content: center; + // font-size: 0.8rem; + // color: var(--text-secondary); + // position: absolute; + // width: 100%; + //} + > div.stationSummary { display: flex; gap: var(--space-m); - div.typeList { - flex-shrink: 0; + div.symbol { + position: relative; + + div.typeList { + flex-shrink: 0; + } + + div.distance { + position: absolute; + width: 100%; + bottom: -2lh; + + text-align: center; + color: var(--text-secondary); + font-size: 0.9em; + } } @@ -318,20 +436,24 @@ ul#stationList { display: flex; align-items: start; flex-wrap: nowrap; - padding: var(--space-m); gap: var(--space-m); position: relative; - margin: 0 1rem 1rem; + margin: 0 var(--space-s) var(--space-s); + padding: var(--space-s); @media screen and (min-width: $mobileBreakpoint) { margin: 0 var(--space-2xl) 1rem; + padding: var(--space-m); + padding-right: var(--space-2xl); } - padding-right: var(--space-2xl); - // elevator icon - > span { + > .stateIcon { flex-shrink: 0; + display: none; + @media screen and (min-width: $mobileBreakpoint) { + display: inline; + } } // divider between elevators @@ -362,14 +484,33 @@ ul#stationList { grid-column: 1 / -1; } - .lineList { + div.firstRow { + grid-column: 1 / -1; display: flex; gap: var(--space-m); - align-items: center; - grid-column: 1 / -1; - min-height: var(--space-2xl); + + &.hiddenOnDesktop { + @media screen and (min-width: $mobileBreakpoint) { + display: none; + } + } + + .stateIcon { + @media screen and (min-width: $mobileBreakpoint) { + display: none; + } + } + + + .lineList { + display: flex; + gap: var(--space-m); + align-items: center; + min-height: var(--space-2xl); + } } + hr { grid-column: 1 / -1; width: 100%; @@ -385,9 +526,10 @@ ul#stationList { border-radius: var(--item-radius); padding: var(--space-l); - .osmHeading{ + .osmHeading { display: flex; align-items: center; + flex-wrap: wrap; gap: var(--space-l); margin-bottom: var(--space-l); @@ -397,7 +539,6 @@ ul#stationList { } - dl { div { dt { @@ -474,7 +615,7 @@ ul#stationList { font-weight: bold; min-width: 15ch; - @media (max-width: $mobileBreakpoint) { + @media (max-width: $smallBreakpoint) { width: 100%; } } @@ -498,14 +639,14 @@ ul#stationList { } } -span.lineChip, span.typeChip { +span.lineChip, span.typeChip, button.typeChip { font-weight: bold; font-size: 0.8em; text-align: center; box-sizing: border-box; &[data-type="U"] { - background-color: #006ab3; + background-color: var(--bg-type-u); color: #ffffff; &[data-line="U1"] { @@ -527,7 +668,7 @@ span.lineChip, span.typeChip { } &[data-type="S"] { - background-color: #1a962b; + background-color: var(--bg-type-s); color: #ffffff; &[data-line="S1"] { @@ -557,12 +698,12 @@ span.lineChip, span.typeChip { } &[data-type="A"] { - background-color: #f39100; + background-color: var(--bg-type-a); color: #ffffff; } &[data-type="R"] { - background-color: #000000; + background-color: var(--bg-type-r); color: #ffffff; @media (prefers-color-scheme: dark) { @@ -571,6 +712,48 @@ span.lineChip, span.typeChip { } } + +div#typeFilter{ + display: flex; + flex-grow: 1; + flex-wrap: nowrap; + flex-shrink: 0; + min-height: var(--space-2xl); + gap: var(--space-m); + + button.typeChip { + padding: 0; + height: 100%; + aspect-ratio: 1/1; + justify-content: center; + align-items: center; + &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] { + border: solid 2px var(--station-border); + &[aria-pressed="false"] { + background-color: var(--color-gray-500); + color: var(--color-type-disabled); + + &[data-type="U"] { + background-color: var(--bg-type-u-disabled); + } + + &[data-type="S"] { + background-color: var(--bg-type-s-disabled); + } + + &[data-type="A"] { + background-color: var(--bg-type-a-disabled); + } + + &[data-type="R"] { + background-color: var(--bg-type-r-disabled); + } + } + } + } +} + + span.lineChip { padding: 0.3em 0.6em; min-width: 4ch; From caa96f565fa8212a88af86ebcf6f0832cab411a7 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 14:38:23 +0200 Subject: [PATCH 03/14] improve browser compatability in some browsers ariaPressed is only supported since 2023. We use a data attribute as a fallback --- elevators.js | 10 +++++----- index.html | 8 ++++---- style.css | 21 ++++++++++++++++----- style.css.map | 2 +- style.scss | 18 ++++++++++++++++-- 5 files changed, 42 insertions(+), 17 deletions(-) diff --git a/elevators.js b/elevators.js index 5f4fc3b..eb46701 100644 --- a/elevators.js +++ b/elevators.js @@ -640,10 +640,10 @@ function filterData() { const typeA = document.querySelector('button.typeChip[data-type="A"]'); const typeR = document.querySelector('button.typeChip[data-type="R"]'); const activeTypes = []; - if(typeU.ariaPressed === 'true') activeTypes.push('U'); - if(typeS.ariaPressed === 'true') activeTypes.push('S'); - if(typeA.ariaPressed === 'true') activeTypes.push('A'); - if(typeR.ariaPressed === 'true') activeTypes.push('R'); + if(typeU.dataset.pressed === 'true') activeTypes.push('U'); + if(typeS.dataset.pressed === 'true') activeTypes.push('S'); + if(typeA.dataset.pressed === 'true') activeTypes.push('A'); + if(typeR.dataset.pressed === 'true') activeTypes.push('R'); if (internalData) { for (const stationIndex in internalData.stations) { const matchesSearch = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; @@ -662,7 +662,7 @@ document.querySelector('#searchStation').addEventListener('input', (e) => { document.querySelectorAll('button.typeChip').forEach(e => { e.addEventListener('click', (event) => { - e.ariaPressed = e.ariaPressed === 'true' ? 'false' : 'true'; + e.ariaPressed = e.dataset.pressed = e.dataset.pressed === 'true' ? 'false' : 'true'; filterData(); }) }) diff --git a/index.html b/index.html index 58e4796..a48e80a 100644 --- a/index.html +++ b/index.html @@ -43,10 +43,10 @@
    - - - - + + + +
    diff --git a/style.css b/style.css index 94a7483..1f3e9c5 100644 --- a/style.css +++ b/style.css @@ -614,26 +614,37 @@ div#typeFilter button.typeChip { aspect-ratio: 1/1; justify-content: center; align-items: center; + position: relative; + overflow: hidden; } div#typeFilter button.typeChip[data-type=U], div#typeFilter button.typeChip[data-type=S], div#typeFilter button.typeChip[data-type=A], div#typeFilter button.typeChip[data-type=R] { border: solid 2px var(--station-border); } -div#typeFilter button.typeChip[data-type=U][aria-pressed=false], div#typeFilter button.typeChip[data-type=S][aria-pressed=false], div#typeFilter button.typeChip[data-type=A][aria-pressed=false], div#typeFilter button.typeChip[data-type=R][aria-pressed=false] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#typeFilter button.typeChip[data-type=R][data-pressed=false] { background-color: var(--color-gray-500); color: var(--color-type-disabled); } -div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=U] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=U] { background-color: var(--bg-type-u-disabled); } -div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=S] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=S] { background-color: var(--bg-type-s-disabled); } -div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=A] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=A] { background-color: var(--bg-type-a-disabled); } -div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=R] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] { background-color: var(--bg-type-r-disabled); } +div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after { + position: absolute; + content: ""; + width: 144%; + height: 0.4rem; + background-color: var(--color-gray-500); + opacity: 80%; + transform: rotate(-45deg); +} span.lineChip { padding: 0.3em 0.6em; diff --git a/style.css.map b/style.css.map index 0ae8de6..178d600 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index 52ae926..0a8c910 100644 --- a/style.scss +++ b/style.scss @@ -713,7 +713,7 @@ span.lineChip, span.typeChip, button.typeChip { } -div#typeFilter{ +div#typeFilter { display: flex; flex-grow: 1; flex-wrap: nowrap; @@ -727,9 +727,13 @@ div#typeFilter{ aspect-ratio: 1/1; justify-content: center; align-items: center; + position: relative; + overflow: hidden; + &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] { border: solid 2px var(--station-border); - &[aria-pressed="false"] { + + &[data-pressed="false"] { background-color: var(--color-gray-500); color: var(--color-type-disabled); @@ -748,6 +752,16 @@ div#typeFilter{ &[data-type="R"] { background-color: var(--bg-type-r-disabled); } + + &::after { + position: absolute; + content: ''; + width: 144%; + height: 0.4rem; + background-color: var(--color-gray-500); + opacity: 80%; + transform: rotate(-45deg); + } } } } From 9a6be1d0108629860e2467a585069eedeee259c9 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 15:16:18 +0200 Subject: [PATCH 04/14] display additional information for station --- elevators.js | 6 ++++-- style.css | 17 +++++++++++++++++ style.css.map | 2 +- style.scss | 21 +++++++++++++++++++++ 4 files changed, 43 insertions(+), 3 deletions(-) diff --git a/elevators.js b/elevators.js index eb46701..6fdc056 100644 --- a/elevators.js +++ b/elevators.js @@ -88,6 +88,7 @@ async function loadElevators() { for (const station of stations) { const stationName = station['mainSubStation']['stationName']; + const stationComment = station['mainSubStation']['comment']; const lines = new Set(); const elevators = []; for (const elevatorKey of Object.keys(station.elevators)) { @@ -155,7 +156,7 @@ async function loadElevators() { internalData.stations[stationIndex++] = { name: stationName, - comment: station['comment'], + comment: stationComment, state: stationState, lines: stationLines, types: stationTypes, @@ -540,8 +541,9 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
  • - Aufzüge anzeigen + Details / Aufzüge anzeigen + ${station.comment ? `

    ${station.comment}

    ` : ''} diff --git a/style.css b/style.css index 1f3e9c5..a2ed1e8 100644 --- a/style.css +++ b/style.css @@ -360,6 +360,20 @@ ul#stationList > li.station > details summary::after { ul#stationList > li.station > details[open] summary { margin-bottom: 1rem; } +ul#stationList > li.station > details > div.comment { + position: relative; + z-index: 20; + display: inline-flex; + margin-left: calc(var(--space-m) + var(--type-icon-size)); + padding-bottom: var(--space-m); + border-bottom: solid 2px var(--station-border); +} +ul#stationList > li.station > details > div.comment > p { + display: block; + border: solid 2px var(--nav-bg); + border-radius: var(--btn-radius); + padding: var(--space-l); +} ul#stationList > li.station > details > ul { padding: 0; list-style: none; @@ -395,6 +409,9 @@ ul#stationList > li.station > details > ul > li.elevator > .stateIcon { display: inline; } } +ul#stationList > li.station > details > ul > li.elevator:first-child { + padding-top: var(--space-l); +} ul#stationList > li.station > details > ul > li.elevator:not(:first-child):before { content: ""; position: absolute; diff --git a/style.css.map b/style.css.map index 178d600..1acef63 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index 0a8c910..c4714aa 100644 --- a/style.scss +++ b/style.scss @@ -422,6 +422,22 @@ ul#stationList { margin-bottom: 1rem; } + > div.comment { + position: relative; + z-index: 20; + display: inline-flex; + margin-left: calc(var(--space-m) + var(--type-icon-size)); + padding-bottom: var(--space-m); + border-bottom: solid 2px var(--station-border); + + > p { + display: block; + border: solid 2px var(--nav-bg); + border-radius: var(--btn-radius); + padding: var(--space-l); + } + } + > ul { padding: 0; list-style: none; @@ -456,6 +472,11 @@ ul#stationList { } } + // space above first elevator + &:first-child { + padding-top: var(--space-l); + } + // divider between elevators &:not(:first-child):before { content: ""; From 6ebc758e25aada489e6215ceb5e60e5f5d1bd65b Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 15:21:50 +0200 Subject: [PATCH 05/14] minor layout fix --- elevators.js | 2 +- index.html | 2 +- style.css | 12 +++++++++--- style.css.map | 2 +- style.scss | 19 ++++++++++++++----- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/elevators.js b/elevators.js index 6fdc056..53d452c 100644 --- a/elevators.js +++ b/elevators.js @@ -541,7 +541,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
    - Details / Aufzüge anzeigen + Details / Aufzüge anzeigen ${station.comment ? `

    ${station.comment}

    ` : ''}
    -
    -

    Worum geht's hier?

    -

    - Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs informationen im HVV. - Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden Karte an: - HVV Webseite zu Aufzügen -

    -

    - Dieses Projekt wurde unter AGPL-3 entwickelt und ist hier zu finden: - git.kritzl.dev -

    -
    +
    +

    Worum geht's hier?

    +

    + Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs-Informationen im HVV. + Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden + Karte an: + HVV Webseite zu Aufzügen +

    +

    + Dieses Projekt wurde unter der AGPL-3 Lizenz entwickelt und ist hier zu finden: + git.kritzl.dev +

    +
    \ No newline at end of file diff --git a/elevators.js b/elevators.js index 309ad56..af261c9 100644 --- a/elevators.js +++ b/elevators.js @@ -232,7 +232,7 @@ async function loadOsmData() { if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) { const substitute = substituteData.filter(subs => subs.name === internalData.stations[stationIndex].name) - if (substitute.length && substitute.hasOwnProperty('coordinates')) { + if (substitute.length && substitute[0].hasOwnProperty('coordinates')) { internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates; } } @@ -316,9 +316,23 @@ function sortStations(stationA, stationB) { return 0; } +function sortInt(valueA, valueB) { + const a = parseInt(valueA) + const b = parseInt(valueB) + if (a < b) { + return -1; + } + if (a > b) { + return 1; + } + + // names must be equal + return 0; +} + function sortStationsByDistance(stationA, stationB) { - const distanceA = stationA.distance; // ignore upper and lowercase - const distanceB = stationB.distance; // ignore upper and lowercase + const distanceA = stationA.distance ?? 0; // ignore upper and lowercase + const distanceB = stationB.distance ?? 0; // ignore upper and lowercase if (distanceA < distanceB) { return -1; } @@ -415,7 +429,9 @@ function renderData(location = null) { } } - stations = stations.sort(sortStationsByDistance); + if (sortByDistance) { + stations = stations.sort(sortStationsByDistance); + } for (const stationIndex in stations) { const station = stations[stationIndex]; @@ -478,7 +494,7 @@ function renderData(location = null) { osmTemplate += `
    Beschreibung
    ${node.tags['description']}
    `; } if (node.tags.hasOwnProperty('level')) { - osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort().join(', ')}
    `; + osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort(sortInt).join(', ')}
    `; } if (node.tags.hasOwnProperty('wheelchair')) { osmTemplate += `
    Rollstühle
    ${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; @@ -551,7 +567,11 @@ function renderData(location = null) {
    ${station.types.sort().map(t => `${t}`).join('')}
    - ${typeof station.distance !== 'undefined' ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` : ''} + ${sortByDistance + ? typeof station.distance !== 'undefined' + ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` + : '
    ? km
    ' + : ''}

    ${station.name}

    @@ -646,12 +666,13 @@ document.querySelector('#stationsNearMe') if (geolocationPermission !== 'granted') { allowGeolocation(); } else { + sortByDistance = e.target.ariaPressed = true; + // If geolocation is already set. // If not the location watcher will re-render our data. if (geolocation !== null) { renderData(geolocation) } - sortByDistance = e.target.ariaPressed = true; } } } else { diff --git a/icons/favicon_source.svg b/icons/favicon_source.svg new file mode 100644 index 0000000..144b176 --- /dev/null +++ b/icons/favicon_source.svg @@ -0,0 +1,81 @@ + + + + diff --git a/index.html b/index.html index 863abc6..bd5bb32 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - Barrierefreie Aufzugs-Liste + hvvstuhl.de

    Barrierefreie Aufzugs-Liste

    @@ -37,9 +37,8 @@
    +
    -