Add bus routes sidebar

Also add the bus routes to the map.

4 files changed, 283 insertions, 5 deletions

diff --git a/Gruntfile.js b/Gruntfile.js
index ee4e1c7..8aba4c5 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -18,6 +18,7 @@ module.exports = function(grunt) {
           'libraries/leaflet-soton/resources/leaflet-hash/leaflet-hash.js',
           'libraries/leaflet-soton/resources/leaflet-indoor/leaflet-indoor.js',
           'libraries/leaflet-soton/resources/leaflet-route/leaflet-route.js',
+          'libraries/leaflet-soton/resources/leaflet-textpath/leaflet.textpath.js',
           'libraries/leaflet-soton/src/leaflet-soton.js',
           'scripts.js'
         ],
diff --git a/index.html b/index.html
index 4a24fd9..b0bf3d6 100644
--- a/index.html
+++ b/index.html
@@ -45,15 +45,20 @@
             </a>
           </li>
           <li id="navBuildingsLi">
-            <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="buildingsSidebarLink">
+            <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in">
               Buildings
             </a>
           </li>
           <li id="navSitesLi">
-            <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="sitesSidebarLink">
+            <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in">
               Sites
             </a>
           </li>
+          <li id="navBusRoutesLi">
+            <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in">
+              Bus Routes
+            </a>
+          </li>
         </ul>
       </div><!--/.navbar-collapse -->
     </div>
@@ -161,6 +166,26 @@
           </div>
         </div>
       </div>
+      <div id="busRoutesSidebar" style="display: none;">
+        <div class="sidebar-wrapper">
+          <div class="panel panel-default" style="margin: 0px; border: none;
+          border-radius: 0px; -webkit-box-shadow: none; box-shadow: none;"
+                                           id="busRoutes">
+            <div class="panel-heading">
+              <h3 class="panel-title">Bus Routes
+                <button id="busRoutesSidebarHideButton"
+                  type="button"
+                  class="btn btn-xs btn-default pull-right"
+                  style="margin-top: -2px;" >
+                  <i class="glyphicon glyphicon-chevron-left"></i>
+                </button>
+              </h3>
+            </div>
+            <div id="busRoutesContent">
+            </div>
+          </div>
+        </div>
+      </div>
 
       <div id="map"></div>
     </div>
diff --git a/scripts.js b/scripts.js
index a408c6d..ee2a8b9 100644
--- a/scripts.js
+++ b/scripts.js
@@ -6,17 +6,20 @@
 
     var $sidebars = [
         $('#buildingsSidebar'),
-        $('#sitesSidebar')
+        $('#sitesSidebar'),
+        $('#busRoutesSidebar')
     ];
 
     var $sidebarLi = [
         $('#navBuildingsLi'),
-        $('#navSitesLi')
+        $('#navSitesLi'),
+        $('#navBusRoutesLi')
     ];
 
     var sidebarHideButtons = [
         "buildingsSidebarHideButton",
-        "sitesSidebarHideButton"
+        "sitesSidebarHideButton",
+        "busRoutesSidebarHideButton"
     ];
 
     function hideSidebars() {
@@ -64,6 +67,7 @@
         indoor: true,
         popupWidth: 400,
         popupHeight: 550,
+        busRoutes: true,
         zoomControl: false,
         levelControlPosition: 'bottomleft'
     });
@@ -130,8 +134,204 @@
     }
 
 
