summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--modules/luci-base/htdocs/luci-static/resources/form.js1669
-rw-r--r--modules/luci-base/htdocs/luci-static/resources/luci.js3
2 files changed, 1671 insertions, 1 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
new file mode 100644
index 0000000000..835c1fbb61
--- /dev/null
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -0,0 +1,1669 @@
+'use strict';
+'require ui';
+'require uci';
+
+var scope = this;
+
+var CBINode = Class.extend({
+ __init__: function(title, description) {
+ this.title = title || '';
+ this.description = description || '';
+ this.children = [];
+ },
+
+ append: function(obj) {
+ this.children.push(obj);
+ },
+
+ parse: function() {
+ var args = arguments;
+ this.children.forEach(function(child) {
+ child.parse.apply(child, args);
+ });
+ },
+
+ render: function() {
+ L.error('InternalError', 'Not implemented');
+ },
+
+ loadChildren: function(/* ... */) {
+ var tasks = [];
+
+ if (Array.isArray(this.children))
+ for (var i = 0; i < this.children.length; i++)
+ if (!this.children[i].disable)
+ tasks.push(this.children[i].load.apply(this.children[i], arguments));
+
+ return Promise.all(tasks);
+ },
+
+ renderChildren: function(tab_name /*, ... */) {
+ var tasks = [],
+ index = 0;
+
+ if (Array.isArray(this.children))
+ for (var i = 0; i < this.children.length; i++)
+ if (tab_name === null || this.children[i].tab === tab_name)
+ if (!this.children[i].disable)
+ tasks.push(this.children[i].render.apply(
+ this.children[i], this.varargs(arguments, 1, index++)));
+
+ return Promise.all(tasks);
+ },
+
+ stripTags: function(s) {
+ if (!s.match(/[<>]/))
+ return s;
+
+ var x = E('div', {}, s);
+ return x.textContent || x.innerText || '';
+ }
+});
+
+var CBIMap = CBINode.extend({
+ __init__: function(config /*, ... */) {
+ this.super('__init__', this.varargs(arguments, 1));
+
+ this.config = config;
+ this.parsechain = [ config ];
+ },
+
+ findElements: function(/* ... */) {
+ var q = null;
+
+ if (arguments.length == 1)
+ q = arguments[0];
+ else if (arguments.length == 2)
+ q = '[%s="%s"]'.format(arguments[0], arguments[1]);
+ else
+ L.error('InternalError', 'Expecting one or two arguments to findElements()');
+
+ return this.root.querySelectorAll(q);
+ },
+
+ findElement: function(/* ... */) {
+ var res = this.findElements.apply(this, arguments);
+ return res.length ? res[0] : null;
+ },
+
+ chain: function(config) {
+ if (this.parsechain.indexOf(config) == -1)
+ this.parsechain.push(config);
+ },
+
+ section: function(cbiClass /*, ... */) {
+ if (!CBIAbstractSection.isSubclass(cbiClass))
+ L.error('TypeError', 'Class must be a descendent of CBIAbstractSection');
+
+ var obj = cbiClass.instantiate(this.varargs(arguments, 1, this));
+ this.append(obj);
+ return obj;
+ },
+
+ load: function() {
+ return uci.load(this.parsechain || [ this.config ])
+ .then(this.loadChildren.bind(this));
+ },
+
+ parse: function() {
+ var tasks = [];
+
+ if (Array.isArray(this.children))
+ for (var i = 0; i < this.children.length; i++)
+ tasks.push(this.children[i].parse());
+
+ return Promise.all(tasks);
+ },
+
+ save: function() {
+ return this.parse()
+ .then(uci.save.bind(uci))
+ .then(this.load.bind(this))
+ .then(this.renderContents.bind(this))
+ .catch(function() { alert('Cannot save due to invalid values') });
+ },
+
+ reset: function() {
+ return this.renderContents();
+ },
+
+ render: function() {
+ return this.load().then(this.renderContents.bind(this));
+ },
+
+ renderContents: function() {
+ var mapEl = this.root || (this.root = E('div', {
+ 'id': 'cbi-%s'.format(this.config),
+ 'class': 'cbi-map',
+ 'cbi-dependency-check': L.bind(this.checkDepends, this)
+ }));
+
+ L.dom.bindClassInstance(mapEl, this);
+
+ return this.renderChildren(null).then(L.bind(function(nodes) {
+ var initialRender = !mapEl.firstChild;
+
+ L.dom.content(mapEl, null);
+
+ if (this.title != null && this.title != '')
+ mapEl.appendChild(E('h2', { 'name': 'content' }, this.title));
+
+ if (this.description != null && this.description != '')
+ mapEl.appendChild(E('div', { 'class': 'cbi-map-descr' }, this.description));
+
+ L.dom.append(mapEl, nodes);
+
+ if (!initialRender) {
+ mapEl.classList.remove('flash');
+
+ window.setTimeout(function() {
+ mapEl.classList.add('flash');
+ }, 1);
+ }
+
+ this.checkDepends();
+
+ return mapEl;
+ }, this));
+ },
+
+ lookupOption: function(name, section_id) {
+ var id, elem, sid, inst;
+
+ if (name.indexOf('.') > -1)
+ id = 'cbid.%s'.format(name);
+ else
+ id = 'cbid.%s.%s.%s'.format(this.config, section_id, name);
+
+ elem = this.findElement('data-field', id);
+ sid = elem ? id.split(/\./)[2] : null;
+ inst = elem ? L.dom.findClassInstance(elem) : null;
+
+ return (inst instanceof CBIAbstractValue) ? [ inst, sid ] : null;
+ },
+
+ checkDepends: function(ev, n) {
+ var changed = false;
+
+ for (var i = 0, s = this.children[0]; (s = this.children[i]) != null; i++)
+ if (s.checkDepends(ev, n))
+ changed = true;
+
+ if (changed && (n || 0) < 10)
+ this.checkDepends(ev, (n || 10) + 1);
+ }
+});
+
+var CBIAbstractSection = CBINode.extend({
+ __init__: function(map, sectionType /*, ... */) {
+ this.super('__init__', this.varargs(arguments, 2));
+
+ this.sectiontype = sectionType;
+ this.map = map;
+ this.config = map.config;
+
+ this.optional = true;
+ this.addremove = false;
+ this.dynamic = false;
+ },
+
+ cfgsections: function() {
+ L.error('InternalError', 'Not implemented');
+ },
+
+ filter: function(section_id) {
+ return true;
+ },
+
+ load: function() {
+ var section_ids = this.cfgsections(),
+ tasks = [];
+
+ if (Array.isArray(this.children))
+ for (var i = 0; i < section_ids.length; i++)
+ tasks.push(this.loadChildren(section_ids[i])
+ .then(Function.prototype.bind.call(function(section_id, set_values) {
+ for (var i = 0; i < set_values.length; i++)
+ this.children[i].cfgvalue(section_id, set_values[i]);
+ }, this, section_ids[i])));
+
+ return Promise.all(tasks);
+ },
+
+ parse: function() {
+ var section_ids = this.cfgsections(),
+ tasks = [];
+
+ if (Array.isArray(this.children))
+ for (var i = 0; i < section_ids.length; i++)
+ for (var j = 0; j < this.children.length; j++)
+ tasks.push(this.children[j].parse(section_ids[i]));
+
+ return Promise.all(tasks);
+ },
+
+ tab: function(name, title, description) {
+ if (this.tabs && this.tabs[name])
+ throw 'Tab already declared';
+
+ var entry = {
+ name: name,
+ title: title,
+ description: description,
+ children: []
+ };
+
+ this.tabs = this.tabs || [];
+ this.tabs.push(entry);
+ this.tabs[name] = entry;
+
+ this.tab_names = this.tab_names || [];
+ this.tab_names.push(name);
+ },
+
+ option: function(cbiClass /*, ... */) {
+ if (!CBIAbstractValue.isSubclass(cbiClass))
+ throw L.error('TypeError', 'Class must be a descendent of CBIAbstractValue');
+
+ var obj = cbiClass.instantiate(this.varargs(arguments, 1, this.map, this));
+ this.append(obj);
+ return obj;
+ },
+
+ taboption: function(tabName /*, ... */) {
+ if (!this.tabs || !this.tabs[tabName])
+ throw L.error('ReferenceError', 'Associated tab not declared');
+
+ var obj = this.option.apply(this, this.varargs(arguments, 1));
+ obj.tab = tabName;
+ this.tabs[tabName].children.push(obj);
+ return obj;
+ },
+
+ renderUCISection: function(section_id) {
+ var renderTasks = [];
+
+ if (!this.tabs)
+ return this.renderOptions(null, section_id);
+
+ for (var i = 0; i < this.tab_names.length; i++)
+ renderTasks.push(this.renderOptions(this.tab_names[i], section_id));
+
+ return Promise.all(renderTasks)
+ .then(this.renderTabContainers.bind(this, section_id));
+ },
+
+ renderTabContainers: function(section_id, nodes) {
+ var config_name = this.uciconfig || this.map.config,
+ containerEls = E([]);
+
+ for (var i = 0; i < nodes.length; i++) {
+ var tab_name = this.tab_names[i],
+ tab_data = this.tabs[tab_name],
+ containerEl = E('div', {
+ 'id': 'container.%s.%s.%s'.format(config_name, section_id, tab_name),
+ 'data-tab': tab_name,
+ 'data-tab-title': tab_data.title,
+ 'data-tab-active': tab_name === this.selected_tab
+ });
+
+ if (tab_data.description != null && tab_data.description != '')
+ containerEl.appendChild(
+ E('div', { 'class': 'cbi-tab-descr' }, tab_data.description));
+
+ containerEl.appendChild(nodes[i]);
+ containerEls.appendChild(containerEl);
+ }
+
+ return containerEls;
+ },
+
+ renderOptions: function(tab_name, section_id) {
+ var in_table = (this instanceof CBITableSection);
+ return this.renderChildren(tab_name, section_id, in_table).then(function(nodes) {
+ var optionEls = E([]);
+ for (var i = 0; i < nodes.length; i++)
+ optionEls.appendChild(nodes[i]);
+ return optionEls;
+ });
+ },
+
+ checkDepends: function(ev, n) {
+ var changed = false,
+ sids = this.cfgsections();
+
+ for (var i = 0, sid = sids[0]; (sid = sids[i]) != null; i++) {
+ for (var j = 0, o = this.children[0]; (o = this.children[j]) != null; j++) {
+ var isActive = o.isActive(sid),
+ isSatisified = o.checkDepends(sid);
+
+ if (isActive != isSatisified) {
+ o.setActive(sid, !isActive);
+ changed = true;
+ }
+
+ if (!n && isActive)
+ o.triggerValidation(sid);
+ }
+ }
+
+ return changed;
+ }
+});
+
+
+var isEqual = function(x, y) {
+ if (x != null && y != null && typeof(x) != typeof(y))
+ return false;
+
+ if ((x == null && y != null) || (x != null && y == null))
+ return false;
+
+ if (Array.isArray(x)) {
+ if (x.length != y.length)
+ return false;
+
+ for (var i = 0; i < x.length; i++)
+ if (!isEqual(x[i], y[i]))
+ return false;
+ }
+ else if (typeof(x) == 'object') {
+ for (var k in x) {
+ if (x.hasOwnProperty(k) && !y.hasOwnProperty(k))
+ return false;
+
+ if (!isEqual(x[k], y[k]))
+ return false;
+ }
+
+ for (var k in y)
+ if (y.hasOwnProperty(k) && !x.hasOwnProperty(k))
+ return false;
+ }
+ else if (x != y) {
+ return false;
+ }
+
+ return true;
+};
+
+var CBIAbstractValue = CBINode.extend({
+ __init__: function(map, section, option /*, ... */) {
+ this.super('__init__', this.varargs(arguments, 3));
+
+ this.section = section;
+ this.option = option;
+ this.map = map;
+ this.config = map.config;
+
+ this.deps = [];
+ this.initial = {};
+ this.rmempty = true;
+ this.default = null;
+ this.size = null;
+ this.optional = false;
+ },
+
+ depends: function(field, value) {
+ var deps;
+
+ if (typeof(field) === 'string')
+ deps = {}, deps[field] = value;
+ else
+ deps = field;
+
+ this.deps.push(deps);
+ },
+
+ transformDepList: function(section_id, deplist) {
+ var list = deplist || this.deps,
+ deps = [];
+
+ if (Array.isArray(list)) {
+ for (var i = 0; i < list.length; i++) {
+ var dep = {};
+
+ for (var k in list[i]) {
+ if (list[i].hasOwnProperty(k)) {
+ if (k.charAt(0) === '!')
+ dep[k] = list[i][k];
+ else if (k.indexOf('.') !== -1)
+ dep['cbid.%s'.format(k)] = list[i][k];
+ else
+ dep['cbid.%s.%s.%s'.format(this.config, this.ucisection || section_id, k)] = list[i][k];
+ }
+ }
+
+ for (var k in dep) {
+ if (dep.hasOwnProperty(k)) {
+ deps.push(dep);
+ break;
+ }
+ }
+ }
+ }
+
+ return deps;
+ },
+
+ transformChoices: function() {
+ if (!Array.isArray(this.keylist) || this.keylist.length == 0)
+ return null;
+
+ var choices = {};
+
+ for (var i = 0; i < this.keylist.length; i++)
+ choices[this.keylist[i]] = this.vallist[i];
+
+ return choices;
+ },
+
+ checkDepends: function(section_id) {
+ var def = false;
+
+ if (!Array.isArray(this.deps) || !this.deps.length)
+ return true;
+
+ for (var i = 0; i < this.deps.length; i++) {
+ var istat = true,
+ reverse = false;
+
+ for (var dep in this.deps[i]) {
+ if (dep == '!reverse') {
+ reverse = true;
+ }
+ else if (dep == '!default') {
+ def = true;
+ istat = false;
+ }
+ else {
+ var res = this.map.lookupOption(dep, section_id),
+ val = res ? res[0].formvalue(res[1]) : null;
+
+ istat = (istat && isEqual(val, this.deps[i][dep]));
+ }
+ }
+
+ if (istat ^ reverse)
+ return true;
+ }
+
+ return def;
+ },
+
+ cbid: function(section_id) {
+ if (section_id == null)
+ L.error('TypeError', 'Section ID required');
+
+ return 'cbid.%s.%s.%s'.format(this.map.config, section_id, this.option);
+ },
+
+ load: function(section_id) {
+ if (section_id == null)
+ L.error('TypeError', 'Section ID required');
+
+ return uci.get(
+ this.uciconfig || this.map.config,
+ this.ucisection || section_id,
+ this.ucioption || this.option);
+ },
+
+ cfgvalue: function(section_id, set_value) {
+ if (section_id == null)
+ L.error('TypeError', 'Section ID required');
+
+ if (arguments.length == 2) {
+ this.data = this.data || {};
+ this.data[section_id] = set_value;
+ }
+
+ return this.data ? this.data[section_id] : null;
+ },
+
+ formvalue: function(section_id) {
+ var node = this.map.findElement('id', this.cbid(section_id));
+ return node ? L.dom.callClassMethod(node, 'getValue') : null;
+ },
+
+ textvalue: function(section_id) {
+ var cval = this.cfgvalue(section_id);
+
+ if (cval == null)
+ cval = this.default;
+
+ return (cval != null) ? '%h'.format(cval) : null;
+ },
+
+ validate: function(section_id, value) {
+ return true;
+ },
+
+ isValid: function(section_id) {
+ var node = this.map.findElement('id', this.cbid(section_id));
+ return node ? L.dom.callClassMethod(node, 'isValid') : true;
+ },
+
+ isActive: function(section_id) {
+ var field = this.map.findElement('data-field', this.cbid(section_id));
+ return (field != null && !field.classList.contains('hidden'));
+ },
+
+ setActive: function(section_id, active) {
+ var field = this.map.findElement('data-field', this.cbid(section_id));
+
+ if (field && field.classList.contains('hidden') == active) {
+ field.classList[active ? 'remove' : 'add']('hidden');
+ return true;
+ }
+
+ return false;
+ },
+
+ triggerValidation: function(section_id) {
+ var node = this.map.findElement('id', this.cbid(section_id));
+ return node ? L.dom.callClassMethod(node, 'triggerValidation') : true;
+ },
+
+ parse: function(section_id) {
+ var active = this.isActive(section_id),
+ cval = this.cfgvalue(section_id),
+ fval = active ? this.formvalue(section_id) : null;
+
+ if (active && !this.isValid(section_id))
+ return Promise.reject();
+
+ if (fval != '' && fval != null) {
+ if (this.forcewrite || !isEqual(cval, fval))
+ return Promise.resolve(this.write(section_id, fval));
+ }
+ else {
+ if (this.rmempty || this.optional) {
+ return Promise.resolve(this.remove(section_id));
+ }
+ else if (!isEqual(cval, fval)) {
+ console.log('This should have been catched by isValid()');
+ return Promise.reject();
+ }
+ }
+
+ return Promise.resolve();
+ },
+
+ write: function(section_id, formvalue) {
+ return uci.set(
+ this.uciconfig || this.map.config,
+ this.ucisection || section_id,
+ this.ucioption || this.option,
+ formvalue);
+ },
+
+ remove: function(section_id) {
+ return uci.unset(
+ this.uciconfig || this.map.config,
+ this.ucisection || section_id,
+ this.ucioption || this.option);
+ }
+});
+
+var CBITypedSection = CBIAbstractSection.extend({
+ __name__: 'CBI.TypedSection',
+
+ cfgsections: function() {
+ return uci.sections(this.uciconfig || this.map.config, this.sectiontype)
+ .map(function(s) { return s['.name'] })
+ .filter(L.bind(this.filter, this));
+ },
+
+ handleAdd: function(ev, name) {
+ var config_name = this.uciconfig || this.map.config;
+
+ uci.add(config_name, this.sectiontype, name);
+ this.map.save();
+ },
+
+ handleRemove: function(section_id, ev) {
+ var config_name = this.uciconfig || this.map.config;
+
+ uci.remove(config_name, section_id);
+ this.map.save();
+ },
+
+ renderSectionAdd: function(extra_class) {
+ if (!this.addremove)
+ return E([]);
+
+ var createEl = E('div', { 'class': 'cbi-section-create' }),
+ config_name = this.uciconfig || this.map.config;
+
+ if (extra_class != null)
+ createEl.classList.add(extra_class);
+
+ if (this.anonymous) {
+ createEl.appendChild(E('input', {
+ 'type': 'submit',
+ 'class': 'cbi-button cbi-button-add',
+ 'value': _('Add'),
+ 'title': _('Add'),
+ 'click': L.bind(this.handleAdd, this)
+ }));
+ }
+ else {
+ var nameEl = E('input', {
+ 'type': 'text',
+ 'class': 'cbi-section-create-name'
+ });
+
+ L.dom.append(createEl, [
+ E('div', {}, nameEl),
+ E('input', {
+ 'class': 'cbi-button cbi-button-add',
+ 'type': 'submit',
+ 'value': _('Add'),
+ 'title': _('Add'),
+ 'click': L.bind(function(ev) {
+ if (nameEl.classList.contains('cbi-input-invalid'))
+ return;
+
+ this.handleAdd(ev, nameEl.value);
+ }, this)
+ })
+ ]);
+
+ ui.addValidator(nameEl, 'uciname', true, 'blur', 'keyup');
+ }
+
+ return createEl;
+ },
+
+ renderContents: function(cfgsections, nodes) {
+ var section_id = null,
+ config_name = this.uciconfig || this.map.config,
+ sectionEl = E('div', {
+ 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
+ 'class': 'cbi-section'
+ });
+
+ if (this.title != null && this.title != '')
+ sectionEl.appendChild(E('legend', {}, this.title));
+
+ if (this.description != null && this.description != '')
+ sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
+
+ for (var i = 0; i < nodes.length; i++) {
+ if (this.addremove) {
+ sectionEl.appendChild(
+ E('div', { 'class': 'cbi-section-remove right' },
+ E('input', {
+ 'type': 'submit',
+ '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])
+ })));
+ }
+
+ if (!this.anonymous)
+ sectionEl.appendChild(E('h3', cfgsections[i].toUpperCase()));
+
+ sectionEl.appendChild(E('div', {
+ 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
+ 'class': this.tabs
+ ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node'
+ }, nodes[i]));
+
+ if (this.tabs)
+ ui.tabs.initTabGroup(sectionEl.lastChild.childNodes);
+ }
+
+ if (nodes.length == 0)
+ L.dom.append(sectionEl, [
+ E('em', _('This section contains no values yet')),
+ E('br'), E('br')
+ ]);
+
+ sectionEl.appendChild(this.renderSectionAdd());
+
+ L.dom.bindClassInstance(sectionEl, this);
+
+ return sectionEl;
+ },
+
+ render: function() {
+ var cfgsections = this.cfgsections(),
+ renderTasks = [];
+
+ for (var i = 0; i < cfgsections.length; i++)
+ renderTasks.push(this.renderUCISection(cfgsections[i]));
+
+ return Promise.all(renderTasks).then(this.renderContents.bind(this, cfgsections));
+ }
+});
+
+var CBITableSection = CBITypedSection.extend({
+ __name__: 'CBI.TableSection',
+
+ tab: function() {
+ throw 'Tabs are not supported by TableSection';
+ },
+
+ renderContents: function(cfgsections, nodes) {
+ var section_id = null,
+ config_name = this.uciconfig || this.map.config,
+ max_cols = isNaN(this.max_cols) ? this.children.length : this.max_cols,
+ has_more = max_cols < this.children.length,
+ sectionEl = E('div', {
+ 'id': 'cbi-%s-%s'.format(config_name, this.sectiontype),
+ 'class': 'cbi-section cbi-tblsection'
+ }),
+ tableEl = E('div', {
+ 'class': 'table cbi-section-table'
+ });
+
+ if (this.title != null && this.title != '')
+ sectionEl.appendChild(E('h3', {}, this.title));
+
+ if (this.description != null && this.description != '')
+ sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
+
+ tableEl.appendChild(this.renderHeaderRows(max_cols));
+
+ for (var i = 0; i < nodes.length; i++) {
+ var sectionname = this.stripTags((typeof(this.sectiontitle) == 'function')
+ ? String(this.sectiontitle(cfgsections[i]) || '') : cfgsections[i]).trim();
+
+ var trEl = E('div', {
+ 'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
+ 'class': 'tr cbi-section-table-row',
+ 'data-sid': cfgsections[i],
+ 'draggable': this.sortable ? true : null,
+ 'mousedown': this.sortable ? L.bind(this.handleDragInit, this) : null,
+ 'dragstart': this.sortable ? L.bind(this.handleDragStart, this) : null,
+ 'dragover': this.sortable ? L.bind(this.handleDragOver, this) : null,
+ 'dragenter': this.sortable ? L.bind(this.handleDragEnter, this) : null,
+ 'dragleave': this.sortable ? L.bind(this.handleDragLeave, this) : null,
+ 'dragend': this.sortable ? L.bind(this.handleDragEnd, this) : null,
+ 'drop': this.sortable ? L.bind(this.handleDrop, this) : null,
+ 'data-title': (sectionname && (!this.anonymous || this.sectiontitle)) ? sectionname : null
+ });
+
+ if (this.extedit || this.rowcolors)
+ trEl.classList.add(!(tableEl.childNodes.length % 2)
+ ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2');
+
+ for (var j = 0; j < max_cols && nodes[i].firstChild; j++)
+ trEl.appendChild(nodes[i].firstChild);
+
+ trEl.appendChild(this.renderRowActions(cfgsections[i], has_more ? _('More…') : null));
+ tableEl.appendChild(trEl);
+ }
+
+ if (nodes.length == 0)
+ tableEl.appendChild(E('div', { 'class': 'tr cbi-section-table-row placeholder' },
+ E('div', { 'class': 'td' },
+ E('em', {}, _('This section contains no values yet')))));
+
+ sectionEl.appendChild(tableEl);
+
+ sectionEl.appendChild(this.renderSectionAdd('cbi-tblsection-create'));
+
+ L.dom.bindClassInstance(sectionEl, this);
+
+ return sectionEl;
+ },
+
+ renderHeaderRows: function(max_cols) {
+ var has_titles = false,
+ has_descriptions = false,
+ anon_class = (!this.anonymous || this.sectiontitle) ? 'named' : 'anonymous',
+ trEls = E([]);
+
+ for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
+ if (opt.optional || opt.modalonly)
+ continue;
+
+ has_titles = has_titles || !!opt.title;
+ has_descriptions = has_descriptions || !!opt.description;
+ }
+
+ if (has_titles) {
+ var trEl = E('div', {
+ 'class': 'tr cbi-section-table-titles ' + anon_class,
+ 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null
+ });
+
+ for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
+ if (opt.optional || opt.modalonly)
+ continue;
+
+ trEl.appendChild(E('div', {
+ 'class': 'th cbi-section-table-cell',
+ 'data-type': opt.__name__
+ }));
+
+ if (opt.width != null)
+ trEl.lastElementChild.style.width =
+ (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
+
+ if (opt.titleref)
+ trEl.lastElementChild.appendChild(E('a', {
+ 'href': opt.titleref,
+ 'class': 'cbi-title-ref',
+ 'title': this.titledesc || _('Go to relevant configuration page')
+ }, opt.title));
+ else
+ L.dom.content(trEl.lastElementChild, opt.title);
+ }
+
+ if (this.sortable || this.extedit || this.addremove || has_more)
+ trEl.appendChild(E('div', {
+ 'class': 'th cbi-section-table-cell cbi-section-actions'
+ }));
+
+ trEls.appendChild(trEl);
+ }
+
+ if (has_descriptions) {
+ var trEl = E('div', {
+ 'class': 'tr cbi-section-table-descr ' + anon_class
+ });
+
+ for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
+ if (opt.optional || opt.modalonly)
+ continue;
+
+ trEl.appendChild(E('div', {
+ 'class': 'th cbi-section-table-cell',
+ 'data-type': opt.__name__
+ }, opt.description));
+
+ if (opt.width != null)
+ trEl.lastElementChild.style.width =
+ (typeof(opt.width) == 'number') ? opt.width+'px' : opt.width;
+ }
+
+ if (this.sortable || this.extedit || this.addremove || has_more)
+ trEl.appendChild(E('div', {
+ 'class': 'th cbi-section-table-cell cbi-section-actions'
+ }));
+
+ trEls.appendChild(trEl);
+ }
+
+ return trEls;
+ },
+
+ renderRowActions: function(section_id, more_label) {
+ var config_name = this.uciconfig || this.map.config;
+
+ if (!this.sortable && !this.extedit && !this.addremove && !more_label)
+ return E([]);
+
+ var tdEl = E('div', {
+ 'class': 'td cbi-section-table-cell nowrap cbi-section-actions'
+ }, E('div'));
+
+ if (this.sortable) {
+ L.dom.append(tdEl.lastElementChild, [
+ E('div', {
+ 'title': _('Drag to reorder'),
+ 'class': 'cbi-button drag-handle center',
+ 'style': 'cursor:move'
+ }, '☰')
+ ]);
+ }
+
+ if (this.extedit) {
+ var evFn = null;
+
+ if (typeof(this.extedit) == 'function')
+ evFn = L.bind(this.extedit, this);
+ else if (typeof(this.extedit) == 'string')
+ evFn = L.bind(function(sid, ev) {
+ location.href = this.extedit.format(sid);
+ }, this, section_id);
+
+ L.dom.append(tdEl.lastElementChild,
+ E('input', {
+ 'type': 'button',
+ 'value': _('Edit'),
+ 'title': _('Edit'),
+ 'class': 'cbi-button cbi-button-edit',
+ 'click': evFn
+ })
+ );
+ }
+
+ if (more_label) {
+ L.dom.append(tdEl.lastElementChild,
+ E('input', {
+ 'type': 'button',
+ 'value': more_label,
+ 'title': more_label,
+ 'class': 'cbi-button cbi-button-edit',
+ 'click': L.bind(this.renderMoreOptionsModal, this, section_id)
+ })
+ );
+ }
+
+ if (this.addremove) {
+ L.dom.append(tdEl.lastElementChild,
+ E('input', {
+ 'type': 'submit',
+ 'value': _('Delete'),
+ 'title': _('Delete'),
+ 'class': 'cbi-button cbi-button-remove',
+ 'click': L.bind(function(sid, ev) {
+ uci.remove(config_name, sid);
+ this.map.save();
+ }, this, section_id)
+ })
+ );
+ }
+
+ return tdEl;
+ },
+
+ handleDragInit: function(ev) {
+ scope.dragState = { node: ev.target };
+ },
+
+ handleDragStart: function(ev) {
+ if (!scope.dragState || !scope.dragState.node.classList.contains('drag-handle')) {
+ scope.dragState = null;
+ ev.preventDefault();
+ return false;
+ }
+
+ scope.dragState.node = L.dom.parent(scope.dragState.node, '.tr');
+ ev.dataTransfer.setData('text', 'drag');
+ ev.target.style.opacity = 0.4;
+ },
+
+ handleDragOver: function(ev) {
+ var n = scope.dragState.targetNode,
+ r = scope.dragState.rect,
+ t = r.top + r.height / 2;
+
+ if (ev.clientY <= t) {
+ n.classList.remove('drag-over-below');
+ n.classList.add('drag-over-above');
+ }
+ else {
+ n.classList.remove('drag-over-above');
+ n.classList.add('drag-over-below');
+ }
+
+ ev.dataTransfer.dropEffect = 'move';
+ ev.preventDefault();
+ return false;
+ },
+
+ handleDragEnter: function(ev) {
+ scope.dragState.rect = ev.currentTarget.getBoundingClientRect();
+ scope.dragState.targetNode = ev.currentTarget;
+ },
+
+ handleDragLeave: function(ev) {
+ ev.currentTarget.classList.remove('drag-over-above');
+ ev.currentTarget.classList.remove('drag-over-below');
+ },
+
+ handleDragEnd: function(ev) {
+ var n = ev.target;
+
+ n.style.opacity = '';
+ n.classList.add('flash');
+ n.parentNode.querySelectorAll('.drag-over-above, .drag-over-below')
+ .forEach(function(tr) {
+ tr.classList.remove('drag-over-above');
+ tr.classList.remove('drag-over-below');
+ });
+ },
+
+ handleDrop: function(ev) {
+ var s = scope.dragState;
+
+ if (s.node && s.targetNode) {
+ var config_name = this.uciconfig || this.map.config,
+ ref_node = s.targetNode,
+ after = false;
+
+ if (ref_node.classList.contains('drag-over-below')) {
+ ref_node = ref_node.nextElementSibling;
+ after = true;
+ }
+
+ var sid1 = s.node.getAttribute('data-sid'),
+ sid2 = s.targetNode.getAttribute('data-sid');
+
+ s.node.parentNode.insertBefore(s.node, ref_node);
+ uci.move(config_name, sid1, sid2, after);
+ }
+
+ scope.dragState = null;
+ ev.target.style.opacity = '';
+ ev.stopPropagation();
+ ev.preventDefault();
+ return false;
+ },
+
+ handleModalCancel: function(modalMap, ev) {
+ L.ui.hideModal();
+ },
+
+ handleModalSave: function(modalMap, ev) {
+ modalMap.save()
+ .then(L.bind(this.map.reset, this.map))
+ .then(L.ui.hideModal);
+ },
+
+ renderMoreOptionsModal: function(section_id, ev) {
+ var parent = this.map,
+ title = parent.title,
+ name = null,
+ m = new CBIMap(this.map.config, null, null),
+ s = m.section(CBINamedSection, section_id, this.sectiontype);
+ s.tabs = this.tabs;
+ s.tab_names = this.tab_names;
+
+ if (typeof(this.sectiontitle) == 'function')
+ name = this.stripTags(String(this.sectiontitle(section_id) || ''));
+ else if (!this.anonymous)
+ name = section_id;
+
+ if (name)
+ title += ' - ' + name;
+
+ for (var i = 0; i < this.children.length; i++) {
+ var o1 = this.children[i];
+
+ if (o1.disabled || o1.modalonly === false)
+ continue;
+
+ var o2 = s.option(o1.constructor, o1.option, o1.title, o1.description);
+
+ for (var k in o1) {
+ if (!o1.hasOwnProperty(k))
+ continue;
+
+ switch (k) {
+ case 'map':
+ case 'section':
+ case 'option':
+ case 'title':
+ case 'description':
+ continue;
+
+ default:
+ o2[k] = o1[k];
+ }
+ }
+ }
+
+ //ev.target.classList.add('spinning');
+ m.render().then(L.bind(function(nodes) {
+ //ev.target.classList.remove('spinning');
+ L.ui.showModal(title, [
+ nodes,
+ E('div', { 'class': 'right' }, [
+ E('input', {
+ 'type': 'button',
+ 'class': 'btn',
+ 'click': L.bind(this.handleModalCancel, this, m),
+ 'value': _('Dismiss')
+ }), ' ',
+ E('input', {
+ 'type': 'button',
+ 'class': 'cbi-button cbi-button-positive important',
+ 'click': L.bind(this.handleModalSave, this, m),
+ 'value': _('Save')
+ })
+ ])
+ ]);
+ }, this)).catch(L.error);
+ }
+});
+
+var CBIGridSection = CBITableSection.extend({
+ tab: function(name, title, description) {
+ CBIAbstractSection.prototype.tab.call(this, name, title, description);
+ },
+
+ handleAdd: function(ev) {
+ var config_name = this.uciconfig || this.map.config,
+ section_id = uci.add(config_name, this.sectiontype);
+
+ this.addedSection = section_id;
+ this.renderMoreOptionsModal(section_id);
+ },
+
+ handleModalSave: function(/* ... */) {
+ this.super('handleModalSave', arguments);
+ this.addedSection = null;
+ },
+
+ handleModalCancel: function(/* ... */) {
+ var config_name = this.uciconfig || this.map.config;
+
+ if (this.addedSection != null) {
+ uci.remove(config_name, this.addedSection);
+ this.addedSection = null;
+ }
+
+ this.super('handleModalCancel', arguments);
+ },
+
+ renderUCISection: function(section_id) {
+ return this.renderOptions(null, section_id);
+ },
+
+ renderChildren: function(tab_name, section_id, in_table) {
+ var tasks = [], index = 0;
+
+ for (var i = 0, opt; (opt = this.children[i]) != null; i++) {
+ if (opt.disable || opt.modalonly)
+ continue;
+
+ if (opt.editable)
+ tasks.push(opt.render(index++, section_id, in_table));
+ else
+ tasks.push(this.renderTextValue(section_id, opt));
+ }
+
+ return Promise.all(tasks);
+ },
+
+ renderTextValue: function(section_id, opt) {
+ var title = this.stripTags(opt.title).trim(),
+ descr = this.stripTags(opt.description).trim(),
+ value = opt.textvalue(section_id);
+
+ return E('div', {
+ 'class': 'td cbi-value-field',
+ 'data-title': (title != '') ? title : opt.option,
+ 'data-description': (descr != '') ? descr : null,
+ 'data-name': opt.option,
+ 'data-type': opt.typename || opt.__name__
+ }, (value != null) ? value : E('em', _('none')));
+ },
+
+ renderRowActions: function(section_id) {
+ return this.super('renderRowActions', [ section_id, _('Edit') ]);
+ },
+
+ parse: function() {
+ var section_ids = this.cfgsections(),
+ tasks = [];
+
+ if (Array.isArray(this.children)) {
+ for (var i = 0; i < section_ids.length; i++) {
+ for (var j = 0; j < this.children.length; j++) {
+ if (!this.children[j].editable || this.children[j].modalonly)
+ continue;
+
+ tasks.push(this.children[j].parse(section_ids[i]));
+ }
+ }
+ }
+
+ return Promise.all(tasks);
+ }
+});
+
+var CBINamedSection = CBIAbstractSection.extend({
+ __name__: 'CBI.NamedSection',
+ __init__: function(map, section_id /*, ... */) {
+ this.super('__init__', this.varargs(arguments, 2, map));
+
+ this.section = section_id;
+ },
+
+ cfgsections: function() {
+ return [ this.section ];
+ },
+
+ handleAdd: function(ev) {
+ var section_id = this.section,
+ config_name = this.uciconfig || this.map.config;
+
+ uci.add(config_name, this.sectiontype, section_id);
+ this.map.save();
+ },
+
+ handleRemove: function(ev) {
+ var section_id = this.section,
+ config_name = this.uciconfig || this.map.config;
+
+ uci.remove(config_name, section_id);
+ this.map.save();
+ },
+
+ renderContents: function(data) {
+ var ucidata = data[0], nodes = data[1],
+ section_id = this.section,
+ config_name = this.uciconfig || this.map.config,
+ sectionEl = E('div', {
+ 'id': ucidata ? null : 'cbi-%s-%s'.format(config_name, section_id),
+ 'class': 'cbi-section'
+ });
+
+ if (typeof(this.title) === 'string' && this.title !== '')
+ sectionEl.appendChild(E('legend', {}, this.title));
+
+ if (typeof(this.description) === 'string' && this.description !== '')
+ sectionEl.appendChild(E('div', { 'class': 'cbi-section-descr' }, this.description));
+
+ if (ucidata) {
+ if (this.addremove) {
+ sectionEl.appendChild(
+ E('div', { 'class': 'cbi-section-remove right' },
+ E('input', {
+ 'type': 'submit',
+ 'class': 'cbi-button',
+ 'value': _('Delete'),
+ 'click': L.bind(this.handleRemove, this)
+ })));
+ }
+
+ sectionEl.appendChild(E('div', {
+ 'id': 'cbi-%s-%s'.format(config_name, section_id),
+ 'class': this.tabs
+ ? 'cbi-section-node cbi-section-node-tabbed' : 'cbi-section-node'
+ }, nodes));
+
+ if (this.tabs)
+ ui.tabs.initTabGroup(sectionEl.lastChild.childNodes);
+ }
+ else if (this.addremove) {
+ sectionEl.appendChild(
+ E('input', {
+ 'type': 'submit',
+ 'class': 'cbi-button cbi-button-add',
+ 'value': _('Add'),
+ 'click': L.bind(this.handleAdd, this)
+ }));
+ }
+
+ L.dom.bindClassInstance(sectionEl, this);
+
+ return sectionEl;
+ },
+
+ render: function() {
+ var config_name = this.uciconfig || this.map.config,
+ section_id = this.section;
+
+ return Promise.all([
+ uci.get(config_name, section_id),
+ this.renderUCISection(section_id)
+ ]).then(this.renderContents.bind(this));
+ }
+});
+
+var CBIValue = CBIAbstractValue.extend({
+ __name__: 'CBI.Value',
+
+ value: function(key, val) {
+ this.keylist = this.keylist || [];
+ this.keylist.push(String(key));
+
+ this.vallist = this.vallist || [];
+ this.vallist.push(String(val != null ? val : key));
+ },
+
+ render: function(option_index, section_id, in_table) {
+ return Promise.resolve(this.cfgvalue(section_id))
+ .then(this.renderWidget.bind(this, section_id, option_index))
+ .then(this.renderFrame.bind(this, section_id, in_table, option_index));
+ },
+
+ renderFrame: function(section_id, in_table, option_index, nodes) {
+ var config_name = this.uciconfig || this.map.config,
+ depend_list = this.transformDepList(section_id),
+ optionEl;
+
+ if (in_table) {
+ optionEl = E('div', {
+ 'class': 'td cbi-value-field',
+ 'data-title': this.stripTags(this.title).trim(),
+ 'data-description': this.stripTags(this.description).trim(),
+ 'data-name': this.option,
+ 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
+ }, E('div', {
+ 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
+ 'data-index': option_index,
+ 'data-depends': depend_list,
+ 'data-field': this.cbid(section_id)
+ }));
+ }
+ else {
+ optionEl = E('div', {
+ 'class': 'cbi-value',
+ 'id': 'cbi-%s-%s-%s'.format(config_name, section_id, this.option),
+ 'data-index': option_index,
+ 'data-depends': depend_list,
+ 'data-field': this.cbid(section_id),
+ 'data-name': this.option,
+ 'data-type': this.typename || (this.template ? this.template.replace(/^.+\//, '') : null) || this.__name__
+ });
+
+ if (this.last_child)
+ optionEl.classList.add('cbi-value-last');
+
+ if (typeof(this.title) === 'string' && this.title !== '') {
+ optionEl.appendChild(E('label', {
+ 'class': 'cbi-value-title',
+ 'for': 'cbid.%s.%s.%s'.format(config_name, section_id, this.option)
+ },
+ this.titleref ? E('a', {
+ 'class': 'cbi-title-ref',
+ 'href': this.titleref,
+ 'title': this.titledesc || _('Go to relevant configuration page')
+ }, this.title) : this.title));
+
+ optionEl.appendChild(E('div', { 'class': 'cbi-value-field' }));
+ }
+ }
+
+ if (nodes)
+ (optionEl.lastChild || optionEl).appendChild(nodes);
+
+ if (!in_table && typeof(this.description) === 'string' && this.description !== '')
+ L.dom.append(optionEl.lastChild || optionEl,
+ E('div', { 'class': 'cbi-value-description' }, this.description));
+
+ if (depend_list && depend_list.length)
+ optionEl.classList.add('hidden');
+
+ optionEl.addEventListener('widget-change',
+ L.bind(this.map.checkDepends, this.map));
+
+ L.dom.bindClassInstance(optionEl, this);
+
+ return optionEl;
+ },
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var value = (cfgvalue != null) ? cfgvalue : this.default,
+ choices = this.transformChoices(),
+ widget;
+
+ if (choices) {
+ var placeholder = (this.optional || this.rmempty)
+ ? E('em', _('unspecified')) : _('-- Please choose --');
+
+ widget = new ui.Combobox(Array.isArray(value) ? value.join(' ') : value, choices, {
+ id: this.cbid(section_id),
+ sort: this.keylist,
+ optional: this.optional || this.rmempty,
+ datatype: this.datatype,
+ select_placeholder: this.placeholder || placeholder,
+ validate: L.bind(this.validate, this, section_id)
+ });
+ }
+ else {
+ widget = new ui.Textfield(Array.isArray(value) ? value.join(' ') : value, {
+ id: this.cbid(section_id),
+ password: this.password,
+ optional: this.optional || this.rmempty,
+ datatype: this.datatype,
+ placeholder: this.placeholder,
+ validate: L.bind(this.validate, this, section_id)
+ });
+ }
+
+ return widget.render();
+ }
+});
+
+var CBIDynamicList = CBIValue.extend({
+ __name__: 'CBI.DynamicList',
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var value = (cfgvalue != null) ? cfgvalue : this.default,
+ choices = this.transformChoices(),
+ items = null;
+
+ if (Array.isArray(value))
+ items = value;
+ else if (value != null)
+ items = String(value).trim().split(/\s+/);
+
+ var widget = new ui.DynamicList(items, choices, {
+ id: this.cbid(section_id),
+ sort: this.keylist,
+ optional: this.optional || this.rmempty,
+ datatype: this.datatype,
+ validate: L.bind(this.validate, this, section_id)
+ });
+
+ return widget.render();
+ },
+});
+
+var CBIListValue = CBIValue.extend({
+ __name__: 'CBI.ListValue',
+
+ __init__: function() {
+ this.super('__init__', arguments);
+ this.widget = 'select';
+ this.deplist = [];
+ },
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var choices = this.transformChoices();
+ var widget = new ui.Select((cfgvalue != null) ? cfgvalue : this.default, choices, {
+ id: this.cbid(section_id),
+ size: this.size,
+ sort: this.keylist,
+ optional: this.rmempty || this.optional,
+ validate: L.bind(this.validate, this, section_id)
+ });
+
+ return widget.render();
+ },
+});
+
+var CBIFlagValue = CBIValue.extend({
+ __name__: 'CBI.FlagValue',
+
+ __init__: function() {
+ this.super('__init__', arguments);
+
+ this.enabled = '1';
+ this.disabled = '0';
+ this.default = this.disabled;
+ },
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var widget = new ui.Checkbox((cfgvalue != null) ? cfgvalue : this.default, {
+ id: this.cbid(section_id),
+ value_enabled: this.enabled,
+ value_disabled: this.disabled,
+ validate: L.bind(this.validate, this, section_id)
+ });
+
+ return widget.render();
+ },
+
+ formvalue: function(section_id) {
+ var node = this.map.findElement('id', this.cbid(section_id)),
+ checked = node ? L.dom.callClassMethod(node, 'isChecked') : false;
+
+ return checked ? this.enabled : this.disabled;
+ },
+
+ textvalue: function(section_id) {
+ var cval = this.cfgvalue(section_id);
+
+ if (cval == null)
+ cval = this.default;
+
+ return (cval == this.enabled) ? _('Yes') : _('No');
+ },
+
+ parse: function(section_id) {
+ if (this.isActive(section_id)) {
+ var fval = this.formvalue(section_id);
+
+ if (!this.isValid(section_id))
+ return Promise.reject();
+
+ if (fval == this.default && (this.optional || this.rmempty))
+ return Promise.resolve(this.remove(section_id));
+ else
+ return Promise.resolve(this.write(section_id, fval));
+ }
+ else {
+ return Promise.resolve(this.remove(section_id));
+ }
+ },
+});
+
+var CBIMultiValue = CBIDynamicList.extend({
+ __name__: 'CBI.MultiValue',
+
+ __init__: function() {
+ this.super('__init__', arguments);
+ this.placeholder = _('-- Please choose --');
+ },
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var value = (cfgvalue != null) ? cfgvalue : this.default,
+ choices = this.transformChoices();
+
+ if (!Array.isArray(value))
+ value = String(value).split(/\s+/);
+
+ var widget = new ui.Dropdown(value, choices, {
+ id: this.cbid(section_id),
+ sort: this.keylist,
+ multiple: true,
+ optional: this.optional || this.rmempty,
+ select_placeholder: this.placeholder,
+ display_items: this.display_size || this.size || 3,
+ dropdown_items: this.dropdown_size || this.size || 5,
+ validate: L.bind(this.validate, this, section_id)
+ });
+
+ return widget.render();
+ },
+});
+
+var CBIDummyValue = CBIValue.extend({
+ __name__: 'CBI.DummyValue',
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var value = (cfgvalue != null) ? cfgvalue : this.default,
+ hiddenEl = new ui.Hiddenfield(value, { id: this.cbid(section_id) }),
+ outputEl = E('div');
+
+ if (this.href)
+ outputEl.appendChild(E('a', { 'href': this.href }));
+
+ L.dom.append(outputEl.lastChild || outputEl,
+ this.rawhtml ? value : [ value ]);
+
+ return E([
+ outputEl,
+ hiddenEl.render()
+ ]);
+ },
+});
+
+var CBIButtonValue = CBIValue.extend({
+ __name__: 'CBI.ButtonValue',
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var value = (cfgvalue != null) ? cfgvalue : this.default;
+
+ if (value !== false)
+ return E([
+ E('input', {
+ 'type': 'hidden',
+ 'id': this.cbid(section_id)
+ }),
+ E('input', {
+ 'class': 'cbi-button cbi-button-%s'.format(this.inputstyle || 'button'),
+ 'type': 'submit',
+ //'id': this.cbid(section_id),
+ //'name': this.cbid(section_id),
+ 'value': this.inputtitle || this.title,
+ 'click': L.bind(function(ev) {
+ ev.target.previousElementSibling.value = ev.target.value;
+ this.map.save();
+ }, this)
+ })
+ ]);
+ else
+ return document.createTextNode(' - ');
+ }
+});
+
+var CBIHiddenValue = CBIValue.extend({
+ __name__: 'CBI.HiddenValue',
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ var widget = new ui.Hiddenfield((cfgvalue != null) ? cfgvalue : this.default, {
+ id: this.cbid(section_id)
+ });
+
+ return widget.render();
+ }
+});
+
+var CBISectionValue = CBIValue.extend({
+ __name__: 'CBI.ContainerValue',
+ __init__: function(map, section, option, cbiClass /*, ... */) {
+ this.super('__init__', [map, section, option]);
+
+ if (!CBIAbstractSection.isSubclass(cbiClass))
+ throw 'Sub section must be a descendent of CBIAbstractSection';
+
+ this.subsection = cbiClass.instantiate(this.varargs(arguments, 4, this.map));
+ },
+
+ load: function(section_id) {
+ return this.subsection.load();
+ },
+
+ parse: function(section_id) {
+ return this.subsection.parse();
+ },
+
+ renderWidget: function(section_id, option_index, cfgvalue) {
+ return this.subsection.render();
+ },
+
+ checkDepends: function(section_id) {
+ this.subsection.checkDepends();
+ return this.super('checkDepends');
+ },
+
+ write: function() {},
+ remove: function() {},
+ cfgvalue: function() { return null },
+ formvalue: function() { return null }
+});
+
+return L.Class.extend({
+ Map: CBIMap,
+ AbstractSection: CBIAbstractSection,
+ AbstractValue: CBIAbstractValue,
+
+ TypedSection: CBITypedSection,
+ TableSection: CBITableSection,
+ GridSection: CBIGridSection,
+ NamedSection: CBINamedSection,
+
+ Value: CBIValue,
+ DynamicList: CBIDynamicList,
+ ListValue: CBIListValue,
+ Flag: CBIFlagValue,
+ MultiValue: CBIMultiValue,
+ DummyValue: CBIDummyValue,
+ Button: CBIButtonValue,
+ HiddenValue: CBIHiddenValue,
+ SectionValue: CBISectionValue
+});
diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js
index 896ded3af0..767d013d79 100644
--- a/modules/luci-base/htdocs/luci-static/resources/luci.js
+++ b/modules/luci-base/htdocs/luci-static/resources/luci.js
@@ -451,7 +451,8 @@
Promise.all([
domReady,
- this.require('ui')
+ this.require('ui'),
+ this.require('form')
]).then(this.setupDOM.bind(this)).catch(function(error) {
alert('LuCI class loading error:\n' + error);
});