vehicle totals

static/index.html

@@ -57,7 +57,7 @@
       <div id="map" style="height: 100vh; flex-grow: 1"></div>
       <div id="sidebar">
         <h1>Every Transit Vehicle in Salt Lake City*</h1>
-        <small>*with a tracker</small>
+        <small>*or at least most of them</small>
 
         <hr />
 
@@ -112,6 +112,18 @@
 
         <hr>
 
+        <div>
+          <p>There are...</p>
+          <ul>
+            <li><strong id="count-bus">-</strong> bus(es)</li>
+            <li><strong id="count-trax">-</strong> TRAX train(s)</li>
+            <li><strong id="count-frontrunner">-</strong> FrontRunner train(s)</li>
+          </ul>
+          <p>...out and about</p>
+        </div>
+
+        <hr>
+
         <div>
           last updated: <span id="last-updated">-</span>
         </div>

static/js/main.js

@@ -1,12 +1,11 @@
 import * as shapes from "./shapes.js";
 import protobuf from "https://cdn.jsdelivr.net/npm/protobufjs@8.0.0/dist/protobuf.js/+esm";
-import * as L from "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js";
+import * as L from "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet-src.esm.js";
 
 let lastUpdated;
 
 function displayLastUpdated() {
   document.getElementById("last-updated").innerText = `${Math.floor((Date.now() - (lastUpdated * 1000)) / 1000)}s ago`
-  console.log("yeah")
 }
 
 setInterval(displayLastUpdated, 1000)
@@ -60,17 +59,46 @@ protobuf.load("/schema.proto").then((root) => {
     }
   }
 
+  function populateTotals(vehicles) {
+    const totals = {
+      bus: 0,
+      trax: 0,
+      frontrunner: 0,
+    }
+
+    for (const vehicle of vehicles) {
+      switch(vehicle.route.type) {
+        case RouteType.BUS:
+          totals.bus++;
+          break;
+        case RouteType.TRAM:
+          totals.trax++;
+          break;
+        case RouteType.RAIL:
+          totals.frontrunner++;
+          break;
+      }
+    }
+
+    document.getElementById("count-bus").innerText = totals.bus.toString()
+    document.getElementById("count-trax").innerText = totals.trax.toString()
+    document.getElementById("count-frontrunner").innerText = totals.frontrunner.toString()
+  }
+
   async function reload() {
     const bin = await fetch("/api").then((r) => r.arrayBuffer());
     const { vehicles, info } = root
       .lookupType("VehicleFeed")
       .decode(new Uint8Array(bin));
 
-    clearMap();
-
     lastUpdated = info.lastUpdate
     displayLastUpdated()
 
+    populateTotals(vehicles)
+
+    // render vehicles on map
+    clearMap();
+
     vehicles.forEach((vehicle) => {
       L.marker([vehicle.lat, vehicle.lon], {
         zIndexOffset:
@@ -115,10 +143,10 @@ protobuf.load("/schema.proto").then((root) => {
             : busLayer
         )
         .bindPopup(
-          `${routeDesignator(vehicle.route)} to ${vehicle.headsign.replace(
+          `<b>${routeDesignator(vehicle.route)}</b> to <b>${vehicle.headsign.replace(
             /^to /i,
             ""
-          )}<br />@ ${vehicle.nearestStation?.name}`
+          )}</b>${vehicle.nearestStation ? `<br />@ ${vehicle.nearestStation?.name}` : ""}<br /><br /><small>vehicle #: ${vehicle.id}</small>`
         );
     });
   }