Convert to client side JS

Signed-off-by: Anton Kikin <a.kikin@tano-systems.com>

.gitignore

@@ -1 +1,2 @@
 *.po~
+.tmp/

CHANGELOG.md

@@ -10,6 +10,9 @@ All dates in this document are in `DD.MM.YYYY` format.
 
 *Nothing yet*
 
+## [Version 2.0.0] (22.04.2020)
+- Coverted to client side rendering.
+
 ## [Version 1.3.0] (21.04.2020)
 ### Added
 - Added ACL rules for latest LuCI support
@@ -84,6 +87,8 @@ All dates in this document are in `DD.MM.YYYY` format.
 Initial release
 
 [Unreleased]: https://github.com/tano-systems/luci-app-tn-lldpd/tree/master
+[Version 2.0.0]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v2.0.0
+[Version 1.3.0]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.3.0
 [Version 1.2.2]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.2.2
 [Version 1.2.1]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.2.1
 [Version 1.2.0]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.2.0

README.md

@@ -1,49 +1,46 @@
 # LuCI support for LLDP daemon
 
 ## Description
-This package allows you to control LLDPd and view discovered neighbors by LLDPd
-in LuCI web interface.
+This application allows you to configure LLDPd and view discovered neighbors and statistics over LuCI web interface.
 
 ## Dependencies
