From dc84436346219bffca24c32d3a07ded4fa2cc6a4 Mon Sep 17 00:00:00 2001 From: kritzl Date: Tue, 4 Jun 2024 14:17:07 +0200 Subject: [PATCH] fetch OSM Data --- README.md | 27 ++---------------- about.html | 2 +- elevators.js | 81 +++++++++++++++++++++++++++++++++------------------- index.html | 1 + style.css | 2 +- style.scss | 2 +- 6 files changed, 58 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index f77c866..dbb5858 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,3 @@ -```paython -from http.server import HTTPServer, SimpleHTTPRequestHandler -import sys - - -class CORSRequestHandler(SimpleHTTPRequestHandler): - - def end_headers(self): - self.send_header('Access-Control-Allow-Origin', 'origin') - self.send_header('Access-Control-Allow-Methods', '*') - self.send_header('Access-Control-Allow-Headers', '*') - self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate') - return super(CORSRequestHandler, self).end_headers() - - def do_OPTIONS(self): - self.send_response(200) - self.end_headers() - -host = sys.argv[1] if len(sys.argv) > 2 else '0.0.0.0' -port = int(sys.argv[len(sys.argv)-1]) if len(sys.argv) > 1 else 8080 - -print("Listening on {}:{}".format(host, port)) -httpd = HTTPServer((host, port), CORSRequestHandler) -httpd.serve_forever() -``` +# A11y Elevator List for HVV +This site provides an (at least more) accessible version of the HVV Website for (not) working elevators: https://www.hvv.de/de/aufzuege \ No newline at end of file diff --git a/about.html b/about.html index 1265ac6..91b1f6c 100644 --- a/about.html +++ b/about.html @@ -32,7 +32,7 @@ HVV Website

- bla... + The Source code of this page is available under: git.kritzl.dev

diff --git a/elevators.js b/elevators.js index 466f760..34b9713 100644 --- a/elevators.js +++ b/elevators.js @@ -24,42 +24,57 @@ let geolocation = [null, null]; async function loadOsmData() { const elevatorNodes = document.querySelectorAll('.elevator'); + const nodeIdList = []; for (const elevator of elevatorNodes) { - elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '
loading...
') - + const osmContainer = elevator.querySelector('.osm'); + const nodeId = osmContainer.dataset.nodeid; + if (nodeId > 0) { + elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '
loading...
'); + nodeIdList.push(nodeId) + } } - for (const elevator of elevatorNodes) { - const osmContainer = elevator.querySelector('.osmTags'); - const nodeId = elevator.querySelector('.osm').dataset.nodeid; - const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(${nodeId});out%20body;`, {}); - const responseData = await osmData.json(); + const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {}); + const osmJson = await osmData.json(); - if (responseData.elements.length) { - const node = responseData.elements[0]; - const tags = node['tags']; - console.log(tags) - if (tags['highway'] === 'elevator') { - let osmTemplate = ''; - osmTemplate += `
Link zur Karte
+ if (!osmJson.hasOwnProperty('elements')) return; + + for (const elevator of elevatorNodes) { + const tagContainer = elevator.querySelector('.osmTags'); + const nodeId = elevator.querySelector('.osm').dataset.nodeid; + + const nodes = osmJson.elements.filter(node => node.id === parseInt(nodeId)) + if (!nodes.length) { + tagContainer.innerHTML = 'keine Daten'; + continue; + } + const nodeInfo = nodes[0]; + + if (!nodeInfo.hasOwnProperty('tags')) { + tagContainer.innerHTML = 'keine Daten'; + continue; + } + const tags = nodeInfo['tags']; + + if (tags['highway'] === 'elevator') { + let 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'}
`; - } - osmContainer.innerHTML = ''; // clear loading state - osmContainer.insertAdjacentHTML('beforeend', osmTemplate); + 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'}
`; + } + tagContainer.innerHTML = ''; // clear loading state + tagContainer.insertAdjacentHTML('beforeend', osmTemplate); } } } @@ -174,6 +189,9 @@ function renderData() { dateContainer.innerHTML = dateTimeStyle.format(date); let stationIndex = 0; + + //clear list before update + listContainer.innerHTML = ''; for (const station of stations) { const stationName = station.mainSubStation.stationName; const lines = new Set(); @@ -345,6 +363,11 @@ document.querySelector('#loadElevators') loadElevators().then(() => renderData()); }) +document.querySelector('#loadOSM') + .addEventListener('click', (e) => { + loadOsmData(); + }) + renderData(); diff --git a/index.html b/index.html index 5df658a..183742c 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@
Last Updated: +

diff --git a/style.css b/style.css index e308c41..25e49c9 100644 --- a/style.css +++ b/style.css @@ -133,7 +133,7 @@ button, input { button { cursor: pointer; - display: flex; + display: inline-flex; align-items: center; gap: var(--space-m); } diff --git a/style.scss b/style.scss index aa5694a..a731775 100644 --- a/style.scss +++ b/style.scss @@ -150,7 +150,7 @@ button, input { button { cursor: pointer; - display: flex; + display: inline-flex; align-items: center; gap: var(--space-m);