diff options
author | Jo-Philipp Wich <jo@mein.io> | 2019-08-20 15:04:13 +0200 |
---|---|---|
committer | Jo-Philipp Wich <jo@mein.io> | 2019-09-10 15:28:16 +0200 |
commit | 745878d6cd5aa498916cea13d6887d500bc5c32b (patch) | |
tree | 5a85dc07dfe727af307cb5fedb70715155948443 /modules/luci-base/htdocs | |
parent | b0dde567ca79c328e62736e88317dd4a8459bb0d (diff) |
luci-base: form.js: rework section add/remove event handling
- Redraw map even when it could not be saved due to validation errors
- Use createHandlerFn() for attaching event handlers
- Convert buttons to <button> element to allow use of spinning class
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'modules/luci-base/htdocs')
-rw-r--r-- | modules/luci-base/htdocs/luci-static/resources/form.js | 57 |
1 files changed, 25 insertions, 32 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index cc72d6e487..cb6bf7929a 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -132,18 +132,19 @@ var CBIMap = CBINode.extend({ return Promise.all(tasks); }, - save: function(cb) { + 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() { @@ -658,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) { @@ -680,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', { @@ -701,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); + }) }) ]); @@ -743,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) @@ -1004,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) }) ); @@ -1283,7 +1280,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) { @@ -1291,7 +1288,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) { @@ -1315,12 +1312,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', { @@ -1332,12 +1327,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); |