diff options
Diffstat (limited to 'web/app')
| -rw-r--r-- | web/app/Application.js | 3 | ||||
| -rw-r--r-- | web/app/Style.js | 1 | ||||
| -rw-r--r-- | web/app/store/GeozoneTypes.js | 28 | ||||
| -rw-r--r-- | web/app/view/GeofenceMap.js | 78 | ||||
| -rw-r--r-- | web/app/view/GeofenceMapController.js | 10 |
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(); + } }); |