Improvement to events panel

9 files changed, 93 insertions, 25 deletions

diff --git a/web/app/view/Events.js b/web/app/view/Events.js
index 19656903..ca1f3ea5 100644
--- a/web/app/view/Events.js
+++ b/web/app/view/Events.js
@@ -60,7 +60,7 @@ Ext.define('Traccar.view.Events', {
             toggleHandler: 'onScrollToLastClick',
             stateId: 'events-scroll-to-last-button',
             tooltip: Strings.eventsScrollToLast,
-            reference: 'scrollToLast'
+            reference: 'scrollToLastButton'
         }, {
             id: 'soundButton',
             glyph: 'xf0a2@FontAwesome',
@@ -68,6 +68,14 @@ Ext.define('Traccar.view.Events', {
             stateId: 'sound-button'
         }, {
             glyph: 'xf014@FontAwesome',
+            tooltip: Strings.sharedRemove,
+            handler: 'onRemoveClick',
+            reference: 'removeEventButton',
+            disabled: true,
+            stateful: false,
+            enableToggle: false
+        }, {
+            glyph: 'xf1f8@FontAwesome',
             tooltip: Strings.reportClear,
             handler: 'onClearClick',
             stateful: false,
@@ -76,20 +84,24 @@ Ext.define('Traccar.view.Events', {
             glyph: 'xf00d@FontAwesome',
             tooltip: Strings.sharedHide,
             handler: 'onHideEvents',
-            reference: 'hideEvents',
+            reference: 'hideEventsButton',
             hidden: true,
             stateful: false,
             enableToggle: false
         }]
     },
 
+    listeners: {
+        selectionchange: 'onSelectionChange'
+    },
+
     columns: {
         defaults: {
             flex: 1,
             minWidth: Traccar.Style.columnWidthNormal
         },
         items: [{
-            text: Strings.reportDeviceName,
+            text: Strings.sharedDevice,
             dataIndex: 'deviceId',
             renderer: Traccar.AttributeFormatter.getFormatter('deviceId')
         }, {
diff --git a/web/app/view/EventsController.js b/web/app/view/EventsController.js
index 5cd9fb8e..1737f264 100644
--- a/web/app/view/EventsController.js
+++ b/web/app/view/EventsController.js
@@ -22,6 +22,11 @@ Ext.define('Traccar.view.EventsController', {
 
     config: {
         listen: {
+            controller: {
+                '*': {
+                    deselectevent: 'deselectEvent'
+                }
+            },
             store: {
                 '#Events': {
                     add: 'onAddEvent'
@@ -37,16 +42,28 @@ Ext.define('Traccar.view.EventsController', {
         }, Traccar.Style.refreshPeriod);
 
         if (Traccar.app.isMobile()) {
-            this.lookupReference('hideEvents').setHidden(false);
+            this.lookupReference('hideEventsButton').setHidden(false);
+        }
+    },
+
+    onRemoveClick: function (button) {
+        var event = this.getView().getSelectionModel().getSelection()[0];
+        if (event) {
+            Ext.getStore('Events').remove(event);
+            if (event.get('positionId')) {
+                Ext.getStore('EventPositions').remove(
+                        Ext.getStore('EventPositions').getById(event.get('positionId')));
+            }
         }
     },
 
     onClearClick: function (button) {
         Ext.getStore('Events').removeAll();
+        Ext.getStore('EventPositions').removeAll();
     },
 
     onAddEvent: function (store, data) {
-        if (this.lookupReference('scrollToLast').pressed) {
+        if (this.lookupReference('scrollToLastButton').pressed) {
             this.getView().scrollBy(0, Number.POSITIVE_INFINITY, true);
         }
     },
@@ -59,5 +76,21 @@ Ext.define('Traccar.view.EventsController', {
 
     onHideEvents: function () {
         Traccar.app.showEvents(false);
+    },
+
+    deselectEvent: function () {
+        this.getView().getSelectionModel().deselectAll();
+    },
+
+    onSelectionChange: function (selection, selected) {
+        var event, position;
+        event = selected.length > 0 ? selected[0] : null;
+        if (event && event.get('positionId')) {
+            position = Ext.getStore('EventPositions').getById(event.get('positionId'));
+            if (position) {
+                this.fireEvent('selectevent', position);
+            }
+        }
+        this.lookupReference('removeEventButton').setDisabled(!event);
     }
 });
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 7dfeaf3f..d74fdfb9 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -184,10 +184,10 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
-    onSelectionChange: function (selected) {
+    onSelectionChange: function (selection, selected) {
         var report;
-        if (selected.getCount() > 0) {
-            report = selected.getLastSelected();
+        if (selected.length > 0) {
+            report = selected[0];
             this.fireEvent('selectreport', report, true);
             if (report instanceof Traccar.model.ReportTrip) {
                 this.selectTrip(report);
diff --git a/web/app/view/StateController.js b/web/app/view/StateController.js
index 4c99a8be..23369b87 100644
--- a/web/app/view/StateController.js
+++ b/web/app/view/StateController.js
@@ -176,8 +176,8 @@ Ext.define('Traccar.view.StateController', {
         }
     },
 
-    onSelectionChange: function (selected, records) {
-        var enabled = selected.getCount() > 0 && records[0].get('priority') === 1024;
+    onSelectionChange: function (selection, selected) {
+        var enabled = selected.length > 0 && selected[0].get('priority') === 1024;
         this.lookupReference('aliasEditButton').setDisabled(!enabled);
     },
 
diff --git a/web/app/view/edit/AttributeAliasesController.js b/web/app/view/edit/AttributeAliasesController.js
index fc2b57f2..d1beb135 100644
--- a/web/app/view/edit/AttributeAliasesController.js
+++ b/web/app/view/edit/AttributeAliasesController.js
@@ -53,17 +53,17 @@ Ext.define('Traccar.view.edit.AttributeAliasesController', {
         dialog.show();
     },
 
-    onSelectionChange: function (selected) {
+    onSelectionChange: function (selection, selected) {
         var disabled = !this.lookupReference('deviceField').getValue();
         this.lookupReference('toolbarAddButton').setDisabled(disabled);
-        disabled = selected.length === 0 || !this.lookupReference('deviceField').getValue();
+        disabled = !selected || selected.length === 0 || !this.lookupReference('deviceField').getValue();
         this.lookupReference('toolbarEditButton').setDisabled(disabled);
         this.lookupReference('toolbarRemoveButton').setDisabled(disabled);
     },
 
     onDeviceChange: function (combobox, newValue, oldValue) {
         var manager = Traccar.app.getUser().get('admin') || Traccar.app.getUser().get('userLimit') > 0;
-        this.onSelectionChange('');
+        this.onSelectionChange();
         if (newValue !== null) {
             this.getView().getStore().filter('deviceId', newValue);
             if (manager && this.getView().getStore().getCount() === 0) {
diff --git a/web/app/view/edit/DevicesController.js b/web/app/view/edit/DevicesController.js
index 0cdf18ac..48c5f5b8 100644
--- a/web/app/view/edit/DevicesController.js
+++ b/web/app/view/edit/DevicesController.js
@@ -133,7 +133,7 @@ Ext.define('Traccar.view.edit.DevicesController', {
         var readonly, deviceReadonly, empty;
         deviceReadonly = Traccar.app.getPreference('deviceReadonly', false) && !Traccar.app.getUser().get('admin');
         readonly = Traccar.app.getPreference('readonly', false) && !Traccar.app.getUser().get('admin');
-        empty = selected.getCount() === 0;
+        empty = selected.length === 0;
         this.lookupReference('toolbarEditButton').setDisabled(empty || readonly || deviceReadonly);
         this.lookupReference('toolbarRemoveButton').setDisabled(empty || readonly || deviceReadonly);
         this.lookupReference('toolbarGeofencesButton').setDisabled(empty || readonly);
@@ -142,10 +142,10 @@ Ext.define('Traccar.view.edit.DevicesController', {
         this.lookupReference('deviceCommandButton').setDisabled(empty || readonly);
     },
 
-    onSelectionChange: function (selected) {
+    onSelectionChange: function (selection, selected) {
         this.updateButtons(selected);
-        if (selected.getCount() > 0) {
-            this.fireEvent('selectdevice', selected.getLastSelected(), true);
+        if (selected.length > 0) {
+            this.fireEvent('selectdevice', selected[0], true);
         } else {
             this.fireEvent('deselectfeature');
         }
diff --git a/web/app/view/edit/GroupsController.js b/web/app/view/edit/GroupsController.js
index a170b3e9..34eec8da 100644
--- a/web/app/view/edit/GroupsController.js
+++ b/web/app/view/edit/GroupsController.js
@@ -83,7 +83,7 @@ Ext.define('Traccar.view.edit.GroupsController', {
         }).show();
     },
 
-    onSelectionChange: function (selected) {
+    onSelectionChange: function (selection, selected) {
         var disabled = selected.length > 0;
         this.lookupReference('toolbarGeofencesButton').setDisabled(disabled);
         this.lookupReference('toolbarAttributesButton').setDisabled(disabled);
diff --git a/web/app/view/edit/ToolbarController.js b/web/app/view/edit/ToolbarController.js
index fdbaa7e4..2b2297a9 100644
--- a/web/app/view/edit/ToolbarController.js
+++ b/web/app/view/edit/ToolbarController.js
@@ -62,7 +62,7 @@ Ext.define('Traccar.view.edit.ToolbarController', {
         });
     },
 
-    onSelectionChange: function (selected) {
+    onSelectionChange: function (selection, selected) {
         var disabled = selected.length > 0;
         this.lookupReference('toolbarEditButton').setDisabled(disabled);
         this.lookupReference('toolbarRemoveButton').setDisabled(disabled);
diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
index a9732dd6..5d41932e 100644
--- a/web/app/view/map/MapMarkerController.js
+++ b/web/app/view/map/MapMarkerController.js
@@ -31,7 +31,8 @@ Ext.define('Traccar.view.map.MapMarkerController', {
             controller: {
                 '*': {
                     selectdevice: 'selectDevice',
-                    selectreport: 'selectReport'
+                    selectreport: 'selectReport',
+                    selectevent: 'selectEvent'
                 },
                 'devices': {
                     deselectfeature: 'deselectDevice'
@@ -57,6 +58,10 @@ Ext.define('Traccar.view.map.MapMarkerController', {
                     add: 'addReportMarkers',
                     load: 'loadReport',
                     clear: 'clearReport'
+                },
+                '#EventPositions': {
+                    remove: 'clearEvent',
+                    clear: 'clearEvent'
                 }
             },
             component: {
@@ -330,8 +335,8 @@ Ext.define('Traccar.view.map.MapMarkerController', {
         marker.set('record', position);
         style = this.getReportMarker(position.get('deviceId'), position.get('course'));
         marker.setStyle(style);
-        this.reportMarkers[position.get('id')] = marker;
         this.getView().getMarkersSource().addFeature(marker);
+        return marker;
     },
 
     addReportMarkers: function (store, data) {
@@ -339,7 +344,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
         this.clearReport();
         for (i = 0; i < data.length; i++) {
             if (store.showMarkers) {
-                this.addReportMarker(data[i]);
+                this.reportMarkers[data[i].get('id')] = this.addReportMarker(data[i]);
             }
         }
         this.zoomToAllPositions(data);
@@ -364,11 +369,20 @@ Ext.define('Traccar.view.map.MapMarkerController', {
             this.reportMarkers = {};
         }
 
-        if (this.selectedMarker && this.selectedMarker.get('record') instanceof Traccar.model.Position) {
+        if (this.selectedMarker && !this.selectedMarker.get('event') &&
+                this.selectedMarker.get('record') instanceof Traccar.model.Position) {
             this.selectedMarker = null;
         }
     },
 
+    clearEvent: function () {
+        if (this.selectedMarker && this.selectedMarker.get('event')) {
+            if (!Ext.getStore('EventPositions').getById(this.selectedMarker.get('record').getId())) {
+                this.selectMarker(null, false);
+            }
+        }
+    },
+
     getRouteStyle: function (deviceId) {
         return new ol.style.Style({
             stroke: new ol.style.Stroke({
@@ -438,7 +452,10 @@ Ext.define('Traccar.view.map.MapMarkerController', {
 
     selectMarker: function (marker, center) {
         if (this.selectedMarker) {
-            if (!Ext.getStore('ReportRoute').showMarkers &&
+            if (this.selectedMarker.get('event')) {
+                this.getView().getMarkersSource().removeFeature(this.selectedMarker);
+                this.fireEvent('deselectevent');
+            } else if (!Ext.getStore('ReportRoute').showMarkers &&
                     this.selectedMarker.get('record') instanceof Traccar.model.Position) {
                 this.getView().getMarkersSource().removeFeature(this.selectedMarker);
                 delete this.reportMarkers[this.selectedMarker.get('record').get('id')];
@@ -471,12 +488,18 @@ Ext.define('Traccar.view.map.MapMarkerController', {
     selectReport: function (position, center) {
         if (position instanceof Traccar.model.Position) {
             if (!Ext.getStore('ReportRoute').showMarkers) {
-                this.addReportMarker(position);
+                this.reportMarkers[position.get('id')] = this.addReportMarker(position);
             }
             this.selectMarker(this.reportMarkers[position.get('id')], center);
         }
     },
 
+    selectEvent: function (position) {
+        var maker = this.addReportMarker(position);
+        maker.set('event', true);
+        this.selectMarker(maker, true);
+    },
+
     selectFeature: function (feature) {
         var record = feature.get('record');
         if (record) {