luci-app-upnp: convert to client side implementation

Implement luci.upnp ubus app.
Convert lua page to js client side implementation.

Signed-off-by: Ansuel Smith <ansuelsmth@gmail.com>

1 files changed, 72 insertions, 0 deletions

diff --git a/applications/luci-app-upnp/htdocs/luci-static/resources/view/status/include/80_upnp.js b/applications/luci-app-upnp/htdocs/luci-static/resources/view/status/include/80_upnp.js
new file mode 100644
index 0000000000..b1a2531c86
--- /dev/null
+++ b/applications/luci-app-upnp/htdocs/luci-static/resources/view/status/include/80_upnp.js
@@ -0,0 +1,72 @@
+'use strict';
+'require rpc';
+'require uci';
+
+var callUpnpGetStatus, callUpnpDeleteRule, handleDelRule;
+
+callUpnpGetStatus = rpc.declare({
+	object: 'luci.upnp',
+	method: 'get_status',
+	expect: {  }
+});
+
+callUpnpDeleteRule = rpc.declare({
+	object: 'luci.upnp',
+	method: 'delete_rule',
+	params: [ 'token' ],
+	expect: { result : "OK" },
+});
+
+handleDelRule = function(num, ev) {
+	L.dom.parent(ev.currentTarget, '.tr').style.opacity = 0.5;
+	ev.currentTarget.classList.add('spinning');
+	ev.currentTarget.disabled = true;
+	ev.currentTarget.blur();
+	callUpnpDeleteRule(num);
+};
+
+return L.Class.extend({
+	title: _('Active UPnP Redirects'),
+
+	load: function() {
+		return Promise.all([
+			callUpnpGetStatus(),
+		]);
+	},
+
+	render: function(data) {
+
+		var table = E('div', { 'class': 'table', 'id': 'upnp_status_table' }, [
+			E('div', { 'class': 'tr table-titles' }, [
+				E('div', { 'class': 'th' }, _('Protocol')),
+				E('div', { 'class': 'th' }, _('External Port')),
+				E('div', { 'class': 'th' }, _('Client Address')),
+				E('div', { 'class': 'th' }, _('Host')),
+				E('div', { 'class': 'th' }, _('Client Port')),
+				E('div', { 'class': 'th' }, _('Description')),
+				E('div', { 'class': 'th cbi-section-actions' }, '')
+			])
+		]);
+
+		var rules = Array.isArray(data[0].rules) ? data[0].rules : [];
+
+		var rows = rules.map(function(rule) {
+			return [
+				rule.proto,
+				rule.extport,
+				rule.intaddr,
+				rule.host_hint || _('Unknown'),
+				rule.intport,
+				rule.descr,
+				E('button', {
+					'class': 'btn cbi-button-remove',
+					'click': L.bind(handleDelRule, this, rule.num)
+				}, [ _('Delete') ])
+			];
+		});
+
+		cbi_update_table(table, rows, E('em', _('There are no active redirects.')));
+
+		return table;
+	}
+});