aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/app/Style.js29
-rw-r--r--web/app/view/MapController.js226
-rw-r--r--web/app/view/ReportController.js5
3 files changed, 122 insertions, 138 deletions
diff --git a/web/app/Style.js b/web/app/Style.js
index 4c7028658..7fedfc7a7 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -35,15 +35,26 @@ Ext.define('Traccar.Style', {
mapDefaultLon: -0.1275,
mapDefaultZoom: 6,
- mapMaxZoom: 19,
- mapSelectColor: 'rgba(0, 255, 0, 1.0)',
- mapSelectRadius: 10,
- mapReportColor: 'rgba(0, 0, 255, 1.0)',
- mapReportRadius: 5,
- mapLiveColor: 'rgba(255, 0, 0, 1.0)',
- mapLiveRadius: 7,
- mapStrokeColor: 'rgba(50, 50, 50, 1.0)',
+ mapRouteColor: 'rgba(21, 127, 204, 1.0)',
mapRouteWidth: 5,
- mapMarkerStroke: 2,
+
+ mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
+ mapArrowStrokeWidth: 2,
+
+ mapTextColor: 'rgba(50, 50, 50, 1.0)',
+ mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)',
+ mapTextStrokeWidth: 2,
+ mapTextOffset: 10,
+ mapTextFont: 'bold 12px sans-serif',
+
+ mapColorOnline: '#4DFA90',
+ mapColorUnknown: '#FABE4D',
+ mapColorOffline: '#FF5468',
+ mapColorReport: 'rgba(21, 127, 204, 1.0)',
+
+ mapRadiusNormal: 10,
+ mapRadiusSelected: 15,
+
+ mapMaxZoom: 19,
mapDelay: 500
});
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 59415ff73..b087cff1c 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,16 +22,18 @@ Ext.define('Traccar.view.MapController', {
listen: {
controller: {
'*': {
- reportShow: 'reportShow',
- reportClear: 'reportClear',
selectDevice: 'selectDevice',
selectReport: 'selectReport'
}
},
store: {
'#LatestPositions': {
- add: 'update',
- update: 'update'
+ add: 'updateLatest',
+ update: 'updateLatest'
+ },
+ '#Positions': {
+ load: 'loadReport',
+ clear: 'clearReport'
}
}
}
@@ -42,11 +44,13 @@ Ext.define('Traccar.view.MapController', {
this.reportMarkers = {};
},
- update: function (store, data) {
+ updateLatest: function (store, data) {
var i, position, geometry, deviceId, name, marker, style;
+
if (!Ext.isArray(data)) {
data = [data];
}
+
for (i = 0; i < data.length; i++) {
position = data[i];
deviceId = position.get('deviceId');
@@ -56,11 +60,6 @@ Ext.define('Traccar.view.MapController', {
position.get('latitude')
]));
- style = this.getLatestMarker();
- style.getImage().setRotation(position.get('course'));
- style.getText().setText(
- Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true).get('name'));
-
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
marker.setGeometry(geometry);
@@ -68,51 +67,77 @@ Ext.define('Traccar.view.MapController', {
marker = new ol.Feature(geometry);
this.latestMarkers[deviceId] = marker;
this.getView().getVectorSource().addFeature(marker);
+
+ style = this.getLatestMarker();
+ style.getImage().setRotation(position.get('course'));
+ style.getText().setText(
+ Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true).get('name'));
+ marker.setStyle(style);
}
+ }
+ },
+
+ loadReport: function (store, data) {
+ var i, position, point, points, geometry, deviceId, name, marker, style;
+
+ this.clearReport(store);
+
+ this.reportRoute = new ol.Feature({
+ geometry: new ol.geom.LineString([])
+ });
+ this.reportRoute.setStyle(this.getRouteStyle());
+ this.getView().getVectorSource().addFeature(this.reportRoute);
+
+ for (i = 0; i < data.length; i++) {
+ position = data[i];
+
+ point = ol.proj.fromLonLat([
+ position.get('longitude'),
+ position.get('latitude')
+ ]);
+ geometry = new ol.geom.Point(point);
+
+ marker = new ol.Feature(geometry);
+ this.reportMarkers[position.get('id')] = marker;
+ this.getView().getVectorSource().addFeature(marker);
+ style = this.getReportMarker();
+ style.getImage().setRotation(position.get('course'));
+ // style.getText().setText('2000-01-01 00:00:00'); // TODO show time
marker.setStyle(style);
+
+ this.reportRoute.getGeometry().appendCoordinate(point);
}
},
- getLineStyle: function () {
- return new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: Traccar.Style.mapStrokeColor,
- width: Traccar.Style.mapRouteWidth
- })
- });
+ clearReport: function (store) {
+ var vectorSource = this.getView().getVectorSource();
+
+ if (this.reportRoute) {
+ vectorSource.removeFeature(this.reportRoute);
+ this.reportRoute = null;
+ }
+
+ if (this.reportMarkers) {
+ for (var key in this.reportMarkers) {
+ if (this.reportMarkers.hasOwnProperty(key)) {
+ vectorSource.removeFeature(this.reportMarkers[key]);
+ }
+ }
+ this.reportMarkers = {};
+ }
},
- getLatestMarker: function () {
+ getRouteStyle: function () {
return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: Traccar.Style.mapLiveRadius,
- fill: new ol.style.Fill({
- color: Traccar.Style.mapLiveColor
- }),
- stroke: new ol.style.Stroke({
- color: Traccar.Style.mapStrokeColor,
- width: Traccar.Style.mapMarkerStroke
- })//,
- //rotation: rotation * Math.PI / 180
- }),
- text: new ol.style.Text({
- textBaseline: 'bottom',
- //text: text,
- fill: new ol.style.Fill({
- color: '#000'
- }),
- stroke: new ol.style.Stroke({
- color: '#FFF',
- width: 2
- }),
- offsetY: -12,
- font : 'bold 12px sans-serif'
+ stroke: new ol.style.Stroke({
+ color: Traccar.Style.mapRouteColor,
+ width: Traccar.Style.mapRouteWidth
})
});
},
- getMarkerStyle: function (radius, color, rotation, text) {
+ getMarkerStyle: function (radius, color) {
return new ol.style.Style({
image: new ol.style.Arrow({
radius: radius,
@@ -120,113 +145,66 @@ Ext.define('Traccar.view.MapController', {
color: color
}),
stroke: new ol.style.Stroke({
- color: Traccar.Style.mapStrokeColor,
- width: Traccar.Style.mapMarkerStroke
- }),
- rotation: rotation * Math.PI / 180
+ color: Traccar.Style.mapArrowStrokeColor,
+ width: Traccar.Style.mapArrowStrokeWidth
+ })
}),
text: new ol.style.Text({
textBaseline: 'bottom',
- text: text,
fill: new ol.style.Fill({
- color: '#000'
+ color: Traccar.Style.mapTextColor
}),
stroke: new ol.style.Stroke({
- color: '#FFF',
- width: 2
+ color: Traccar.Style.mapTextStrokeColor,
+ width: Traccar.Style.mapTextStrokeWidth
}),
- offsetY: -12,
- font : 'bold 12px sans-serif'
+ offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+ font : Traccar.Style.mapTextFont
})
});
},
- reportShow: function () {
- this.reportClear();
-
- var vectorSource = this.getView().getVectorSource();
-
- var data = Ext.getStore('Positions').getData();
-
- var index;
- var positions = [];
- this.reportRoutePoints = {};
-
- for (index = 0; index < data.getCount(); index++) {
- var point = ol.proj.fromLonLat([
- data.getAt(index).data.longitude,
- data.getAt(index).data.latitude
- ]);
- positions.push(point);
-
- var style = this.getMarkerStyle(Traccar.Style.mapReportRadius, Traccar.Style.mapReportColor, data.getAt(index).data.course);
- var feature = new ol.Feature({
- geometry: new ol.geom.Point(positions[index]),
- originalStyle: style
- });
- feature.setStyle(style);
- this.reportRoutePoints[data.getAt(index).get('id')] = feature;
- }
-
- this.reportRoute = new ol.Feature({
- geometry: new ol.geom.LineString(positions)
- });
- this.reportRoute.setStyle(this.getLineStyle());
- vectorSource.addFeature(this.reportRoute);
-
- for (var key in this.reportRoutePoints) {
- if (this.reportRoutePoints.hasOwnProperty(key)) {
- vectorSource.addFeature(this.reportRoutePoints[key]);
- }
- }
+ getLatestMarker: function () {
+ return this.getMarkerStyle(
+ Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorUnknown);
},
- reportClear: function () {
- var vectorSource = this.getView().getVectorSource();
-
- if (this.reportRoute !== undefined) {
- vectorSource.removeFeature(this.reportRoute);
- this.reportRoute = undefined;
- }
+ getReportMarker: function () {
+ return this.getMarkerStyle(
+ Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport);
+ },
- if (this.reportRoutePoints !== undefined) {
- for (var key in this.reportRoutePoints) {
- if (this.reportRoutePoints.hasOwnProperty(key)) {
- vectorSource.removeFeature(this.reportRoutePoints[key]);
- }
- }
- this.reportRoutePoints = {};
- }
+ resizeMarker: function (style, radius) {
+ return new ol.style.Style({
+ image: new ol.style.Arrow({
+ radius: radius,
+ fill: style.getImage().getFill(),
+ stroke: style.getImage().getStroke()
+ }),
+ text: style.getText()
+ });
},
- selectPosition: function (feature) {
- if (this.currentFeature !== undefined) {
- this.currentFeature.setStyle(this.currentFeature.get('originalStyle'));
+ selectMarker: function (marker) {
+ if (this.selectedMarker) {
+ this.selectedMarker.setStyle(
+ this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusSelected));
}
- if (feature !== undefined) {
- var name = feature.getStyle().getText().getText();
- feature.setStyle(this.getMarkerStyle(Traccar.Style.mapSelectRadius, Traccar.Style.mapSelectColor, 0, name));
-
- var pan = ol.animation.pan({
- duration: Traccar.Style.mapDelay,
- source: this.getView().getMapView().getCenter()
- });
- this.getView().getMap().beforeRender(pan);
- this.getView().getMapView().setCenter(feature.getGeometry().getCoordinates());
+ if (marker) {
+ marker.setStyle(
+ this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+ this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
}
- this.currentFeature = feature;
+ this.selectedMarker = marker;
},
selectDevice: function (device) {
- //this.selectPosition(this.liveData[device.get('id')]);
+ this.selectMarker(this.latestMarkers[device.get('id')]);
},
selectReport: function (position) {
- if (this.reportRoutePoints[position.get('id')] !== undefined) {
- this.selectPosition(this.reportRoutePoints[position.get('id')]);
- }
+ this.selectMarker(this.reportMarkers[position.get('id')]);
}
-
});
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 2badfea63..660fe786d 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -53,17 +53,12 @@ Ext.define('Traccar.view.ReportController', {
deviceId: deviceId,
from: from.toISOString(),
to: to.toISOString()
- },
- scope: this,
- callback: function () {
- this.fireEvent('reportShow');
}
});
},
onClearClick: function () {
Ext.getStore('Positions').removeAll();
- this.fireEvent('reportClear');
},
onSelectionChange: function (selected) {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 07:49:26 +0000