Add TransLoc announcements

mileskrell · mileskrell · commit 08c8b1c119f2 · 2022-11-13T13:27:47.000-05:00
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ Things on the map you can tap:
 Other features:
 
 - it shows line segments for bus routes! But only routes that currently have buses running, so it's not too cluttered
+- it shows [Rutgers bus service announcements](https://rutgers.transloc.com/announcements)
 - there's a button that lets you pick which routes will be shown in the rest of the app. This setting will be remembered
   for the next time you open XBus. E.g. if you uncheck the box for Route A, then:
   - you won't see the line segments for Route A on the map
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 </head>
 <body>
 <div id="map"></div>
-<div id="dialog" title="Routes"></div>
+<div id="dialog"></div>
 <script src="const.js"></script>
 <script src="map.js"></script>
 </body>
diff --git a/map.js b/map.js
@@ -1,7 +1,8 @@
 let routes, segments, stops, vehicles, lastFullTransLocFetchTime,
     routeIdToRouteMap, stopIdToStopMap, vehicleIdToVehicleMap, oldVehicleIdToVehicleMap,
     selectedLayerId, selectedFeature, selectedPlaceSheet, shownRouteIds,
-    buildingsGeoJSON, parkingLotsGeoJSON, stopsGeoJSON;
+    buildingsGeoJSON, parkingLotsGeoJSON, stopsGeoJSON,
+    announcements;
 let startPos = nbPos;
 if (document.cookie) {
     const campusCookie = document.cookie.split('; ').find(it => it.startsWith('campus'));
@@ -110,6 +111,7 @@ class RouteFilterControl {
                     maxHeight: window.innerHeight * 0.9,
                     modal: true,
                     resizable: false,
+                    title: 'Routes',
                     buttons: {
                         'None': () => {
                             document.querySelectorAll('input[name="route"]').forEach(it => it.checked = false);
@@ -141,6 +143,43 @@ class RouteFilterControl {
     }
 }
 
+class AnnouncementsControl {
+    onAdd(map) {
+        this._container = document.createElement('div');
+        this._container.classList.add('mapboxgl-ctrl', 'mapboxgl-ctrl-group');
+        this._container.addEventListener('contextmenu', (e) => e.preventDefault());
+
+        const button = domCreate('button', 'announcementsButton', 'custom-map-control-button', this._container);
+        button.type = 'button';
+        button.style.display = 'none';
+        button.addEventListener('click', () => {
+            const announcementsHtml = announcements.map(it => `<h3>${it.title}</h3>${it.html}`)
+                .join('<br><hr><br>');
+            $("#dialog")
+                .html(announcementsHtml)
+                .dialog({
+                    autoOpen: false,
+                    draggable: false,
+                    maxHeight: window.innerHeight * 0.9,
+                    modal: true,
+                    resizable: false,
+                    title: 'Announcements',
+                    buttons: {
+                        'Close': () => {
+                            $("#dialog").dialog('close');
+                        },
+                    },
+                })
+                .dialog('open');
+        });
+        return this._container;
+    }
+
+    onRemove() {
+        this._container.parentNode.removeChild(this._container);
+    }
+}
+
 function onSearchClick(layerID, featureID) {
     const geoJsonToSearch = layerID === 'Rutgers buildings' ? buildingsGeoJSON
         : layerID === 'Rutgers parking lots' ? parkingLotsGeoJSON
@@ -390,6 +429,16 @@ async function refreshSegmentsVehiclesAndSelectedPlace(userChangedRoutesShown) {
     }
 }
 
+function refreshAnnouncementsButton() {
+    const announcementsButton = document.getElementById('announcementsButton');
+    if (announcements && announcements.length > 0) {
+        announcementsButton.textContent = `Announcements (${announcements.length})`;
+        announcementsButton.style.display = 'block';
+    } else {
+        announcementsButton.style.display = 'none';
+    }
+}
+
 mapboxgl.accessToken = mapboxKey;
 const map = new mapboxgl.Map({
     container: 'map', // container ID
@@ -443,6 +492,8 @@ map.on('load', async () => {
 
     map.addControl(new RouteFilterControl(), 'top-left');
 
+    map.addControl(new AnnouncementsControl(), 'top-left');
+
     // Add controls to fly to NB/NWK/CMDN
     map.addControl(new FlyToCampusControl());
 
@@ -593,5 +644,19 @@ map.on('load', async () => {
         setTimeout(fetchBusStuff, 5000);
     }
 
+    async function fetchAnnouncements() {
+        try {
+            announcements = (await (await fetch('https://feeds.transloc.com/3/announcements?contents=true&agencies=1323')).json()).announcements;
+        } catch (error) {
+            setTimeout(fetchAnnouncements, 5 * 60 * 1000);
+            return;
+        }
+
+        refreshAnnouncementsButton();
+
+        setTimeout(fetchAnnouncements, 5 * 60 * 1000);
+    }
+
     fetchBusStuff();
+    fetchAnnouncements();
 });
