wip

* filter showable buses by route
* sorting route ui display (html)

html/js/RideLogicAVLS.js

@@ -17,6 +17,7 @@
 // along with RideLogic.  If not, see <https://www.gnu.org/licenses/>.
 //
 
+var MAX_ICON = 128;
 
 var g_info = {
   "geojson" : {},
@@ -24,7 +25,9 @@ var g_info = {
   "route_path": {},
 
   "active_route" : [],
-  "ol_route_layer" : {}
+  "ol_route_layer" : {},
+
+  "json_gtfs": {}
 };
 
 var Feature = ol.Feature;
@@ -98,8 +101,8 @@ function example_change_image() {
 //---
 
 var vectorSource = new VectorSource();
-var _icon = [];
-for (let ii=0; ii<2; ii++) {
+var g_icon = [];
+for (let ii=0; ii<MAX_ICON; ii++) {
 
   let w = 1/32.0;
   let lonlat = [
@@ -114,6 +117,7 @@ for (let ii=0; ii<2; ii++) {
 
   let iconStyle = new Style({
     image: new Icon({
+      //scale: [2, 2],
       anchor: [0.5, 46],
       anchorXUnits: 'fraction',
       anchorYUnits: 'pixels',
@@ -123,7 +127,7 @@ for (let ii=0; ii<2; ii++) {
 
   iconStyle.getImage().setOpacity(0.0);
 
-  _icon.push({ "style": iconStyle, "feature": iconFeature });
+  g_icon.push({ "style": iconStyle, "feature": iconFeature });
   iconFeature.setStyle(iconStyle);
   vectorSource.addFeature(iconFeature);
 
@@ -297,29 +301,71 @@ function update_buses(json_gtfs) {
     let lon = p.longitude;
     let bearing = p.bearing;
 
+    let route_id = -1;
+
+    let route_str = "";
+
+    if ((typeof json_gtfs.entityList[ii] !== "undefined") &&
+        (typeof json_gtfs.entityList[ii].vehicle !== "undefined") &&
+        (typeof json_gtfs.entityList[ii].vehicle.trip !== "undefined") &&
+        (typeof json_gtfs.entityList[ii].vehicle.trip.routeId !== "undefined")) {
+      route_str = "_r" + json_gtfs.entityList[ii].vehicle.trip.routeId;
+      route_id = json_gtfs.entityList[ii].vehicle.trip.routeId;
+    }
+    else { }
 
     let lonlat = [ lon , lat ];
     let merc = fromLonLat(lonlat);
 
-    if (typeof _icon[ii] === "undefined") { continue; }
+    if (typeof g_icon[ii] === "undefined") { continue; }
 
-    _icon[ii].feature.getGeometry().setCoordinates(merc);
+    g_icon[ii].feature.getGeometry().setCoordinates(merc);
 
     bearing = (bearing % 360 );
     if (bearing < 0) { bearing += 360.0; }
     let iheading = Math.floor( (parseInt( bearing ) + 23) / 45 );
     if (iheading > 7) { iheading = 0; }
 
+    let bearing_str = "_stat"
+    if (p.speed != 0) {
+      bearing_str = "_" + bearingIdxLookup[iheading];
+    }
+
     let _nuimg = new Icon({
+        //scale: [1.5, 1.5],
         anchor: [0.5, 46],
         anchorXUnits: 'fraction',
         anchorYUnits: 'pixels',
-        src: 'data/bus_gw_' + bearingIdxLookup[iheading] + '.png',
+        //src: 'data/bus_gw' + route_str + "_" + bearingIdxLookup[iheading] + '.png',
+        src: 'data/bus_gw' + route_str + bearing_str + '.png',
       });
-    _icon[ii].style.setImage(_nuimg);
-    _icon[ii].style.getImage().setOpacity(1.0);
+    g_icon[ii].style.setImage(_nuimg);
+
+    if (g_info.active_route.length == 0) {
+      g_icon[ii].style.getImage().setOpacity(0.8);
+    }
+    else {
+
+      let is_active = false;
+      for (let _aridx=0; _aridx < g_info.active_route.length; _aridx++) {
+
+        if ( g_info.active_route[_aridx] == route_id) {
+          is_active = true;
+        }
+      }
+
+      if (is_active)  {
+        g_icon[ii].style.getImage().setOpacity(0.8);
+      }
+      else {
+        g_icon[ii].style.getImage().setOpacity(0.0);
+      }
+    }
+
+  }
 
-    //console.log(">>", id, lat, lon, bearing);
+  for (let ii=json_gtfs.entityList.length; ii<MAX_ICON; ii++) {
+    g_icon[ii].style.getImage().setOpacity(0.0);
   }
 
   busLayer.getSource().changed();
@@ -330,8 +376,8 @@ function fetch_gtfs_vehicle_position() {
   xhr.onload = function() {
     let ab = xhr.response;
     let json_pb  = pb2json.pb2json(ab);
-    //console.log(">>>", json_pb);
 
+    g_info.json_gtfs = json_pb;
     update_buses(json_pb)
   };
 
@@ -342,6 +388,16 @@ function fetch_gtfs_vehicle_position() {
 
 //--
 
+function ui_clear_routes() {
+  for (let i=0; i<g_info.active_route; i++) {
+    let route_id = g_info.active_route[i];
+    let route_layer = g_info.ol_route_layer[route_id];
+    g_map.removeLayer( route_layer );
+  }
+  g_info.active_route = [ ];
+
+}
+
 function ui_show_single_route(route_id) {
   if (!(route_id in g_info.ol_route_layer)) {
     console.log("route", route_id, "not found in g_info.ol_route_layer");
@@ -485,6 +541,9 @@ function ui_add_route() {
 
   ele.innerHTML = '';
 
+  let _route_list = [];
+  let _route_long_name = {};
+
   let trip = g_info.geojson.features;
   for (let i=0; i<trip.length; i++) {
     if (trip[i].type != "trip") { continue; }
@@ -495,20 +554,41 @@ function ui_add_route() {
     g_info.route[_route.route_id] = prop.route_stops;
     g_info.route_path[_route.route_id] = trip[i].geometry.coordinates;
 
+    _route_list.push( _route.route_id );
+    _route_long_name[ _route.route_id ] = prop.route.route_long_name;
+  }
+
+  _route_list.sort( (a,b) => {
+    let _a = parseInt(a), _b = parseInt(b);
+    if (a<b) { return -1; }
+    if (a>b) { return 1; }
+    return 0;
+  });
+
+  for (let i=0; i<_route_list.length; i++) {
+    let _rln = _route_list[i];
     let _a = document.createElement("a");
     _a.classList.add("list-group-item");
     _a.classList.add("list-gorup-item-action");
     _a.classList.add("list-gorup-item-light");
     _a.classList.add("p-3");
-    _a.innerText = prop.route.route_long_name;
+    _a.innerText = _route_long_name[_rln];
     _a.onclick = (function(_r) {
       return function() {
-        ui_show_single_route(_r);
+
+        if ( g_info.active_route == _r) {
+          ui_clear_routes();
+          update_buses(g_info.json_gtfs);
+        }
+        else {
+          ui_show_single_route(_r);
+          update_buses(g_info.json_gtfs);
+        }
+
       }
-    })(_route.route_id);
+    })(_route_list[i]);
 
     ele.appendChild(_a);
-
   }
 
   toggle_sidebar(g_side_toggle);