diff options
Diffstat (limited to 'applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js')
| -rw-r--r-- | applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js b/applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js new file mode 100644 index 0000000000..7b0121e548 --- /dev/null +++ b/applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js @@ -0,0 +1,225 @@ +/* + * Copyright (c) 2018-2020, Tano Systems LLC. All Rights Reserved. + * Anton Kikin <a.kikin@tano-systems.com> + * Copyright (c) 2023-2024. All Rights Reserved. + * Paul Donald <newtwen+github@gmail.com> + */ + +'use strict'; +'require ui'; +'require form'; +'require network'; +'require session'; +'require uci'; + +/* + * Filter neighbors (-H) + * + * The filter column means that filtering is enabled + * The 1proto column tells that only one protocol will be kept. + * The 1neigh column tells that only one neighbor will be kept. + * + * incoming outgoing + * filter 1proto 1neigh filter 1proto 1neigh + * 0 + * 1 x x x x + * 2 x x + * 3 x x + * 4 x x + * 5 x + * 6 x + * 7 x x x x x + * 8 x x x + * 9 x x x x + * 10 x x + * 11 x x + * 12 x x x x + * 13 x x x + * 14 x x x x + * 15 x x x + * 16 x x x x x + * 17 x x x x + * 18 x x x + * 19 x x x + */ + +const etitle = _('enable filter'); +const ptitle = _('keep only one protocol'); +const ntitle = _('keep only one neighbor'); + +var cbiFilterSelect = form.Value.extend({ + __name__: 'CBI.LLDPD.FilterSelect', + + __init__: function() { + this.super('__init__', arguments); + + this.selected = null; + + this.filterVal = [ + [ 0, 0, 0, 0, 0, 0 ], + [ 1, 1, 0, 1, 1, 0 ], + [ 1, 1, 0, 0, 0, 0 ], + [ 0, 0, 0, 1, 1, 0 ], + [ 1, 0, 0, 1, 0, 0 ], + [ 1, 0, 0, 0, 0, 0 ], + [ 0, 0, 0, 1, 0, 0 ], + [ 1, 1, 1, 1, 1, 0 ], + [ 1, 1, 1, 0, 0, 0 ], + [ 1, 0, 1, 1, 1, 0 ], + [ 0, 0, 0, 1, 0, 1 ], + [ 1, 0, 1, 0, 0, 0 ], + [ 1, 0, 1, 1, 0, 1 ], + [ 1, 0, 1, 1, 0, 0 ], + [ 1, 1, 0, 1, 0, 1 ], + [ 1, 1, 0, 1, 0, 0 ], + [ 1, 1, 1, 1, 0, 1 ], + [ 1, 1, 1, 1, 0, 0 ], + [ 1, 0, 0, 1, 0, 1 ], + [ 1, 0, 0, 1, 1, 0 ] + ]; + }, + + /** @private */ + handleRowClick: function(section_id, ev) { + var row = ev.currentTarget; + var tbody = row.parentNode; + var selected = row.getAttribute('data-filter'); + var input = tbody.querySelector('[id="' + this.cbid(section_id) + '-' + selected + '"]'); + + this.selected = selected; + + tbody.querySelectorAll('tr').forEach(function(e) { + e.classList.remove('lldpd-filter-selected'); + }); + + input.checked = true; + row.classList.add('lldpd-filter-selected'); + }, + + formvalue: function(section_id) { + return this.selected || this.cfgvalue(section_id); + }, + + renderFrame: function(section_id, in_table, option_index, nodes) { + var tmp = this.description; + + // Prepend description with table legend + this.description = + '<ul><li>' + 'E — ' + etitle + '</li>' + + '<li>' + 'P — ' + ptitle + '</li>' + + '<li>' + 'N — ' + ntitle + '</li>' + + '</ul>' + this.description; + + var rendered = this.super('renderFrame', arguments); + + // Restore original description + this.description = tmp; + + return rendered; + }, + + renderWidget: function(section_id, option_index, cfgvalue) { + //default value is "15" - rows are zero based + var selected = parseInt(cfgvalue) || 15; + + var tbody = []; + + var renderFilterVal = L.bind(function(row, col) { + return this.filterVal[row][col] ? '✔' : ''; + }, this); + + for (var i = 0; i < this.filterVal.length; i++) { + tbody.push(E('tr', { + 'class': ((selected == i) ? 'lldpd-filter-selected' : ''), + 'click': L.bind(this.handleRowClick, this, section_id), + 'data-filter': i, + }, [ + E('td', {}, [ + E('input', { + 'class': 'cbi-input-radio', + 'data-update': 'click change', + 'type': 'radio', + 'id': this.cbid(section_id) + '-' + i, + 'name': this.cbid(section_id), + 'checked': (selected == i) ? '' : null, + 'value': i + }) + ]), + E('td', {}, i), + E('td', {'title': etitle}, renderFilterVal(i, 0)), + E('td', {'title': ptitle}, renderFilterVal(i, 1)), + E('td', {'title': ntitle}, renderFilterVal(i, 2)), + E('td', {'title': etitle}, renderFilterVal(i, 3)), + E('td', {'title': ptitle}, renderFilterVal(i, 4)), + E('td', {'title': ntitle}, renderFilterVal(i, 5)) + ])); + }; + + var table = E('table', { 'class': 'lldpd-filter', 'id': this.cbid(section_id) }, [ + E('thead', {}, [ + E('tr', {}, [ + E('th', { 'rowspan': 2 }), + E('th', { 'rowspan': 2 }, _('Filter')), + E('th', { 'colspan': 3 }, _('Incoming')), + E('th', { 'colspan': 3 }, _('Outgoing')) + ]), + E('tr', {}, [ + E('th', {}, 'E'), + E('th', {}, 'P'), + E('th', {}, 'N'), + E('th', {}, 'E'), + E('th', {}, 'P'), + E('th', {}, 'N'), + ]) + ]), + E('tbody', {}, tbody) + ]); + + return table; + }, +}); + +var CBIMultiIOSelect = form.MultiValue.extend({ + __name__: 'CBI.MultiIOSelect', + + renderWidget: function(section_id, option_index, cfgvalue) { + var value = (cfgvalue != null) ? cfgvalue : this.default ? this.default : '', + choices = this.transformChoices() ? this.transformChoices() : ''; + + var widget = new ui.Dropdown(L.toArray(value), choices, { + id: this.cbid(section_id), + sort: this.keylist, + multiple: true, + optional: true, + display_items: 5, + dropdown_items: -1, + create: true, + disabled: (this.readonly != null) ? this.readonly : this.map.readonly, + validate: L.bind(this.validate, this, section_id), + }); + + return widget.render(); + } +}); + +function init() { + return new Promise(function(resolveFn, rejectFn) { + var data = session.getLocalData('luci-app-lldpd'); + if (data !== null) { + return resolveFn(); + } + + data = {}; + + return uci.load('luci').then(function() { + session.setLocalData('luci-app-lldpd', data); + return resolveFn(); + }); + }); +} + +return L.Class.extend({ + cbiFilterSelect: cbiFilterSelect, + CBIMultiIOSelect: CBIMultiIOSelect, + init: init, +}); |