1 files changed, 97 insertions, 0 deletions
diff --git a/web/simple/app.js b/web/simple/app.js
new file mode 100644
index 00000000..5ae8ac2c
--- /dev/null
+++ b/web/simple/app.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2016 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var url = 'http://localhost:8082';
+var token = 'TOKEN';
+
+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
+        }),
+        radius: 7
+    })
+});
+
+var source = new ol.source.Vector();
+
+var markers = {};
+
+var map = new ol.Map({
+    layers: [
+        new ol.layer.Tile({
+            source: new ol.source.OSM()
+        }),
+        new ol.layer.Vector({
+            source: source
+        })
+    ],
+    target: 'map',
+    view: new ol.View({
+        center: [0, 0],
+        zoom: 2
+    })
+});
+
+var ajax = function (method, url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+    xhr.open(method, url, true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            callback(JSON.parse(xhr.responseText));
+        }
+    };
+    if (method == 'POST') {
+        xhr.setRequestHeader('Content-type', 'application/json');
+    }
+    xhr.send()
+};
+
+ajax('GET', url + '/api/session?token=' + token, function(user) {
+    ajax('GET', url + '/api/devices', function(devices) {
+
+        var socket = new WebSocket('ws' + url.substring(4) + '/api/socket');
+
+        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);
+                    }
+                }
+            }
+        };
+
+    });
+});