From 78f91179da57a8c6ecd418430dbe5ca1606e8911 Mon Sep 17 00:00:00 2001
From: soandsoso <51219603+soandsoso@users.noreply.github.com>
Date: Fri, 20 Mar 2020 13:03:44 +0800
Subject: [PATCH] luci-app-ssr-plus: reset the behavior of btns in server list
 (#3891)

* luci-app-ssr-plus: feat server list draggable

* luci-app-ssr-plus: reset the behavior of up btn

Reset the behavior of up btn in server list to move to top.

* luci-app-ssr-plus: reset the behaviors of the btns

up: move to top
---
 .../luasrc/view/shadowsocksr/server_list.htm  | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/package/lean/luci-app-ssr-plus/luasrc/view/shadowsocksr/server_list.htm b/package/lean/luci-app-ssr-plus/luasrc/view/shadowsocksr/server_list.htm
index f1eb640d1..5d8f47656 100644
--- a/package/lean/luci-app-ssr-plus/luasrc/view/shadowsocksr/server_list.htm
+++ b/package/lean/luci-app-ssr-plus/luasrc/view/shadowsocksr/server_list.htm
@@ -49,8 +49,7 @@ local dsp = require "luci.dispatcher"
 		thread()
 	}
 	
-	// move
-	function cbi_row_drop(fromId, toId, store) {
+	function cbi_row_drop(fromId, toId, store, isToBottom) {
 		var fromNode = document.getElementById(fromId);
 		var toNode = document.getElementById(toId);
 		if (!fromNode || !toNode) return false;
@@ -61,13 +60,13 @@ local dsp = require "luci.dispatcher"
 		if (!table) return false;
 
 		var ids = [];
-		for (var idx = 2; idx < table.rows.length; idx++) {
-			if (table.rows[idx] === fromNode) {
-				toNode.parentNode.insertBefore(toNode, fromNode);
-			} else if (table.rows[idx] === toNode) {
-				fromNode.parentNode.insertBefore(fromNode, toNode);
-			}
+		if (isToBottom) {
+			toNode.parentNode.appendChild(fromNode);
+		} else {
+			fromNode.parentNode.insertBefore(fromNode, toNode);
+		}
 
+		for (var idx = 2; idx < table.rows.length; idx++) {
 			table.rows[idx].className = table.rows[idx].className.replace(
 				/cbi-rowstyle-[12]/,
 				"cbi-rowstyle-" + (1 + (idx % 2))
@@ -82,10 +81,13 @@ local dsp = require "luci.dispatcher"
 
 		return false;
 	}
-	
+
 	// set tr draggable
 	function enableDragForTable(table_selecter, store) {
 		var trs = document.querySelectorAll(table_selecter + " tr");
+		if (!trs || trs.length.length < 3) {
+			return;
+		}
 
 		function ondragstart(ev) {
 			ev.dataTransfer.setData("Text", ev.target.id);
@@ -101,14 +103,46 @@ local dsp = require "luci.dispatcher"
 			ev.dataTransfer.dropEffect = "move";
 		}
 
+		function moveToTop(id) {
+			var top = document.querySelectorAll(table_selecter + " tr")[2];
+			cbi_row_drop(id, top.id, store);
+		}
+
+		function moveToBottom(id) {
+			console.log('moveToBottom:', id);
+			var trList = document.querySelectorAll(table_selecter + " tr");
+			var bottom = trList[trList.length - 1];
+			cbi_row_drop(id, bottom.id, store, true);
+		}
+
 		for (let index = 2; index < trs.length; index++) {
 			const el = trs[index];
 			el.setAttribute("draggable", true);
 			el.ondragstart = ondragstart;
 			el.ondrop = ondrop;
 			el.ondragover = ondragover;
+
+			// reset the behaviors of the btns
+			var upBtns = el.querySelectorAll(".cbi-button.cbi-button-up");
+			if (upBtns && upBtns.length > 0) {
+				upBtns.forEach(function (_el) {
+					_el.onclick = function () {
+						moveToTop(el.id);
+					};
+				});
+			}
+
+			var downBtns = el.querySelectorAll(".cbi-button.cbi-button-down");
+			if (downBtns && downBtns.length > 0) {
+				downBtns.forEach(function (_el) {
+					_el.onclick = function () {
+						moveToBottom(el.id);
+					};
+				});
+			}
 		}
 	}
+
 	// enable
 	enableDragForTable(
 		"#cbi-shadowsocksr-servers table",