aboutsummaryrefslogtreecommitdiff
path: root/web/app/view
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view')
-rw-r--r--web/app/view/DeviceDialog.js16
-rw-r--r--web/app/view/DevicesController.js1
-rw-r--r--web/app/view/MapController.js96
-rw-r--r--web/app/view/ReportController.js2
4 files changed, 67 insertions, 48 deletions
diff --git a/web/app/view/DeviceDialog.js b/web/app/view/DeviceDialog.js
index 68740b24..d3f964ed 100644
--- a/web/app/view/DeviceDialog.js
+++ b/web/app/view/DeviceDialog.js
@@ -57,6 +57,22 @@ Ext.define('Traccar.view.DeviceDialog', {
xtype: 'textfield',
name: 'contact',
fieldLabel: Strings.deviceContact
+ }, {
+ xtype: 'combobox',
+ name: 'category',
+ fieldLabel: Strings.deviceCategory,
+ store: 'DeviceImages',
+ queryMode: 'local',
+ displayField: 'name',
+ valueField: 'key',
+ listConfig: {
+ getInnerTpl: function () {
+ return '<table><tr valign="middle" ><td><div align="center" style="width:40px;height:40px;" >' +
+ '{[new XMLSerializer().serializeToString(Traccar.DeviceImages.getImageSvg(' +
+ 'Traccar.Style.mapColorOnline, false, 0, values.key))]}</div></td>' +
+ '<td>- {name}</td></tr></table>';
+ }
+ }
}]
}
});
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index aa8e7886..a31ceb77 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -147,6 +147,7 @@ Ext.define('Traccar.view.DevicesController', {
selectDevice: function (device, center) {
this.getView().getSelectionModel().select([device], false, true);
+ this.updateButtons(this.getView().getSelectionModel());
this.getView().getView().focusRow(device);
},
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 32ea6b05..c981fabc 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,7 +22,8 @@ Ext.define('Traccar.view.MapController', {
requires: [
'Traccar.model.Position',
'Traccar.model.Device',
- 'Traccar.GeofenceConverter'
+ 'Traccar.GeofenceConverter',
+ 'Traccar.DeviceImages'
],
config: {
@@ -70,7 +71,7 @@ Ext.define('Traccar.view.MapController', {
this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
},
- showReports: function() {
+ showReports: function () {
Traccar.app.showReports(true);
},
@@ -85,18 +86,15 @@ Ext.define('Traccar.view.MapController', {
}
},
- changeMarkerColor: function (style, color) {
- return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: style.getImage().getRadius(),
- fill: new ol.style.Fill({
- color: color
- }),
- stroke: style.getImage().getStroke(),
- rotation: style.getImage().getRotation()
- }),
+ changeMarkerColor: function (style, color, category) {
+ var newStyle = new ol.style.Style({
+ image: Traccar.DeviceImages.getImageIcon(color,
+ style.getImage().zoom,
+ style.getImage().angle,
+ category),
text: style.getText()
});
+ return newStyle;
},
updateDevice: function (store, data) {
@@ -113,7 +111,7 @@ Ext.define('Traccar.view.MapController', {
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
marker.setStyle(
- this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device)));
+ this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device), device.get('category')));
}
}
},
@@ -154,18 +152,20 @@ Ext.define('Traccar.view.MapController', {
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
marker.setGeometry(geometry);
+ marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
} else {
marker = new ol.Feature(geometry);
marker.set('record', device);
- this.latestMarkers[deviceId] = marker;
- this.getView().getLatestSource().addFeature(marker);
- style = this.getLatestMarker(this.getDeviceColor(device));
+ style = this.getLatestMarker(this.getDeviceColor(device),
+ position.get('course'),
+ device.get('category'));
style.getText().setText(device.get('name'));
marker.setStyle(style);
- }
+ this.latestMarkers[deviceId] = marker;
+ this.getView().getLatestSource().addFeature(marker);
- marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
+ }
if (marker === this.selectedMarker && this.followSelected()) {
this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
@@ -231,8 +231,7 @@ Ext.define('Traccar.view.MapController', {
this.reportMarkers[position.get('id')] = marker;
this.getView().getReportSource().addFeature(marker);
- style = this.getReportMarker(position.get('deviceId'));
- style.getImage().setRotation(position.get('course') * Math.PI / 180);
+ style = this.getReportMarker(position.get('deviceId'), position.get('course'));
/*style.getText().setText(
Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
@@ -278,18 +277,10 @@ Ext.define('Traccar.view.MapController', {
});
},
- getMarkerStyle: function (radius, color) {
+ getMarkerStyle: function (zoom, color, angle, category) {
+ var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category);
return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: radius,
- fill: new ol.style.Fill({
- color: color
- }),
- stroke: new ol.style.Stroke({
- color: Traccar.Style.mapArrowStrokeColor,
- width: Traccar.Style.mapArrowStrokeWidth
- })
- }),
+ image: image,
text: new ol.style.Text({
textBaseline: 'bottom',
fill: new ol.style.Fill({
@@ -299,47 +290,58 @@ Ext.define('Traccar.view.MapController', {
color: Traccar.Style.mapTextStrokeColor,
width: Traccar.Style.mapTextStrokeWidth
}),
- offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+ offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset,
font : Traccar.Style.mapTextFont
})
});
},
- getLatestMarker: function (color) {
- return this.getMarkerStyle(
- Traccar.Style.mapRadiusNormal, color);
+ getLatestMarker: function (color, angle, category) {
+ return this.getMarkerStyle(false, color, angle, category);
},
- getReportMarker: function (deviceId) {
+ getReportMarker: function (deviceId, angle) {
var index = 0;
if (deviceId !== undefined) {
index = deviceId % Traccar.Style.mapRouteColor.length;
}
- return this.getMarkerStyle(
- Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]);
+ return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'arrow');
},
- resizeMarker: function (style, radius) {
+ resizeMarker: function (style, zoom) {
+ var image, text;
+ image = Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+ zoom,
+ style.getImage().angle,
+ style.getImage().category);
+ text = style.getText();
+ text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: radius,
- fill: style.getImage().getFill(),
- stroke: style.getImage().getStroke(),
- rotation: style.getImage().getRotation()
- }),
+ image: image,
+ text: text
+ });
+ },
+
+ rotateMarker: function (style, angle) {
+ var newStyle = new ol.style.Style({
+ image: Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+ style.getImage().zoom,
+ angle,
+ style.getImage().category),
text: style.getText()
});
+ return newStyle;
},
selectMarker: function (marker, center) {
if (this.selectedMarker) {
this.selectedMarker.setStyle(
- this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal));
+ this.resizeMarker(this.selectedMarker.getStyle(), false));
}
if (marker) {
marker.setStyle(
- this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+ this.resizeMarker(marker.getStyle(), true));
if (center) {
this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
}
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 224a2a86..a8c5f4eb 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -41,7 +41,7 @@ Ext.define('Traccar.view.ReportController', {
}
},
- hideReports: function() {
+ hideReports: function () {
Traccar.app.showReports(false);
},
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-03 21:22:43 +0000