Merge pull request #467 from Abyss777/known_attributes

Known attributes

5 files changed, 155 insertions, 8 deletions

diff --git a/web/app/view/ColorPicker.js b/web/app/view/ColorPicker.js
new file mode 100644
index 00000000..5de03aa3
--- /dev/null
+++ b/web/app/view/ColorPicker.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2017 Anton Tananaev (anton@traccar.org)
+ * Copyright 2017 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.view.ColorPicker', {
+    extend: 'Ext.form.field.Picker',
+    xtype: 'customcolorpicker',
+
+    config: {
+        value: '#008000'
+    },
+
+    editable: false,
+
+    createPicker: function () {
+        return Ext.create('Ext.picker.Color', {
+            floating: true,
+            picker: this,
+            select: function (selColor) {
+                this.picker.setValue('#' + selColor);
+                this.picker.collapse();
+            }
+        });
+    },
+
+    setValue: function (color) {
+        this.callParent([color]);
+        this.setFieldStyle('background-color:' + color);
+    }
+});
diff --git a/web/app/view/dialog/Attribute.js b/web/app/view/dialog/Attribute.js
index 993c2b12..6614c87f 100644
--- a/web/app/view/dialog/Attribute.js
+++ b/web/app/view/dialog/Attribute.js
@@ -19,7 +19,8 @@ Ext.define('Traccar.view.dialog.Attribute', {
     extend: 'Traccar.view.dialog.Base',
 
     requires: [
-        'Traccar.view.dialog.AttributeController'
+        'Traccar.view.dialog.AttributeController',
+        'Traccar.view.ColorPicker'
     ],
 
     controller: 'attribute',
@@ -27,19 +28,27 @@ Ext.define('Traccar.view.dialog.Attribute', {
 
     items: {
         xtype: 'form',
+        listeners: {
+            validitychange: 'onValidityChange'
+        },
         items: [{
             xtype: 'textfield',
+            reference: 'nameTextField',
             name: 'name',
+            allowBlank: false,
             fieldLabel: Strings.sharedName
         }, {
             xtype: 'textfield',
             name: 'value',
+            reference: 'valueField',
+            allowBlank: false,
             fieldLabel: Strings.stateValue
         }]
     },
 
     buttons: [{
         glyph: 'xf00c@FontAwesome',
+        reference: 'saveButton',
         tooltip: Strings.sharedSave,
         tooltipType: 'title',
         minWidth: 0,
diff --git a/web/app/view/dialog/AttributeController.js b/web/app/view/dialog/AttributeController.js
index 365a0df5..da5205b4 100644
--- a/web/app/view/dialog/AttributeController.js
+++ b/web/app/view/dialog/AttributeController.js
@@ -39,5 +39,49 @@ Ext.define('Traccar.view.dialog.AttributeController', {
             record.save();
         }
         button.up('window').close();
+    },
+
+    onValidityChange: function (form, valid) {
+        this.lookupReference('saveButton').setDisabled(!valid);
+    },
+
+    defaultFieldConfig: {
+        name: 'value',
+        reference: 'valueField',
+        allowBlank: false,
+        fieldLabel: Strings.stateValue
+    },
+
+    onNameChange: function (combobox, newValue) {
+        var type, config, attribute, valueField = this.lookupReference('valueField');
+        attribute = combobox.getStore().getById(newValue);
+        if (attribute) {
+            type = attribute.get('type');
+            config = Ext.clone(this.defaultFieldConfig);
+            if (type === 'number') {
+                config.xtype = 'numberfield';
+                if (attribute.get('allowDecimals') !== undefined) {
+                    config.allowDecimals = attribute.get('allowDecimals');
+                } else {
+                    config.allowDecimals = true;
+                }
+                config.maxValue = attribute.get('maxValue');
+                config.minValue = attribute.get('minValue');
+            } else if (type === 'boolean') {
+                config.xtype = 'checkboxfield';
+                config.inputValue = true;
+                config.uncheckedValue = false;
+            } else if (type === 'color') {
+                config.xtype = 'customcolorpicker';
+            } else {
+                config.xtype = 'textfield';
+            }
+            if (valueField.getXType() !== config.xtype) {
+                this.getView().down('form').insert(this.getView().down('form').items.indexOf(valueField), config);
+                this.getView().down('form').remove(valueField);
+            } else if (config.xtype === 'numberfield') {
+                valueField.setConfig(config);
+            }
+        }
     }
 });
diff --git a/web/app/view/edit/Attributes.js b/web/app/view/edit/Attributes.js
index 93e5a3a7..80083193 100644
--- a/web/app/view/edit/Attributes.js
+++ b/web/app/view/edit/Attributes.js
@@ -41,7 +41,14 @@ Ext.define('Traccar.view.edit.Attributes', {
         },
         items: [{
             text: Strings.sharedName,
-            dataIndex: 'name'
+            dataIndex: 'name',
+            renderer: function (value, metaData) {
+                var result;
+                if (this.attributesStore) {
+                    result = Ext.getStore(this.attributesStore).getById(value);
+                }
+                return result && result.get('name') ? result.get('name') : value;
+            }
         }, {
             text: Strings.stateValue,
             dataIndex: 'value'
diff --git a/web/app/view/edit/AttributesController.js b/web/app/view/edit/AttributesController.js
index 1ae32c78..235f2c5b 100644
--- a/web/app/view/edit/AttributesController.js
+++ b/web/app/view/edit/AttributesController.js
@@ -25,8 +25,6 @@ Ext.define('Traccar.view.edit.AttributesController', {
         'Traccar.model.Attribute'
     ],
 
-    objectModel: 'Traccar.model.Attribute',
-    objectDialog: 'Traccar.view.dialog.Attribute',
     removeTitle: Strings.stateName,
 
     init: function () {
@@ -42,18 +40,18 @@ Ext.define('Traccar.view.edit.AttributesController', {
                 store.add(Ext.create('Traccar.model.Attribute', {
                     priority: i++,
                     name: propertyName,
-                    value: this.getView().record.get('attributes')[propertyName]
+                    value: attributes[propertyName]
                 }));
             }
         }
-        store.addListener('add', function (store, records, index, eOpts) {
+        store.addListener('add', function (store, records) {
             var i;
             for (i = 0; i < records.length; i++) {
                 this.getView().record.get('attributes')[records[i].get('name')] = records[i].get('value');
             }
             this.getView().record.dirty = true;
         }, this);
-        store.addListener('update', function (store, record, operation, modifiedFieldNames, details, eOpts) {
+        store.addListener('update', function (store, record, operation) {
             if (operation === Ext.data.Model.EDIT) {
                 if (record.modified.name !== record.get('name')) {
                     delete this.getView().record.get('attributes')[record.modified.name];
@@ -62,7 +60,7 @@ Ext.define('Traccar.view.edit.AttributesController', {
                 this.getView().record.dirty = true;
             }
         }, this);
-        store.addListener('remove', function (store, records, index, isMove, eOpts) {
+        store.addListener('remove', function (store, records) {
             var i;
             for (i = 0; i < records.length; i++) {
                 delete this.getView().record.get('attributes')[records[i].get('name')];
@@ -71,5 +69,51 @@ Ext.define('Traccar.view.edit.AttributesController', {
         }, this);
 
         this.getView().setStore(store);
+        if (this.getView().record instanceof Traccar.model.Device) {
+            this.getView().attributesStore = 'DeviceAttributes';
+        } else if (this.getView().record instanceof Traccar.model.Geofence) {
+            this.getView().attributesStore = 'GeofenceAttributes';
+        } else if (this.getView().record instanceof Traccar.model.Group) {
+            this.getView().attributesStore = 'GroupAttributes';
+        } else if (this.getView().record instanceof Traccar.model.Server) {
+            this.getView().attributesStore = 'ServerAttributes';
+        } else if (this.getView().record instanceof Traccar.model.User) {
+            this.getView().attributesStore = 'UserAttributes';
+        }
+    },
+
+    comboConfig: {
+        xtype: 'combobox',
+        reference: 'nameComboField',
+        name: 'name',
+        fieldLabel: Strings.sharedName,
+        displayField: 'name',
+        valueField: 'key',
+        allowBlank: false,
+        listeners: {
+            change: 'onNameChange'
+        }
+    },
+
+    initDialog: function (record) {
+        var nameTextField, dialog = Ext.create('Traccar.view.dialog.Attribute');
+        if (this.getView().attributesStore) {
+            this.comboConfig.store = this.getView().attributesStore;
+            nameTextField = dialog.lookupReference('nameTextField');
+            dialog.down('form').insert(0, this.comboConfig);
+            dialog.down('form').remove(nameTextField);
+        }
+        dialog.down('form').loadRecord(record);
+        dialog.show();
+    },
+
+    onAddClick: function () {
+        var objectInstance = Ext.create('Traccar.model.Attribute');
+        objectInstance.store = this.getView().getStore();
+        this.initDialog(objectInstance);
+    },
+
+    onEditClick: function () {
+        this.initDialog(this.getView().getSelectionModel().getSelection()[0]);
     }
 });