helloworld/luci-app-ssr-plus/luasrc/view/shadowsocksr/server_list.htm

<%#
 Copyright 2018-2019 Lienol <[email protected]>
 Licensed to the public under the Apache License 2.0.
-%>
<%
local dsp = require "luci.dispatcher"
-%>
<script type="text/javascript">
	//<![CDATA[
	const doms = document.getElementsByClassName('pingtime');
	const ports = document.getElementsByClassName("socket-connected")
	const xhr = (index) => {
		return new Promise((res) => {
			const dom = doms[index];
			const port = ports[index];
			if (!dom) res()
			port.innerHTML = '<font color="#0072c3">connect</font>';

			XHR.get('<%=dsp.build_url("admin/services/shadowsocksr/ping")%>', {
				index,
				domain: dom.getAttribute("hint"),
				port: port.getAttribute("hint")
			},
			(x, result) => {
				let col = '#ff0000';
				if (result.ping) {
					if (result.ping < 300) col = '#ff3300';
					if (result.ping < 200) col = '#ff7700';
					if (result.ping < 100) col = '#249400';
				}
				dom.innerHTML = `<font color="${col}">${(result.ping ? result.ping : "--") + " ms"}</font>`
				if (result.socket) {
					port.innerHTML = '<font color="#249400">ok</font>';
				} else {
					port.innerHTML = '<font color="#ff0000">fail</font>';
				}
				res();
			});
		})
	}
	let task = -1;
	const thread = () => {
		task = task + 1
		if (doms[task]) {
			xhr(task).then(thread);
		}
	}
	for (let i = 0; i < 20; i++) {
		thread()
	}
	
	function cbi_row_drop(fromId, toId, store, isToBottom) {
		var fromNode = document.getElementById(fromId);
		var toNode = document.getElementById(toId);
		if (!fromNode || !toNode) return false;

		var table = fromNode.parentNode;
		while (table && table.nodeName.toLowerCase() != "table")
			table = table.parentNode;
		if (!table) return false;

		var ids = [];
		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))
			);

			if (table.rows[idx].id && table.rows[idx].id.match(/-([^\-]+)$/))
				ids.push(RegExp.$1);
		}

		var input = document.getElementById(store);
		if (input) input.value = ids.join(" ");

		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);
		}

		function ondrop(ev) {
			var from = ev.dataTransfer.getData("Text");
			cbi_row_drop(from, this.id, store);
		}

		function ondragover(ev) {
			ev.preventDefault();
			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",
		"cbi.sts.shadowsocksr.servers"
	);
</script>