First complete backend

2025-02-11 00:14:58 -06:00 · 2025-02-11 00:14:58 -06:00 · ee147fea3c
commit ee147fea3c
parent 754a0c425c
18 changed files with 949 additions and 178 deletions
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NAU Sidewalk Map</title>
+  <link rel="stylesheet" href="/leaflet/leaflet.css" />
+  <style>
+    body {
+        margin: 0;
+    }
+    #map {
+      height: 100vh;
+      width: 100%;
+      background-color: black;
+    }
+  </style>
+  <!-- TODO: self-host -->
+  <link rel="stylesheet" href="https://mfhsieh.github.io/leaflet-simple-locate/examples/demo.css" />
+</head>
+<body>
+
+<div id="map"></div>
+
+<script src="/leaflet/leaflet.js"></script>
+<!-- TODO: self-host -->
+<script src="https://mfhsieh.github.io/leaflet-simple-locate/dist/leaflet-simple-locate.min.js"></script>
+<script>
+  const map = L.map('map').fitBounds([[35.171563,-111.661606],[35.195695,-111.647701]]);
+
+  // Set up the OpenStreetMap tile layer
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    opacity: 0.6,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  const CONDITIONS = [
+    {name: "Unknown", color: "gray"},
+    {name: "Clear", color: "green"},
+    {name: "PartiallyCovered", color: "yellow"},
+    {name: "Covered", color: "red"},
+  ];
+
+  fetch('api/sidewalks')
+    .then(response => response.json())
+    .then(osmData => {
+      
+      // Function to create the polyline and popup for each OSM way
+      for (let [i, way] of osmData.entries()) {
+        const polyline = L.polyline(way.Geometry, {
+          color: CONDITIONS[way.Condition].color,
+          weight: 5,
+          opacity: 0.7
+        }).addTo(map);
+
+        polyline.on('mouseover', function(e) {
+            e.target.setStyle({
+                weight: 10,
+                opacity: 1,
+            });
+        });
+        polyline.on('mouseout', function(e){
+            e.target.setStyle({
+                weight: 5,
+                opacity: 0.7,
+            });
+        });
+
+        // Create a popup with the tags when clicking on the polyline
+        const extraContent = {
+          Condition: CONDITIONS[way.Condition].name,
+          Description: way.Description,
+          LastUpdated: way.LastUpdated,
+        };
+        const tagsContent = Object.entries({...extraContent/*, ...way.Tags*/}).map(([key, value]) => {
+          return `<b>${key}:</b> ${value}`;
+        }).join('<br>');
+
+        let buttons = "";
+        for (let [val, condition] of CONDITIONS.slice(1).entries()) {
+          buttons += `
+          <form method="POST" action="/api/sidewalks/${i}">
+            <input type="hidden" name="condition" value="${val+1}">
+            <button type="submit">${condition.name}</button>
+          </form>
+          `;
+        }
+
+        polyline.bindPopup(tagsContent+"<br>"+buttons);
+
+        // // Listen for popup open to attach event listeners
+        // polyline.on('popupopen', function(e) {
+        //   document.querySelectorAll(".popup-btn").forEach(button => {
+        //     button.addEventListener("click", async function(event) {
+        //       const value = event.target.getAttribute("data-value");
+              
+        //       await fetch("/api/foo", {
+        //         method: "POST",
+        //         body: value
+        //       });
+        //     });
+        //   });
+        // });
+      }
+    })
+    .catch(error => {
+      console.error('Error loading OSM data:', error);
+    });
+
+    const control = new L.Control.SimpleLocate({
+      position: "topleft",
+      className: "button-locate",
+      afterClick: (result) => {
+          console.log("afterClick", result);
+          if (!result.geolocation) console.log("Geolocation Error");
+          if (!result.orientation) console.log("Orientation Error");
+      },
+  }).addTo(map);
+    
+</script>
+</body>
+</html>