+    function createStopList(route) {
+        var ul = L.DomUtil.create('ul', 'stop-list');
+
+        ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
+
+        var busStops = map.routeLayer.getStops();
+
+        for (var i in route.properties.stops) {
+            var stop = route.properties.stops[i];
+            var li = L.DomUtil.create('li', '', ul);
+            var busStop = busStops[stop];
+            var a = L.DomUtil.create('a', '', li);
+
+            if (typeof(busStop) !== "undefined") {
+                a.textContent = busStop.properties.name;
+                a.onclick = (function(uri) {
+                    return function() {
+                        if (document.body.clientWidth <= 767) {
+                          hideSidebars();
+
+                          map.invalidateSize();
+                        }
+
+                        map.routeLayer.panToStop(uri, {
+                            animate: true
+                        });
+                    };
+                })(busStop.properties.uri);
+                a.onmouseover = (function(uri) {
+                    return function() {
+                        map.routeLayer.highlightStop(uri);
+                    };
+                })(busStop.properties.uri);
+                a.onmouseout = (function(uri) {
+                    return function() {
+                        map.routeLayer.resetStop(uri);
+                    };
+                })(busStop.properties.uri);
+            } else {
+                a.textContent = "Name Unknown";
+            }
+        }
+
+        return ul;
+    }
+
+    function createRouteList(routeMaster, routeSelected) {
+        var ul = L.DomUtil.create('ul', 'route-list');
+
+        var stopLists = {};
+        for (var i in routeMaster.routes) {
+            var route = routeMaster.routes[i];
+
+            var li = L.DomUtil.create('li', '', ul);
+            var a = L.DomUtil.create('a', null, li);
+
+            a.style.background = route.properties.colour;
+
+            a.textContent = "U";
+            var strong = document.createElement("strong");
+            strong.textContent = route.properties.ref.slice(1);
+            a.appendChild(strong);
+
+            a.onclick = (function(routeName) {
+                return function() {
+                    a.style.border = "2px";
+
+                    routeSelected(routeName);
+                };
+            })(route.properties.name);
+        }
+
+        return ul;
+    }
+
+    function buildBusRoutesControl() {
+        function showStopList(name) {
+            var previousActiveRoute = activeRouteForRouteMaster[activeRouteMaster];
+
+            console.log("hiding " + previousActiveRoute);
+            stopLists[previousActiveRoute].style.display = "none";
+            descriptions[previousActiveRoute].style.display = "none"
+            console.log("showing " + name);
+            stopLists[name].style.display = "block";
+            descriptions[name].style.display = "block"
+        }
+
+        var busRouteSidebarContent = document.getElementById("busRoutesContent");
+
+        var routeMasters = map.routeLayer.getRouteMasters();
+        var routeMasterRouteLists = {};
+        var stopLists = {};
+        var descriptions = {};
+
+        var ul = L.DomUtil.create('ul', '', busRouteSidebarContent);
+        ul.id = "route-master-list";
+
+        var routeMasterNames = Object.keys(routeMasters);
+        routeMasterNames.sort(function(a, b) {
+            var refs = {
+                "U1": 1,
+                "U2": 2,
+                "U6": 6,
+                "U9": 9,
+                "U1N": 10
+            };
+
+            return refs[a] - refs[b];
+        });
+
+        var activeRouteMaster = "U1";
+        var activeRouteForRouteMaster = {};
+
+        for (var i in routeMasterNames) {
+            var routeMasterName = routeMasterNames[i];
+            var routeMaster = routeMasters[routeMasterName];
+
+            var li = L.DomUtil.create('li', '', ul);
+            var a = L.DomUtil.create('a', '', li);
+            a.style.background = routeMaster.routes[0].properties.colour;
+            a.textContent = "U";
+
+            var strong = document.createElement("strong");
+            strong.textContent = routeMasterName.slice(1);
+
+            console.log(routeMaster);
+
+            a.appendChild(strong);
+
+            activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
+
+            a.onclick = (function(routeMasterName) {
+                return function() {
+                    routeMasterRouteLists[activeRouteMaster].style.display = "none";
+                    routeMasterRouteLists[routeMasterName].style.display = "block";
+
+                    var activeRoute = activeRouteForRouteMaster[routeMasterName];
+
+                    showStopList(activeRoute);
+
+                    activeRouteMaster = routeMasterName;
+
+                    map.routeLayer.resetRoutes();
+                    map.routeLayer.highlightRoute(activeRoute);
+                };
+            })(routeMasterName);
+
+            // The route lists
+
+            var routeList = createRouteList(routeMaster, function(routeName) {
+                map.routeLayer.resetRoutes();
+
+                showStopList(routeName);
+
+                activeRouteForRouteMaster[activeRouteMaster] = routeName;
+                map.routeLayer.highlightRoute(routeName);
+            });
+
+            routeMasterRouteLists[routeMasterName] = routeList;
+
+            routeList.style.display = "none";
+            busRouteSidebarContent.appendChild(routeList);
+
+            // The stops
+            for (var i in routeMaster.routes) {
+                var route = routeMaster.routes[i];
+
+                // Add the description
+                var description = L.DomUtil.create('div', 'ls-route-description');
+                description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
+
+                descriptions[route.properties.name] = description;
+
+                // Add the list of stops
+                var stopList = createStopList(route);
+                stopLists[route.properties.name] = stopList;
+
+                if (activeRouteMaster === routeMasterName &&
+                    activeRouteForRouteMaster[routeMasterName] === route.properties.name) {
+
+                    stopList.style.display = "block";
+                    description.style.display = "block";
+                } else {
+                    stopList.style.display = "none";
+                    description.style.display = "none";
+                }
+
+                busRouteSidebarContent.appendChild(description);
+                busRouteSidebarContent.appendChild(stopList);
+            }
+        }
+
+        routeMasterRouteLists[activeRouteMaster].style.display = "block";
+    }
+
     /* Typeahead search functionality */
     LS.getData(function(data) {
+      buildBusRoutesControl();
 
       function buildRow(first, second) {
         var tr = document.createElement("tr");
diff --git a/style.css b/style.css
index 71cf824..11b1e53 100644
--- a/style.css
+++ b/style.css
@@ -28,6 +28,58 @@ input[type="radio"], input[type="checkbox"] {
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
+#route-master-list {
+    list-style: none;
+    padding-left: 0px;
+}
+
+#route-master-list li a {
+    font: 24px/30px Arial, Helvetica, sans-serif;
+    width: 100%;
+    border-bottom-width: 2px;
+    border-top-width: 2px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-style: solid;
+    border-color: #000000;
+    background: #a1a1a1;
+    color: white;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+}
+
+.route-list {
+    list-style: none;
+    padding-left: 0px;
+}
+
+.route-list li {
+    display: inline;
+}
+
+.route-list li a {
+    font: 22px/22px Arial, Helvetica, sans-serif;
+    padding-right: 4px;
+    padding-left: 4px;
+    margin-right: 3px;
+    margin-left: 3px;
+    border-radius: 25px;
+    background: #a1a1a1;
+    color: white;
+    text-decoration: none;
+}
+
+.stop-list {
+    padding-left: 25px;
+    bottom: 0;
+    overflow: auto;
+    position: absolute;
+    top: 295px;
+    width: 100%;
+    margin-bottom: 0px;
+}
+
 .sidebar-wrapper {
   width: 100%;
   height: 100%;