aboutsummaryrefslogtreecommitdiff
path: root/web/app/view
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view')
-rw-r--r--web/app/view/Devices.js135
-rw-r--r--web/app/view/MapMarkerController.js93
2 files changed, 136 insertions, 92 deletions
diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 645b8e7f..eee214ee 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -1,5 +1,5 @@
/*
- * Copyright 2015 - 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2015 - 2017 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
@@ -20,20 +20,19 @@ Ext.define('Traccar.view.Devices', {
xtype: 'devicesView',
requires: [
+ 'Ext.grid.filters.Filters',
'Traccar.view.DevicesController',
'Traccar.view.EditToolbar'
],
controller: 'devices',
- rootVisible: false,
- initComponent: function () {
- this.store = Ext.create('Ext.data.ChainedStore', {
- source: 'Devices',
- groupField: 'groupId'
- });
- this.callParent();
- },
+ plugins: 'gridfilters',
+
+ store: 'VisibleDevices',
+
+ stateful: true,
+ stateId: 'devices-grid',
tbar: {
componentCls: 'toolbar-header-style',
@@ -85,79 +84,25 @@ Ext.define('Traccar.view.Devices', {
}]
},
- bbar: [{
- xtype: 'tbtext',
- html: Strings.groupParent
- }, {
- xtype: 'combobox',
- store: 'Groups',
- queryMode: 'local',
- displayField: 'name',
- valueField: 'id',
- flex: 1,
- listeners: {
- change: function () {
- if (Ext.isNumber(this.getValue())) {
- this.up('grid').store.filter({
- id: 'groupFilter',
- filterFn: function (item) {
- var groupId, group, groupStore, filter = true;
- groupId = item.get('groupId');
- groupStore = Ext.getStore('Groups');
-
- while (groupId) {
- group = groupStore.getById(groupId);
- if (group) {
- if (group.get('id') === this.getValue()) {
- filter = false;
- break;
- }
- groupId = group.get('groupId');
- } else {
- groupId = 0;
- }
- }
-
- return !filter;
- },
- scope: this
- });
- } else {
- this.up('grid').store.removeFilter('groupFilter');
- }
- }
- }
- }, {
- xtype: 'tbtext',
- html: Strings.sharedSearch
- }, {
- xtype: 'textfield',
- flex: 1,
- listeners: {
- change: function () {
- this.up('grid').store.filter('name', this.getValue());
- }
- }
- }],
-
listeners: {
selectionchange: 'onSelectionChange'
},
columns: {
defaults: {
- flex: 1,
+ flex: 2,
minWidth: Traccar.Style.columnWidthNormal
},
items: [{
text: Strings.sharedName,
- dataIndex: 'name'
+ dataIndex: 'name',
+ filter: 'string'
}, {
text: Strings.deviceIdentifier,
dataIndex: 'uniqueId',
hidden: true
}, {
- text: Strings.devicePhone,
+ text: Strings.sharedPhone,
dataIndex: 'phone',
hidden: true
}, {
@@ -169,24 +114,50 @@ Ext.define('Traccar.view.Devices', {
dataIndex: 'contact',
hidden: true
}, {
+ text: Strings.groupDialog,
+ dataIndex: 'groupId',
+ hidden: true,
+ filter: {
+ type: 'list',
+ labelField: 'name',
+ store: 'Groups'
+ },
+ renderer: function (value) {
+ var group;
+ if (value !== 0) {
+ group = Ext.getStore('Groups').getById(value);
+ return group ? group.get('name') : value;
+ }
+ }
+ }, {
text: Strings.deviceLastUpdate,
dataIndex: 'lastUpdate',
- renderer: function (value, metaData, record) {
- switch (record.get('status')) {
- case 'online':
- metaData.tdCls = 'view-color-green';
- break;
- case 'offline':
- metaData.tdCls = 'view-color-red';
- break;
- default:
- metaData.tdCls = 'view-color-yellow';
- break;
+ renderer: function (value) {
+ if (value) {
+ if (Traccar.app.getPreference('twelveHourFormat', false)) {
+ return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
+ } else {
+ return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
+ }
}
- if (Traccar.app.getPreference('twelveHourFormat', false)) {
- return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
- } else {
- return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
+ }
+ }, {
+ text: Strings.deviceStatus,
+ dataIndex: 'status',
+ flex: 1,
+ filter: {
+ type: 'list',
+ labelField: 'name',
+ store: 'DeviceStatuses'
+ },
+ renderer: function (value, metaData) {
+ var status;
+ if (value) {
+ status = Ext.getStore('DeviceStatuses').getById(value);
+ if (status) {
+ metaData.tdCls = status.get('color');
+ return status.get('name');
+ }
}
}
}]
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index bb418704..fa380e76 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -32,6 +32,9 @@ Ext.define('Traccar.view.MapMarkerController', {
'*': {
selectdevice: 'selectDevice',
selectreport: 'selectReport'
+ },
+ 'devices': {
+ deselectfeature: 'deselectDevice'
}
},
store: {
@@ -40,6 +43,12 @@ Ext.define('Traccar.view.MapMarkerController', {
update: 'updateDevice',
remove: 'removeDevice'
},
+ '#VisibleDevices': {
+ add: 'updateVisibleDevices',
+ update: 'updateVisibleDevices',
+ remove: 'updateVisibleDevices',
+ refresh: 'filterDevices'
+ },
'#LatestPositions': {
add: 'updateLatest',
update: 'updateLatest'
@@ -174,14 +183,14 @@ Ext.define('Traccar.view.MapMarkerController', {
device = Ext.getStore('Devices').getById(position.get('deviceId'));
if (device) {
- this.updateAccuracy(position);
+ this.updateAccuracy(position, device);
this.updateLatestMarker(position, device);
- this.updateLiveRoute(position);
+ this.updateLiveRoute(position, device);
}
}
},
- updateAccuracy: function (position) {
+ updateAccuracy: function (position, device) {
var center, radius, feature, mapView, projection, pointResolution;
mapView = this.getView().getMapView();
feature = this.accuracyCircles[position.get('deviceId')];
@@ -198,11 +207,14 @@ Ext.define('Traccar.view.MapMarkerController', {
} else {
feature = new ol.Feature(new ol.geom.Circle(center, radius));
feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor));
- this.getView().getAccuracySource().addFeature(feature);
+ feature.setId(position.get('deviceId'));
this.accuracyCircles[position.get('deviceId')] = feature;
+ if (this.isDeviceVisible(device)) {
+ this.getView().getAccuracySource().addFeature(feature);
+ }
}
} else {
- if (feature) {
+ if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) {
this.getView().getAccuracySource().removeFeature(feature);
}
delete this.accuracyCircles[position.get('deviceId')];
@@ -232,9 +244,11 @@ Ext.define('Traccar.view.MapMarkerController', {
device.get('category'));
style.getText().setText(device.get('name'));
marker.setStyle(style);
+ marker.setId(device.get('id'));
this.latestMarkers[deviceId] = marker;
- this.getView().getMarkersSource().addFeature(marker);
-
+ if (this.isDeviceVisible(device)) {
+ this.getView().getMarkersSource().addFeature(marker);
+ }
}
if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) {
@@ -242,7 +256,7 @@ Ext.define('Traccar.view.MapMarkerController', {
}
},
- updateLiveRoute: function (position) {
+ updateLiveRoute: function (position, device) {
var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates;
deviceId = position.get('deviceId');
if (deviceId in this.liveRoutes) {
@@ -268,8 +282,11 @@ Ext.define('Traccar.view.MapMarkerController', {
])
});
liveLine.setStyle(this.getRouteStyle(deviceId));
+ liveLine.setId(position.get('deviceId'));
this.liveRoutes[deviceId] = liveLine;
- this.getView().getLiveRouteSource().addFeature(liveLine);
+ if (this.isDeviceVisible(device)) {
+ this.getView().getMarkersSource().addFeature(liveLine);
+ }
}
},
@@ -462,10 +479,14 @@ Ext.define('Traccar.view.MapMarkerController', {
},
deselectFeature: function () {
- this.selectMarker(null, false);
+ this.deselectDevice();
this.fireEvent('deselectfeature');
},
+ deselectDevice: function () {
+ this.selectMarker(null, false);
+ },
+
zoomToAllPositions: function (data) {
var i, point, minx, miny, maxx, maxy;
for (i = 0; i < data.length; i++) {
@@ -488,5 +509,57 @@ Ext.define('Traccar.view.MapMarkerController', {
} else if (point) {
this.getView().getMapView().fit(new ol.geom.Point(point));
}
+ },
+
+ updateVisibleDevices: function (store, data) {
+ var i, device;
+
+ if (!Ext.isArray(data)) {
+ data = [data];
+ }
+
+ for (i = 0; i < data.length; i++) {
+ device = data[i];
+ if (device.get('id') in this.latestMarkers) {
+ this.updateDeviceVisibility(device);
+ }
+ }
+ },
+
+ isDeviceVisible: function (device) {
+ return Ext.getStore('VisibleDevices').contains(device);
+ },
+
+ updateDeviceVisibility: function (device) {
+ var deviceId, accuracy, liveLine, marker;
+ deviceId = device.get('id');
+ marker = this.latestMarkers[deviceId];
+ accuracy = this.accuracyCircles[deviceId];
+ liveLine = this.liveRoutes[deviceId];
+ if (this.isDeviceVisible(device)) {
+ if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) {
+ this.getView().getMarkersSource().addFeature(marker);
+ }
+ if (accuracy && !this.getView().getAccuracySource().getFeatureById(accuracy.getId())) {
+ this.getView().getAccuracySource().addFeature(accuracy);
+ }
+ if (liveLine && !this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) {
+ this.getView().getLiveRouteSource().addFeature(liveLine);
+ }
+ } else {
+ if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) {
+ this.getView().getMarkersSource().removeFeature(marker);
+ }
+ if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) {
+ this.getView().getAccuracySource().removeFeature(accuracy);
+ }
+ if (liveLine && this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) {
+ this.getView().getLiveRouteSource().removeFeature(liveLine);
+ }
+ }
+ },
+
+ filterDevices: function (store) {
+ Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false);
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-03 22:47:21 +0000