summaryrefslogtreecommitdiffhomepage
path: root/modules/luci-base/luasrc/view/cbi
diff options
context:
space:
mode:
Diffstat (limited to 'modules/luci-base/luasrc/view/cbi')
-rw-r--r--modules/luci-base/luasrc/view/cbi/apply_widget.htm148
-rw-r--r--modules/luci-base/luasrc/view/cbi/dropdown.htm42
-rw-r--r--modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm79
-rw-r--r--modules/luci-base/luasrc/view/cbi/map.htm2
-rw-r--r--modules/luci-base/luasrc/view/cbi/network_ifacelist.htm102
-rw-r--r--modules/luci-base/luasrc/view/cbi/network_netlist.htm90
6 files changed, 271 insertions, 192 deletions
diff --git a/modules/luci-base/luasrc/view/cbi/apply_widget.htm b/modules/luci-base/luasrc/view/cbi/apply_widget.htm
index 543ef0b80b..702512f495 100644
--- a/modules/luci-base/luasrc/view/cbi/apply_widget.htm
+++ b/modules/luci-base/luasrc/view/cbi/apply_widget.htm
@@ -1,59 +1,98 @@
<% export("cbi_apply_widget", function(redirect_ok) -%>
<style type="text/css">
- #cbi_apply_status {
+ .alert-message.notice {
+ background: linear-gradient(#fff 0%, #eee 100%);
+ }
+
+ #cbi_apply_overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ display: none;
+ z-index: 20000;
+ }
+
+ #cbi_apply_overlay .alert-message {
+ position: relative;
+ top: 10%;
+ width: 60%;
+ margin: auto;
display: flex;
flex-wrap: wrap;
min-height: 32px;
align-items: center;
- margin: 1.5em 0 1.5em 0;
}
- #cbi_apply_status > h4,
- #cbi_apply_status > p,
- #cbi_apply_status > div {
+ #cbi_apply_overlay .alert-message > h4,
+ #cbi_apply_overlay .alert-message > p,
+ #cbi_apply_overlay .alert-message > div {
flex-basis: 100%;
}
- #cbi_apply_status > img {
+ #cbi_apply_overlay .alert-message > img {
margin-right: 1em;
flex-basis: 32px;
}
- #cbi_apply_status + script + .cbi-section {
- margin-top: -1em;
+ body.apply-overlay-active {
+ overflow: hidden;
+ height: 100vh;
}
- .alert-message.notice {
- background: linear-gradient(#fff 0%, #eee 100%);
+ body.apply-overlay-active #cbi_apply_overlay {
+ display: block;
}
</style>
-<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-18.138.59467-72fe5dd"></script>
<script type="text/javascript">//<![CDATA[
var xhr = new XHR(),
- stat, indicator,
uci_apply_auth = { sid: '<%=luci.dispatcher.context.authsession%>', token: '<%=token%>' },
uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 30, 30)%>,
uci_apply_holdoff = <%=math.max(luci.config and luci.config.apply and luci.config.apply.holdoff or 4, 1)%>,
uci_apply_timeout = <%=math.max(luci.config and luci.config.apply and luci.config.apply.timeout or 5, 1)%>,
uci_apply_display = <%=math.max(luci.config and luci.config.apply and luci.config.apply.display or 1.5, 1)%>;
+ function uci_status_message(type, content) {
+ var overlay = document.getElementById('cbi_apply_overlay') || document.body.appendChild(E('<div id="cbi_apply_overlay"><div class="alert-message"></div></div>')),
+ message = overlay.querySelector('.alert-message');
+
+ if (message && type) {
+ if (!message.classList.contains(type)) {
+ message.classList.remove('notice');
+ message.classList.remove('warning');
+ message.classList.add(type);
+ }
+
+ if (content)
+ message.innerHTML = content;
+
+ document.body.classList.add('apply-overlay-active');
+ }
+ else {
+ document.body.classList.remove('apply-overlay-active');
+ }
+ }
+
function uci_rollback(checked) {
if (checked) {
- stat.classList.remove('notice');
- stat.classList.add('warning');
- stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
- '<%:Failed to confirm apply within %ds, waiting for rollback…%>'.format(uci_apply_rollback);
+ uci_status_message('warning',
+ '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
+ '<%:Failed to confirm apply within %ds, waiting for rollback…%>'.format(uci_apply_rollback));
var call = function(r) {
if (r.status === 204) {
- stat.innerHTML = '<h4><%:Configuration has been rolled back!%></h4>' +
+ uci_status_message('warning',
+ '<h4><%:Configuration has been rolled back!%></h4>' +
'<p><%:The device could not be reached within %d seconds after applying the pending changes, which caused the configuration to be rolled back for safety reasons. If you believe that the configuration changes are correct nonetheless, perform an unchecked configuration apply. Alternatively, you can dismiss this warning and edit changes before attempting to apply again, or revert all pending changes to keep the currently working configuration state.%></p>'.format(uci_apply_rollback) +
'<div class="right">' +
- '<input type="button" class="btn" onclick="this.parentNode.parentNode.style.display=\'none\'" value="<%:Dismiss%>" /> ' +
+ '<input type="button" class="btn" onclick="uci_status_message(false)" value="<%:Dismiss%>" /> ' +
'<input type="button" class="btn" onclick="uci_revert()" value="<%:Revert changes%>" /> ' +
'<input type="button" class="btn danger" onclick="uci_apply(false)" value="<%:Apply unchecked%>" />' +
- '</div>';
+ '</div>');
return;
}
@@ -64,10 +103,9 @@
call({ status: 0 });
}
else {
- stat.classList.remove('notice');
- stat.classList.add('warning');
- stat.innerHTML = '<h4><%:Device unreachable!%></h4>' +
- '<p><%:Could not regain access to the device after applying the configuration changes. You might need to reconnect if you modified network related settings such as the IP address or wireless security credentials.%></p>';
+ uci_status_message('warning',
+ '<h4><%:Device unreachable!%></h4>' +
+ '<p><%:Could not regain access to the device after applying the configuration changes. You might need to reconnect if you modified network related settings such as the IP address or wireless security credentials.%></p>');
}
}
@@ -75,12 +113,7 @@
var tt;
var ts = Date.now();
- stat = document.getElementById('cbi_apply_status');
- stat.style.display = '';
- stat.classList.remove('warning');
- stat.classList.add('notice');
-
- indicator = document.querySelector('.uci_change_indicator');
+ uci_status_message('notice');
var call = function(r) {
if (Date.now() >= deadline) {
@@ -88,15 +121,18 @@
return;
}
else if (r && (r.status === 200 || r.status === 204)) {
- if (indicator)
- indicator.style.display = 'none';
+ var indicator = document.querySelector('.uci_change_indicator');
+ if (indicator) indicator.style.display = 'none';
- stat.innerHTML = '<%:Configuration has been applied.%>';
+ uci_status_message('notice', '<%:Configuration has been applied.%>');
window.clearTimeout(tt);
window.setTimeout(function() {
- stat.style.display = 'none';
- <% if redirect_ok then %>location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');<% end %>
+ <% if redirect_ok then -%>
+ location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');
+ <%- else -%>
+ window.location = window.location.href.split('#')[0];
+ <% end %>
}, uci_apply_display * 1000);
return;
@@ -108,8 +144,9 @@
var tick = function() {
var now = Date.now();
- stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
- '<%:Waiting for configuration to get applied… %ds%>'.format(Math.max(Math.floor((deadline - Date.now()) / 1000), 0));
+ uci_status_message('notice',
+ '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
+ '<%:Waiting for configuration to get applied… %ds%>'.format(Math.max(Math.floor((deadline - Date.now()) / 1000), 0)));
if (now >= deadline)
return;
@@ -125,43 +162,39 @@
}
function uci_apply(checked) {
- stat = document.getElementById('cbi_apply_status');
- stat.style.display = '';
- stat.classList.remove('warning');
- stat.classList.add('notice');
- stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
- '<%:Starting configuration apply…%>';
+ uci_status_message('notice',
+ '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
+ '<%:Starting configuration apply…%>');
xhr.post('<%=url("admin/uci")%>/' + (checked ? 'apply_rollback' : 'apply_unchecked'), uci_apply_auth, function(r) {
if (r.status === (checked ? 200 : 204)) {
uci_confirm(checked, Date.now() + uci_apply_rollback * 1000);
}
else if (checked && r.status === 204) {
- stat.innerHTML = '<%:There are no changes to apply.%>';
+ uci_status_message('notice', '<%:There are no changes to apply.%>');
window.setTimeout(function() {
- stat.style.display = 'none';
- <% if redirect_ok then %>location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');<% end %>
+ <% if redirect_ok then -%>
+ location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');
+ <%- else -%>
+ uci_status_message(false);
+ <%- end %>
}, uci_apply_display * 1000);
}
else {
- stat.classList.add('warning');
- stat.classList.remove('notice');
- stat.innerHTML = '<%_Apply request failed with status <code>%h</code>%>'.format(r.responseText || r.statusText || r.status);
+ uci_status_message('warning', '<%_Apply request failed with status <code>%h</code>%>'.format(r.responseText || r.statusText || r.status));
+ window.setTimeout(function() { uci_status_message(false); }, uci_apply_display * 1000);
}
});
}
function uci_revert() {
- stat = document.getElementById('cbi_apply_status');
- stat.style.display = '';
- stat.classList.remove('warning');
- stat.classList.add('notice');
- stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
- '<%:Reverting configuration…%>';
+ uci_status_message('notice',
+ '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
+ '<%:Reverting configuration…%>');
xhr.post('<%=url("admin/uci/revert")%>', uci_apply_auth, function(r) {
if (r.status === 200) {
- stat.innerHTML = '<%:Changes have been reverted.%>';
+ uci_status_message('notice', '<%:Changes have been reverted.%>');
window.setTimeout(function() {
<% if redirect_ok then -%>
location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');
@@ -171,9 +204,8 @@
}, uci_apply_display * 1000);
}
else {
- stat.classList.add('warning');
- stat.classList.remove('notice');
- stat.innerHTML = '<%_Revert request failed with status <code>%h</code>%>'.format(r.statusText || r.status);
+ uci_status_message('warning', '<%_Revert request failed with status <code>%h</code>%>'.format(r.statusText || r.status));
+ window.setTimeout(function() { uci_status_message(false); }, uci_apply_display * 1000);
}
});
}
diff --git a/modules/luci-base/luasrc/view/cbi/dropdown.htm b/modules/luci-base/luasrc/view/cbi/dropdown.htm
new file mode 100644
index 0000000000..bdf7248375
--- /dev/null
+++ b/modules/luci-base/luasrc/view/cbi/dropdown.htm
@@ -0,0 +1,42 @@
+<%+cbi/valueheader%>
+
+<%-
+ local selected = { }
+
+ if self.multiple then
+ local val
+ for val in luci.util.imatch(self:cfgvalue(section)) do
+ selected[val] = true
+ end
+ else
+ selected[self:cfgvalue(section)] = true
+ end
+
+ if not next(selected) and self.default then
+ selected[self.default] = true
+ end
+-%>
+
+<div class="cbi-dropdown"<%=
+ attr("name", cbid) ..
+ attr("display-items", self.display or self.size or 3) ..
+ attr("dropdown-items", self.dropdown or self.display or self.size or 5) ..
+ attr("placeholder", self.placeholder or translate("-- please select --")) ..
+ ifattr(self.multiple, "multiple", "multiple") ..
+ ifattr(self.optional or self.rmempty, "optional", "optional")
+%>>
+ <ul>
+ <% local i, key; for i, key in pairs(self.keylist) do %>
+ <li<%=
+ attr("data-index", i) ..
+ attr("data-depends", self:deplist2json(section, self.deplist[i])) ..
+ attr("value", key) ..
+ ifattr(selected[key], "selected", "selected")
+ %>>
+ <%=pcdata(self.vallist[i])%>
+ </li>
+ <% end %>
+ </ul>
+</div>
+
+<%+cbi/valuefooter%>
diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index b4260707ef..3a108020b6 100644
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
@@ -24,26 +24,42 @@
end
-%>
-<span>
- <ul style="margin:0; list-style-type:none; text-align:left">
+<div class="cbi-dropdown" dropdown-items="5" placeholder="<%:-- please select -- %>"<%=
+ attr("name", cbid) ..
+ ifattr(self.widget == "checkbox", "multiple", "multiple") ..
+ ifattr(self.rmempty or self.optional, "optional", "optional")
+%>>
+ <script type="item-template"><!--
+ <li value="{{value}}">
+ <span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
+ <strong>{{value}}:</strong><em>(<%:create%>)</em>
+ </span>
+ </li>
+ --></script>
+ <ul>
<% if self.allowlocal then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
- <label<%=attr("for", cbid .. "_empty")%>></label>
- <label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+ <li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+ <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Device%></strong>
- <% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
- </label>
+ <% if self.allowany and self.allowlocal then -%>
+ (<%= self.alias ~= "dest"
+ and translate("output") or translate("input") %>)
+ <%- end %>
+ </span>
+ </li>
+ <% elseif self.widget ~= "checkbox" and (self.rmempty or self.optional) then %>
+ <li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+ <span class="zonebadge">
+ <em><%:unspecified%></em>
+ </span>
</li>
<% end %>
<% if self.allowany then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
- <label<%=attr("for", cbid .. "_any")%>></label>
- <label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
+ <li value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
+ <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
<strong><%:Any zone%></strong>
<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
- </label>
+ </span>
</li>
<% end %>
<%
@@ -51,45 +67,42 @@
if zone:name() ~= self.exclude then
selected = selected or (value == zone:name())
%>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
- <label<%=attr("for", cbid .. "." .. zone:name())%>></label>
- <label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
+ <li<%=attr("value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
+ <span style="background-color:<%=zone:get_color()%>" class="zonebadge">
<strong><%=zone:name()%>:</strong>
- <%
+ <%-
local zempty = true
for _, net in ipairs(zone:get_networks()) do
net = nwm:get_network(net)
if net then
zempty = false
- %>
+ -%>
<span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:
- <%
+ <%-
local nempty = true
for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
nempty = false
%>
- <img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
+ <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
<% end %>
- <% if nempty then %><em><%:(empty)%></em><% end %>
+ <% if nempty then %><em><%:(empty)%></em><% end -%>
</span>
- <% end end %>
- <% if zempty then %><em><%:(empty)%></em><% end %>
- </label>
+ <%- end end -%>
+ <%- if zempty then %><em><%:(empty)%></em><% end -%>
+ </span>
</li>
<% end end %>
<% if self.widget ~= "checkbox" and not self.nocreate then %>
- <li style="padding:0.5em">
- <input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
- <label<%=attr("for", cbid .. "_new")%>></label>
- <div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
- <em><%:unspecified -or- create:%>&#160;</em>
- <input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
- </div>
+ <li value="-">
+ <span class="zonebadge">
+ <em><%:create%>:</em>
+ <input type="password" style="display:none" />
+ <input class="create-item-input" type="text" />
+ </span>
</li>
<% end %>
</ul>
-</span>
+</div>
<%+cbi/valuefooter%>
diff --git a/modules/luci-base/luasrc/view/cbi/map.htm b/modules/luci-base/luasrc/view/cbi/map.htm
index 69ef3615a2..02b47f5455 100644
--- a/modules/luci-base/luasrc/view/cbi/map.htm
+++ b/modules/luci-base/luasrc/view/cbi/map.htm
@@ -1,5 +1,5 @@
<%- if firstmap and messages then local msg; for _, msg in ipairs(messages) do -%>
- <div class="errorbox"><%=pcdata(msg)%></div>
+ <div class="alert-message warning"><%=pcdata(msg)%></div>
<%- end end -%>
<div class="cbi-map" id="cbi-<%=self.config%>">
diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
index 62dbde7dd4..abfa33e1ed 100644
--- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
@@ -19,7 +19,9 @@
if value then
for value in utl.imatch(value) do
- checked[value] = true
+ for value in utl.imatch(value) do
+ checked[value] = true
+ end
end
else
local n = self.network and net:get_network(self.network)
@@ -33,57 +35,51 @@
-%>
<input type="hidden" name="<%=cbeid%>" value="1" />
-<ul style="margin:0; list-style-type:none">
- <% for _, iface in ipairs(ifaces) do
- local link = iface:adminlink()
- if (not self.nobridges or not iface:is_bridge()) and
- (not self.noinactive or iface:is_up()) and
- iface:name() ~= self.exclude
- then %>
- <li>
- <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
- attr("type", self.widget or "radio") ..
- attr("id", cbid .. "." .. iface:name()) ..
- attr("name", cbid) .. attr("value", iface:name()) ..
- ifattr(checked[iface:name()], "checked", "checked")
- %> />
- <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
- <label<%=attr("for", cbid .. "." .. iface:name())%>></label>
- <%- end -%>
- &#160;
- <label<%=attr("for", cbid .. "." .. iface:name())%>>
- <% if link then -%><a href="<%=link%>"><% end -%>
- <img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
- <% if link then -%></a><% end -%>
- <%=pcdata(iface:get_i18n())%>
- <% local ns = iface:get_networks(); if #ns > 0 then %>(
- <%- local i, n; for i, n in ipairs(ns) do -%>
- <%-= (i>1) and ', ' -%>
- <a href="<%=n:adminlink()%>"><%=n:name()%></a>
- <%- end -%>
- )<% end %>
- </label>
- </li>
- <% end end %>
- <% if not self.nocreate then %>
- <li>
- <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
- attr("type", self.widget or "radio") ..
- attr("id", cbid .. "_custom") ..
- attr("name", cbid) ..
- attr("value", " ")
- %> />
- <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
- <label<%=attr("for", cbid .. "_custom")%>></label>
- <%- end -%>
- &#160;
- <label<%=attr("for", cbid .. "_custom")%>>
- <img title="<%:Custom Interface%>" style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/ethernet_disabled.png" />
- <%:Custom Interface%>:
- </label>
- <input type="text" style="width:50px" onfocus="document.getElementById('<%=cbid%>_custom').checked=true" onblur="var x=document.getElementById('<%=cbid%>_custom'); x.value=this.value; x.checked=true" />
- </li>
- <% end %>
-</ul>
+
+<div class="cbi-dropdown" display-items="5" placeholder="<%:-- please select -- %>"<%=
+ attr("name", cbid) ..
+ ifattr(self.widget == "checkbox", "multiple", "multiple") ..
+ ifattr(self.widget == "checkbox", "optional", "optional")
+%>>
+ <script type="item-template"><!--
+ <li value="{{value}}">
+ <img title="<%:Custom Interface%>: &quot;{{value}}&quot;" src="<%=resource%>/icons/ethernet_disabled.png" />
+ <span class="hide-open">{{value}}</span>
+ <span class="hide-close"><%:Custom Interface%>: "{{value}}"</span>
+ </li>
+ --></script>
+ <ul>
+ <% for _, iface in ipairs(ifaces) do
+ if (not self.nobridges or not iface:is_bridge()) and
+ (not self.noinactive or iface:is_up()) and
+ iface:name() ~= self.exclude
+ then %>
+ <li<%=
+ attr("value", iface:name()) ..
+ ifattr(checked[iface:name()], "selected", "selected")
+ %>>
+ <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
+ <span class="hide-open"><%=pcdata(iface:name())%></span>
+ <span class="hide-close">
+ <%=pcdata(iface:get_i18n())%>
+ <% local ns = iface:get_networks(); if #ns > 0 then %>(
+ <%- local i, n; for i, n in ipairs(ns) do -%>
+ <%-= (i>1) and ', ' -%>
+ <a href="<%=n:adminlink()%>"><%=n:name()%></a>
+ <%- end -%>
+ )<% end %>
+ </span>
+ </li>
+ <% end end %>
+ <% if not self.nocreate then %>
+ <li value="">
+ <img title="<%:Custom Interface%>" src="<%=resource%>/icons/ethernet_disabled.png" />
+ <span><%:Custom Interface%>:</span>
+ <input type="password" style="display:none" />
+ <input class="create-item-input" type="text" />
+ </li>
+ <% end %>
+ </ul>
+</div>
<%+cbi/valuefooter%>
diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
index 8bf1a70a20..ba6ebb8434 100644
--- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
@@ -20,66 +20,62 @@
end
-%>
-<ul style="margin:0; list-style-type:none; text-align:left">
- <% for _, net in ipairs(networks) do
- if (net:name() ~= "loopback") and
- (net:name() ~= self.exclude) and
- (not self.novirtual or not net:is_virtual())
- then %>
- <li style="padding:0.25em 0">
- <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
- attr("type", self.widget or "radio") ..
- attr("id", cbid .. "." .. net:name()) ..
- attr("name", cbid) .. attr("value", net:name()) ..
- ifattr(checked[net:name()], "checked", "checked")
- %> /> &#160;
- <label<%=attr("for", cbid .. "." .. net:name())%>>
+<div class="cbi-dropdown" display-items="5" placeholder="<%:-- please select -- %>"<%=
+ attr("name", cbid) ..
+ ifattr(self.widget == "checkbox", "multiple", "multiple") ..
+ ifattr(self.widget == "checkbox", "optional", "optional")
+%>>
+ <script type="item-template"><!--
+ <li value="{{value}}">
+ <span class="ifacebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
+ {{value}}: <em>(<%:create%>)</em>
+ </span>
+ </li>
+ --></script>
+ <ul>
+ <% if self.widget ~= "checkbox" then %>
+ <li value=""<%= ifattr(not value, "selected", "selected") %>>
+ <em><%:unspecified%></em>
+ </li>
+ <% end %>
+
+ <% for _, net in ipairs(networks) do
+ if (net:name() ~= "loopback") and
+ (net:name() ~= self.exclude) and
+ (not self.novirtual or not net:is_virtual())
+ then %>
+ <li<%= attr("value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>>
<span class="ifacebadge"><%=net:name()%>:
<%
local empty = true
for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
if not iface:is_bridge() then
empty = false
- %>
+ -%>
<img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
- <% end end %>
- <% if empty then %><em><%:(no interfaces attached)%></em><% end %>
+ <%- end end %>
+ <% if empty then %>
+ <em class="hide-close"><%:(no interfaces attached)%></em>
+ <em class="hide-open">-</em>
+ <% end %>
</span>
- </label>
- </li>
- <% end end %>
+ </li>
+ <% end end %>
- <% if not self.nocreate then %>
- <li style="padding:0.25em 0">
- <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not value and self.widget ~= "checkbox", "checked", "checked")%> /> &#160;
- <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
- <label<%=attr("for", cbid .. "_new")%>></label>
- <%- end -%>
- <div style="padding:0.5em; display:inline">
- <label<%=attr("for", cbid .. "_new")%>><em>
+ <% if not self.nocreate then %>
+ <li value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>>
+ <em>
<%- if self.widget == "checkbox" then -%>
<%:create:%>
<%- else -%>
<%:unspecified -or- create:%>
- <%- end -%>&#160;</em></label>
+ <%- end -%>
+ </em>
<input style="display:none" type="password" />
- <input style="width:6em" type="text"<%=attr("name", cbid .. ".newnet")%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
- </div>
- </li>
- <% elseif self.widget ~= "checkbox" and self.unspecified then %>
- <li style="padding:0.25em 0">
- <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=
- attr("type", self.widget or "radio") ..
- attr("id", cbid .. "_uns") ..
- attr("name", cbid) ..
- attr("value", "") ..
- ifattr(not value or #value == 0, "checked", "checked")
- %> /> &#160;
- <div style="padding:0.5em; display:inline">
- <label<%=attr("for", cbid .. "_uns")%>><em><%:unspecified%></em></label>
- </div>
- </li>
- <% end %>
-</ul>
+ <input class="create-item-input" type="text" />
+ </li>
+ <% end %>
+ </ul>
+</div>
<%+cbi/valuefooter%>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-16 10:31:29 +0000