diff options
| -rw-r--r-- | web/simple/app.js | 111 |
1 files changed, 75 insertions, 36 deletions
diff --git a/web/simple/app.js b/web/simple/app.js index d622e5c..ed889f1 100644 --- a/web/simple/app.js +++ b/web/simple/app.js @@ -1,5 +1,5 @@ /* - * Copyright 2016 Anton Tananaev (anton@traccar.org) + * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org) * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,21 +14,50 @@ * limitations under the License. */ -var url = 'http://localhost:8082'; -var token = 'TOKEN'; +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, "find", { + value: function(predicate) { + var value; + for (var i = 0; i < this.length; i++) { + value = this[i]; + if (predicate.call(arguments[1], value, i, this)) { + return value; + } + } + return undefined; + } + }); +} -var style = new ol.style.Style({ - image: new ol.style.Circle({ - fill: new ol.style.Fill({ - color: 'teal' - }), - stroke: new ol.style.Stroke({ - color: 'navy', - width: 2 +var url = window.location.protocol + '//' + window.location.host; +var token = (window.location.search.match(/token=([^&#]+)/) || [])[1]; + +var style = function (label) { + return new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'teal' + }), + stroke: new ol.style.Stroke({ + color: 'black', + width: 2 + }), + radius: 7 }), - radius: 7 - }) -}); + text: new ol.style.Text({ + text: label, + fill: new ol.style.Fill({ + color: 'black' + }), + stroke: new ol.style.Stroke({ + color: 'white', + width: 2 + }), + font: 'bold 12px sans-serif', + offsetY: -16 + }) + }); +}; var source = new ol.source.Vector(); @@ -65,33 +94,43 @@ var ajax = function (method, url, callback) { xhr.send() }; -ajax('GET', url + '/api/session?token=' + token, function(user) { - ajax('GET', url + '/api/devices', function(devices) { +ajax('GET', url + '/api/server', function(server) { + ajax('GET', url + '/api/session?token=' + token, function(user) { + + map.getView().setCenter(ol.proj.fromLonLat([ + user.longitude || server.longitude || 0.0, + user.latitude || server.latitude || 0.0 + ])); + map.getView().setZoom(user.zoom || server.zoom || 2); + + ajax('GET', url + '/api/devices', function(devices) { - var socket = new WebSocket('ws' + url.substring(4) + '/api/socket'); + var socket = new WebSocket('ws' + url.substring(4) + '/api/socket'); - socket.onclose = function (event) { - console.log('socket closed'); - }; + socket.onclose = function (event) { + console.log('socket closed'); + }; - socket.onmessage = function (event) { - var data = JSON.parse(event.data); - if (data.positions) { - for (i = 0; i < data.positions.length; i++) { - var position = data.positions[i]; - var marker = markers[position.deviceId]; - var point = new ol.geom.Point(ol.proj.fromLonLat([position.longitude, position.latitude])); - if (!marker) { - marker = new ol.Feature(point); - marker.setStyle(style); - markers[position.deviceId] = marker; - source.addFeature(marker); - } else { - marker.setGeometry(point); + socket.onmessage = function (event) { + var data = JSON.parse(event.data); + if (data.positions) { + for (i = 0; i < data.positions.length; i++) { + var position = data.positions[i]; + var marker = markers[position.deviceId]; + var point = new ol.geom.Point(ol.proj.fromLonLat([position.longitude, position.latitude])); + if (!marker) { + var device = devices.find(function (device) { return device.id === position.deviceId }); + marker = new ol.Feature(point); + marker.setStyle(style(device.name)); + markers[position.deviceId] = marker; + source.addFeature(marker); + } else { + marker.setGeometry(point); + } } } - } - }; + }; + }); }); }); |