Use the uos-live.js library for the bus stop popups

This replaces the bus.southampton.ac.uk iframe, which improves performance,
responsiveness, and the integration of the user interface.

6 files changed, 233 insertions, 30 deletions

diff --git a/.gitmodules b/.gitmodules
index 9bd7205..6e51c9d 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -37,3 +37,6 @@
 [submodule "resources/jquery"]
 	path = resources/jquery
 	url = https://github.com/jquery/jquery.git
+[submodule "resources/uos-live.js"]
+	path = resources/uos-live.js
+	url = git://git.cbaines.net/uos-live.js
diff --git a/examples/bus.html b/examples/bus.html
index 43de40f..3086d43 100644
--- a/examples/bus.html
+++ b/examples/bus.html
@@ -34,6 +34,8 @@
     <script src="../resources/leaflet-indoor/leaflet-indoor.js"></script>
     <script src="../resources/leaflet-sidebar/src/L.Control.Sidebar.js"></script>
     <script src="../resources/leaflet-route/leaflet-route.js"></script>
+    <script src="../resources/uos-live.js/libraries/pollymer/pollymer.js"></script>
+    <script src="../resources/uos-live.js/uos-live.js"></script>
 
     <script src="../src/leaflet-soton.js"></script>
 
diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index dbce204..4d78148 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -159,6 +159,8 @@ L.Control.Route.createRouteMasterList = function(routeMasters, routeSelected, so
         var li = L.DomUtil.create('li', '', ul);
         var a = L.DomUtil.create('a', null, li);
 
+        a.className = "ls-route-master-link";
+
         a.style.background = routeMaster.routes[0].properties.colour;
 
         a.textContent = "U";
@@ -176,6 +178,25 @@ L.Control.Route.createRouteMasterList = function(routeMasters, routeSelected, so
     return ul;
 };
 
+L.Control.Route.createRouteLink = function(route, routeSelected) {
+    var a = document.createElement("a");
+
+    a.className = "ls-route-link";
+
+    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() {
+        routeSelected();
+    };
+
+    return a;
+};
+
 L.Control.Route.createRouteList = function(routeMaster, routeSelected) {
     var ul = L.DomUtil.create('ul', 'ls-route-list');
 
@@ -183,20 +204,10 @@ L.Control.Route.createRouteList = function(routeMaster, routeSelected) {
         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() {
-                routeSelected(routeName);
-            };
-        })(route.properties.name);
+        li.appendChild(L.Control.Route.createRouteLink(route, function() {
+            routeSelected(route.properties.name);
+        }));
     }
 
     return ul;
diff --git a/resources/uos-live.js b/resources/uos-live.js
new file mode 160000
+Subproject ddba621bb02ef18cf180194a46f6f267b7f626e
diff --git a/src/leaflet-soton.css b/src/leaflet-soton.css
index 1baa2f4..3b6cd46 100644
--- a/src/leaflet-soton.css
+++ b/src/leaflet-soton.css
@@ -193,7 +193,7 @@
     display: inline;
 }
 
-.ls-route-master-list li a {
+.ls-route-master-link {
     font: 28px/30px Arial, Helvetica, sans-serif;
     padding-right: 10px;
     padding-left: 10px;
@@ -204,7 +204,7 @@
     border-style: solid;
     border-color: #000000;
     background: #a1a1a1;
-    color: white;
+    color: white !important;
     font-weight: bold;
 }
 
@@ -217,7 +217,7 @@
     display: inline;
 }
 
