Add reports to the mobile view

8 files changed, 102 insertions, 56 deletions

diff --git a/web/app/Application.js b/web/app/Application.js
index 5c96b9b..fc6ff5e 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -76,6 +76,17 @@ Ext.define('Traccar.Application', {
         'Root'
     ],
 
+    isMobile: function () {
+        return window.matchMedia && window.matchMedia('(max-width: 768px)').matches;
+    },
+
+    showReports: function (show) {
+        var rootPanel = Ext.getCmp('rootPanel');
+        if (rootPanel) {
+            rootPanel.setActiveItem(show ? 1 : 0);
+        }
+    },
+
     setUser: function (data) {
         var reader = Ext.create('Ext.data.reader.Json', {
             model: 'Traccar.model.User'
diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js
index eaf98e8..568b761 100644
--- a/web/app/controller/Root.js
+++ b/web/app/controller/Root.js
@@ -82,7 +82,7 @@ Ext.define('Traccar.controller.Root', {
         if (attribution) {
             attribution.remove();
         }
-        if (window.matchMedia && window.matchMedia('(max-width: 768px)').matches) {
+        if (Traccar.app.isMobile()) {
             Ext.create('widget.mainMobile');
         } else {
             Ext.create('widget.main');
diff --git a/web/app/view/MainMobile.js b/web/app/view/MainMobile.js
index e3e6742..2659e2f 100644
--- a/web/app/view/MainMobile.js
+++ b/web/app/view/MainMobile.js
@@ -19,40 +19,49 @@ Ext.define('Traccar.view.MainMobile', {
     extend: 'Ext.container.Viewport',
     alias: 'widget.mainMobile',
 
+    id: 'rootPanel',
+
     requires: [
         'Traccar.view.Devices',
         'Traccar.view.State',
         'Traccar.view.Map'
     ],
 
-    layout: 'border',
-
-    defaults: {
-        header: false,
-        collapsible: true,
-        split: true
-    },
+    layout: 'card',
 
     items: [{
-        region: 'east',
-        xtype: 'stateView',
-        title: Strings.stateTitle,
-        flex: 4,
-        collapsed: true,
-        titleCollapse: true,
-        floatable: false
-    }, {
-        region: 'center',
-        xtype: 'mapView',
-        collapsible: false,
-        flex: 2
+        layout: 'border',
+
+        defaults: {
+            header: false,
+            collapsible: true,
+            split: true
+        },
+
+        items: [{
+            region: 'east',
+            xtype: 'stateView',
+            title: Strings.stateTitle,
+            flex: 4,
+            collapsed: true,
+            collapseMode: 'mini',
+            titleCollapse: true,
+            floatable: false
+        }, {
+            region: 'center',
+            xtype: 'mapView',
+            collapsible: false,
+            flex: 2
+        }, {
+            region: 'south',
+            xtype: 'devicesView',
+            title: Strings.deviceTitle,
+            flex: 1,
+            collapsed: true,
+            titleCollapse: true,
+            floatable: false
+        }]
     }, {
-        region: 'south',
-        xtype: 'devicesView',
-        title: Strings.deviceTitle,
-        flex: 1,
-        collapsed: true,
-        titleCollapse: true,
-        floatable: false
+        xtype: 'reportView'
     }]
 });
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index b9f3498..dc3245e 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -37,6 +37,13 @@ Ext.define('Traccar.view.Map', {
         }, {
             xtype: 'button',
             tooltipType: 'title',
+            handler: 'showReports',
+            reference: 'showReportsButton',
+            glyph: 'xf0f6@FontAwesome',
+            tooltip: Strings.sharedGeofences
+        }, {
+            xtype: 'button',
+            tooltipType: 'title',
             handler: 'showGeofences',
             reference: 'showGeofencesButton',
             glyph: 'xf21d@FontAwesome',
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 323f29d..32ea6b0 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -67,6 +67,11 @@ Ext.define('Traccar.view.MapController', {
         this.reportMarkers = {};
         this.liveRoutes = {};
         this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
+        this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
+    },
+
+    showReports: function() {
+        Traccar.app.showReports(true);
     },
 
     getDeviceColor: function (device) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 2854f1e..f9b79ad 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -27,37 +27,46 @@ Ext.define('Traccar.view.Report', {
 
     title: Strings.reportTitle,
 
-    tbar: [{
-        xtype: 'tbtext',
-        html: Strings.sharedType
-    }, {
-        xtype: 'combobox',
-        reference: 'reportTypeField',
-        store: 'ReportTypes',
-        displayField: 'name',
-        valueField: 'key',
-        editable: false,
-        listeners: {
-            change: 'onTypeChange'
-        }
-    }, '-', {
-        text: Strings.reportConfigure,
-        handler: 'onConfigureClick'
-    }, '-', {
-        text: Strings.reportShow,
-        reference: 'showButton',
-        disabled: true,
-        handler: 'onReportClick'
-    }, {
-        text: Strings.reportExport,
-        reference: 'exportButton',
-        disabled: true,
-        handler: 'onReportClick'
-    }, {
-        text: Strings.reportClear,
-        handler: 'onClearClick'
+    tools: [{
+        type: 'close',
+        tooltip: Strings.sharedHide,
+        handler: 'hideReports'
     }],
 
+    tbar: {
+        scrollable: true,
+        items: [{
+            xtype: 'tbtext',
+            html: Strings.sharedType
+        }, {
+            xtype: 'combobox',
+            reference: 'reportTypeField',
+            store: 'ReportTypes',
+            displayField: 'name',
+            valueField: 'key',
+            editable: false,
+            listeners: {
+                change: 'onTypeChange'
+            }
+        }, '-', {
+            text: Strings.reportConfigure,
+            handler: 'onConfigureClick'
+        }, '-', {
+            text: Strings.reportShow,
+            reference: 'showButton',
+            disabled: true,
+            handler: 'onReportClick'
+        }, {
+            text: Strings.reportExport,
+            reference: 'exportButton',
+            disabled: true,
+            handler: 'onReportClick'
+        }, {
+            text: Strings.reportClear,
+            handler: 'onClearClick'
+        }]
+    },
+
     listeners: {
         selectionchange: 'onSelectionChange'
     }
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 6076b47..67fcf12 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -41,6 +41,10 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
+    hideReports: function() {
+        Traccar.app.showReports(false);
+    },
+
     onConfigureClick: function () {
         var dialog = Ext.create('Traccar.view.ReportConfigDialog');
         dialog.lookupReference('eventTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'events');
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 23bfbf7..580c2a9 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -1,5 +1,6 @@
 {
     "sharedLoading": "Loading...",
+    "sharedHide": "Hide",
     "sharedSave": "Save",
     "sharedSet": "Set",
     "sharedCancel": "Cancel",