libs/web: implement sortable rows for uci reordering

libs/web/htdocs/luci-static/resources/cbi.js

@@ -718,6 +718,50 @@ function cbi_validate_field(cbid, optional, type)
 	}
 }
 
+function cbi_row_swap(elem, up, store)
+{
+	var tr = elem.parentNode;
+	while (tr && tr.nodeName != 'tr')
+		tr = tr.parentNode;
+
+	var table = tr.parentNode;
+	while (table && table.nodeName != 'table')
+		table = table.parentNode;
+
+	var s = up ? 3 : 2;
+	var e = up ? table.rows.length : table.rows.length - 1;
+
+	for (var idx = s; idx < e; idx++)
+	{
+		if (table.rows[idx] == tr)
+		{
+			if (up)
+				tr.parentNode.insertBefore(table.rows[idx], table.rows[idx-1]);
+			else
+				tr.parentNode.insertBefore(table.rows[idx+1], table.rows[idx]);
+
+			break;
+		}
+	}
+
+	var ids = [ ];
+	for (idx = 2; idx < table.rows.length; idx++)
+	{
+		table.rows[idx].className = table.rows[idx].className.replace(
+			/cbi-rowstyle-[12]/, 'cbi-rowstyle-' + (1 + (idx % 2))
+		);
+
+		if (table.rows[idx].id && table.rows[idx].id.match(/-(cfg[0-9a-f]+)$/) )
+			ids.push(RegExp.$1);
+	}
+
+	var input = document.getElementById(store);
+	if (input)
+		input.value = ids.join(' ');
+
+	return false;
+}
+
 if( ! String.serialize )
 	String.serialize = function(o)
 	{

libs/web/luasrc/cbi.lua

@@ -50,6 +50,7 @@ AUTO = true
 
 CREATE_PREFIX = "cbi.cts."
 REMOVE_PREFIX = "cbi.rts."
+RESORT_PREFIX = "cbi.sts."
 
 -- Loads a CBI map from given file, creating an environment and returns it
 function load(cbimap, ...)
@@ -1121,6 +1122,20 @@ function TypedSection.parse(self, novld)
 		end
 	end
 
+	if self.sortable then
+		local stval = RESORT_PREFIX .. self.config .. "." .. self.sectiontype
+		local order = self.map:formvalue(stval)
+		if order and #order > 0 then
+			local sid
+			local num = 0
+			for sid in util.imatch(order) do
+				self.map.uci:reorder(self.config, sid, num)
+				num = num + 1
+			end
+			self.changed = (num > 0)
+		end
+	end
+
 	if created or self.changed then
 		self:push_events()
 	end

libs/web/luasrc/view/cbi/tblsection.htm

@@ -35,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 -%>
@@ -91,6 +94,13 @@ 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" style="width:50px">
 						<%- if self.extedit then -%>