summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitmodules3
-rw-r--r--examples/bus.html2
-rw-r--r--resources/leaflet-route/leaflet-route.js37
m---------resources/uos-live.js0
-rw-r--r--src/leaflet-soton.css45
-rw-r--r--src/leaflet-soton.js176
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() {
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-23 10:20:52 +0000