Add support for geofence colors

4 files changed, 23 insertions, 8 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index 4a77f561..302e6d4c 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -71,7 +71,7 @@ Ext.define('Traccar.Style', {
 
     mapGeofenceTextColor: 'rgba(14, 88, 141, 1.0)',
     mapGeofenceColor: 'rgba(21, 127, 204, 1.0)',
-    mapGeofenceOverlay: 'rgba(21, 127, 204, 0.2)',
+    mapGeofenceOverlayOpacity: 0.2,
     mapGeofenceWidth: 5,
     mapGeofenceRadius: 9,
 
diff --git a/web/app/view/GeofenceDialog.js b/web/app/view/GeofenceDialog.js
index 7b2112b3..f55a8b2e 100644
--- a/web/app/view/GeofenceDialog.js
+++ b/web/app/view/GeofenceDialog.js
@@ -16,7 +16,7 @@
  */
 
 Ext.define('Traccar.view.GeofenceDialog', {
-    extend: 'Traccar.view.BaseDialog',
+    extend: 'Traccar.view.BaseEditDialog',
 
     requires: [
         'Traccar.view.GeofenceDialogController'
@@ -56,6 +56,9 @@ Ext.define('Traccar.view.GeofenceDialog', {
         glyph: 'xf21d@FontAwesome',
         handler: 'onAreaClick'
     }, {
+        text: Strings.sharedAttributes,
+        handler: 'showAttributesView'
+    }, {
         xtype: 'tbfill'
     }, {
         glyph: 'xf00c@FontAwesome',
diff --git a/web/app/view/GeofenceMap.js b/web/app/view/GeofenceMap.js
index ad21f70d..0a56b337 100644
--- a/web/app/view/GeofenceMap.js
+++ b/web/app/view/GeofenceMap.js
@@ -59,7 +59,7 @@ Ext.define('Traccar.view.GeofenceMap', {
     },
 
     initMap: function () {
-        var map, featureOverlay, geometry;
+        var map, featureOverlay, geometry, fillColor;
         this.callParent();
 
         map = this.map;
@@ -74,13 +74,15 @@ Ext.define('Traccar.view.GeofenceMap', {
                 this.mapView.setCenter(geometry.getCoordinates()[0][0]);
             }
         }
+        fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
+        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
         featureOverlay = new ol.layer.Vector({
             source: new ol.source.Vector({
                 features: this.features
             }),
             style: new ol.style.Style({
                 fill: new ol.style.Fill({
-                    color: Traccar.Style.mapGeofenceOverlay
+                    color: fillColor
                 }),
                 stroke: new ol.style.Stroke({
                     color: Traccar.Style.mapGeofenceColor,
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index b8e2657d..99295246 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -86,13 +86,22 @@ Ext.define('Traccar.view.MapController', {
         this.fireEvent('togglestate', state);
     },
 
-    getGeofenceStyle: function (label) {
+    getGeofenceStyle: function (label, color) {
+        var fillColor, strokeColor;
+        if (color) {
+            fillColor = ol.color.asArray(color);
+            strokeColor = color;
+        } else {
+            fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
+            strokeColor = Traccar.Style.mapGeofenceColor;
+        }
+        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
         return new ol.style.Style({
                 fill: new ol.style.Fill({
-                    color: Traccar.Style.mapGeofenceOverlay
+                    color: fillColor
                 }),
                 stroke: new ol.style.Stroke({
-                    color: Traccar.Style.mapGeofenceColor,
+                    color: strokeColor,
                     width: Traccar.Style.mapGeofenceWidth
                 }),
                 text: new ol.style.Text({
@@ -114,7 +123,8 @@ Ext.define('Traccar.view.MapController', {
             Ext.getStore('Geofences').each(function (geofence) {
                 var feature = new ol.Feature(Traccar.GeofenceConverter
                         .wktToGeometry(this.getView().getMapView(), geofence.get('area')));
-                feature.setStyle(this.getGeofenceStyle(geofence.get('name')));
+                feature.setStyle(this.getGeofenceStyle(geofence.get('name'),
+                        geofence.get('attributes') !== undefined ? geofence.get('attributes').color : undefined));
                 this.getView().getGeofencesSource().addFeature(feature);
                 return true;
             }, this);