2 files changed, 54 insertions, 1 deletions

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);
+            }
+        }
     }
 });