Add toolbar to geozone editor

5 files changed, 84 insertions, 36 deletions

diff --git a/web/app/Application.js b/web/app/Application.js
index 5911579b8..392a9907f 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -55,7 +55,8 @@ Ext.define('Traccar.Application', {
         'Geofences',
         'AllGeofences',
         'Notifications',
-        'AllNotifications'
+        'AllNotifications',
+        'GeozoneTypes'
     ],
 
     controllers: [
diff --git a/web/app/Style.js b/web/app/Style.js
index 309a3937e..ec007e674 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -54,6 +54,7 @@ Ext.define('Traccar.Style', {
     mapColorUnknown: 'rgba(250, 190, 77, 1.0)',
     mapColorOffline: 'rgba(255, 84, 104, 1.0)',
     mapColorReport: 'rgba(21, 127, 204, 1.0)',
+    mapColorOverlay: 'rgba(21, 127, 204, 0.2)',
 
     mapRadiusNormal: 9,
     mapRadiusSelected: 14,
diff --git a/web/app/store/GeozoneTypes.js b/web/app/store/GeozoneTypes.js
new file mode 100644
index 000000000..a41bf1501
--- /dev/null
+++ b/web/app/store/GeozoneTypes.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * 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.
+ */
+
+Ext.define('Traccar.store.GeozoneTypes', {
+    extend: 'Ext.data.Store',
+    fields: ['key', 'name'],
+
+    data: [{
+        key: 'Polygon',
+        name: Strings.mapShapePolygon
+    }, {
+        key: 'Circle',
+        name: Strings.mapShapeCircle
+    }]
+});
diff --git a/web/app/view/GeofenceMap.js b/web/app/view/GeofenceMap.js
index 8ec5ac224..2538a8b16 100644
--- a/web/app/view/GeofenceMap.js
+++ b/web/app/view/GeofenceMap.js
@@ -23,61 +23,71 @@ Ext.define('Traccar.view.GeofenceMap', {
     ],
 
     controller: 'geofenceMap',
+    bodyBorder: true,
+
+    tbar: {
+        items: [{
+            xtype: 'combobox',
+            store: 'GeozoneTypes',
+            valueField: 'id',
+            displayField: 'name'
+        }, {
+            xtype: 'tbfill'
+        }, {
+            text: Strings.sharedSave,
+            handler: 'onSaveClick'
+        }, {
+            text: Strings.sharedCancel,
+            handler: 'onCancelClick'
+        }]
+    },
 
     initMap: function () {
+        var map, featureOverlay;
         this.callParent();
 
-        var map = this.map;
+        map = this.map;
 
-        var features = new ol.Collection();
-        var featureOverlay = new ol.layer.Vector({
-            source: new ol.source.Vector({features: features}),
+        this.features = new ol.Collection();
+        featureOverlay = new ol.layer.Vector({
+            source: new ol.source.Vector({
+                features: this.features
+            }),
             style: new ol.style.Style({
                 fill: new ol.style.Fill({
-                    color: 'rgba(255, 255, 255, 0.2)'
+                    color: Traccar.Style.mapColorOverlay
                 }),
                 stroke: new ol.style.Stroke({
-                    color: '#ffcc33',
-                    width: 2
+                    color: Traccar.Style.mapColorReport,
+                    width: Traccar.Style.mapRouteWidth
                 }),
                 image: new ol.style.Circle({
-                    radius: 7,
+                    radius: Traccar.Style.mapRadiusNormal,
                     fill: new ol.style.Fill({
-                        color: '#ffcc33'
+                        color: Traccar.Style.mapColorReport
                     })
                 })
             })
         });
         featureOverlay.setMap(map);
 
-        var modify = new ol.interaction.Modify({
-            features: features,
-            // the SHIFT key must be pressed to delete vertices, so
-            // that new vertices can be drawn at the same position
-            // of existing vertices
+        map.addInteraction(new ol.interaction.Modify({
+            features: this.features,
             deleteCondition: function(event) {
-                return ol.events.condition.shiftKeyOnly(event) &&
-                    ol.events.condition.singleClick(event);
+                return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
             }
-        });
-        map.addInteraction(modify);
-
-        var draw; // global so we can remove it later
-        //var typeSelect = document.getElementById('type');
+        }));
+    },
 
-        function addInteraction() {
-            draw = new ol.interaction.Draw({
-                features: features,
-                type: 'Polygon' // (typeSelect.value)
-            });
-            map.addInteraction(draw);
-        }
-
-        /*typeSelect.onchange = function() {
-            map.removeInteraction(draw);
-            addInteraction();
-        };*/
+    addInteraction: function () {
+        this.draw = new ol.interaction.Draw({
+            features: this.features,
+            type: 'Polygon' // (typeSelect.value)
+        });
+        this.map.addInteraction(this.draw);
+    },
 
-        addInteraction();
+    removeInteraction: function () {
+        this.map.removeInteraction(this.draw);
     }
 });
diff --git a/web/app/view/GeofenceMapController.js b/web/app/view/GeofenceMapController.js
index bc0fbfe1b..d3915fd46 100644
--- a/web/app/view/GeofenceMapController.js
+++ b/web/app/view/GeofenceMapController.js
@@ -16,5 +16,13 @@
 
 Ext.define('Traccar.view.GeofenceMapController', {
     extend: 'Ext.app.ViewController',
-    alias: 'controller.geofenceMap'
+    alias: 'controller.geofenceMap',
+
+    onSaveClick: function (button) {
+        button.up('window').close();
+    },
+
+    onCancelClick: function (button) {
+        button.up('window').close();
+    }
 });