Implement geofence saving

5 files changed, 51 insertions, 8 deletions

diff --git a/web/app/view/GeofenceDialog.js b/web/app/view/GeofenceDialog.js
index fa3bbe87f..febef235e 100644
--- a/web/app/view/GeofenceDialog.js
+++ b/web/app/view/GeofenceDialog.js
@@ -34,6 +34,11 @@ Ext.define('Traccar.view.GeofenceDialog', {
             xtype: 'textfield',
             name: 'description',
             fieldLabel: Strings.sharedDescription
+        }, {
+            xtype: 'hiddenfield',
+            name: 'area',
+            allowBlank: false,
+            reference: 'areaField'
         }]
     },
 
diff --git a/web/app/view/GeofenceDialogController.js b/web/app/view/GeofenceDialogController.js
index d8597457f..c8d518514 100644
--- a/web/app/view/GeofenceDialogController.js
+++ b/web/app/view/GeofenceDialogController.js
@@ -22,6 +22,20 @@ Ext.define('Traccar.view.GeofenceDialogController', {
         'Traccar.view.GeofenceMap'
     ],
 
+    config: {
+        listen: {
+            controller: {
+                '*': {
+                    saveArea: 'saveArea'
+                }
+            }
+        }
+    },
+
+    saveArea: function (value) {
+        this.lookupReference('areaField').setValue(value);
+    },
+
     onAreaClick: function (button) {
         Ext.create('Traccar.view.BaseWindow', {
             title: Strings.sharedArea,
diff --git a/web/app/view/GeofenceMap.js b/web/app/view/GeofenceMap.js
index 2538a8b16..e8a4dc5de 100644
--- a/web/app/view/GeofenceMap.js
+++ b/web/app/view/GeofenceMap.js
@@ -28,9 +28,12 @@ Ext.define('Traccar.view.GeofenceMap', {
     tbar: {
         items: [{
             xtype: 'combobox',
-            store: 'GeozoneTypes',
-            valueField: 'id',
-            displayField: 'name'
+            store: 'GeofenceTypes',
+            valueField: 'key',
+            displayField: 'name',
+            listeners: {
+                select: 'onTypeSelect'
+            }
         }, {
             xtype: 'tbfill'
         }, {
@@ -42,6 +45,10 @@ Ext.define('Traccar.view.GeofenceMap', {
         }]
     },
 
+    getFeatures: function () {
+        return this.features;
+    },
+
     initMap: function () {
         var map, featureOverlay;
         this.callParent();
@@ -79,15 +86,21 @@ Ext.define('Traccar.view.GeofenceMap', {
         }));
     },
 
-    addInteraction: function () {
+    addInteraction: function (type) {
         this.draw = new ol.interaction.Draw({
             features: this.features,
-            type: 'Polygon' // (typeSelect.value)
+            type: type
         });
+        this.draw.on('drawstart', function () {
+            this.features.clear();
+        }, this);
         this.map.addInteraction(this.draw);
     },
 
     removeInteraction: function () {
-        this.map.removeInteraction(this.draw);
+        if (this.draw) {
+            this.map.removeInteraction(this.draw);
+            this.draw = null;
+        }
     }
 });
diff --git a/web/app/view/GeofenceMapController.js b/web/app/view/GeofenceMapController.js
index d3915fd46..1d20ba966 100644
--- a/web/app/view/GeofenceMapController.js
+++ b/web/app/view/GeofenceMapController.js
@@ -19,10 +19,21 @@ Ext.define('Traccar.view.GeofenceMapController', {
     alias: 'controller.geofenceMap',
 
     onSaveClick: function (button) {
-        button.up('window').close();
+        var feature, formatter;
+        if (this.getView().getFeatures().getLength() > 0) {
+            feature = this.getView().getFeatures().pop();
+            formatter = new ol.format.WKT();
+            this.fireEvent('saveArea', formatter.writeFeature(feature));
+            button.up('window').close();
+        }
     },
 
     onCancelClick: function (button) {
         button.up('window').close();
+    },
+
+    onTypeSelect: function (combo) {
+        this.getView().removeInteraction();
+        this.getView().addInteraction(combo.getValue());
     }
 });
diff --git a/web/app/view/SettingsMenu.js b/web/app/view/SettingsMenu.js
index 70041bd63..8c230f36f 100644
--- a/web/app/view/SettingsMenu.js
+++ b/web/app/view/SettingsMenu.js
@@ -49,7 +49,7 @@ Ext.define('Traccar.view.SettingsMenu', {
             reference: 'settingsUsersButton'
         }, {
             text: Strings.sharedNotifications,
-            handler: 'onNotificationsClick',
+            handler: 'onNotificationsClick'
         }, {
             text: Strings.loginLogout,
             handler: 'onLogoutClick'