luci-mod-network: dhcp.js: improve behavior with default configuration

 - Hide anonymous section title if only one instance is present
 - Hide section remove button if only one instance is present
 - In case multiple sections are present, label the first and
   subsequent anonymous sections as `Default instance` and
   `Unnamed instance #N` respectively
 - Label named sections as `Instance "XXX"`
 - Label delete buttons as `Remove instance "XXX"`,
   `Remove default instance` or `Remove instance #N` depending on whether
   the associated instance is the first anonymous one, a subsequent
   anonymous one or a named one
 - Label add button as `Add server instance`
 - Add placeholder text `New instance name…` to the section name input

Ref: https://forum.openwrt.org/t/x/194048
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 32 insertions, 0 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 c723a45054..cb8f4af4ff 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
@@ -318,7 +318,39 @@ return view.extend({
 		s = m.section(form.TypedSection, 'dnsmasq');
 		s.anonymous = false;
 		s.addremove = true;
+		s.addbtntitle = _('Add server instance', 'Dnsmasq instance');
 
+		s.renderContents = function(/* ... */) {
+			var renderTask = form.TypedSection.prototype.renderContents.apply(this, arguments),
+			    sections = this.cfgsections();
+
+			return Promise.resolve(renderTask).then(function(nodes) {
+				if (sections.length < 2) {
+					nodes.querySelector('#cbi-dhcp-dnsmasq > h3').remove();
+					nodes.querySelector('#cbi-dhcp-dnsmasq > .cbi-section-remove').remove();
+				}
+				else {
+					nodes.querySelectorAll('#cbi-dhcp-dnsmasq > .cbi-section-remove').forEach(function(div, i) {
+						var section = uci.get('dhcp', sections[i]),
+						    hline = div.nextElementSibling,
+						    btn = div.firstElementChild;
+
+						if (!section || section['.anonymous']) {
+							hline.innerText = i ? _('Unnamed instance #%d', 'Dnsmasq instance').format(i+1) : _('Default instance', 'Dnsmasq instance');
+							btn.innerText = i ? _('Remove instance #%d', 'Dnsmasq instance').format(i+1) : _('Remove default instance', 'Dnsmasq instance');
+						}
+						else {
+							hline.innerText = _('Instance "%q"', 'Dnsmasq instance').format(section['.name']);
+							btn.innerText = _('Remove instance "%q"', 'Dnsmasq instance').format(section['.name']);
+						}
+					});
+				}
+
+				nodes.querySelector('#cbi-dhcp-dnsmasq > .cbi-section-create input').placeholder = _('New instance name…', 'Dnsmasq instance');
+
+				return nodes;
+			});
+		};
 
 
 		s.tab('general', _('General'));