luci-base: luci.js: support registering request progress handlers

[oweals/luci.git] / modules / luci-base / htdocs / luci-static / resources / form.js

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index 9c5cb9365044d890f26d5923f4ba318537cc54ec..31f6bd9616013f6e5182fea2aae20aa906027259 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -132,17 +132,19 @@ var CBIMap = CBINode.extend({
                return Promise.all(tasks);
        },
 
-       save: function() {
+       save: function(cb, silent) {
                this.checkDepends();
 
                return this.parse()
+                       .then(cb)
                        .then(uci.save.bind(uci))
                        .then(this.load.bind(this))
-                       .then(this.renderContents.bind(this))
                        .catch(function(e) {
-                               alert('Cannot save due to invalid values')
+                               if (!silent)
+                                       alert('Cannot save due to invalid values');
+
                                return Promise.reject();
-                       });
+                       }).finally(this.renderContents.bind(this));
        },
 
        reset: function() {
@@ -657,14 +659,14 @@ var CBITypedSection = CBIAbstractSection.extend({
                var config_name = this.uciconfig || this.map.config;
 
                uci.add(config_name, this.sectiontype, name);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        handleRemove: function(section_id, ev) {
                var config_name = this.uciconfig || this.map.config;
 
                uci.remove(config_name, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        renderSectionAdd: function(extra_class) {
@@ -679,13 +681,11 @@ var CBITypedSection = CBIAbstractSection.extend({
                        createEl.classList.add(extra_class);
 
                if (this.anonymous) {
-                       createEl.appendChild(E('input', {
-                               'type': 'submit',
+                       createEl.appendChild(E('button', {
                                'class': 'cbi-button cbi-button-add',
-                               'value': btn_title || _('Add'),
                                'title': btn_title || _('Add'),
-                               'click': L.bind(this.handleAdd, this)
-                       }));
+                               'click': L.ui.createHandlerFn(this, 'handleAdd')
+                       }, btn_title || _('Add')));
                }
                else {
                        var nameEl = E('input', {
@@ -700,12 +700,12 @@ var CBITypedSection = CBIAbstractSection.extend({
                                        'type': 'submit',
                                        'value': btn_title || _('Add'),
                                        'title': btn_title || _('Add'),
-                                       'click': L.bind(function(ev) {
+                                       'click': L.ui.createHandlerFn(this, function(ev) {
                                                if (nameEl.classList.contains('cbi-input-invalid'))
                                                        return;
 
-                                               this.handleAdd(ev, nameEl.value);
-                                       }, this)
+                                               return this.handleAdd(ev, nameEl.value);
+                                       })
                                })
                        ]);
 
@@ -742,14 +742,12 @@ var CBITypedSection = CBIAbstractSection.extend({
                        if (this.addremove) {
                                sectionEl.appendChild(
                                        E('div', { 'class': 'cbi-section-remove right' },
-                                               E('input', {
-                                                       'type': 'submit',
+                                               E('button', {
                                                        'class': 'cbi-button',
                                                        'name': 'cbi.rts.%s.%s'.format(config_name, cfgsections[i]),
-                                                       'value': _('Delete'),
                                                        'data-section-id': cfgsections[i],
-                                                       'click': L.bind(this.handleRemove, this, cfgsections[i])
-                                               })));
+                                                       'click': L.ui.createHandlerFn(this, 'handleRemove', cfgsections[i])
+                                               }, _('Delete'))));
                        }
 
                        if (!this.anonymous)
@@ -1003,7 +1001,7 @@ var CBITableSection = CBITypedSection.extend({
                                        'class': 'cbi-button cbi-button-remove',
                                        'click': L.bind(function(sid, ev) {
                                                uci.remove(config_name, sid);
-                                               this.map.save();
+                                               this.map.save(null, true);
                                        }, this, section_id)
                                })
                        );
@@ -1155,24 +1153,18 @@ var CBITableSection = CBITypedSection.extend({
                        }
                }
 
-               //ev.target.classList.add('spinning');
                Promise.resolve(this.addModalOptions(s, section_id, ev)).then(L.bind(m.render, m)).then(L.bind(function(nodes) {
-                       //ev.target.classList.remove('spinning');
                        L.ui.showModal(title, [
                                nodes,
                                E('div', { 'class': 'right' }, [
-                                       E('input', {
-                                               'type': 'button',
+                                       E('button', {
                                                'class': 'btn',
-                                               'click': L.bind(this.handleModalCancel, this, m),
-                                               'value': _('Dismiss')
-                                       }), ' ',
-                                       E('input', {
-                                               'type': 'button',
+                                               'click': L.ui.createHandlerFn(this, 'handleModalCancel', m)
+                                       }, _('Dismiss')), ' ',
+                                       E('button', {
                                                'class': 'cbi-button cbi-button-positive important',
-                                               'click': L.bind(this.handleModalSave, this, m),
-                                               'value': _('Save')
-                                       })
+                                               'click': L.ui.createHandlerFn(this, 'handleModalSave', m)
+                                       }, _('Save'))
                                ])
                        ], 'cbi-modal');
                }, this)).catch(L.error);
@@ -1282,7 +1274,7 @@ var CBINamedSection = CBIAbstractSection.extend({
                    config_name = this.uciconfig || this.map.config;
 
                uci.add(config_name, this.sectiontype, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        handleRemove: function(ev) {
@@ -1290,7 +1282,7 @@ var CBINamedSection = CBIAbstractSection.extend({
                    config_name = this.uciconfig || this.map.config;
 
                uci.remove(config_name, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        renderContents: function(data) {
@@ -1314,12 +1306,10 @@ var CBINamedSection = CBIAbstractSection.extend({
                        if (this.addremove) {
                                sectionEl.appendChild(
                                        E('div', { 'class': 'cbi-section-remove right' },
-                                               E('input', {
-                                                       'type': 'submit',
+                                               E('button', {
                                                        'class': 'cbi-button',
-                                                       'value': _('Delete'),
-                                                       'click': L.bind(this.handleRemove, this)
-                                               })));
+                                                       'click': L.ui.createHandlerFn(this, 'handleRemove')
+                                               }, _('Delete'))));
                        }
 
                        sectionEl.appendChild(E('div', {
@@ -1331,12 +1321,10 @@ var CBINamedSection = CBIAbstractSection.extend({
                }
                else if (this.addremove) {
                        sectionEl.appendChild(
-                               E('input', {
-                                       'type': 'submit',
+                               E('button', {
                                        'class': 'cbi-button cbi-button-add',
-                                       'value': _('Add'),
-                                       'click': L.bind(this.handleAdd, this)
-                               }));
+                                       'click': L.ui.createHandlerFn(this, 'handleAdd')
+                               }, _('Add')));
                }
 
                L.dom.bindClassInstance(sectionEl, this);
@@ -1599,6 +1587,29 @@ var CBIMultiValue = CBIDynamicList.extend({
        },
 });
 
+var CBITextValue = CBIValue.extend({
+       __name__: 'CBI.TextValue',
+
+       value: null,
+
+       renderWidget: function(section_id, option_index, cfgvalue) {
+               var value = (cfgvalue != null) ? cfgvalue : this.default;
+
+               var widget = new ui.Textarea(value, {
+                       id: this.cbid(section_id),
+                       optional: this.optional || this.rmempty,
+                       placeholder: this.placeholder,
+                       monospace: this.monospace,
+                       cols: this.cols,
+                       rows: this.rows,
+                       wrap: this.wrap,
+                       validate: L.bind(this.validate, this, section_id)
+               });
+
+               return widget.render();
+       }
+});
+
 var CBIDummyValue = CBIValue.extend({
        __name__: 'CBI.DummyValue',
 
@@ -1618,6 +1629,9 @@ var CBIDummyValue = CBIValue.extend({
                        hiddenEl.render()
                ]);
        },
+
+       remove: function() {},
+       write: function() {}
 });
 
 var CBIButtonValue = CBIValue.extend({
@@ -1712,6 +1726,7 @@ return L.Class.extend({
        ListValue: CBIListValue,
        Flag: CBIFlagValue,
        MultiValue: CBIMultiValue,
+       TextValue: CBITextValue,
        DummyValue: CBIDummyValue,
        Button: CBIButtonValue,
        HiddenValue: CBIHiddenValue,