From 557ffa7f106e44a09a99746dcd8e4f369ea4730d Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Mon, 26 Dec 2016 18:06:48 +0500 Subject: Charts implementation --- web/app/view/ReportController.js | 102 +++++++++++++++++++++++++++++++++------ 1 file changed, 86 insertions(+), 16 deletions(-) (limited to 'web/app/view/ReportController.js') diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js index 1f3f3a2a..6c73ce80 100644 --- a/web/app/view/ReportController.js +++ b/web/app/view/ReportController.js @@ -43,6 +43,9 @@ Ext.define('Traccar.view.ReportController', { '#ReportEvents': { add: 'loadEvents', load: 'loadEvents' + }, + '#ReportRoute': { + load: 'loadRoute' } } } @@ -52,9 +55,15 @@ Ext.define('Traccar.view.ReportController', { Traccar.app.showReports(false); }, + init: function () { + this.grid = this.getView().getComponent('grid'); + this.chart = this.getView().getComponent('chart'); + }, + onConfigureClick: function () { var dialog = Ext.create('Traccar.view.ReportConfigDialog'); dialog.lookupReference('eventTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'events'); + dialog.lookupReference('chartTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'charts'); dialog.callingPanel = this; dialog.lookupReference('deviceField').setValue(this.deviceId); dialog.lookupReference('groupField').setValue(this.groupId); @@ -63,6 +72,9 @@ Ext.define('Traccar.view.ReportController', { } else { dialog.lookupReference('eventTypeField').setValue([Traccar.store.ReportEventTypes.allEvents]); } + if (this.chartType !== undefined) { + dialog.lookupReference('chartTypeField').setValue(this.chartType); + } if (this.fromDate !== undefined) { dialog.lookupReference('fromDateField').setValue(this.fromDate); } @@ -85,7 +97,7 @@ Ext.define('Traccar.view.ReportController', { time = this.fromDate && this.fromTime && this.toDate && this.toTime; disabled = !reportType || !devices || !time; this.lookupReference('showButton').setDisabled(disabled); - this.lookupReference('exportButton').setDisabled(disabled); + this.lookupReference('exportButton').setDisabled(reportType === 'charts' || disabled); }, onReportClick: function (button) { @@ -103,7 +115,12 @@ Ext.define('Traccar.view.ReportController', { this.toTime.getHours(), this.toTime.getMinutes(), this.toTime.getSeconds(), this.toTime.getMilliseconds()); if (button.reference === 'showButton') { - store = this.getView().getStore(); + if (reportType === 'charts') { + store = this.chart.getStore(); + this.chart.setSeries([]); + } else { + store = this.grid.getStore(); + } store.load({ params: { deviceId: this.deviceId, @@ -114,7 +131,7 @@ Ext.define('Traccar.view.ReportController', { } }); } else if (button.reference === 'exportButton') { - url = this.getView().getStore().getProxy().url; + url = this.grid.getStore().getProxy().url; this.downloadFile(url, { deviceId: this.deviceId, groupId: this.groupId, @@ -132,10 +149,13 @@ Ext.define('Traccar.view.ReportController', { }, clearReport: function (reportType) { - this.getView().getStore().removeAll(); + this.grid.getStore().removeAll(); if (reportType === 'trips' || reportType === 'events') { Ext.getStore('ReportRoute').removeAll(); } + if (reportType === 'charts') { + this.chart.getStore().removeAll(); + } }, onSelectionChange: function (selected) { @@ -154,7 +174,7 @@ Ext.define('Traccar.view.ReportController', { selectDevice: function (device) { if (device) { - this.getView().getSelectionModel().deselectAll(); + this.grid.getSelectionModel().deselectAll(); } }, @@ -162,12 +182,12 @@ Ext.define('Traccar.view.ReportController', { var positionEvent, reportType = this.lookupReference('reportTypeField').getValue(); if (object instanceof Traccar.model.Position) { if (reportType === 'route') { - this.getView().getSelectionModel().select([object], false, true); - this.getView().getView().focusRow(object); + this.grid.getSelectionModel().select([object], false, true); + this.grid.getView().focusRow(object); } else if (reportType === 'events') { - positionEvent = this.getView().getStore().findRecord('positionId', object.get('id'), 0, false, true, true); - this.getView().getSelectionModel().select([positionEvent], false, true); - this.getView().getView().focusRow(positionEvent); + positionEvent = this.grid.getStore().findRecord('positionId', object.get('id'), 0, false, true, true); + this.grid.getSelectionModel().select([positionEvent], false, true); + this.grid.getView().focusRow(positionEvent); } } }, @@ -223,6 +243,45 @@ Ext.define('Traccar.view.ReportController', { } }, + loadRoute: function (store) { + var i, deviceIds, chartSeries, deviceStore; + if (this.lookupReference('reportTypeField').getValue() === 'charts') { + this.chart.getAxes()[0].setTitle( + Ext.getStore('ReportChartTypes').findRecord('key', this.chartType).get('name')); + chartSeries = []; + deviceIds = store.collect('deviceId'); + for (i = 0; i < deviceIds.length; i++) { + deviceStore = new Ext.create('Ext.data.ChainedStore', { + source: 'ReportRoute', + filters: [{ + property: 'deviceId', + value : deviceIds[i] + }] + }); + chartSeries.push({ + type: 'line', + store: deviceStore, + yField: this.chartType, + xField: 'fixTime', + highlightCfg: { + scaling: Traccar.Style.chartMarkerHighlightScaling + }, + colors: [Traccar.app.getReportColor(deviceIds[i])], + marker: { + type: 'circle', + radius: Traccar.Style.chartMarkerRadius, + fill: Traccar.app.getReportColor(deviceIds[i]) + } + }); + } + this.chart.setSeries(chartSeries); + } + }, + + onChartMarkerClick: function (chart, item) { + this.fireEvent('selectreport', item.record, true); + }, + showSingleEvent: function (eventId) { this.lookupReference('reportTypeField').setValue('events'); Ext.getStore('Events').load({ @@ -239,8 +298,8 @@ Ext.define('Traccar.view.ReportController', { this.getView().expand(); } } - this.getView().getSelectionModel().select([records[0]], false, true); - this.getView().getView().focusRow(records[0]); + this.grid.getSelectionModel().select([records[0]], false, true); + this.grid.getView().focusRow(records[0]); } } } @@ -289,13 +348,24 @@ Ext.define('Traccar.view.ReportController', { } if (newValue === 'route') { - this.getView().reconfigure('ReportRoute', this.routeColumns); + this.grid.reconfigure('ReportRoute', this.routeColumns); + this.chart.setHidden(true); + this.grid.setHidden(false); } else if (newValue === 'events') { - this.getView().reconfigure('ReportEvents', this.eventsColumns); + this.grid.reconfigure('ReportEvents', this.eventsColumns); + this.chart.setHidden(true); + this.grid.setHidden(false); } else if (newValue === 'summary') { - this.getView().reconfigure('ReportSummary', this.summaryColumns); + this.grid.reconfigure('ReportSummary', this.summaryColumns); + this.chart.setHidden(true); + this.grid.setHidden(false); } else if (newValue === 'trips') { - this.getView().reconfigure('ReportTrips', this.tripsColumns); + this.grid.reconfigure('ReportTrips', this.tripsColumns); + this.chart.setHidden(true); + this.grid.setHidden(false); + } else if (newValue === 'charts') { + this.grid.setHidden(true); + this.chart.setHidden(false); } this.updateButtons(); -- cgit v1.2.3