<style type="text/css">#Con{background-color:#FFF}#Content{border:0}div.device-list{margin:0}ul.list-head{margin-top:24px;padding:30px 0 30px;border-bottom:1px solid #e7e7e7;border-top:1px solid #e7e7e7;background-color:#f5f6f8}ul.list-head li{display:inline-block;font-size:14px;color:#272a2d}ul.list{padding:19px 0;border-bottom:1px solid #DDD}ul.list:last-child{border-bottom:1px solid #e7e7e7}ul.list:hover{background-color:#f5f5f5}ul.list li{display:inline-block;font-size:14px;color:#272a2d;vertical-align:middle}li.device-name{width:25%}li.ip-mac{width:20%}li.speed{width:20%}li.speed-limit{width:15%}li.access-way{width:10%}li.allow-internet{text-align:right;width:10%}li.allow-internet p{text-align:right;margin-right:20px}li.allow-internet span.switch{margin-right:0}li.allow-internet span.self-host{color:#3050f3;font-weight:bold;margin-right:10px}li.txt-first-little{text-indent:1em}li.txt-indent-little{text-indent:.2em}i.vendor-icon{font-size:48px;display:inline-block;width:50px;height:50px;margin-right:10px;margin-top:5px}div.dev-name{display:inline-block;vertical-align:top}ul.list p{height:30px;vertical-align:bottom;line-height:30px}p.dev-name{cursor:pointer;width:150px;line-height:25px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}p.time{color:#767d82;width:150px;height:25px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}i.icon_speed_up{font-size:20px;vertical-align:middle;color:#27c72f}i.icon_speed{font-size:20px;vertical-align:middle;color:#288bc4}li.access-way i{font-size:22px;margin-right:5px;vertical-align:middle}input.unlimit,input.name-set{color:#767d82;line-height:20px;padding:0 .25em;border-radius:2px;border:0;border-bottom:1px solid #DDD}li.speed-limit input.unlimit{width:3.25em}li.device-name input.name-set{width:150px}span.limited{cursor:pointer;color:#ff7a01;vertical-align:bottom}span.disable-limit{color:#909396;vertical-align:bottom}p.disable{height:25px;margin-left:22px;vertical-align:bottom}#forbidList ul.list li,#offlineList ul.list li{color:#767d82}#forbidList p.dev-name,#offlineList p.dev-name{line-height:50px;height:50px}p.mac-color{color:#909396}ul.dev-title{font-size:14px}i.line-icon{font-size:26px;margin:auto;vertical-align:middle}li.line-title{width:170px;height:50px;border:1px solid #DDD;border-radius:2px;cursor:pointer;margin-top:26px;display:inline-block}li.right-title{margin-left:20px}li.line-select{background-color:#ff7800;color:#FFF}li.line-unselect{background-color:#f5f6f8;color:#2a2c32}p.line-tip{margin-left:20px;position:relative;height:50px;line-height:50px}span.desc-line{left:30px;position:absolute}span.right-con{margin-right:1em}#Offline p{margin-left:18px}#Offline i{font-size:30px;margin-top:-4px;display:inline-block}#Offline span{left:34px}div.device-img{width:321px;height:136px;margin:auto;margin-top:135px;background:url(/luci-static/images/device_empty.png?_=20191016014108) no-repeat;background-size:contain}p.device-tip{font-size:14px;text-align:center;margin-top:19px;color:#272a2d}</style><script type="text/javascript">
(function(){
	var onlineListObj = $("#onlineList");
	var offlineListObj = $("#offlineList");
	var forbidListObj = $("#forbidList");

	var bEditing = false;

	<%
		local para = {device_manage = {client_list = {}}}
		local result = tpl_get_data(para, true)

		local remote_ip = luci.http.getenv("REMOTE_ADDR")
	-%>

	var info = <%=result%>;
	var curIp = "<%=remote_ip%>";
	var clients = info[K_MODULE].device_manage.client_list;
	var currentState = stateman.current.name;

	$("#Online").click(function(){
		lineListSet(label.noOnline, "Online");
	});

	$("#Offline").click(function(){
		lineListSet(label.noOffline, "Offline");
	});

	$("#Forbid").click(function(){
		lineListSet(label.noForbid, "Forbid");
	});

	function lineListSet(lineName, lineList){
		$("#onlineList").hide();
		$("#offlineList").hide();
		$("#forbidList").hide();
		$("#Online").removeClass("line-select").addClass("line-unselect");
		$("#Offline").removeClass("line-select").addClass("line-unselect");
		$("#Forbid").removeClass("line-select").addClass("line-unselect");

		var lineSelset = "#" + lineList;
		var lineShow = "#" + lineList.toLowerCase() + "List";
		var lineImg = lineShow +" ul";

		$(lineSelset).removeClass("line-unselect").addClass("line-select");
		$(lineShow).show();

		if ($(lineImg).length == 0){
			$("#DeviceEmpty").show();
			$("#EmptyTip").text(lineName);
		}else{
			$("#DeviceEmpty").hide();
		}
	}

	function initOnlineEntry(client, idx){
		var devName = htmlEscape(client.name);
		var devType = parseInt(client.device_type, 10);
		var upSpeed = netSpeedTrans(client.upload_speed);
		var downSpeed = netSpeedTrans(client.download_speed);
		var icon;
		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}
		var time = timeTrans(client.online_time);

		var upSpeedStr = '<i class="icon_speed_up"></i>' + upSpeed;
		var downSpeedStr = '<i class="icon_speed"></i>' + downSpeed;

		var upLimitStr;
		if (4 == devType){
			upLimitStr = '<span class="disable-limit up">{%label.unlimitSpeed%}</span>';
		}else if (0 == client.upload_limit){
			upLimitStr = '<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			upLimitStr = '<span class="limited up">' + client.upload_limit + 'KB/s</span>';
		}

		var downLimitStr;
		if (4 == devType){
			downLimitStr = '<span class="disable-limit down">{%label.unlimitSpeed%}</span>';
		}else if (0 == client.download_limit){
			downLimitStr = '<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			downLimitStr = '<span class="limited down">' + client.download_limit + 'KB/s</span>';
		}

		var accessWayStr = "";
		switch(devType){
		case 0:
			accessWayStr = '<p><i class="icon_lan"></i>LAN</p>';
			break;
		case 1:
			accessWayStr = '<p><i class="icon_wifi_signal_three"></i>2.4G</p>';
			break;
		case 2:
			accessWayStr = '<p><i class="icon_wifi_signal_three"></i>5G</p>';
			break;
		case 3:
			accessWayStr = '<p><i class="icon_visitor"></i>{%label.guest%}</p>';
			break;
		case 4:
			accessWayStr = '<p><i class="icon_wifi_signal_three"></i>{%label.shareWifi%}</p>';
			break;
		default:
			break;
		}

		var switchStr;
		if (curIp == client.ip){
			switchStr = '<span class="self-host">{%label.selfHost%}</span>';
		}else if(4 == devType){
			switchStr = '<span class="self-host">{%label.shareWifi%}</span>';
		}else{
			switchStr = '<span class="switch internet-switch" data-switch="1"><i class="switch-circle"></i></span>';
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
							'<p class="time">' + time + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac">' +
						'<p>IP:' + client.ip + '</p>' +
						'<p class="mac-color">MAC:' + client.mac + '</p>' +
					'</li>' +
					'<li class="speed">'+
						'<p>' + upSpeedStr + '</p>' +
						'<p>' + downSpeedStr + '</p>' +
					'</li>' +
					'<li class="speed-limit">' +
						'<p><i class="icon_speed_up"></i>' + upLimitStr + '</p>' +
						'<p><i class="icon_speed"></i>' + downLimitStr + '</p>' +
					'</li>' +
					'<li class="access-way">' + accessWayStr + '</li>' +
					'<li class="allow-internet"><p>' + switchStr + '</p></li>' +
				'</ul>';
	}

	function initOfflineEntry(client, idx){
		var devName = htmlEscape(client.name);
		var icon;
		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}

		var upLimitStr;
		if (0 == client.upload_limit){
			upLimitStr = '<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			upLimitStr = '<span class="limited up">' + client.upload_limit + 'KB/s</span>';
		}

		var downLimitStr;
		if (0 == client.download_limit){
			downLimitStr = '<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			downLimitStr = '<span class="limited down">' + client.download_limit + 'KB/s</span>';
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac"><p class="mac-color">MAC:' + client.mac + '</p></li>' +
					'<li class="speed"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="speed-limit">' +
						'<p><i class="icon_speed_up"></i>' + upLimitStr + '</p>' +
						'<p><i class="icon_speed"></i>' + downLimitStr + '</p>' +
					'</li>' +
					'<li class="access-way"><p>{%label.offline%}</p></li>' +
					'<li class="allow-internet"><p><span class="switch internet-switch" data-switch="1"><i class="switch-circle"></i></span></p></li>' +
				'</ul>';
	}

	function initForbidEntry(client, idx){
		var devName = htmlEscape(client.name);
		var icon;
		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac"><p class="mac-color">MAC:' + client.mac + '</p></li>' +
					'<li class="speed"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="speed-limit"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="access-way"><p>{%label.forbided%}</p></li>' +
					'<li class="allow-internet"><p><span class="switch internet-switch" data-switch="0"><i class="switch-circle"></i></span></p></li>' +
				'</ul>';
	}

	function initSwitchList(filter, callback){
		$(filter).each(function(){
			var state = $(this).attr("data-switch");
			if (1 == state){
				$(this).attr("data-value", "1").css({textAlign: "right", backgroundColor: "#FE9818"});
			}else{
				$(this).attr("data-value", "0").css({textAlign: "left", backgroundColor: "#B2B2B2"});
			}
		}).click(function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var state = $(this).attr("data-value");

			if (0 == state){
				$(this).attr("data-value", "1").css({textAlign: "right", backgroundColor: "#FE9818"});
				callback && callback(1, idx);
			}else{
				$(this).attr("data-value", "0").css({textAlign: "left", backgroundColor: "#B2B2B2"});
				callback && callback(0, idx);
			}
		});
	};

	function onNetSwitchClick(val, idx){
		var data = {};
		var para = {};

		bEditing = true;

		para.device_manage = {};
		para.device_manage.client_list = data;

		data.mac = clients[idx].mac;
		data.ip = clients[idx].ip;
		data.name = clients[idx].name;
		data.upload_limit = clients[idx].upload_limit;
		data.download_limit = clients[idx].download_limit;
		data.internet_enable = val;

		apiSet(para, function(ret){
			bEditing = false;
			if (ret.ERR_CODE == E_TABLEFULL){
				showAlert(errStr.tableFull);
			}
		});
	}

	var speedBindEvt = {
		focus:function(){
			bEditing = true;
		},
		keyup:function(event){
			if (event.keyCode == "13") {
				$(this).blur();
			}
		},
		blur:function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var speed = $(this).val() || "0";
			var para = {};
			var data = {};

			if ($(this).hasClass("up")){
				data.upload_limit = speed;
				if (handleError(checkItems(speed, "UP"), showAlert)){
					return;
				}
			}else{
				data.download_limit = speed;
				if (handleError(checkItems(speed, "DOWN"), showAlert)){
					return;
				}
			}

			para.device_manage = {};
			para.device_manage.client_list = data;

			data.mac = clients[idx].mac;
			data.ip = clients[idx].ip;
			data.name = clients[idx].name;
			data.internet_enable = clients[idx].internet_enable;

			apiSet(para, function(ret){
				bEditing = false;
			});
		}
	};

	var nameBindEvt = {
		focus:function(){
			bEditing = true;
		},
		keyup:function(event){
			if (event.keyCode == "13") {
				$(this).blur();
			}
		},
		blur:function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var devName = $(this).val();
			var para = {};
			var data = {};

			if (handleError(checkDevName(devName), showAlert)){
				return;
			}

			para.device_manage = {};
			para.device_manage.client_list = data;

			data.mac = clients[idx].mac;
			data.ip = clients[idx].ip;
			data.upload_limit = clients[idx].upload_limit;
			data.download_limit = clients[idx].download_limit;
			data.internet_enable = clients[idx].internet_enable;
			data.name = devName;

			apiSet(para, function(ret){
				bEditing = false;
			});
		}
	};

	function initList(clients){
		onlineListObj.empty();
		offlineListObj.empty();
		forbidListObj.empty();

		var len = clients.length;
		for (var i = 0; i < len; i++){
			if (0 == clients[i].internet_enable) {
				forbidListObj.append(initForbidEntry(clients[i], i));
			}else{
				if (1 == clients[i].online_status){
					onlineListObj.append(initOnlineEntry(clients[i], i));
				}else{
					offlineListObj.append(initOfflineEntry(clients[i], i));
				}
			}
		}

		initSwitchList("span.internet-switch", onNetSwitchClick);

		!placeholder && $("input.unlimit").placeholder();
		$("input.unlimit").bind(speedBindEvt);

		$("span.limited").click(function(){
			bEditing = true;

			var speed = $(this).text().replace(/[^0-9]/gi,"");

			var $input;
			if ($(this).hasClass("up")){
				$input = $('<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />');
			}else{
				$input = $('<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />');
			}

			$(this).replaceWith($input);
			$input.bind(speedBindEvt).val(speed).focus();
		});

		$("p.dev-name").click(function(){
			bEditing = true;

			var name = $(this).text();
			var $input = $('<input class="name-set" maxLength="32" />');

			$(this).html($input).unbind("click");
			$input.bind(nameBindEvt).val(name).focus();
		});
	}

	function refreshDevList(){
		var data = {
			device_manage:{client_list:null}
		};
		if (!bEditing){
			apiGet(data, function(result){
				if (currentState != stateman.current.name){
					return;
				}

				if (!bEditing){
					var errNo = result[ERR_CODE];

					if (E_NONE == errNo){
						clients = result[K_MODULE]["device_manage"]["client_list"];
						initList(clients);
					}else{
						console.log(result);
					}
				}

				$.setTimeout(refreshDevList, 1000);
			});
		}else{
			$.setTimeout(refreshDevList, 1000);
		}
	}



	function checkDevName(username){
		bEditing = false;
		if ("" == username){
			return E_DIVICE_NAME_BLANK;
		}

		if (E_NONE != checkStrLen(username, 32, 1)){
			return E_DIVICE_NAME_LEN;
		}

		return E_NONE;
	}

	function checkItems(speed, limitType){
		bEditing = false;
		var err = checkNumNew(speed, 0, 4096);

		if ("" == speed){
			return E_NONE;
		}

		switch(err){
		case E_NUMFORMAT:
			return eval("E_DIVICE_"+limitType+"_LIMIT_ILLEGAL");
		case E_NUMRANGE:
			return eval("E_DIVICE_"+limitType+"_LIMIT_RANGE");
		}

		return E_NONE;
	}

	initList(clients);
	$.setTimeout(refreshDevList, 1000);
})();
</script>

