route highlighting

html/css/custom.css

@@ -51,4 +51,9 @@ img[data-src] {
   opacity: 0;
 }
 
-
+/*
+a .stripe {
+  color:white;
+  background: repeating-linear-gradient(45deg,#606dbc, #606dbc 10px, #465298 10px, #465298 20px);
+}
+*/

html/js/RideLogicAVLS.js

@@ -534,6 +534,21 @@ function post_process_geojson() {
 
 }
 
+// inifficient but goes through all A nodes of `ui_route_list`
+// to clear the background
+//
+function ui_clear_highlighted_route() {
+  let dom_route_list = document.getElementById("ui_route_list");
+  if (typeof dom_route_list.childNodes === "undefined") { return; }
+
+  for (let ii=0; ii<dom_route_list.childNodes.length; ii++) {
+    if (dom_route_list.childNodes[ii].nodeName == "A") {
+      dom_route_list.childNodes[ii].style.background = '';
+    }
+  }
+}
+
+
 // add routes to side menu
 //
 function ui_add_route() {
@@ -568,25 +583,42 @@ function ui_add_route() {
   for (let i=0; i<_route_list.length; i++) {
     let _rln = _route_list[i];
     let _a = document.createElement("a");
+    _a.id = "ui_route_idx" + i;
     _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 = _route_long_name[_rln];
-    _a.onclick = (function(_r) {
+    _a.onclick = (function(_r,_id) {
       return function() {
+        ui_clear_highlighted_route();
 
-        if ( g_info.active_route == _r) {
+        //if ( g_info.active_route == _r) {
+        if ( g_info.active_route.includes(_r) ) {
           ui_clear_routes();
           update_buses(g_info.json_gtfs);
+
+          let _button = document.getElementById("ui_route_toggle");
+          _button.innerHTML = "Route";
         }
         else {
           ui_show_single_route(_r);
           update_buses(g_info.json_gtfs);
+
+          // highlight selected row in list.
+          //
+          let _ele = document.getElementById(_id);
+          if (typeof _ele !== "undefined") {
+            _ele.style.background = "repeating-linear-gradient(45deg,#eee, #eee 10px, #fff 10px, #fff 20px)";
+          }
+
+          let _button = document.getElementById("ui_route_toggle");
+          _button.innerHTML = "Route (" + _r + ")";
+
         }
 
       }
-    })(_route_list[i]);
+    })(_route_list[i], _a.id);
 
     ele.appendChild(_a);
   }