aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2016-07-03 15:30:35 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2016-07-03 15:30:35 +1200
commit6606ad80f189da772687c6092618b19a46f83394 (patch)
treedf80c72c28db27eed6a9d272a08c80347d1a3efd /web
parent79f8c34319053236ee03359b1ecf38e065206485 (diff)
downloadtrackermap-server-6606ad80f189da772687c6092618b19a46f83394.tar.gz
trackermap-server-6606ad80f189da772687c6092618b19a46f83394.tar.bz2
trackermap-server-6606ad80f189da772687c6092618b19a46f83394.zip
Add toolbar to geozone editor
Diffstat (limited to 'web')
-rw-r--r--web/app/Application.js3
-rw-r--r--web/app/Style.js1
-rw-r--r--web/app/store/GeozoneTypes.js28
-rw-r--r--web/app/view/GeofenceMap.js78
-rw-r--r--web/app/view/GeofenceMapController.js10
-rw-r--r--web/l10n/en.json2
6 files changed, 86 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();
+ }
});
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 56dfbe8ba..0e4d630cc 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -80,6 +80,8 @@
"mapBingKey": "Bing Maps Key",
"mapBingRoad": "Bing Maps Road",
"mapBingAerial": "Bing Maps Aerial",
+ "mapShapePolygon": "Polygon",
+ "mapShapeCircle": "Circle",
"stateTitle": "State",
"stateName": "Attribute",
"stateValue": "Value",