<style type="text/css">#Content{background-color:#f0f0f0}div.device-list{background-color:#FFF;margin-top:3.623rem!important}ul.list{margin:0 .5rem}a.list-item{text-decoration:none}li.list-item{font-size:0;padding:.25rem 0 0;overflow:hidden;border-bottom:1px solid #e9e9e9}a.list-item:last-child li.list-item{border-bottom:0}div.left-con{float:left;width:20%}i.verdor-icon{font-size:1.25rem;display:inline-block;width:1.25rem;height:1.25rem}div.right-con{float:right;width:80%}a:last-child div.right-con{border-bottom:0}p.list-con-l{font-size:0;float:left;width:5rem}p.list-con-r{position:relative;color:#949494;font-size:.4rem;float:right;max-width:2rem;text-align:right;min-width:2rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p.list-con-r::before{content:"\A";white-space:pre}span.speed-limit{color:#1389e7;position:absolute;top:0;right:0}span.list-con1{color:#575757;font-size:.417rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:3.8rem}span.self{margin-left:.2rem;font-size:.4rem;color:#1389e7;vertical-align:top;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:1rem}span.list-con1::after{content:"\A";white-space:pre}span.list-con2{color:#949494;font-size:.4rem}span.speed-con{display:inline-block;width:2.5rem}span.speed-con i{margin-right:.1rem}.icon_speed_up{color:#1499e6}.icon_speed{color:#1fb66f}span.mac{margin-left:.2rem}div.net-speed{position:absolute;color:#fff;width:94%;height:2rem;top:1.111rem;margin:.256rem 3%;background:url(/luci-static/images/speed_bg.png?_=20191016014108) no-repeat;background-size:100% 100%}div.speed-bg{position:fixed;color:#fff;width:100%;height:2.512rem;top:1.111rem;background-color:#FFF;z-index:100}div.net-speed{position:absolute;color:#fff;width:94%;height:2rem;margin:auto;top:.256rem;left:3%;background:url(/luci-static/images/speed_bg.png?_=20191016014108) no-repeat;background-size:100% 100%}div.speed-state{float:left;width:50%;position:relative}div.speed-state i.icon{left:.189rem;margin-top:.135rem;color:#FFF;font-size:.6rem;display:inline-block;position:absolute}div.speed-num{right:.8rem;top:.644rem;font-size:.711rem;position:absolute;font-family:icoset}span.speed-size{font-size:.267rem}span.speed-tip{font-size:.211rem;display:inherit;margin-left:.9rem;margin-top:.2rem}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {device_manage = {client_list = {}},
		network = {wan_status = {}}}
		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;

	function JSON2UriParam(data){
		return $.param(data).replace(/\+/g, '%20');
	}

	function speedSplit(speed){
		var kSpeed = 1024;
		var mSpeed = kSpeed * 1024;
		var gSpeed = mSpeed * 1024;

		speed = parseInt(speed, 10);
		if (speed >= gSpeed){
			num = (speed/gSpeed).toFixed(0);
			unit = "GB/s";
		}
		else if (speed >= mSpeed){
			num = (speed/mSpeed).toFixed(0);
			unit = "MB/s";
		}
		else if (speed >= kSpeed){
			num = (speed/kSpeed).toFixed(0);
			unit = "KB/s";
		}
		else{
			num = speed.toFixed(0);
			unit = "B/s";
		}

		return [num, unit];
	}

	function speedUnit(speed){
		var info = speedSplit(speed);
		return info[1];
	}

	function speedNum(speed){
		var info = speedSplit(speed);
		return info[0];
	}

	function initOnlineEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}
		var devName = htmlEscape(client.name);
		var uRate = netSpeedTrans(client.upload_speed);
		var dRate = netSpeedTrans(client.download_speed);
		var timeStr = timeTrans(client.online_time);
		var rightConStr = timeStr;
		var selfHost = "";

		if (client.ip == curIp){
			selfHost = '{%label.selfHost%}';
		}

		if (0 != client.upload_limit || 0 != client.download_limit){
			rightConStr += '<span class="speed-limit">{%label.limitSpeed%}<span>';
		}

		if (!(0 <= parseInt(client.upload_speed) && 0 <= parseInt(client.download_speed)))
		{
			uRate = dRate = "----";
		}

		/*
		if (0 == client.device_type){	// 暂不支持有线设备上下行速率的统计
			uRate = dRate = "----";
		}
		*/

		return '<a href="#/editClient/?keyBack=1&' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="self">' + selfHost + '</span>'+
					'<span class="list-con2 speed-con"><i class="icon_speed_up"></i><span>' + uRate + '</span></span>' +
					'<span class="list-con2 speed-con"><i class="icon_speed"></i><span>' + dRate + '</span></span>' +
				'</p>' +
				'<p class="list-con-r">' + rightConStr + '</p>' +
			'</div>' +
		'</li></a>';
	}

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

		return '<a href="#/editClient/?keyBack=1&' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="list-con2">{%label.mac%}<span class="mac">' + client.mac + '</span></span>' +
				'</p>' +
			'</div>' +
		'</li></a>';
	}

	var onlineListObj = $("#onlineList");
	var offlineListObj = $("#offlineList");
	var forbidListObj = $("#forbidList");
	var forbidTitleObj = $("#ForbidTitle");
	var offlineTitle = $("#OfflineTitle");

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

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

	function refreshDevList(){
		var data = {
			device_manage:{client_list:null},
			network:{"wan_status":null}
		};

		apiGet(data, function(result){
			if (currentState != stateman.current.name){
				return;
			}

			var errNo = result[ERR_CODE];

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

			var internetStatus = ret.network.wan_status;
			if ("0" == internetStatus.internet_status){
				//不能上网
				$("#UpSpeed").text("----");
				$("#DownSpeed").text("----");
				$("#UpUnit").hide();
				$("#DownUnit").hide();
			}else{
				$("#UpSpeed").text(speedNum(internetStatus.upload_speed));
				$("#DownSpeed").text(speedNum(internetStatus.download_speed));
				$("#UpUnit").text(speedUnit(internetStatus.upload_speed));
				$("#DownUnit").text(speedUnit(internetStatus.download_speed));
			}

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

	initList(clients);
	$.setTimeout(refreshDevList, 1000);
})();
</script>
<div class="head-con">
	<a href="javascript:logout();" class="head-btn-l">{%btn.logout%}</a>
	<h1 class="head-title">{%label.devManage%}</h1>
</div>
<div class="speed-bg" id="NetSpeed">
	<div class="net-speed" id="NetSpeed">
		<div class="speed-state">
		<i class="icon icon_speed_up"></i>
		<span class="speed-tip">{%label.upSpeed%}</span>
		<div class="speed-num">
			<span id="UpSpeed">0</span>
			<span class="speed-size" id="UpUnit">KB/S</span>
		</div>
		</div>
        <div class="speed-state">
		<i class="icon icon_speed"></i>
		<span class="speed-tip">{%label.downSpeed%}</span>
		<div class="speed-num">
			<span id="DownSpeed">0</span>
			<span class="speed-size" id="DownUnit">KB/S</span>
		</div>
		</div>
	</div>
</div>
<div class="device-list below-head">
	<ul class="set-con-title" id="OnlineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.onlineClient%}</label>
	</ul>
	<ul id="onlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="OfflineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.offlineClient%}</label>
	</ul>
	<ul id="offlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="ForbidTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.forbidClient%}</label>
	</ul>
	<ul id="forbidList" class="list"></ul>
</div>