-Package depends on lldpd package.
+This LuCI application requires the installed lldpd package with customized procd initialization scripts, which can be founded in the recipes of the OpenEmbedded layer of the [TanoWrt Linux Distribution](https://github.com/tano-systems/meta-tanowrt).
 
-LLDPd LuCI application developed for LuCI 18.06 branch. For OpenWrt/LEDE 17.01
-use old luci-app-tn-lldpd [version 1.0.0].
+Master branch of this repository requires latest LuCI revision with client side rendering feature. Support for older LuCI releases (e.g. for version 18.06.x, 19.07.x) is left in the [1.x](https://github.com/tano-systems/luci-app-tn-mstpd/tree/1.x) branch of this repository.
 
-Starting with [version 1.2.0], in order for all available settings to work correctly,
-you must use the modified procd initialization script for lldpd, that can be founded
-in [meta-tanowrt](https://github.com/tano-systems/meta-tanowrt.git) OpenEmbedded layer.
-
-## Supported languages
+## Supported Languages
 - Russian
 - English
 
+## Supported (tested) LuCI Themes
+- [luci-theme-tano](https://github.com/tano-systems/luci-theme-tano) ([screenshots](#screenshots) are taken with this theme)
+- luci-theme-bootstrap
+- luci-theme-openwrt-2020
+- luci-theme-openwrt
+
 ## Screenshots
 
 ### Status
 
-#### Discovered neighbors
-![Discovered neighbors](screenshots/luci-app-lldpd-status-neighbors.png?raw=true "Discovered neighbors")
-
-#### Local interfaces statistics
-![Local interfaces statistics](screenshots/luci-app-lldpd-status-statistics.png?raw=true "Local interfaces statistics")
+#### Discovered Neighbors
+![Discovered Neighbors](screenshots/luci-app-tn-lldpd-status-neighbors.png?raw=true)
 
-#### Local chassis information
-![Local chassis](screenshots/luci-app-lldpd-status-chassis.png?raw=true "Local chassis")
+#### Local Interfaces Statistics
+![Local Interfaces Statistics](screenshots/luci-app-tn-lldpd-status-statistics.png?raw=true)
 
 ### Settings
 
-#### Basic settings
-![Basic settings](screenshots/luci-app-lldpd-settings-basic.png?raw=true "Basic settings")
+#### Basic Settings
+![Basic Settings](screenshots/luci-app-tn-lldpd-settings-basic.png?raw=true)
 
-#### Network interfaces settings
-![Network interfaces](screenshots/luci-app-lldpd-settings-interfaces.png?raw=true "Network interfaces")
+#### Network Interfaces Settings
+![Network Interfaces](screenshots/luci-app-tn-lldpd-settings-interfaces.png?raw=true)
 
-#### Advanced settings
-![Advanced settings](screenshots/luci-app-lldpd-settings-advanced.png?raw=true "Advanced settings")
+#### Advanced Settings
+![Advanced Settings](screenshots/luci-app-tn-lldpd-settings-advanced.png?raw=true)
 
-#### Protocols support
-![Protocols support](screenshots/luci-app-lldpd-settings-protocols.png?raw=true "Protocols support")
+#### Protocols Support
+![Protocols Support](screenshots/luci-app-tn-lldpd-settings-protocols.png?raw=true)
 
 [version 1.2.0]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.2.0
 [version 1.0.0]: https://github.com/tano-systems/luci-app-tn-lldpd/releases/tag/v1.0.0

htdocs/luci-static/resources/lldpd.js

@@ -0,0 +1,228 @@
+/*
+ * Copyright (c) 2018-2020, Tano Systems LLC. All Rights Reserved.
+ * Anton Kikin <a.kikin@tano-systems.com>
+ */
+
+'use strict';
+'require ui';
+'require form';
+'require network';
+'require session';
+'require uci';
+
+const appVersion = '2.0.0';
+const appHomeUrl = 'https://github.com/tano-systems/luci-app-tn-lldpd';
+
+const appFooter = E('div', { 'class': 'cbi-section' }, [
+	E('p', { 'class': 'cbi-section-node tano-copyright' }, [
+		E('a', { 'href': appHomeUrl },
+			_('LLDPd LuCI application (version %s)').format(appVersion)),
+		E('br', {}),
+		_('© 2018–2020, Tano Systems LLC, Anton Kikin'),
+		' <',
+		E('a', { 'href': 'mailto:a.kikin@tano-systems.com' },
+			E('nobr', {}, 'a.kikin@tano-systems.com')),
+		'>'
+	])
+]);
+
+/*
+ *	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
+ */
+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 &mdash; enable filter') + '</li>' +
+			    '<li>' + _('P &mdash; keep only one protocol') + '</li>' +
+			    '<li>' + _('N &mdash; keep only one neighbor') + '</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) {
+		var selected = parseInt(cfgvalue) - 1;
+
+		var tbody = [];
+
+		var renderFilterVal = L.bind(function(row, col) {
+			return this.filterVal[row][col] ? '&#x2714;' : '';
+		}, 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 + 1,
+			}, [
+				E('td', {}, [
+					E('input', {
+						'class': 'cbi-input-radio',
+						'data-update': 'click change',
+						'type': 'radio',
+						'id': this.cbid(section_id) + '-' + (i + 1),
+						'name': this.cbid(section_id),
+						'checked': (selected == i) ? '' : null,
+						'value': i + 1
+					})
+				]),
+				E('td', {}, i + 1),
+				E('td', {}, renderFilterVal(i, 0)),
+				E('td', {}, renderFilterVal(i, 1)),
+				E('td', {}, renderFilterVal(i, 2)),
+				E('td', {}, renderFilterVal(i, 3)),
+				E('td', {}, renderFilterVal(i, 4)),
+				E('td', {}, 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;
+	},
+});
+
+function init() {
+	return new Promise(function(resolveFn, rejectFn) {
+		var data = session.getLocalData('luci-app-tn-lldpd');
+		if ((data !== null) && data.hasOwnProperty('hideFooter')) {
+			return resolveFn();
+		}
+
+		data = {};
+
+		return uci.load('luci').then(function() {
+			data.hideFooter = (uci.get('luci', 'app_tn_lldpd', 'hide_footer') == '1')
+				? true : false;
+			session.setLocalData('luci-app-tn-lldpd', data);
+			return resolveFn();
+		});
+	});
+}
+
+function isNeedToHideFooter() {
+	var data = session.getLocalData('luci-app-tn-lldpd');
+
+	if (data === null)
+		data = {};
+
+	if (data.hasOwnProperty('hideFooter'))
+		return data.hideFooter;
+	else
+		return false;
+}
+
+function renderFooter() {
+	return isNeedToHideFooter() ? '' : appFooter;
+}
+
+return L.Class.extend({
+	cbiFilterSelect: cbiFilterSelect,
+	renderFooter: renderFooter,
+	init: init,
+});