luci-base/firewall_zonelist: fix visual interface/background alignment
[project/luci.git] / modules / luci-base / luasrc / view / cbi / firewall_zonelist.htm
1 <%+cbi/valueheader%>
2
3 <%-
4         local utl = require "luci.util"
5         local fwm = require "luci.model.firewall".init()
6         local nwm = require "luci.model.network".init()
7
8         local zone, net, iface
9         local zones = fwm:get_zones()
10         local value = self:formvalue(section)
11         if not value or value == "-" then
12                 value = self:cfgvalue(section) or self.default
13         end
14
15         local selected = false
16         local checked = { }
17
18         for value in utl.imatch(value) do
19                 checked[value] = true
20         end
21
22         if not next(checked) then
23                 checked[""] = true
24         end
25 -%>
26
27 <span>
28         <ul style="margin:0; list-style-type:none; text-align:left">
29                 <% if self.allowlocal then %>
30                 <li style="padding:0.5em">
31                         <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;
32                         <label<%=attr("for", cbid .. "_empty")%>></label>
33                         <label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
34                                 <strong><%:Device%></strong>
35                                 <% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
36                         </label>
37                 </li>
38                 <% end %>
39                 <% if self.allowany then %>
40                 <li style="padding:0.5em">
41                         <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;
42                         <label<%=attr("for", cbid .. "_any")%>></label>
43                         <label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
44                                 <strong><%:Any zone%></strong>
45                                 <% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
46                         </label>
47                 </li>
48                 <% end %>
49                 <%
50                         for _, zone in utl.spairs(zones, function(a,b) return (zones[a]:name() < zones[b]:name()) end) do
51                                 if zone:name() ~= self.exclude then
52                                         selected = selected or (value == zone:name())
53                 %>
54                 <li style="padding:0.5em">
55                         <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;
56                         <label<%=attr("for", cbid .. "." .. zone:name())%>></label>
57                         <label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
58                                 <strong><%=zone:name()%>:</strong>
59                                 <%
60                                         local zempty = true
61                                         for _, net in ipairs(zone:get_networks()) do
62                                                 net = nwm:get_network(net)
63                                                 if net then
64                                                         zempty = false
65                                 %>
66                                         <span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:
67                                         <%
68                                                 local nempty = true
69                                                 for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do
70                                                         nempty = false
71                                         %>
72                                                 <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" />
73                                         <% end %>
74                                         <% if nempty then %><em><%:(empty)%></em><% end %>
75                                         </span>
76                                 <% end end %>
77                                 <% if zempty then %><em><%:(empty)%></em><% end %>
78                         </label>
79                 </li>
80                 <% end end %>
81
82                 <% if self.widget ~= "checkbox" and not self.nocreate then %>
83                 <li style="padding:0.5em">
84                         <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;
85                         <label<%=attr("for", cbid .. "_new")%>></label>
86                         <div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
87                                 <em><%:unspecified -or- create:%>&#160;</em>
88                                 <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" />
89                         </div>
90                 </li>
91                 <% end %>
92         </ul>
93 </span>
94
95 <%+cbi/valuefooter%>