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>

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 c723a4505432bafc657e102d41ad73636c621db6..cb8f4af4ffed689f34ed5ac88c84a2798b664d30 100644 (file)
--- 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'));