diff options
| -rw-r--r-- | .gitmodules | 3 | ||||
| -rw-r--r-- | examples/bus.html | 2 | ||||
| m--------- | resources/uos-live.js | 0 | ||||
| -rw-r--r-- | src/leaflet-soton.css | 45 | ||||
| -rw-r--r-- | src/leaflet-soton.js | 176 |
5 files changed, 209 insertions, 17 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/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 = "↻"; + + 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() { |