-.ls-route-list li a {
+.ls-route-link {
     font: 20px/22px Arial, Helvetica, sans-serif;
     padding-right: 10px;
     padding-left: 10px;
@@ -228,7 +228,7 @@
     border-style: solid;
     border-color: #000000;
     background: #a1a1a1;
-    color: white;
+    color: white !important;
     font-weight: bold;
 }
 
@@ -244,3 +244,40 @@
 .leaflet-popup-content {
     margin: 6px 9px;
 }
+
+.ls-bus-times-table {
+    border-collapse: collapse
+}
+
+.ls-bus-times-table tr td {
+    padding: 0.4em;
+}
+
+.ls-bus-times-table-seperating-td {
+    border-top: 1pt solid black;
+}
+
+.ls-spinning-arrow {
+  font-size: 4em;
+  padding-left: auto;
+  padding-right: auto;
+  -animation: spin .7s infinite linear;
+  -ms-animation: spin .7s infinite linear;
+  -webkit-animation: spinw .7s infinite linear;
+  -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: scale(1) rotate(0deg);}
+  to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+  from { -webkit-transform: rotate(0deg);}
+  to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+  from { -moz-transform: rotate(0deg);}
+  to { -moz-transform: rotate(360deg);}
+}
diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index 238a921..9fb8998 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -549,9 +549,14 @@ SELECT * WHERE {\
                 });
             },
             busStop: function(properties, routeLayer) {
-                return getTemplateWrapper(properties, function(content) {
 
-                    var routesList = [];
+                var closeListener;
+
+                // getTemplateWrapper will call the function immediatly
+                var content = getTemplateWrapper(properties, function(content) {
+
+                    var routesInfo = {};
+
                     var routeMasters = routeLayer.getRouteMasters();
 
                     for (var routeMasterName in routeMasters) {
@@ -561,29 +566,168 @@ SELECT * WHERE {\
                             var route = routeMaster.routes[i];
 
                             if (properties.routes.indexOf(route.properties.ref) !== -1) {
-                                routesList.push(route);
+                                routesInfo[route.properties.ref] = route;
                             }
                         }
                     }
 
-                    var routeListControl = L.Control.Route.createRouteList({
+                    /*var routeListControl = L.Control.Route.createRouteList({
                         routes: routesList
                     }, function(routeName) {
                         routeLayer.resetRoutes();
                         routeLayer.highlightRoute(routeName);
                     });
 
-                    content.appendChild(routeListControl);
+                    content.appendChild(routeListControl);*/
+
+                    var busStop = properties.uri.slice(37);
+
+                    var timesTable = document.createElement("table");
+
+                    timesTable.className = "ls-bus-times-table";
+
+                    content.appendChild(timesTable);
+
+                    var loading = document.createElement("span");
+                    loading.innerHTML = "&#8635;";
+
+                    loading.className = "ls-spinning-arrow";
+
+                    timesTable.appendChild(loading);
+
+                    function groupStops(stops) {
+                        var result = {};
+
+                        for (var i in stops) {
+                            var stop = stops[i];
+
+                            if (stop.name in result) {
+                                result[stop.name].push(stop);
+                            } else {
+                                result[stop.name] = [stop];
+                            }
+                        }
+
+                        return result;
+                    }
+
+                    function groupedStopsToList(groupedStops) {
+                        var values = [];
+
+                        for (var name in groupedStops) {
+                            values.push({
+                                name: name,
+                                stops: groupedStops[name]
+                            });
+                        }
+
+                        return values.sort(function(a, b) {
+                          return b.stops.length - a.stops.length;
+                        });
+                    }
+
+                    function renderTimeData(stops) {
+                        console.log(stops);
+
+                        var groupedStops = groupStops(stops);
+
+                        for (var i in properties.routes) {
+                            var rName = properties.routes[i];
+                            if (!(rName in groupedStops)) {
+                                groupedStops[rName] = [];
+                            }
+                        }
+
+                        var stopsList = groupedStopsToList(groupedStops);
+
+                        timesTable.innerHTML = "";
+
+                        for (var i in stopsList) {
+                            var routeStops = stopsList[i].stops;
+                            var name = stopsList[i].name;
+
+                            console.log(routeStops);
+
+                            var tr = document.createElement("tr");
 
-                    var IFrame = document.createElement('iframe');
-                    IFrame.setAttribute('src', 'http://bus.southampton.ac.uk/bus-stop-iframe/' + properties.uri.slice(37)  + ".html")
-                    IFrame.setAttribute('frameBorder', '0');
-                    IFrame.setAttribute('style', 'width: 100%; height 100%;');
+                            var route = document.createElement("td");
 
-                    content.appendChild(IFrame);
+                            if (!(name in routesInfo)) {
+                                console.warn("skipping " + name);
+                                continue;
+                            }
+
+                            var a = L.Control.Route.createRouteLink(routesInfo[name], (function(name) {
+                                return function() {
+                                    routeLayer.resetRoutes();
+                                    routeLayer.highlightRoute(name);
+                                };
+                            })(routesInfo[name].properties.name));
+
+                            route.appendChild(a);
+
+                            tr.appendChild(route);
+
+                            if (routeStops.length === 0) {
+                                var none = document.createElement("td");
+                                none.textContent = "No busses";
+                                none.colSpan = 2;
+
+                                if (i !== 0) {
+                                    none.className = "ls-bus-times-table-seperating-td";
+                                }
+
+                                tr.appendChild(none);
+
+                                timesTable.appendChild(tr);
+
+                            } else {
+                                route.rowSpan = routeStops.length;
+
+                                for (var j in routeStops) {
+                                    var stop = routeStops[j];
+
+                                    var time = document.createElement("td");
+                                    var dest = document.createElement("td");
+
+                                    if (i != 0 && j == 0) {
+                                        time.className = "ls-bus-times-table-seperating-td";
+                                        dest.className = "ls-bus-times-table-seperating-td";
+                                    }
+
+                                    time.textContent = stop.time;
+                                    dest.textContent = stop.dest;
+
+                                    tr.appendChild(time);
+                                    tr.appendChild(dest);
 
-                    console.log(properties);
+                                    timesTable.appendChild(tr);
+                                    tr = document.createElement("tr");
+                                }
+                            }
+                        }
+                    }
+
+                    UoSLive.subscribeToBusStop(busStop, function(data) {
+
+                        console.log(data);
+
+                        renderTimeData(data.stops);
+                    });
+
+                    console.log(busStop);
+
+                    closeListener = function() {
+                        console.log("its been closed!");
+
+                        UoSLive.unsubscribeToBusStop(busStop);
+                    };
                 });
+
+                return {
+                    content: content,
+                    closeListener: closeListener
+                };
             },
             busRoute: function(properties) {
                 return getTemplateWrapper(properties, function(content) {
@@ -905,9 +1049,11 @@ SELECT * WHERE {\
                         stopOptions: {
                             onEachFeature: function(feature, layer) {
                                 layer.on('click', function(e) {
-                                    var content = LS.infoTemplates.busStop(feature.properties, routeLayer);
+                                    var template = LS.infoTemplates.busStop(feature.properties, routeLayer);
 
-                                    map.showInfo(content, e.latlng);
+                                    map.showInfo(template.content, e.latlng, {
+                                        closeListener: template.closeListener
+                                    });
                                 });
                             }
                         }
@@ -1343,6 +1489,10 @@ SELECT * WHERE {\
 
             popup.setContent(content);
 
+            if (options.closeListener) {
+                map.once('popupclose', options.closeListener);
+            }
+
             popup.openOn(map);
         },
         closeInfo: function() {