luci-mod-network: slightly improve static lease config

 - Autoselect the matching IPv4 address when initially picking a MAC
 - Add hostname hints in the MAC/IP dropdowns

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 26 insertions, 3 deletions

diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
index 1e9c402e0c..3acb6d1a16 100644
--- a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
@@ -345,8 +345,29 @@ return L.view.extend({
 
 			return result.length ? result.join(' ') : null;
 		};
+		so.renderWidget = function(section_id, option_index, cfgvalue) {
+			var node = form.Value.prototype.renderWidget.apply(this, [section_id, option_index, cfgvalue]),
+			    ipopt = this.section.children.filter(function(o) { return o.option == 'ip' })[0];
+
+			node.addEventListener('cbi-dropdown-change', L.bind(function(ipopt, section_id, ev) {
+				var mac = ev.detail.value.value;
+				if (mac == null || mac == '' || !hosts[mac] || !hosts[mac].ipv4)
+					return;
+
+				var ip = ipopt.formvalue(section_id);
+				if (ip != null && ip != '')
+					return;
+
+				var node = ipopt.map.findElement('id', ipopt.cbid(section_id));
+				if (node)
+					L.dom.callClassMethod(node, 'setValue', hosts[mac].ipv4);
+			}, this, ipopt, section_id));
+
+			return node;
+		};
 		Object.keys(hosts).forEach(function(mac) {
-			so.value(mac);
+			var hint = hosts[mac].name || hosts[mac].ipv4;
+			so.value(mac, hint ? '%s (%s)'.format(mac, hint) : mac);
 		});
 
 		so = ss.option(form.Value, 'ip', _('<abbr title="Internet Protocol Version 4">IPv4</abbr>-Address'));
@@ -363,8 +384,10 @@ return L.view.extend({
 			return true;
 		};
 		Object.keys(hosts).forEach(function(mac) {
-			if (hosts[mac].ipv4)
-				so.value(hosts[mac].ipv4);
+			if (hosts[mac].ipv4) {
+				var hint = hosts[mac].name;
+				so.value(hosts[mac].ipv4, hint ? '%s (%s)'.format(hosts[mac].ipv4, hint) : hosts[mac].ipv4);
+			}
 		});
 
 		so = ss.option(form.Value, 'leasetime', _('Lease time'));