aboutsummaryrefslogtreecommitdiff
path: root/web/app/view
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view')
-rw-r--r--web/app/view/MapMarkerController.js20
-rw-r--r--web/app/view/Report.js55
-rw-r--r--web/app/view/ReportConfigController.js1
-rw-r--r--web/app/view/ReportConfigDialog.js11
-rw-r--r--web/app/view/ReportController.js102
5 files changed, 144 insertions, 45 deletions
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index 510e11bd..f8f0e43f 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -276,26 +276,10 @@ Ext.define('Traccar.view.MapMarkerController', {
}
},
- getReportColor: function (deviceId) {
- var index, reportColor, device = Ext.getStore('Devices').getById(deviceId);
- if (device) {
- reportColor = device.get('attributes')['web.reportColor'];
- }
- if (reportColor) {
- return reportColor;
- } else {
- index = 0;
- if (deviceId !== undefined) {
- index = deviceId % Traccar.Style.mapRouteColor.length;
- }
- return Traccar.Style.mapRouteColor[index];
- }
- },
-
getRouteStyle: function (deviceId) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
- color: this.getReportColor(deviceId),
+ color: Traccar.app.getReportColor(deviceId),
width: Traccar.Style.mapRouteWidth
})
});
@@ -325,7 +309,7 @@ Ext.define('Traccar.view.MapMarkerController', {
},
getReportMarker: function (deviceId, angle) {
- return this.getMarkerStyle(false, this.getReportColor(deviceId), angle, 'arrow');
+ return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow');
},
resizeMarker: function (style, zoom) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 5851c4c3..bc78fe07 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -16,7 +16,7 @@
*/
Ext.define('Traccar.view.Report', {
- extend: 'Ext.grid.Panel',
+ extend: 'Ext.panel.Panel',
xtype: 'reportView',
requires: [
@@ -67,17 +67,50 @@ Ext.define('Traccar.view.Report', {
}]
},
- listeners: {
- selectionchange: 'onSelectionChange'
+ layout: {
+ type: 'fit'
},
- forceFit: true,
-
- columns: {
- defaults: {
- minWidth: Traccar.Style.columnWidthNormal
+ items: [{
+ xtype: 'grid',
+ itemId: 'grid',
+ listeners: {
+ selectionchange: 'onSelectionChange'
+ },
+ hidden: true,
+ forceFit: true,
+ flex: 1,
+ columns: {
+ defaults: {
+ minWidth: Traccar.Style.columnWidthNormal
+ },
+ items: [
+ ]
+ },
+ style: 'borderTop: 1px solid lightgray'
+ }, {
+ xtype: 'cartesian',
+ itemId: 'chart',
+ plugins: {
+ ptype: 'chartitemevents',
+ moveEvents: true
+ },
+ hidden: true,
+ forceFit: true,
+ flex: 1,
+ store: 'ReportRoute',
+ axes: [{
+ title: Strings.reportCharts,
+ type: 'numeric',
+ position: 'left'
+ }, {
+ type: 'time',
+ position: 'bottom',
+ fields: ['fixTime']
+ }],
+ listeners: {
+ itemclick: 'onChartMarkerClick'
},
- items: [
- ]
- }
+ insetPadding: Traccar.Style.chartPadding
+ }]
});
diff --git a/web/app/view/ReportConfigController.js b/web/app/view/ReportConfigController.js
index 0ae7c0a4..f76a0820 100644
--- a/web/app/view/ReportConfigController.js
+++ b/web/app/view/ReportConfigController.js
@@ -57,6 +57,7 @@ Ext.define('Traccar.view.ReportConfigController', {
} else if (eventType.length === this.lookupReference('eventTypeField').getStore().getCount() - 1) {
eventType = [Traccar.store.ReportEventTypes.allEvents];
}
+ this.getView().callingPanel.chartType = this.lookupReference('chartTypeField').getValue();
this.getView().callingPanel.eventType = eventType;
this.getView().callingPanel.fromDate = this.lookupReference('fromDateField').getValue();
this.getView().callingPanel.fromTime = this.lookupReference('fromTimeField').getValue();
diff --git a/web/app/view/ReportConfigDialog.js b/web/app/view/ReportConfigDialog.js
index 39e6ae15..4afa929d 100644
--- a/web/app/view/ReportConfigDialog.js
+++ b/web/app/view/ReportConfigDialog.js
@@ -56,6 +56,17 @@ Ext.define('Traccar.view.ReportConfigDialog', {
displayField: 'name',
queryMode: 'local'
}, {
+ fieldLabel: Strings.reportChartTypes,
+ xtype: 'combobox',
+ width: Traccar.Style.reportTagfieldWidth,
+ reference: 'chartTypeField',
+ store: 'ReportChartTypes',
+ hidden: true,
+ value: 'speedConverted',
+ valueField: 'key',
+ displayField: 'name',
+ queryMode: 'local'
+ }, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
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();
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 04:00:32 +0000