fetch OSM Data

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

about.html

@@ -32,7 +32,7 @@
         <a href="https://www.hvv.de/de/aufzuege">HVV Website</a>
     </p>
     <p>
-        bla...
+        The Source code of this page is available under: <a href="https://git.kritzl.dev/kritzl/hvvstuhl.de" target="_blank">git.kritzl.dev</a>
     </p>
 </section>
 </main>

elevators.js

@@ -24,21 +24,38 @@ let geolocation = [null, null];
 
 async function loadOsmData() {
     const elevatorNodes = document.querySelectorAll('.elevator');
+    const nodeIdList = [];
     for (const elevator of elevatorNodes) {
-        elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '<dl class="osmTags">loading...</dl>')
-
+        const osmContainer = elevator.querySelector('.osm');
+        const nodeId = osmContainer.dataset.nodeid;
+        if (nodeId > 0) {
+            elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '<dl class="osmTags">loading...</dl>');
+            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 (!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 (responseData.elements.length) {
-            const node = responseData.elements[0];
-            const tags = node['tags'];
-            console.log(tags)
         if (tags['highway'] === 'elevator') {
             let osmTemplate = '';
             osmTemplate += `<div><dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt><dd><a href="https://www.openstreetmap.org/node/${nodeId}" target="_blank">
@@ -56,10 +73,8 @@ Auf Karte anzeigen
             if (tags.hasOwnProperty('bicycle')) {
                 osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
             }
-                osmContainer.innerHTML = ''; // clear loading state
-                osmContainer.insertAdjacentHTML('beforeend', osmTemplate);
-            }
-
+            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();
 
 

index.html

@@ -29,6 +29,7 @@
     <div>
         <span>Last Updated: <b id="lastUpdated"></b></span>
         <button id="loadElevators">Daten vom HVV abrufen</button>
+        <button id="loadOSM">OSM Daten abrufen</button>
     </div>
     <br>
 

style.css

@@ -133,7 +133,7 @@ button, input {
 
 button {
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--space-m);
 }

style.scss

@@ -150,7 +150,7 @@ button, input {
 
 button {
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--space-m);