From 33783a40ebe4af278bf4f9fa6ca7fa75452c1304 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 7 Nov 2016 06:07:18 +1300 Subject: Add reports to the mobile view --- web/app/Application.js | 11 +++++++ web/app/controller/Root.js | 2 +- web/app/view/MainMobile.js | 61 ++++++++++++++++++++---------------- web/app/view/Map.js | 7 +++++ web/app/view/MapController.js | 5 +++ web/app/view/Report.js | 67 +++++++++++++++++++++++----------------- web/app/view/ReportController.js | 4 +++ 7 files changed, 101 insertions(+), 56 deletions(-) (limited to 'web/app') diff --git a/web/app/Application.js b/web/app/Application.js index 5c96b9bf..fc6ff5e7 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 eaf98e8f..568b761d 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 e3e67426..2659e2fb 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 b9f3498a..dc3245e5 100644 --- a/web/app/view/Map.js +++ b/web/app/view/Map.js @@ -34,6 +34,13 @@ Ext.define('Traccar.view.Map', { baseCls: 'x-panel-header-title-default' }, { xtype: 'tbfill' + }, { + xtype: 'button', + tooltipType: 'title', + handler: 'showReports', + reference: 'showReportsButton', + glyph: 'xf0f6@FontAwesome', + tooltip: Strings.sharedGeofences }, { xtype: 'button', tooltipType: 'title', diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 323f29da..32ea6b05 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 2854f1ef..f9b79ad6 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 6076b47c..67fcf121 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'); -- cgit v1.2.3