<div class="help hidden">
	<ul class="help-content">
		<li class="summary">{%helpStr.deviceMng%}</li>
		<li class="summary">{%helpStr.deviceMngTip%}</li>
		<li class="title">{%helpStr.forbidInternet%}</li>
		<li class="content">{%helpStr.forbidInternetTip%}</li>
		<li class="title">{%helpStr.rename%}</li>
		<li class="content">{%helpStr.renameTip%}</li>
		<li class="summary">{%helpStr.renameTip1%}</li>
		<li class="title">{%helpStr.speedLimit%}</li>
		<li class="content">{%helpStr.speedLimitTip%}</li>
	</ul>
</div>
<div class="device-list below-head">
	<ul class="dev-title">
		<li id="Online" class="line-title line-select">
			<p class="line-tip"><i class="line-icon icon_Connected"></i><span class="desc-line">{%label.onlineClient%}</span></p>
		</li>
		<li id="Offline" class="line-title right-title line-unselect">
			<p class="line-tip"><i class="line-icon icon_disconnection"></i><span class="desc-line">{%label.offlineClient%}</span></p>
		</li>
		<li id="Forbid" class="line-title right-title line-unselect">
			<p class="line-tip"><i class="line-icon icon_prohibit"></i><span class="desc-line">{%label.forbidClient%}</span></p>
		</li>
	</ul>
	<ul class="list-head">
		<li class="device-name txt-first-little">{%label.deviceName%}</li>
		<li class="ip-mac">{%label.ipAndMac%}</li>
		<li class="speed txt-indent-little">{%label.curSpeed%}</li>
		<li class="speed-limit txt-indent-little">{%label.limitSpeed%}</li>
		<li class="access-way">{%label.accessWay%}</li>
		<li class="allow-internet"><span class="right-con">{%label.allowInternet%}</span></li>
	</ul>
	<div id="onlineList" class="list-con"></div>
	<div id="offlineList" class="list-con hidden"></div>
	<div id="forbidList" class="list-con hidden"></div>
	<div id="DeviceEmpty" class="hidden">
		<div class="device-img"></div>
		<p id="EmptyTip" class="device-tip"></p>
	</div>
</div>
