libs/web: implement sortable rows for uci reordering
[project/luci.git] / libs / web / luasrc / view / cbi / tblsection.htm
1 <%#
2 LuCI - Lua Configuration Interface
3 Copyright 2008 Steven Barth <steven@midlink.org>
4 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
5
6 Licensed under the Apache License, Version 2.0 (the "License");
7 you may not use this file except in compliance with the License.
8 You may obtain a copy of the License at
9
10 http://www.apache.org/licenses/LICENSE-2.0
11
12 $Id$
13
14 -%>
15 <%-
16 local rowcnt = 1
17 function rowstyle()
18 rowcnt = rowcnt + 1
19 return (rowcnt % 2) + 1
20 end
21
22 function width(o)
23 if o.width then
24 if type(o.width) == 'number' then
25 return ' style="width:%dpx"' % o.width
26 end
27 return ' style="width:%s"' % o.width
28 end
29 return ''
30 end
31 -%>
32
33 <!-- tblsection -->
34 <fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
35 <% if self.title and #self.title > 0 then -%>
36 <legend><%=self.title%></legend>
37 <%- end %>
38 <%- if self.sortable then -%>
39 <input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
40 <%- end -%>
41 <div class="cbi-section-descr"><%=self.description%></div>
42 <div class="cbi-section-node">
43 <%- local count = 0 -%>
44 <table class="cbi-section-table">
45 <tr class="cbi-section-table-titles">
46 <%- if not self.anonymous then -%>
47 <%- if self.sectionhead then -%>
48 <th class="cbi-section-table-cell"><%=self.sectionhead%></th>
49 <%- else -%>
50 <th>&#160;</th>
51 <%- end -%>
52 <%- end -%>
53 <%- for i, k in pairs(self.children) do if not k.optional then -%>
54 <th class="cbi-section-table-cell"<%=width(k)%>>
55 <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%>
56 <%-=k.title-%>
57 <%- if k.titleref then -%></a><%- end -%>
58 </th>
59 <%- count = count + 1; end; end; if self.extedit or self.addremove then -%>
60 <th class="cbi-section-table-cell">&#160;</th>
61 <%- count = count + 1; end -%>
62 </tr>
63 <tr class="cbi-section-table-descr">
64 <%- if not self.anonymous then -%>
65 <%- if self.sectiondesc then -%>
66 <th class="cbi-section-table-cell"><%=self.sectiondesc%></th>
67 <%- else -%>
68 <th></th>
69 <%- end -%>
70 <%- end -%>
71 <%- for i, k in pairs(self.children) do if not k.optional then -%>
72 <th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th>
73 <%- end; end; if self.extedit or self.addremove then -%>
74 <th class="cbi-section-table-cell"></th>
75 <%- end -%>
76 </tr>
77 <%- local isempty = true
78 for i, k in ipairs(self:cfgsections()) do
79 section = k
80 isempty = false
81 scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
82 -%>
83 <tr class="cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>">
84 <% if not self.anonymous then -%>
85 <th><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></th>
86 <%- end %>
87
88
89 <%-
90 for k, node in ipairs(self.children) do
91 if not node.optional then
92 node:render(section, scope or {})
93 end
94 end
95 -%>
96
97 <%- if self.sortable then -%>
98 <td class="cbi-section-table-cell" style="width:50px">
99 <a href="#" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move up%>"><img src="<%=resource%>/cbi/up.gif" alt="<%:Move up%>" /></a>
100 <a href="#" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move down%>"><img src="<%=resource%>/cbi/down.gif" alt="<%:Move down%>" /></a>
101 </td>
102 <%- end -%>
103
104 <%- if self.extedit or self.addremove then -%>
105 <td class="cbi-section-table-cell" style="width:50px">
106 <%- if self.extedit then -%>
107 <a href="
108 <%- if type(self.extedit) == "string" then -%>
109 <%=self.extedit:format(section)%>
110 <%- elseif type(self.extedit) == "function" then -%>
111 <%=self:extedit(section)%>
112 <%- end -%>
113 " title="<%:Edit%>"><img style="border: none" src="<%=resource%>/cbi/edit.gif" alt="<%:Edit%>" /></a>
114 <%- end; if self.addremove then %>
115 <input type="image" value="<%:Delete%>" onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" src="<%=resource%>/cbi/remove.gif" />
116 <%- end -%>
117 </td>
118 <%- end -%>
119 </tr>
120 <%- end -%>
121
122 <%- if isempty then -%>
123 <tr class="cbi-section-table-row">
124 <td colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></td>
125 </tr>
126 <%- end -%>
127 </table>
128
129 <% if self.error then %>
130 <div class="cbi-section-error">
131 <ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
132 <li><%=pcdata(e):gsub("\n","<br />")%></li>
133 <%- end end %></ul>
134 </div>
135 <% end %>
136
137 <%- if self.addremove then -%>
138 <% if self.template_addremove then include(self.template_addremove) else -%>
139 <div class="cbi-section-create cbi-tblsection-create">
140 <% if self.anonymous then %>
141 <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" title="<%:Add%>" />
142 <% else %>
143 <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
144 <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
145 <script type="text/javascript">cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>', true, 'uciname');</script>
146 <input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
147 <% if self.invalid_cts then -%>
148 <br /><%:Invalid%></div>
149 <%- end %>
150 <% end %>
151 </div>
152 <%- end %>
153 <%- end -%>
154 </div>
155 </fieldset>
156 <!-- /tblsection -->