luci-proto-ipv6: add support for 4in6 tunnel displaying status in luci

Add support for showing 4in6 tunnel status in luci.

Signed-off-by: Arayuki Mago <ms@missing233.com>

modules/luci-base/po/ja/base.po

@@ -11031,6 +11031,15 @@ msgstr "SNATから除外するポートのリスト。スペースで区切る"
 msgid "Duplicate port found: "
 msgstr "重複ポート番号検出："
 
+#: modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js:60
+#: protocols/luci-proto-ipv6/htdocs/luci-static/resources/protocol/map.js:71
+msgid "Available portsets"
+msgstr "利用可能ポート"
+
+#: modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js:61
+msgid "Show"
+msgstr "表示"
+
 #: protocols/luci-proto-relay/htdocs/luci-static/resources/protocol/relay.js:179
 msgid "Use routing table"
 msgstr "ルーティングテーブルを使用"

modules/luci-base/po/zh_Hans/base.po

@@ -10974,6 +10974,15 @@ msgstr "要从 SNAT 中排除的端口列表。用空格分隔"
 msgid "Duplicate port found: "
 msgstr "重复的端口号："
 
+#: modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js:60
+#: protocols/luci-proto-ipv6/htdocs/luci-static/resources/protocol/map.js:71
+msgid "Available portsets"
+msgstr "可用的端口组"
+
+#: modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js:61
+msgid "Show"
+msgstr "显示"
+
 #: protocols/luci-proto-relay/htdocs/luci-static/resources/protocol/relay.js:179
 msgid "Use routing table"
 msgstr "使用路由表"

modules/luci-mod-status/htdocs/luci-static/resources/view/status/include/30_network.js

@@ -22,7 +22,17 @@ function renderbox(ifc, ipv6) {
 	    addrs = (ipv6 ? ifc.getIP6Addrs() : ifc.getIPAddrs()) || [],
 	    dnssrv = (ipv6 ? ifc.getDNS6Addrs() : ifc.getDNSAddrs()) || [],
 	    expires = ifc.getExpiry(),
-	    uptime = ifc.getUptime();
+		uptime = ifc.getUptime(),
+		type = ifc.getOpkgPackage();
+
+	if (type === 'map-t' && typeof ifc.callShowPortsets === 'function') {
+		addrs = ifc.getIPAddrs().concat(ifc.getIPv6Addrs());
+		var showPortsets = ifc.callShowPortsets();
+	}
+
+	if (type === 'ds-lite') {
+		addrs = ifc.getIPAddrs().concat(ifc.getIP6Addrs());
+	}
 
 	return E('div', { class: 'ifacebox' }, [
 		E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
@@ -31,8 +41,8 @@ function renderbox(ifc, ipv6) {
 			L.itemlist(E('span'), [
 				_('Protocol'), ifc.getI18n() || E('em', _('Not connected')),
 				_('Prefix Delegated'), ipv6 ? ifc.getIP6Prefix() : null,
-				_('Address'), addrs[0],
-				_('Address'), addrs[1],
+				(type === 'map-t' || type === 'ds-lite' ? _('IPv4 Address') : _('Address')), addrs[0],
+				(type === 'map-t' || type === 'ds-lite' ? _('IPv6 Address') : _('Address')), addrs[1],
 				_('Address'), addrs[2],
 				_('Address'), addrs[3],
 				_('Address'), addrs[4],
@@ -47,6 +57,8 @@ function renderbox(ifc, ipv6) {
 				_('DNS') + ' 3', dnssrv[2],
 				_('DNS') + ' 4', dnssrv[3],
 				_('DNS') + ' 5', dnssrv[4],
+				showPortsets ? _('Available portsets') : null,
+				showPortsets ? E('button', { class: 'cbi-button cbi-button-apply', click: showPortsets }, _('Show')) : null,
 				_('Expires'), (expires != null && expires > -1) ? '%t'.format(expires) : null,
 				_('Connected'), (uptime > 0) ? '%t'.format(uptime) : null
 			]),

protocols/luci-proto-ipv6/htdocs/luci-static/resources/protocol/dslite.js

@@ -31,6 +31,10 @@ return network.registerProtocol('dslite', {
 		return null;
 	},
 
+	getGatewayAddr: function () {
+		return this.get('peeraddr');
+	},
+
 	containsDevice: function(ifname) {
 		return (network.getIfnameOf(ifname) == this.getIfname());
 	},

protocols/luci-proto-ipv6/htdocs/luci-static/resources/protocol/ipip6.js

@@ -30,6 +30,10 @@ return network.registerProtocol('ipip6', {
 		return null;
 	},
 
+	getGatewayAddr: function () {
+		return this.get('peeraddr');
+	},
+
 	containsDevice: function (ifname) {
 		return (network.getIfnameOf(ifname) == this.getIfname());
 	},

protocols/luci-proto-ipv6/htdocs/luci-static/resources/protocol/map.js

@@ -37,6 +37,52 @@ return network.registerProtocol('map', {
 		return (network.getIfnameOf(ifname) == this.getIfname());
 	},
 
+	getGatewayAddr: function () {
+		return this.get('peeraddr');
+	},
+
+	getIPv6Addrs: function () {
+		var d = this._ubus('data');
+		if (L.isObject(d) && typeof (d.ipv6addr) == 'string')
+			return d.ipv6addr;
+		return null;
+	},
+
+	callShowPortsets: function () {
+		var d = this._ubus('data');
+		if (L.isObject(d) && typeof (d.portsets) == 'string') {
+			var portsets = d.portsets;
+			if (portsets) {
+				var portArray = portsets.split(' ');
+				var groupedPorts = [];
+				for (var i = 0; i < portArray.length; i += 2) {
+					groupedPorts.push(portArray.slice(i, i + 2));
+				}
+				portsets = E('table', { style: 'width: 100%; border-collapse: collapse;' },
+					groupedPorts.map(function (portGroup) {
+						return E('tr', {}, [
+							E('td', { style: 'padding: 10px; border: 1px solid #ddd; text-align: center; font-size: 16px;' }, portGroup[0]),
+							portGroup[1] ? E('td', { style: 'padding: 10px; border: 1px solid #ddd; text-align: center; font-size: 16px;' }, portGroup[1]) : E('td', {})
+						]);
+					})
+				);
+			}
+			function showPortsets() {
+				L.ui.showModal(_('Available portsets'), [
+					E('div', { style: 'max-height: 400px; overflow-y: auto; padding: 10px; border: 1px solid #ddd;' }, portsets || _('No data')),
+					E('div', { class: 'right' }, [
+						E('button', {
+							class: 'btn',
+							click: L.ui.hideModal
+						}, _('Close'))
+					])
+				]);
+			}
+			return showPortsets;
+		}
+		return null;
+	},
+
 	renderFormOptions: function(s) {
 		var o;