aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/app/Application.js17
-rw-r--r--web/app/Style.js11
-rw-r--r--web/app/model/Position.js13
-rw-r--r--web/app/store/DistanceUnits.js9
-rw-r--r--web/app/store/ReportChartTypes.js30
-rw-r--r--web/app/store/ReportTypes.js3
-rw-r--r--web/app/store/SpeedUnits.js11
-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
-rw-r--r--web/l10n/en.json3
-rw-r--r--web/load.js6
14 files changed, 244 insertions, 48 deletions
diff --git a/web/app/Application.js b/web/app/Application.js
index daa25b85..82caf1e0 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -70,6 +70,7 @@ Ext.define('Traccar.Application', {
'ReportSummary',
'ReportTypes',
'ReportEventTypes',
+ 'ReportChartTypes',
'Statistics',
'DeviceImages',
'Calendars',
@@ -134,6 +135,22 @@ Ext.define('Traccar.Application', {
}
},
+ 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];
+ }
+ },
+
showError: function (response) {
if (Ext.isString(response)) {
Ext.Msg.alert(Strings.errorTitle, response);
diff --git a/web/app/Style.js b/web/app/Style.js
index c5fce9b6..c785e1c1 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -78,5 +78,14 @@ Ext.define('Traccar.Style', {
coordinatePrecision: 6,
numberPrecision: 2,
- reportTagfieldWidth: 375
+ reportTagfieldWidth: 375,
+
+ chartPadding: {
+ top: 20,
+ bottom: 10,
+ left: 10,
+ right: 40
+ },
+ chartMarkerRadius: 3,
+ chartMarkerHighlightScaling: 1.5
});
diff --git a/web/app/model/Position.js b/web/app/model/Position.js
index b2b12ee9..362ca589 100644
--- a/web/app/model/Position.js
+++ b/web/app/model/Position.js
@@ -56,6 +56,12 @@ Ext.define('Traccar.model.Position', {
name: 'speed',
type: 'float'
}, {
+ name: 'speedConverted',
+ type: 'float',
+ calculate: function (data) {
+ return Ext.getStore('SpeedUnits').convertValue(data.speed, Traccar.app.getPreference('speedUnit'));
+ }
+ }, {
name: 'course',
type: 'float'
}, {
@@ -63,5 +69,12 @@ Ext.define('Traccar.model.Position', {
type: 'string'
}, {
name: 'attributes'
+ }, {
+ name: 'distanceConverted',
+ type: 'float',
+ calculate: function (data) {
+ return Ext.getStore('DistanceUnits').convertValue(data.attributes.distance,
+ Traccar.app.getPreference('distanceUnit'));
+ }
}]
});
diff --git a/web/app/store/DistanceUnits.js b/web/app/store/DistanceUnits.js
index cc9f1e92..57d15fc8 100644
--- a/web/app/store/DistanceUnits.js
+++ b/web/app/store/DistanceUnits.js
@@ -33,6 +33,15 @@ Ext.define('Traccar.store.DistanceUnits', {
factor: 0.000539957
}],
+ convertValue: function (value, unit) {
+ var model;
+ if (!unit) {
+ unit = 'km';
+ }
+ model = this.findRecord('key', unit);
+ return value * model.get('factor');
+ },
+
formatValue: function (value, unit) {
var model;
if (!unit) {
diff --git a/web/app/store/ReportChartTypes.js b/web/app/store/ReportChartTypes.js
new file mode 100644
index 00000000..7a63fd08
--- /dev/null
+++ b/web/app/store/ReportChartTypes.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.store.ReportChartTypes', {
+ extend: 'Ext.data.Store',
+ fields: ['key', 'name'],
+
+ data: [{
+ key: 'speedConverted',
+ name: Strings.positionSpeed
+ }, {
+ key: 'distanceConverted',
+ name: Strings.positionDistance
+ }]
+});
diff --git a/web/app/store/ReportTypes.js b/web/app/store/ReportTypes.js
index 18b0c74a..3305a10c 100644
--- a/web/app/store/ReportTypes.js
+++ b/web/app/store/ReportTypes.js
@@ -31,5 +31,8 @@ Ext.define('Traccar.store.ReportTypes', {
}, {
key: 'summary',
name: Strings.reportSummary
+ }, {
+ key: 'charts',
+ name: Strings.reportCharts
}]
});
diff --git a/web/app/store/SpeedUnits.js b/web/app/store/SpeedUnits.js
index e29a42c7..0480ad42 100644
--- a/web/app/store/SpeedUnits.js
+++ b/web/app/store/SpeedUnits.js
@@ -1,5 +1,5 @@
/*
- * Copyright 2015 Anton Tananaev (anton@traccar.org)
+ * Copyright 2015 - 2016 Anton Tananaev (anton@traccar.org)
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
@@ -33,6 +33,15 @@ Ext.define('Traccar.store.SpeedUnits', {
factor: 1.15078
}],
+ convertValue: function (value, unit) {
+ var model;
+ if (!unit) {
+ unit = 'kn';
+ }
+ model = this.findRecord('key', unit);
+ return value * model.get('factor');
+ },
+
formatValue: function (value, unit) {
var model;
if (!unit) {
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();
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 109482b8..5ac13283 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -104,6 +104,7 @@
"positionCourse": "Course",
"positionAddress": "Address",
"positionProtocol": "Protocol",
+ "positionDistance": "Distance",
"serverTitle": "Server Settings",
"serverZoom": "Zoom",
"serverRegistration": "Registration",
@@ -184,8 +185,10 @@
"reportEvents": "Events",
"reportTrips": "Trips",
"reportSummary": "Summary",
+ "reportCharts": "Charts",
"reportConfigure": "Configure",
"reportEventTypes": "Event Types",
+ "reportChartTypes": "Chart Types",
"reportExport": "Export",
"reportDeviceName": "Device Name",
"reportAverageSpeed": "Average Speed",
diff --git a/web/load.js b/web/load.js
index 7aee735d..ecf6f232 100644
--- a/web/load.js
+++ b/web/load.js
@@ -117,18 +117,22 @@
extjsVersion = '6.2.0';
fontAwesomeVersion = '4.7.0';
- olVersion = '3.20.0';
+ olVersion = '3.20.1';
if (debugMode) {
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
+ addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts-debug.js');
} else {
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all.js');
+ addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts.js');
}
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/locale/locale-' + locale.languages[locale.language].code + '.js');
addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/theme-triton/resources/theme-triton-all.css');
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/theme-triton/theme-triton.js');
+ addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/triton/resources/charts-all.css');
+
addStyleFile('//cdnjs.cloudflare.com/ajax/libs/font-awesome/' + fontAwesomeVersion + '/css/font-awesome.min.css');
addStyleFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.css');
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 14:04:38 +0000