libs/cbi: implement tabbing to split large sections and group options in tabs

[project/luci.git] / libs / cbi / luasrc / view / cbi / ucisection.htm

diff --git a/libs/cbi/luasrc/view/cbi/ucisection.htm b/libs/cbi/luasrc/view/cbi/ucisection.htm
index 2ae8560..a8b313d 100644 (file)
--- a/libs/cbi/luasrc/view/cbi/ucisection.htm
+++ b/libs/cbi/luasrc/view/cbi/ucisection.htm
@@ -13,22 +13,66 @@ $Id$
 
 -%>
 
-<% self:render_children(section, scope or {}) %>
+<%-
+       if type(self.hidden) == "table" then
+               for k, v in pairs(self.hidden) do
+-%>
+       <input type="hidden" id="cbid.<%=self.config%>.<%=section%>.<%=k%>" name="cbid.<%=self.config%>.<%=section%>.<%=k%>" value="<%=pcdata(v)%>" />
+<%-
+               end
+       end
+%>
+
+<% if self.tabs then %>
+       <%+cbi/tabcontainer%>
+<% else %>
+       <% self:render_children(section, scope or {}) %>
+<% end %>
+
+<% if self.error and self.error[section] then -%>
+       <div class="cbi-section-error">
+               <ul><% for _, e in ipairs(self.error[section]) do %><li><%=pcdata(e):gsub("\n","<br />")%></li><% end %></ul>
+       </div>
+<%- end %>
 
-<% if #self.optionals[section] > 0 or self.dynamic then %>
+<% if self.optionals[section] and #self.optionals[section] > 0 or self.dynamic then %>
        <div class="cbi-optionals">
                <% if self.dynamic then %>
-                       <input type="text" name="cbi.opt.<%=self.config%>.<%=section%>" />
+                       <input type="text" id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>" />
+                       <% if self.optionals[section] and #self.optionals[section] > 0 then %>
+                       <script type="text/javascript">
+                               cbi_combobox_init('cbi.opt.<%=self.config%>.<%=section%>', {
+                               <%-
+                                       for i, val in pairs(self.optionals[section]) do
+                               -%>
+                                       <%-=string.format("%q", val.option) .. ":" .. string.format("%q", striptags(val.title))-%>
+                                       <%-if next(self.optionals[section], i) then-%>,<%-end-%>
+                               <%-
+                                       end
+                               -%>
+                               }, '', '<%-:cbi_manual-%>');
+                       </script>
+                       <% end %>
                <% else %>
-               <select name="cbi.opt.<%=self.config%>.<%=section%>">
+               <select id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>">
                        <option><%:cbi_addopt%></option>
                        <% for key, val in pairs(self.optionals[section]) do -%>
-                               <option id="cbi-<%=self.config.."-"..section.."-"..val.option%>" value="<%=val.option%>"><%=val.title%></option>
+                               <option id="cbi-<%=self.config.."-"..section.."-"..val.option%>" value="<%=val.option%>"><%=striptags(val.title)%></option>
                        <%- end %>
                </select>
                <script type="text/javascript"><% for key, val in pairs(self.optionals[section]) do %>
-                       <% if #val.deps > 0 then %><% for j, d in ipairs(val.deps) do %>cbi_d_add("cbi-<%=self.config.."-"..section.."-"..val.option%>", "cbid.<%=self.config.."."..section.."."..d.field%>", "<%=d.value%>");
-               <% end %><% end %>
+                       <% if #val.deps > 0 then %><% for j, d in ipairs(val.deps) do -%>
+                       cbi_d_add("cbi-<%=self.config.."-"..section.."-"..val.option..d.add%>", {
+               <%-
+                       for k,v in pairs(d.deps) do
+               -%>
+                       <%-=string.format('"cbid.%s.%s.%s"', self.config, section, k) .. ":" .. string.format("%q", v)-%>
+                       <%-if next(d.deps, k) then-%>,<%-end-%>
+               <%-
+                       end
+               -%>
+                       });
+               <%- end %><% end %>
                <% end %></script>
        <% end %>
                <input type="submit" class="cbi-button cbi-button-fieldadd" value="<%:add%>" />