libs/web: implement sortable rows for uci reordering

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

diff --git a/libs/web/luasrc/view/cbi/tblsection.htm b/libs/web/luasrc/view/cbi/tblsection.htm
index 0224610..c79d5a8 100644 (file)
--- a/libs/web/luasrc/view/cbi/tblsection.htm
+++ b/libs/web/luasrc/view/cbi/tblsection.htm
@@ -18,6 +18,16 @@ function rowstyle()
        rowcnt = rowcnt + 1
        return (rowcnt % 2) + 1
 end
+
+function width(o)
+       if o.width then
+               if type(o.width) == 'number' then
+                       return ' style="width:%dpx"' % o.width
+               end
+               return ' style="width:%s"' % o.width
+       end
+       return ''
+end
 -%>
 
 <!-- tblsection -->
@@ -25,6 +35,9 @@ end
        <% if self.title and #self.title > 0 then -%>
                <legend><%=self.title%></legend>
        <%- end %>
+       <%- if self.sortable then -%>
+               <input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
+       <%- end -%>
        <div class="cbi-section-descr"><%=self.description%></div>
        <div class="cbi-section-node">
                <%- local count = 0 -%>
@@ -38,7 +51,7 @@ end
                                <%- end -%>
                        <%- end -%>
                        <%- for i, k in pairs(self.children) do if not k.optional then -%>
-                               <th class="cbi-section-table-cell">
+                               <th class="cbi-section-table-cell"<%=width(k)%>>
                                <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%>
                                        <%-=k.title-%>
                                <%- if k.titleref then -%></a><%- end -%>
@@ -56,7 +69,7 @@ end
                                <%- end -%>
                        <%- end -%>
                        <%- for i, k in pairs(self.children) do if not k.optional then -%>
-                               <th class="cbi-section-table-cell"><%=k.description%></th>
+                               <th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th>
                        <%- end; end; if self.extedit or self.addremove then -%>
                                <th class="cbi-section-table-cell"></th>
                        <%- end -%>
@@ -81,8 +94,15 @@ end
                                        end
                                -%>
 
+                               <%- if self.sortable then -%>
+                                       <td class="cbi-section-table-cell" style="width:50px">
+                                               <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>
+                                               <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>
+                                       </td>
+                               <%- end -%>
+
                                <%- if self.extedit or self.addremove then -%>
-                                       <td class="cbi-section-table-cell">
+                                       <td class="cbi-section-table-cell" style="width:50px">
                                                <%- if self.extedit then -%>
                                                        <a href="
                                                        <%- if type(self.extedit) == "string" then -%>
@@ -92,7 +112,7 @@ end
                                                        <%- end -%>
                                                        " title="<%:Edit%>"><img style="border: none" src="<%=resource%>/cbi/edit.gif" alt="<%:Edit%>" /></a>
                                                <%- end; if self.addremove then %>
-                                                       <input type="image" value="<%:Delete%>" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" src="<%=resource%>/cbi/remove.gif" />
+                                                       <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" />
                                                <%- end -%>
                                        </td>
                                <%- end -%>
@@ -121,8 +141,9 @@ end
                                        <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" title="<%:Add%>" />
                                <% else %>
                                        <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-                                       <input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
-                                       <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" title="<%:Add%>" />
+                                       <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
+                                       <script type="text/javascript">cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>', true, 'uciname');</script>
+                                       <input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
                                        <% if self.invalid_cts then -%>
                                                <br /><%:Invalid%></div>
                                        <%- end %>