Add bus routes sidebar

Also add the bus routes to the map.

1 files changed, 203 insertions, 3 deletions

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");