aboutsummaryrefslogtreecommitdiff
path: root/web/app/view/Devices.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view/Devices.js')
-rw-r--r--web/app/view/Devices.js176
1 files changed, 176 insertions, 0 deletions
diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
new file mode 100644
index 00000000..ab6436ea
--- /dev/null
+++ b/web/app/view/Devices.js
@@ -0,0 +1,176 @@
+/*
+ * Copyright 2015 - 2016 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Ext.define('Traccar.view.Devices', {
+ extend: 'Ext.grid.Panel',
+ xtype: 'devicesView',
+
+ requires: [
+ 'Traccar.view.DevicesController',
+ 'Traccar.view.EditToolbar',
+ 'Traccar.view.SettingsMenu'
+ ],
+
+ controller: 'devices',
+ rootVisible: false,
+
+ initComponent: function () {
+ this.store = Ext.create('Ext.data.ChainedStore', {
+ source: 'Devices',
+ groupField: 'groupId'
+ });
+ this.callParent();
+ },
+
+ title: Strings.deviceTitle,
+ selType: 'rowmodel',
+
+ tbar: {
+ xtype: 'editToolbar',
+ items: [{
+ xtype: 'button',
+ disabled: true,
+ handler: 'onGeofencesClick',
+ reference: 'toolbarGeofencesButton',
+ glyph: 'xf21d@FontAwesome',
+ tooltip: Strings.sharedGeofences,
+ tooltipType: 'title'
+ }, {
+ disabled: true,
+ handler: 'onCommandClick',
+ reference: 'deviceCommandButton',
+ glyph: 'xf093@FontAwesome',
+ tooltip: Strings.deviceCommand,
+ tooltipType: 'title'
+ }, {
+ xtype: 'tbfill'
+ }, {
+ id: 'muteButton',
+ glyph: 'xf1f7@FontAwesome',
+ tooltip: Strings.sharedMute,
+ tooltipType: 'title',
+ pressed : true,
+ enableToggle: true,
+ listeners: {
+ toggle: function (button, pressed) {
+ if (pressed) {
+ button.setGlyph('xf1f7@FontAwesome');
+ } else {
+ button.setGlyph('xf0a2@FontAwesome');
+ }
+ },
+ scope: this
+ }
+ }, {
+ id: 'deviceFollowButton',
+ glyph: 'xf05b@FontAwesome',
+ tooltip: Strings.deviceFollow,
+ tooltipType: 'title',
+ enableToggle: true,
+ toggleHandler: 'onFollowClick'
+ }, {
+ xtype: 'settingsMenu'
+ }]
+ },
+
+ 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: [{
+ text: Strings.sharedName,
+ dataIndex: 'name',
+ flex: 1
+ }, {
+ text: Strings.deviceLastUpdate,
+ dataIndex: 'lastUpdate',
+ flex: 1,
+ 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;
+ }
+ if (Traccar.app.getPreference('twelveHourFormat', false)) {
+ return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
+ } else {
+ return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
+ }
+ }
+ }]
+
+});