Move some buttons to map

5 files changed, 77 insertions, 48 deletions

diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 55741cde..3cfd5542 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -36,12 +36,39 @@ Ext.define('Traccar.view.Devices', {
         this.callParent();
     },
 
-    title: Strings.deviceTitle,
     selType: 'rowmodel',
 
     tbar: {
-        xtype: 'editToolbar',
         items: [{
+            xtype: 'tbtext',
+            html: Strings.deviceTitle,
+            baseCls: 'x-panel-header-title-default'
+        }, {
+            xtype: 'tbfill'
+        }, {
+            xtype: 'button',
+            handler: 'onAddClick',
+            reference: 'toolbarAddButton',
+            glyph: 'xf067@FontAwesome',
+            tooltip: Strings.sharedAdd,
+            tooltipType: 'title'
+        }, {
+            xtype: 'button',
+            disabled: true,
+            handler: 'onEditClick',
+            reference: 'toolbarEditButton',
+            glyph: 'xf040@FontAwesome',
+            tooltip: Strings.sharedEdit,
+            tooltipType: 'title'
+        }, {
+            xtype: 'button',
+            disabled: true,
+            handler: 'onRemoveClick',
+            reference: 'toolbarRemoveButton',
+            glyph: 'xf00d@FontAwesome',
+            tooltip: Strings.sharedRemove,
+            tooltipType: 'title'
+        }, {
             xtype: 'button',
             disabled: true,
             handler: 'onGeofencesClick',
@@ -57,33 +84,12 @@ Ext.define('Traccar.view.Devices', {
             tooltip: Strings.deviceCommand,
             tooltipType: 'title'
         }, {
-            xtype: 'tbfill'
-        }, {
-            id: 'muteButton',
-            glyph: 'xf1f7@FontAwesome',
-            tooltip: Strings.sharedMute,
-            tooltipType: 'title',
-            pressed : true,
-            enableToggle: true,
-            listeners: {
-                toggle: function (button, pressed) {
-                    if (pressed) {
-                        button.setGlyph('xf1f7@FontAwesome');
-                    } else {
-                        button.setGlyph('xf0a2@FontAwesome');
-                    }
-                },
-                scope: this
-            }
-        }, {
             id: 'deviceFollowButton',
             glyph: 'xf05b@FontAwesome',
             tooltip: Strings.deviceFollow,
             tooltipType: 'title',
             enableToggle: true,
             toggleHandler: 'onFollowClick'
-        }, {
-            xtype: 'settingsMenu'
         }]
     },
 
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index 731cbeda..aa8e7886 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -124,7 +124,9 @@ Ext.define('Traccar.view.DevicesController', {
         var device;
         if (pressed) {
             device = this.getView().getSelectionModel().getSelection()[0];
-            this.fireEvent('selectdevice', device, true);
+            if (device) {
+                this.fireEvent('selectdevice', device, true);
+            }
         }
     },
 
diff --git a/web/app/view/Main.js b/web/app/view/Main.js
index be9f00d0..29db8297 100644
--- a/web/app/view/Main.js
+++ b/web/app/view/Main.js
@@ -62,7 +62,6 @@ Ext.define('Traccar.view.Main', {
     }, {
         region: 'center',
         xtype: 'mapView',
-        header: true,
         collapsible: false
     }]
 });
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index ca5e39da..c5b6210c 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -26,6 +26,51 @@ Ext.define('Traccar.view.Map', {
     controller: 'map',
 
     title: Strings.mapTitle,
+    tbar: {
+        items: [{
+            xtype: 'tbtext',
+            html: Strings.mapTitle,
+            baseCls: 'x-panel-header-title-default'
+        }, {
+            xtype: 'tbfill'
+        }, {
+            xtype: 'button',
+            tooltipType: 'title',
+            handler: 'showGeofences',
+            reference: 'showGeofencesButton',
+            glyph: 'xf21d@FontAwesome',
+            enableToggle: true,
+            pressed: true,
+            tooltip: Strings.sharedGeofences
+        }, {
+            xtype: 'button',
+            tooltipType: 'title',
+            handler: 'showLiveRoutes',
+            reference: 'showLiveRoutes',
+            glyph: 'xf1b0@FontAwesome',
+            enableToggle: true,
+            tooltip: Strings.mapLiveRoutes
+        }, {
+            id: 'muteButton',
+            glyph: 'xf1f7@FontAwesome',
+            tooltip: Strings.sharedMute,
+            tooltipType: 'title',
+            pressed : true,
+            enableToggle: true,
+            listeners: {
+                toggle: function (button, pressed) {
+                    if (pressed) {
+                        button.setGlyph('xf1f7@FontAwesome');
+                    } else {
+                        button.setGlyph('xf0a2@FontAwesome');
+                    }
+                },
+                scope: this
+            }
+        }, {
+            xtype: 'settingsMenu'
+        }]
+    },
 
     getLatestSource: function () {
         return this.latestSource;
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 23cbc9e3..323f29da 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -67,29 +67,6 @@ Ext.define('Traccar.view.MapController', {
         this.reportMarkers = {};
         this.liveRoutes = {};
         this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
-        this.getView().header = {
-            xtype: 'header',
-            title: Strings.mapTitle,
-            defaults: {
-                xtype: 'button',
-                tooltipType: 'title',
-                margin: Traccar.Style.headerButtonsMargin
-            },
-            items: [{
-                handler: 'showGeofences',
-                reference: 'showGeofencesButton',
-                glyph: 'xf21d@FontAwesome',
-                enableToggle: true,
-                pressed: true,
-                tooltip: Strings.sharedGeofences
-            }, {
-                handler: 'showLiveRoutes',
-                reference: 'showLiveRoutes',
-                glyph: 'xf1b0@FontAwesome',
-                enableToggle: true,
-                tooltip: Strings.mapLiveRoutes
-            }]
-        };
     },
 
     getDeviceColor: function (device) {