diff options
Diffstat (limited to 'modules/luci-base/htdocs/luci-static')
29 files changed, 787 insertions, 347 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js index 324a91403f..65ea6bce3c 100644 --- a/modules/luci-base/htdocs/luci-static/resources/cbi.js +++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js @@ -764,72 +764,14 @@ function cbi_update_table(table, data, placeholder) { if (!isElem(target)) return; - target.querySelectorAll('tr.table-titles, .tr.table-titles, .cbi-section-table-titles').forEach(function(thead) { - var titles = []; + var t = L.dom.findClassInstance(target); - thead.querySelectorAll('th, .th').forEach(function(th) { - titles.push(th); - }); - - if (Array.isArray(data)) { - var n = 0, rows = target.querySelectorAll('tr, .tr'), trows = []; - - data.forEach(function(row) { - var trow = E('tr', { 'class': 'tr' }); - - for (var i = 0; i < titles.length; i++) { - var text = (titles[i].innerText || '').trim(); - var td = trow.appendChild(E('td', { - 'class': titles[i].className, - 'data-title': (text !== '') ? text : null - }, (row[i] != null) ? row[i] : '')); - - td.classList.remove('th'); - td.classList.add('td'); - } - - trow.classList.add('cbi-rowstyle-%d'.format((n++ % 2) ? 2 : 1)); - - trows[n] = trow; - }); - - for (var i = 1; i <= n; i++) { - if (rows[i]) - target.replaceChild(trows[i], rows[i]); - else - target.appendChild(trows[i]); - } - - while (rows[++n]) - target.removeChild(rows[n]); - - if (placeholder && target.firstElementChild === target.lastElementChild) { - var trow = target.appendChild(E('tr', { 'class': 'tr placeholder' })); - var td = trow.appendChild(E('td', { 'class': titles[0].className }, placeholder)); - - td.classList.remove('th'); - td.classList.add('td'); - } - } - else { - thead.parentNode.style.display = 'none'; - - thead.parentNode.querySelectorAll('tr, .tr, .cbi-section-table-row').forEach(function(trow) { - if (trow !== thead) { - var n = 0; - trow.querySelectorAll('th, td, .th, .td').forEach(function(td) { - if (n < titles.length) { - var text = (titles[n++].innerText || '').trim(); - if (text !== '') - td.setAttribute('data-title', text); - } - }); - } - }); + if (!(t instanceof L.ui.Table)) { + t = new L.ui.Table(target); + L.dom.bindClassInstance(target, t); + } - thead.parentNode.style.display = ''; - } - }); + t.update(data, placeholder); } function showModal(title, children) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 312d83605d..2d540420bc 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -74,7 +74,7 @@ var CBIJSONConfig = baseclass.extend({ if (indexA != indexB) return (indexA - indexB); - return (a > b); + return L.naturalCompare(a, b); }, this)); for (var i = 0; i < section_ids.length; i++) @@ -287,8 +287,13 @@ var CBIAbstractElement = baseclass.extend(/** @lends LuCI.form.AbstractElement.p if (typeof(s) == 'string' && !s.match(/[<>]/)) return s; - var x = E('div', {}, s); - return x.textContent || x.innerText || ''; + var x = dom.elem(s) ? s : dom.parse('<div>' + s + '</div>'); + + x.querySelectorAll('br').forEach(function(br) { + x.replaceChild(document.createTextNode('\n'), br); + }); + + return (x.textContent || x.innerText || '').replace(/([ \t]*\n)+/g, '\n'); }, /** @@ -2272,10 +2277,7 @@ var CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSectio /** @private */ renderSectionPlaceholder: function() { - return E([ - E('em', _('This section contains no values yet')), - E('br'), E('br') - ]); + return E('em', _('This section contains no values yet')); }, /** @private */ @@ -2582,8 +2584,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p if (nodes.length == 0) tableEl.appendChild(E('tr', { 'class': 'tr cbi-section-table-row placeholder' }, - E('td', { 'class': 'td' }, - E('em', {}, _('This section contains no values yet'))))); + E('td', { 'class': 'td' }, this.renderSectionPlaceholder()))); sectionEl.appendChild(tableEl); @@ -2614,7 +2615,8 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p if (has_titles) { var trEl = E('tr', { 'class': 'tr cbi-section-table-titles ' + anon_class, - 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null + 'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null, + 'click': this.sortable ? ui.createHandlerFn(this, 'handleSort') : null }); for (var i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) { @@ -2623,7 +2625,8 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p trEl.appendChild(E('th', { 'class': 'th cbi-section-table-cell', - 'data-widget': opt.__name__ + 'data-widget': opt.__name__, + 'data-sortable-row': this.sortable ? '' : null })); if (opt.width != null) @@ -2992,10 +2995,20 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p /** @private */ handleModalCancel: function(modalMap, ev) { - var prevNode = this.getPreviousModalMap(); + var prevNode = this.getPreviousModalMap(), + resetTasks = Promise.resolve(); if (prevNode) { - var heading = prevNode.parentNode.querySelector('h4'); + var heading = prevNode.parentNode.querySelector('h4'), + prevMap = dom.findClassInstance(prevNode); + + while (prevMap) { + resetTasks = resetTasks + .then(L.bind(prevMap.load, prevMap)) + .then(L.bind(prevMap.reset, prevMap)); + + prevMap = prevMap.parent; + } prevNode.classList.add('flash'); prevNode.classList.remove('hidden'); @@ -3012,7 +3025,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p ui.hideModal(); } - return Promise.resolve(); + return resetTasks; }, /** @private */ @@ -3029,10 +3042,68 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p } return saveTasks - .then(L.bind(this.handleModalCancel, this, modalMap, ev)) + .then(L.bind(this.handleModalCancel, this, modalMap, ev, true)) .catch(function() {}); }, + /** @private */ + handleSort: function(ev) { + if (!ev.target.matches('th[data-sortable-row]')) + return; + + var th = ev.target, + descending = (th.getAttribute('data-sort-direction') == 'desc'), + config_name = this.uciconfig || this.map.config, + index = 0, + list = []; + + ev.currentTarget.querySelectorAll('th').forEach(function(other_th, i) { + if (other_th !== th) + other_th.removeAttribute('data-sort-direction'); + else + index = i; + }); + + ev.currentTarget.parentNode.querySelectorAll('tr.cbi-section-table-row').forEach(L.bind(function(tr, i) { + var sid = tr.getAttribute('data-sid'), + opt = tr.childNodes[index].getAttribute('data-name'), + val = this.cfgvalue(sid, opt); + + tr.querySelectorAll('.flash').forEach(function(n) { + n.classList.remove('flash') + }); + + list.push([ + ui.Table.prototype.deriveSortKey((val != null) ? val.trim() : ''), + tr + ]); + }, this)); + + list.sort(function(a, b) { + return descending + ? -L.naturalCompare(a[0], b[0]) + : L.naturalCompare(a[0], b[0]); + }); + + window.requestAnimationFrame(L.bind(function() { + var ref_sid, cur_sid; + + for (var i = 0; i < list.length; i++) { + list[i][1].childNodes[index].classList.add('flash'); + th.parentNode.parentNode.appendChild(list[i][1]); + + cur_sid = list[i][1].getAttribute('data-sid'); + + if (ref_sid) + this.map.data.move(config_name, cur_sid, ref_sid, true); + + ref_sid = cur_sid; + } + + th.setAttribute('data-sort-direction', descending ? 'asc' : 'desc'); + }, this)); + }, + /** * Add further options to the per-section instanced modal popup. * @@ -3076,33 +3147,38 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p }, /** @private */ - 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); + cloneOptions: function(src_section, dest_section) { + for (var i = 0; i < src_section.children.length; i++) { + var o1 = src_section.children[i]; - m.parent = parent; - m.readonly = parent.readonly; + if (o1.modalonly === false && src_section === this) + continue; - s.tabs = this.tabs; - s.tab_names = this.tab_names; + var o2; - if ((name = this.titleFn('modaltitle', section_id)) != null) - title = name; - else if ((name = this.titleFn('sectiontitle', section_id)) != null) - title = '%s - %s'.format(parent.title, name); - else if (!this.anonymous) - title = '%s - %s'.format(parent.title, section_id); + if (o1.subsection) { + o2 = dest_section.option(o1.constructor, o1.option, o1.subsection.constructor, o1.subsection.sectiontype, o1.subsection.title, o1.subsection.description); - for (var i = 0; i < this.children.length; i++) { - var o1 = this.children[i]; + for (var k in o1.subsection) { + if (!o1.subsection.hasOwnProperty(k)) + continue; - if (o1.modalonly === false) - continue; + switch (k) { + case 'map': + case 'children': + case 'parentoption': + continue; - var o2 = s.option(o1.constructor, o1.option, o1.title, o1.description); + default: + o2.subsection[k] = o1.subsection[k]; + } + } + + this.cloneOptions(o1.subsection, o2.subsection); + } + else { + o2 = dest_section.option(o1.constructor, o1.option, o1.title, o1.description); + } for (var k in o1) { if (!o1.hasOwnProperty(k)) @@ -3114,6 +3190,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p case 'option': case 'title': case 'description': + case 'subsection': continue; default: @@ -3121,39 +3198,75 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p } } } + }, - return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(L.bind(m.render, m)).then(L.bind(function(nodes) { - var modalMap = this.getActiveModalMap(); + /** @private */ + renderMoreOptionsModal: function(section_id, ev) { + var parent = this.map, + sref = parent.data.get(parent.config, section_id), + mapNode = this.getActiveModalMap(), + activeMap = mapNode ? dom.findClassInstance(mapNode) : null, + stackedMap = activeMap && (activeMap.parent !== parent || activeMap.section !== section_id); - if (modalMap) { - modalMap.parentNode - .querySelector('h4') - .appendChild(E('span', title ? ' » ' + title : '')); + return (stackedMap ? activeMap.save(null, true) : Promise.resolve()).then(L.bind(function() { + section_id = sref['.name']; - modalMap.parentNode - .querySelector('div.right > button') - .firstChild.data = _('Back'); + var m = new CBIMap(parent.config, null, null), + s = m.section(CBINamedSection, section_id, this.sectiontype); - modalMap.classList.add('hidden'); - modalMap.parentNode.insertBefore(nodes, modalMap.nextElementSibling); - nodes.classList.add('flash'); - } - else { - ui.showModal(title, [ - nodes, - E('div', { 'class': 'right' }, [ - E('button', { - 'class': 'cbi-button', - 'click': ui.createHandlerFn(this, 'handleModalCancel', m) - }, [ _('Dismiss') ]), ' ', - E('button', { - 'class': 'cbi-button cbi-button-positive important', - 'click': ui.createHandlerFn(this, 'handleModalSave', m), - 'disabled': m.readonly || null - }, [ _('Save') ]) - ]) - ], 'cbi-modal'); - } + m.parent = parent; + m.section = section_id; + m.readonly = parent.readonly; + + s.tabs = this.tabs; + s.tab_names = this.tab_names; + + this.cloneOptions(this, s); + + return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(function() { + return m.render(); + }).then(L.bind(function(nodes) { + var title = parent.title, + name = null; + + if ((name = this.titleFn('modaltitle', section_id)) != null) + title = name; + else if ((name = this.titleFn('sectiontitle', section_id)) != null) + title = '%s - %s'.format(parent.title, name); + else if (!this.anonymous) + title = '%s - %s'.format(parent.title, section_id); + + if (stackedMap) { + mapNode.parentNode + .querySelector('h4') + .appendChild(E('span', title ? ' » ' + title : '')); + + mapNode.parentNode + .querySelector('div.right > button') + .firstChild.data = _('Back'); + + mapNode.classList.add('hidden'); + mapNode.parentNode.insertBefore(nodes, mapNode.nextElementSibling); + + nodes.classList.add('flash'); + } + else { + ui.showModal(title, [ + nodes, + E('div', { 'class': 'right' }, [ + E('button', { + 'class': 'cbi-button', + 'click': ui.createHandlerFn(this, 'handleModalCancel', m) + }, [ _('Dismiss') ]), ' ', + E('button', { + 'class': 'cbi-button cbi-button-positive important', + 'click': ui.createHandlerFn(this, 'handleModalSave', m), + 'disabled': m.readonly || null + }, [ _('Save') ]) + ]) + ], 'cbi-modal'); + } + }, this)); }, this)).catch(L.error); } }); @@ -3248,20 +3361,19 @@ var CBIGridSection = CBITableSection.extend(/** @lends LuCI.form.GridSection.pro var mapNode = this.getPreviousModalMap(), prevMap = mapNode ? dom.findClassInstance(mapNode) : this.map; - return this.super('handleModalSave', arguments) - .then(function() { delete prevMap.addedSection }); + return this.super('handleModalSave', arguments); }, /** @private */ - handleModalCancel: function(/* ... */) { + handleModalCancel: function(modalMap, ev, isSaving) { var config_name = this.uciconfig || this.map.config, mapNode = this.getPreviousModalMap(), prevMap = mapNode ? dom.findClassInstance(mapNode) : this.map; - if (prevMap.addedSection != null) { + if (prevMap.addedSection != null && !isSaving) this.map.data.remove(config_name, prevMap.addedSection); - delete prevMap.addedSection; - } + + delete prevMap.addedSection; return this.super('handleModalCancel', arguments); }, @@ -3299,7 +3411,7 @@ var CBIGridSection = CBITableSection.extend(/** @lends LuCI.form.GridSection.pro 'data-title': (title != '') ? title : null, 'data-description': (descr != '') ? descr : null, 'data-name': opt.option, - 'data-widget': opt.typename || opt.__name__ + 'data-widget': 'CBI.DummyValue' }, (value != null) ? value : E('em', _('none'))); }, @@ -3641,7 +3753,7 @@ var CBIValue = CBIAbstractValue.extend(/** @lends LuCI.form.Value.prototype */ { if (!in_table && typeof(this.description) === 'string' && this.description !== '') dom.append(optionEl.lastChild || optionEl, - E('div', { 'class': 'cbi-value-description' }, this.description)); + E('div', { 'class': 'cbi-value-description' }, this.description.trim())); if (depend_list && depend_list.length) optionEl.classList.add('hidden'); diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/alias.png b/modules/luci-base/htdocs/luci-static/resources/icons/alias.png Binary files differindex a0c452c87a..94d556afa8 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/alias.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/alias.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/alias_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/alias_disabled.png Binary files differindex 38d0531e36..48c41167df 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/alias_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/alias_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/bridge.png b/modules/luci-base/htdocs/luci-static/resources/icons/bridge.png Binary files differindex 7faadecf92..beec3caf23 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/bridge.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/bridge.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/bridge_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/bridge_disabled.png Binary files differindex b3e620b3a1..dce152a1dc 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/bridge_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/bridge_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/ethernet.png b/modules/luci-base/htdocs/luci-static/resources/icons/ethernet.png Binary files differindex e3d24f2791..e7d37504aa 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/ethernet.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/ethernet.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/ethernet_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/ethernet_disabled.png Binary files differindex d8792df54b..73086b3de7 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/ethernet_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/ethernet_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/port_down.png b/modules/luci-base/htdocs/luci-static/resources/icons/port_down.png Binary files differindex 1ddf439f29..b3806146e9 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/port_down.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/port_down.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/port_up.png b/modules/luci-base/htdocs/luci-static/resources/icons/port_up.png Binary files differindex fd801a4992..efb4fea585 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/port_up.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/port_up.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-0-25.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-0-25.png Binary files differindex 382cf540bf..6455093c94 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-0-25.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-0-25.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-0.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-0.png Binary files differindex c8192c8b9a..ed7d1cdfa9 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-0.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-0.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-25-50.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-25-50.png Binary files differindex b465de3f57..43387ff666 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-25-50.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-25-50.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-50-75.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-50-75.png Binary files differindex cd7bcaf9a6..48eeaa831b 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-50-75.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-50-75.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-75-100.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-75-100.png Binary files differindex f7a3658df8..fd7a80da4c 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-75-100.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-75-100.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/signal-none.png b/modules/luci-base/htdocs/luci-static/resources/icons/signal-none.png Binary files differindex 4a11356af2..944dd094be 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/signal-none.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/signal-none.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/switch.png b/modules/luci-base/htdocs/luci-static/resources/icons/switch.png Binary files differindex 2691874a18..5c780fe66f 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/switch.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/switch.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/switch_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/switch_disabled.png Binary files differindex 54588d24d1..a069afec4b 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/switch_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/switch_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/tunnel.png b/modules/luci-base/htdocs/luci-static/resources/icons/tunnel.png Binary files differindex 63eabfef59..961467fe65 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/tunnel.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/tunnel.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/tunnel_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/tunnel_disabled.png Binary files differindex ca79d81707..406b3508c1 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/tunnel_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/tunnel_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/vlan.png b/modules/luci-base/htdocs/luci-static/resources/icons/vlan.png Binary files differindex 2691874a18..5c780fe66f 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/vlan.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/vlan.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/vlan_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/vlan_disabled.png Binary files differindex 54588d24d1..a069afec4b 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/vlan_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/vlan_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/wifi.png b/modules/luci-base/htdocs/luci-static/resources/icons/wifi.png Binary files differindex 80a23e8e9a..40da21f4f3 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/wifi.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/wifi.png diff --git a/modules/luci-base/htdocs/luci-static/resources/icons/wifi_disabled.png b/modules/luci-base/htdocs/luci-static/resources/icons/wifi_disabled.png Binary files differindex e989a2bd3d..4948024453 100644 --- a/modules/luci-base/htdocs/luci-static/resources/icons/wifi_disabled.png +++ b/modules/luci-base/htdocs/luci-static/resources/icons/wifi_disabled.png diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js index fcab3a4018..741f568983 100644 --- a/modules/luci-base/htdocs/luci-static/resources/luci.js +++ b/modules/luci-base/htdocs/luci-static/resources/luci.js @@ -695,115 +695,117 @@ * The resulting HTTP response. */ request: function(target, options) { - var state = { xhr: new XMLHttpRequest(), url: this.expandURL(target), start: Date.now() }, - opt = Object.assign({}, options, state), - content = null, - contenttype = null, - callback = this.handleReadyStateChange; - - return new Promise(function(resolveFn, rejectFn) { - opt.xhr.onreadystatechange = callback.bind(opt, resolveFn, rejectFn); - opt.method = String(opt.method || 'GET').toUpperCase(); - - if ('query' in opt) { - var q = (opt.query != null) ? Object.keys(opt.query).map(function(k) { - if (opt.query[k] != null) { - var v = (typeof(opt.query[k]) == 'object') - ? JSON.stringify(opt.query[k]) - : String(opt.query[k]); - - return '%s=%s'.format(encodeURIComponent(k), encodeURIComponent(v)); - } - else { - return encodeURIComponent(k); - } - }).join('&') : ''; - - if (q !== '') { - switch (opt.method) { - case 'GET': - case 'HEAD': - case 'OPTIONS': - opt.url += ((/\?/).test(opt.url) ? '&' : '?') + q; - break; - - default: - if (content == null) { - content = q; - contenttype = 'application/x-www-form-urlencoded'; + return Promise.resolve(target).then((function(url) { + var state = { xhr: new XMLHttpRequest(), url: this.expandURL(url), start: Date.now() }, + opt = Object.assign({}, options, state), + content = null, + contenttype = null, + callback = this.handleReadyStateChange; + + return new Promise(function(resolveFn, rejectFn) { + opt.xhr.onreadystatechange = callback.bind(opt, resolveFn, rejectFn); + opt.method = String(opt.method || 'GET').toUpperCase(); + + if ('query' in opt) { + var q = (opt.query != null) ? Object.keys(opt.query).map(function(k) { + if (opt.query[k] != null) { + var v = (typeof(opt.query[k]) == 'object') + ? JSON.stringify(opt.query[k]) + : String(opt.query[k]); + + return '%s=%s'.format(encodeURIComponent(k), encodeURIComponent(v)); + } + else { + return encodeURIComponent(k); + } + }).join('&') : ''; + + if (q !== '') { + switch (opt.method) { + case 'GET': + case 'HEAD': + case 'OPTIONS': + opt.url += ((/\?/).test(opt.url) ? '&' : '?') + q; + break; + + default: + if (content == null) { + content = q; + contenttype = 'application/x-www-form-urlencoded'; + } } } } - } - if (!opt.cache) - opt.url += ((/\?/).test(opt.url) ? '&' : '?') + (new Date()).getTime(); + if (!opt.cache) + opt.url += ((/\?/).test(opt.url) ? '&' : '?') + (new Date()).getTime(); - if (isQueueableRequest(opt)) { - requestQueue.push([opt, rejectFn, resolveFn]); - requestAnimationFrame(flushRequestQueue); - return; - } + if (isQueueableRequest(opt)) { + requestQueue.push([opt, rejectFn, resolveFn]); + requestAnimationFrame(flushRequestQueue); + return; + } - if ('username' in opt && 'password' in opt) - opt.xhr.open(opt.method, opt.url, true, opt.username, opt.password); - else - opt.xhr.open(opt.method, opt.url, true); + if ('username' in opt && 'password' in opt) + opt.xhr.open(opt.method, opt.url, true, opt.username, opt.password); + else + opt.xhr.open(opt.method, opt.url, true); - opt.xhr.responseType = opt.responseType || 'text'; + opt.xhr.responseType = opt.responseType || 'text'; - if ('overrideMimeType' in opt.xhr) - opt.xhr.overrideMimeType('application/octet-stream'); + if ('overrideMimeType' in opt.xhr) + opt.xhr.overrideMimeType('application/octet-stream'); - if ('timeout' in opt) - opt.xhr.timeout = +opt.timeout; + if ('timeout' in opt) + opt.xhr.timeout = +opt.timeout; - if ('credentials' in opt) - opt.xhr.withCredentials = !!opt.credentials; + if ('credentials' in opt) + opt.xhr.withCredentials = !!opt.credentials; - if (opt.content != null) { - switch (typeof(opt.content)) { - case 'function': - content = opt.content(opt.xhr); - break; + if (opt.content != null) { + switch (typeof(opt.content)) { + case 'function': + content = opt.content(opt.xhr); + break; - case 'object': - if (!(opt.content instanceof FormData)) { - content = JSON.stringify(opt.content); - contenttype = 'application/json'; - } - else { - content = opt.content; - } - break; + case 'object': + if (!(opt.content instanceof FormData)) { + content = JSON.stringify(opt.content); + contenttype = 'application/json'; + } + else { + content = opt.content; + } + break; - default: - content = String(opt.content); + default: + content = String(opt.content); + } } - } - if ('headers' in opt) - for (var header in opt.headers) - if (opt.headers.hasOwnProperty(header)) { - if (header.toLowerCase() != 'content-type') - opt.xhr.setRequestHeader(header, opt.headers[header]); - else - contenttype = opt.headers[header]; - } + if ('headers' in opt) + for (var header in opt.headers) + if (opt.headers.hasOwnProperty(header)) { + if (header.toLowerCase() != 'content-type') + opt.xhr.setRequestHeader(header, opt.headers[header]); + else + contenttype = opt.headers[header]; + } - if ('progress' in opt && 'upload' in opt.xhr) - opt.xhr.upload.addEventListener('progress', opt.progress); + if ('progress' in opt && 'upload' in opt.xhr) + opt.xhr.upload.addEventListener('progress', opt.progress); - if (contenttype != null) - opt.xhr.setRequestHeader('Content-Type', contenttype); + if (contenttype != null) + opt.xhr.setRequestHeader('Content-Type', contenttype); - try { - opt.xhr.send(content); - } - catch (e) { - rejectFn.call(opt, e); - } - }); + try { + opt.xhr.send(content); + } + catch (e) { + rejectFn.call(opt, e); + } + }); + }).bind(this)); }, handleReadyStateChange: function(resolveFn, rejectFn, ev) { @@ -1248,7 +1250,7 @@ * `null` on parsing failures or if no element could be found. */ parse: function(s) { - var elem; + var elem = null; try { domParser = domParser || new DOMParser(); @@ -1256,16 +1258,7 @@ } catch(e) {} - if (!elem) { - try { - dummyElem = dummyElem || document.createElement('div'); - dummyElem.innerHTML = s; - elem = dummyElem.firstChild; - } - catch (e) {} - } - - return elem || null; + return elem; }, /** @@ -2190,7 +2183,7 @@ }).render() : E([]); if (this.handleSaveApply || this.handleSave || this.handleReset) { - footer.appendChild(E('div', { 'class': 'cbi-page-actions control-group' }, [ + footer.appendChild(E('div', { 'class': 'cbi-page-actions' }, [ saveApplyBtn, ' ', this.handleSave ? E('button', { 'class': 'cbi-button cbi-button-save', @@ -2227,6 +2220,8 @@ view: View }; + var naturalCompare = new Intl.Collator(undefined, { numeric: true }).compare; + var LuCI = Class.extend(/** @lends LuCI.prototype */ { __name__: 'LuCI', __init__: function(setenv) { @@ -2972,18 +2967,55 @@ }).filter(function(e) { return (e[1] != null); }).sort(function(a, b) { - if (a[1] < b[1]) - return -1; - else if (a[1] > b[1]) - return 1; - else - return 0; + return naturalCompare(a[1], b[1]); }).map(function(e) { return e[0]; }); }, /** + * Compares two values numerically and returns -1, 0 or 1 depending + * on whether the first value is smaller, equal to or larger than the + * second one respectively. + * + * This function is meant to be used as comparator function for + * Array.sort(). + * + * @type {function} + * + * @param {*} a + * The first value + * + * @param {*} b + * The second value. + * + * @return {number} + * Returns -1 if the first value is smaller than the second one. + * Returns 0 if both values are equal. + * Returns 1 if the first value is larger than the second one. + */ + naturalCompare: naturalCompare, + + /** + * Converts the given value to an array using toArray() if needed, + * performs a numerical sort using naturalCompare() and returns the + * result. If the input already is an array, no copy is being made + * and the sorting is performed in-place. + * + * @see toArray + * @see naturalCompare + * + * @param {*} val + * The input value to sort (and convert to an array if needed). + * + * @return {Array<*>} + * Returns the resulting, numerically sorted array. + */ + sortedArray: function(val) { + return this.toArray(val).sort(naturalCompare); + }, + + /** * Converts the given value to an array. If the given value is of * type array, it is returned as-is, values of type object are * returned as one-element array containing the object, empty diff --git a/modules/luci-base/htdocs/luci-static/resources/network.js b/modules/luci-base/htdocs/luci-static/resources/network.js index 8c9ee255ff..e0013c8ec0 100644 --- a/modules/luci-base/htdocs/luci-static/resources/network.js +++ b/modules/luci-base/htdocs/luci-static/resources/network.js @@ -101,15 +101,6 @@ var _init = null, _protocols = {}, _protospecs = {}; -function strcmp(a, b) { - if (a > b) - return 1; - else if (a < b) - return -1; - else - return 0; -} - function getProtocolHandlers(cache) { return callNetworkProtoHandlers().then(function(protos) { /* Register "none" protocol */ @@ -485,10 +476,7 @@ function initNetworkState(refresh) { } ports.sort(function(a, b) { - if (a.role != b.role) - return (a.role < b.role) ? -1 : 1; - - return (a.index - b.index); + return L.naturalCompare(a.role, b.role) || L.naturalCompare(a.index, b.index); }); for (var i = 0, port; (port = ports[i]) != null; i++) { @@ -562,18 +550,14 @@ function ifnameOf(obj) { } function networkSort(a, b) { - return strcmp(a.getName(), b.getName()); + return L.naturalCompare(a.getName(), b.getName()); } function deviceSort(a, b) { - var typeWeigth = { wifi: 2, alias: 3 }, - weightA = typeWeigth[a.getType()] || 1, - weightB = typeWeigth[b.getType()] || 1; + var typeWeigth = { wifi: 2, alias: 3 }; - if (weightA != weightB) - return weightA - weightB; - - return strcmp(a.getName(), b.getName()); + return L.naturalCompare(typeWeigth[a.getType()] || 1, typeWeigth[b.getType()] || 1) || + L.naturalCompare(a.getName(), b.getName()); } function formatWifiEncryption(enc) { @@ -1441,7 +1425,7 @@ Network = baseclass.extend(/** @lends LuCI.network.prototype */ { rv.push(this.lookupWifiNetwork(wifiIfaces[i]['.name'])); rv.sort(function(a, b) { - return strcmp(a.getID(), b.getID()); + return L.naturalCompare(a.getID(), b.getID()); }); return rv; @@ -1539,10 +1523,7 @@ Network = baseclass.extend(/** @lends LuCI.network.prototype */ { } rv.sort(function(a, b) { - if (a.metric != b.metric) - return (a.metric - b.metric); - - return strcmp(a.interface, b.interface); + return L.naturalCompare(a.metric, b.metric) || L.naturalCompare(a.interface, b.interface); }); return rv; @@ -1990,7 +1971,7 @@ Hosts = baseclass.extend(/** @lends LuCI.network.Hosts.prototype */ { } return rv.sort(function(a, b) { - return strcmp(a[0], b[0]); + return L.naturalCompare(a[0], b[0]); }); } }); @@ -2852,6 +2833,15 @@ Device = baseclass.extend(/** @lends LuCI.network.Device.prototype */ { this.device = this.device || device; this.dev = Object.assign({}, _state.netdevs[this.device]); this.network = network; + + var conf; + + uci.sections('network', 'device', function(s) { + if (s.name == device) + conf = s; + }); + + this.config = Object.assign({}, conf); }, _devstate: function(/* ... */) { @@ -2946,6 +2936,10 @@ Device = baseclass.extend(/** @lends LuCI.network.Device.prototype */ { return 'vlan'; else if (this.dev.devtype == 'dsa' || _state.isSwitch[this.device]) return 'switch'; + else if (this.config.type == '8021q' || this.config.type == '8021ad') + return 'vlan'; + else if (this.config.type == 'bridge') + return 'bridge'; else return 'ethernet'; }, @@ -3245,7 +3239,13 @@ Device = baseclass.extend(/** @lends LuCI.network.Device.prototype */ { * ordinary ethernet interfaces. */ getParent: function() { - return this.dev.parent ? Network.prototype.instantiateDevice(this.dev.parent) : null; + if (this.dev.parent) + return Network.prototype.instantiateDevice(this.dev.parent); + + if ((this.config.type == '8021q' || this.config.type == '802ad') && typeof(this.config.ifname) == 'string') + return Network.prototype.instantiateDevice(this.config.ifname); + + return null; } }); @@ -3400,19 +3400,10 @@ WifiDevice = baseclass.extend(/** @lends LuCI.network.WifiDevice.prototype */ { if (this.ubus('dev', 'iwinfo', 'type') == 'wl') type = 'Broadcom'; - var hwmodes = this.getHWModes(), - modestr = ''; - - hwmodes.sort(function(a, b) { - if (a.length != b.length) - return a.length - b.length; - - return strcmp(a, b); - }); - - modestr = hwmodes.join(''); - - return '%s 802.11%s Wireless Controller (%s)'.format(type || 'Generic', modestr, this.getName()); + return '%s 802.11%s Wireless Controller (%s)'.format( + type || 'Generic', + this.getHWModes().sort(L.naturalCompare).join(''), + this.getName()); }, /** diff --git a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js index 10b65be8ec..14948bbf0f 100644 --- a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js +++ b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js @@ -187,9 +187,10 @@ var CBIZoneSelect = form.ListValue.extend({ emptyval.setAttribute('data-value', ''); } - L.dom.content(emptyval.querySelector('span'), [ - E('strong', _('Device')), E('span', ' (%s)'.format(_('input'))) - ]); + if (opt[0].allowlocal) + L.dom.content(emptyval.querySelector('span'), [ + E('strong', _('Device')), E('span', ' (%s)'.format(_('input'))) + ]); L.dom.content(anyval.querySelector('span'), [ E('strong', _('Any zone')), E('span', ' (%s)'.format(_('forward'))) @@ -536,7 +537,7 @@ var CBIDeviceSelect = form.ListValue.extend({ } if (!this.nocreate) { - var keys = Object.keys(checked).sort(); + var keys = Object.keys(checked).sort(L.naturalCompare); for (var i = 0; i < keys.length; i++) { if (choices.hasOwnProperty(keys[i])) diff --git a/modules/luci-base/htdocs/luci-static/resources/uci.js b/modules/luci-base/htdocs/luci-static/resources/uci.js index 41e902c5fe..a3a0061b66 100644 --- a/modules/luci-base/htdocs/luci-static/resources/uci.js +++ b/modules/luci-base/htdocs/luci-static/resources/uci.js @@ -2,6 +2,14 @@ 'require rpc'; 'require baseclass'; +function isEmpty(object, ignore) { + for (var property in object) + if (object.hasOwnProperty(property) && property != ignore) + return false; + + return true; +} + /** * @class uci * @memberof LuCI @@ -570,16 +578,7 @@ return baseclass.extend(/** @lends LuCI.uci.prototype */ { /* undelete option */ if (d[conf] && d[conf][sid]) { - var empty = true; - - for (var key in d[conf][sid]) { - if (key != opt && d[conf][sid].hasOwnProperty(key)) { - empty = false; - break; - } - } - - if (empty) + if (isEmpty(d[conf][sid], opt)) delete d[conf][sid]; else delete d[conf][sid][opt]; @@ -589,8 +588,12 @@ return baseclass.extend(/** @lends LuCI.uci.prototype */ { } else { /* revert any change for to-be-deleted option */ - if (c[conf] && c[conf][sid]) - delete c[conf][sid][opt]; + if (c[conf] && c[conf][sid]) { + if (isEmpty(c[conf][sid], opt)) + delete c[conf][sid]; + else + delete c[conf][sid][opt]; + } /* only delete existing options */ if (v[conf] && v[conf][sid] && v[conf][sid].hasOwnProperty(opt)) { diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index ac158f5260..ef6e334216 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -777,7 +777,7 @@ var UISelect = UIElement.extend(/** @lends LuCI.ui.Select.prototype */ { keys = Object.keys(this.choices); if (this.options.sort === true) - keys.sort(); + keys.sort(L.naturalCompare); else if (Array.isArray(this.options.sort)) keys = this.options.sort; @@ -1056,7 +1056,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { var keys = Object.keys(this.choices); if (this.options.sort === true) - keys.sort(); + keys.sort(L.naturalCompare); else if (Array.isArray(this.options.sort)) keys = this.options.sort; @@ -2208,7 +2208,7 @@ var UIDynamicList = UIElement.extend(/** @lends LuCI.ui.DynamicList.prototype */ 'id': this.options.id, 'class': 'cbi-dynlist', 'disabled': this.options.disabled ? '' : null - }, E('div', { 'class': 'add-item' })); + }, E('div', { 'class': 'add-item control-group' })); if (this.choices) { if (this.options.placeholder != null) @@ -2859,13 +2859,8 @@ var UIFileUpload = UIElement.extend(/** @lends LuCI.ui.FileUpload.prototype */ { rows = E('ul'); list.sort(function(a, b) { - var isDirA = (a.type == 'directory'), - isDirB = (b.type == 'directory'); - - if (isDirA != isDirB) - return isDirA < isDirB; - - return a.name > b.name; + return L.naturalCompare(a.type == 'directory', b.type == 'directory') || + L.naturalCompare(a.name, b.name); }); for (var i = 0; i < list.length; i++) { @@ -3125,7 +3120,24 @@ var UIMenu = baseclass.singleton(/** @lends LuCI.ui.menu.prototype */ { if (!node.children[k].hasOwnProperty('title')) continue; - children.push(Object.assign(node.children[k], { name: k })); + var subnode = Object.assign(node.children[k], { name: k }); + + if (L.isObject(subnode.action) && subnode.action.path != null && + (subnode.action.type == 'alias' || subnode.action.type == 'rewrite')) { + var root = this.menu, + path = subnode.action.path.split('/'); + + for (var i = 0; root != null && i < path.length; i++) + root = L.isObject(root.children) ? root.children[path[i]] : null; + + if (root) + subnode = Object.assign({}, subnode, { + children: root.children, + action: root.action + }); + } + + children.push(subnode); } return children.sort(function(a, b) { @@ -3135,11 +3147,300 @@ var UIMenu = baseclass.singleton(/** @lends LuCI.ui.menu.prototype */ { if (wA != wB) return wA - wB; - return a.name > b.name; + return L.naturalCompare(a.name, b.name); }); } }); +var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ { + __init__: function(captions, options, placeholder) { + if (!Array.isArray(captions)) { + this.initFromMarkup(captions); + + return; + } + + var id = options.id || 'table%08x'.format(Math.random() * 0xffffffff); + + var table = E('table', { 'id': id, 'class': 'table' }, [ + E('tr', { 'class': 'tr table-titles', 'click': UI.prototype.createHandlerFn(this, 'handleSort') }) + ]); + + this.id = id; + this.node = table + this.options = options; + + var sorting = this.getActiveSortState(); + + for (var i = 0; i < captions.length; i++) { + if (captions[i] == null) + continue; + + var th = E('th', { 'class': 'th' }, [ captions[i] ]); + + if (typeof(options.captionClasses) == 'object') + DOMTokenList.prototype.add.apply(th.classList, L.toArray(options.captionClasses[i])); + + if (options.sortable !== false && (typeof(options.sortable) != 'object' || options.sortable[i] !== false)) { + th.setAttribute('data-sortable-row', true); + + if (sorting && sorting[0] == i) + th.setAttribute('data-sort-direction', sorting[1] ? 'desc' : 'asc'); + } + + table.firstElementChild.appendChild(th); + } + + if (placeholder) { + var trow = table.appendChild(E('tr', { 'class': 'tr placeholder' })), + td = trow.appendChild(E('td', { 'class': 'td' }, placeholder)); + + if (typeof(captionClasses) == 'object') + DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0])); + } + + DOMTokenList.prototype.add.apply(table.classList, L.toArray(options.classes)); + }, + + update: function(data, placeholder) { + var placeholder = placeholder || this.options.placeholder || _('No data', 'empty table placeholder'), + sorting = this.getActiveSortState(); + + if (!Array.isArray(data)) + return; + + if (sorting) { + var list = data.map(L.bind(function(row) { + return [ this.deriveSortKey(row[sorting[0]], sorting[0]), row ]; + }, this)); + + list.sort(function(a, b) { + return sorting[1] + ? -L.naturalCompare(a[0], b[0]) + : L.naturalCompare(a[0], b[0]); + }); + + data.length = 0; + + list.forEach(function(item) { + data.push(item[1]); + }); + } + + this.data = data; + this.placeholder = placeholder; + + var n = 0, + rows = this.node.querySelectorAll('tr'), + trows = [], + headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th')), + captionClasses = this.options.captionClasses; + + data.forEach(function(row) { + trows[n] = E('tr', { 'class': 'tr' }); + + for (var i = 0; i < headings.length; i++) { + var text = (headings[i].innerText || '').trim(); + var td = trows[n].appendChild(E('td', { + 'class': 'td', + 'data-title': (text !== '') ? text : null + }, (row[i] != null) ? row[i] : '')); + + if (typeof(captionClasses) == 'object') + DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[i])); + + if (!td.classList.contains('cbi-section-actions')) + headings[i].setAttribute('data-sortable-row', true); + } + + trows[n].classList.add('cbi-rowstyle-%d'.format((n++ % 2) ? 2 : 1)); + }); + + for (var i = 0; i < n; i++) { + if (rows[i+1]) + this.node.replaceChild(trows[i], rows[i+1]); + else + this.node.appendChild(trows[i]); + } + + while (rows[++n]) + this.node.removeChild(rows[n]); + + if (placeholder && this.node.firstElementChild === this.node.lastElementChild) { + var trow = this.node.appendChild(E('tr', { 'class': 'tr placeholder' })), + td = trow.appendChild(E('td', { 'class': 'td' }, placeholder)); + + if (typeof(captionClasses) == 'object') + DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0])); + } + + return this.node; + }, + + render: function() { + return this.node; + }, + + /** @private */ + initFromMarkup: function(node) { + if (!dom.elem(node)) + node = document.querySelector(node); + + if (!node) + throw 'Invalid table selector'; + + var options = {}, + headrow = node.querySelector('tr, .tr'); + + if (!headrow) + return; + + options.classes = [].slice.call(node.classList).filter(function(c) { return c != 'table' }); + options.sortable = []; + options.captionClasses = []; + + headrow.querySelectorAll('th, .th').forEach(function(th, i) { + options.sortable[i] = !th.classList.contains('cbi-section-actions'); + options.captionClasses[i] = [].slice.call(th.classList).filter(function(c) { return c != 'th' }); + }); + + headrow.addEventListener('click', UI.prototype.createHandlerFn(this, 'handleSort')); + + this.id = node.id; + this.node = node; + this.options = options; + }, + + /** @private */ + deriveSortKey: function(value, index) { + var opts = this.options || {}, + hint, m; + + if (opts.sortable == true || opts.sortable == null) + hint = 'auto'; + else if (typeof( opts.sortable) == 'object') + hint = opts.sortable[index]; + + if (dom.elem(value)) + value = value.innerText.trim(); + + switch (hint || 'auto') { + case true: + case 'auto': + m = /^([0-9a-fA-F:.]+)(?:\/([0-9a-fA-F:.]+))?$/.exec(value); + + if (m) { + var addr, mask; + + addr = validation.parseIPv6(m[1]); + mask = m[2] ? validation.parseIPv6(m[2]) : null; + + if (addr && mask != null) + return '%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x%04x'.format( + addr[0], addr[1], addr[2], addr[3], addr[4], addr[5], addr[6], addr[7], + mask[0], mask[1], mask[2], mask[3], mask[4], mask[5], mask[6], mask[7] + ); + else if (addr) + return '%04x%04x%04x%04x%04x%04x%04x%04x%02x'.format( + addr[0], addr[1], addr[2], addr[3], addr[4], addr[5], addr[6], addr[7], + m[2] ? +m[2] : 128 + ); + + addr = validation.parseIPv4(m[1]); + mask = m[2] ? validation.parseIPv4(m[2]) : null; + + if (addr && mask != null) + return '%03d%03d%03d%03d%03d%03d%03d%03d'.format( + addr[0], addr[1], addr[2], addr[3], + mask[0], mask[1], mask[2], mask[3] + ); + else if (addr) + return '%03d%03d%03d%03d%02d'.format( + addr[0], addr[1], addr[2], addr[3], + m[2] ? +m[2] : 32 + ); + } + + m = /^(?:(\d+)d )?(\d+)h (\d+)m (\d+)s$/.exec(value); + + if (m) + return '%05d%02d%02d%02d'.format(+m[1], +m[2], +m[3], +m[4]); + + m = /^(\d+)\b(\D*)$/.exec(value); + + if (m) + return '%010d%s'.format(+m[1], m[2]); + + return String(value); + + case 'ignorecase': + return String(value).toLowerCase(); + + case 'numeric': + return +value; + + default: + return String(value); + } + }, + + /** @private */ + getActiveSortState: function() { + if (this.sortState) + return this.sortState; + + var page = document.body.getAttribute('data-page'), + key = page + '.' + this.id, + state = session.getLocalData('tablesort'); + + if (L.isObject(state) && Array.isArray(state[key])) + return state[key]; + + return null; + }, + + /** @private */ + setActiveSortState: function(index, descending) { + this.sortState = [ index, descending ]; + + if (!this.options.id) + return; + + var page = document.body.getAttribute('data-page'), + key = page + '.' + this.id, + state = session.getLocalData('tablesort'); + + if (!L.isObject(state)) + state = {}; + + state[key] = this.sortState; + + session.setLocalData('tablesort', state); + }, + + /** @private */ + handleSort: function(ev) { + if (!ev.target.matches('th[data-sortable-row]')) + return; + + var th = ev.target, + direction = (th.getAttribute('data-sort-direction') == 'asc'), + index = 0; + + this.node.firstElementChild.querySelectorAll('th').forEach(function(other_th, i) { + if (other_th !== th) + other_th.removeAttribute('data-sort-direction'); + else + index = i; + }); + + th.setAttribute('data-sort-direction', direction ? 'desc' : 'asc'); + + this.setActiveSortState(index, direction); + this.update(this.data, this.placeholder); + } +}); + /** * @class ui * @memberof LuCI @@ -4089,10 +4390,16 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ { 'class': 'btn', 'click': UI.prototype.hideModal }, [ _('Close') ]), ' ', - E('button', { - 'class': 'cbi-button cbi-button-positive important', - 'click': L.bind(this.apply, this, true) - }, [ _('Save & Apply') ]), ' ', + new UIComboButton('0', { + 0: [ _('Save & Apply') ], + 1: [ _('Apply unchecked') ] + }, { + classes: { + 0: 'btn cbi-button cbi-button-positive important', + 1: 'btn cbi-button cbi-button-negative important' + }, + click: L.bind(function(ev, mode) { this.apply(mode == '0') }, this) + }).render(), ' ', E('button', { 'class': 'cbi-button cbi-button-reset', 'click': L.bind(this.revert, this) @@ -4162,6 +4469,26 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ { }, /** @private */ + checkConnectivityAffected: function() { + return L.resolveDefault(fs.exec_direct('/usr/libexec/luci-peeraddr', null, 'json')).then(L.bind(function(info) { + if (L.isObject(info) && Array.isArray(info.inbound_interfaces)) { + for (var i = 0; i < info.inbound_interfaces.length; i++) { + var iif = info.inbound_interfaces[i]; + + for (var j = 0; this.changes && this.changes.network && j < this.changes.network.length; j++) { + var chg = this.changes.network[j]; + + if (chg[0] == 'set' && chg[1] == iif && (chg[2] == 'proto' || chg[2] == 'ipaddr' || chg[2] == 'netmask')) + return iif; + } + } + } + + return null; + }, this)); + }, + + /** @private */ rollback: function(checked) { if (checked) { this.displayStatus('warning spinning', @@ -4198,7 +4525,7 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ { method: 'post', timeout: L.env.apply_timeout * 1000, query: { sid: L.env.sessionid, token: L.env.token } - }).then(call); + }).then(call, call.bind(null, { status: 0 }, null, 0)); }, delay); }; @@ -4298,35 +4625,65 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ { this.displayStatus('notice spinning', E('p', _('Starting configuration apply…'))); - request.request(L.url('admin/uci', checked ? 'apply_rollback' : 'apply_unchecked'), { - method: 'post', - query: { sid: L.env.sessionid, token: L.env.token } - }).then(function(r) { - if (r.status === (checked ? 200 : 204)) { - var tok = null; try { tok = r.json(); } catch(e) {} - if (checked && tok !== null && typeof(tok) === 'object' && typeof(tok.token) === 'string') - UI.prototype.changes.confirm_auth = tok; - - UI.prototype.changes.confirm(checked, Date.now() + L.env.apply_rollback * 1000); - } - else if (checked && r.status === 204) { - UI.prototype.changes.displayStatus('notice', - E('p', _('There are no changes to apply'))); + (new Promise(function(resolveFn, rejectFn) { + if (!checked) + return resolveFn(false); + + UI.prototype.changes.checkConnectivityAffected().then(function(affected) { + if (!affected) + return resolveFn(true); + + UI.prototype.changes.displayStatus('warning', [ + E('h4', _('Connectivity change')), + E('p', _('The network access to this device could be interrupted by changing settings of the "%h" interface.').format(affected)), + E('p', _('If the IP address used to access LuCI changes, a <strong>manual reconnect to the new IP</strong> is required within %d seconds to confirm the settings, otherwise modifications will be reverted.').format(L.env.apply_rollback)), + E('div', { 'class': 'right' }, [ + E('button', { + 'class': 'btn', + 'click': rejectFn, + }, [ _('Cancel') ]), ' ', + E('button', { + 'class': 'btn cbi-button-action important', + 'click': resolveFn.bind(null, true) + }, [ _('Apply with revert after connectivity loss') ]), ' ', + E('button', { + 'class': 'btn cbi-button-negative important', + 'click': resolveFn.bind(null, false) + }, [ _('Apply and keep settings') ]) + ]) + ]); + }); + })).then(function(checked) { + request.request(L.url('admin/uci', checked ? 'apply_rollback' : 'apply_unchecked'), { + method: 'post', + query: { sid: L.env.sessionid, token: L.env.token } + }).then(function(r) { + if (r.status === (checked ? 200 : 204)) { + var tok = null; try { tok = r.json(); } catch(e) {} + if (checked && tok !== null && typeof(tok) === 'object' && typeof(tok.token) === 'string') + UI.prototype.changes.confirm_auth = tok; + + UI.prototype.changes.confirm(checked, Date.now() + L.env.apply_rollback * 1000); + } + else if (checked && r.status === 204) { + UI.prototype.changes.displayStatus('notice', + E('p', _('There are no changes to apply'))); - window.setTimeout(function() { - UI.prototype.changes.displayStatus(false); - }, L.env.apply_display * 1000); - } - else { - UI.prototype.changes.displayStatus('warning', - E('p', _('Apply request failed with status <code>%h</code>') - .format(r.responseText || r.statusText || r.status))); + window.setTimeout(function() { + UI.prototype.changes.displayStatus(false); + }, L.env.apply_display * 1000); + } + else { + UI.prototype.changes.displayStatus('warning', + E('p', _('Apply request failed with status <code>%h</code>') + .format(r.responseText || r.statusText || r.status))); - window.setTimeout(function() { - UI.prototype.changes.displayStatus(false); - }, L.env.apply_display * 1000); - } - }); + window.setTimeout(function() { + UI.prototype.changes.displayStatus(false); + }, L.env.apply_display * 1000); + } + }); + }, this.displayStatus.bind(this, false)); }, /** @@ -4519,6 +4876,8 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ { menu: UIMenu, + Table: UITable, + AbstractElement: UIElement, /* Widgets */ |
