<style type="text/css">div.tab-con{font-size:14px;color:#4f5356;text-align:center;margin:30px 50px 10px}div.tab-con table.set-con{width:100%;border-collapse:collapse}th.set-con-long{color:#fe8f19;width:30%}th.set-con-short{color:#fe8f19;width:20%}.boder-tr{border-bottom:2px solid #ff8000;height:30px}span.handle-tip{display:inline-block;width:40px;height:30px;cursor:pointer}.table-height{white-space:pre;line-height:34px}img.signal-bg{width:22px;height:18px;margin-top:5px}input.btn-left{width:140px}input.btn-right{width:140px;background-color:#fe8f19}input.btn-wisp{width:140px}p.wisp-remark{width:310px;color:#767d82;font-size:14px;display:inline-block;text-align:left}span.wisp-tip{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;display:inline-block;width:310px;height:36px;line-height:36px;color:#4f5356;vertical-align:middle;text-align:left}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			wisp = {config = {}},
			dev_feature = {wifi_extend = {}}
		}

		local result = tpl_get_data(para, true)
	-%>
	var info = <%=result%>;
	var rebootConfirm = info[K_MODULE].dev_feature.wifi_extend.reboot_confirm || "1";
	var wisp = info[K_MODULE].wisp.config;

	var extendSwitch = wisp.enable;
	var extendConnected = wisp.connected;
	var extendBand = wisp.band;
	var extendMac = wisp.bssid;
	var extendSsid = wisp.ssid;
	var extendModetype = wisp.safe_mode;
	var extendPwdtype = wisp.encryption;
	var extendPwd = wisp.password;
	var wanProto = wisp.protocol;
	var wanIpaddr = wisp.ip;
	var wanGateway = wisp.gateway;

	$("#ExtendSsid").val(extendSsid);
	$("#ExtendSsidFail").val(extendSsid);
	$("#WanProto").val(getInternetProto(wanProto));
	$("#WanIpaddr").val(wanIpaddr);
	$("#WanGateway").val(wanGateway);

	function saveConfHandle(para, needReboot, cancelCbk){
		if ("1" == needReboot){
			var tip, title;
			if ("0" == para.wisp.config.enable){
				tip = label.colseExtend;
				title = label.svaeColseExtend;
			}else{
				tip = label.openExtend;
				title = label.saveOpenExtend;
			}

			showConfirm(tip, function(choose){
				if (choose){
					showLoading(label.saving);
					apiSet(para, function(ret){
						var code = ret[ERR_CODE];
						if (E_NONE == code){
							showProgressBar(title, label.rebooting, ROUTER.time.reboot, function(){
								window.location.reload();
							});

							$.setTimeout(function(){
								// 检测LAN是否可以连接DUT
								lanDetecting(function(){
									closeLoading();
									window.location.reload();
								});
							}, ROUTER.time.detectDelay);
						}else{
							handleError(code);
							closeLoading();
						}
					});
				}else{
					cancelCbk && cancelCbk();
				}
			});
		}else{
			showLoading(label.saving);
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					var time = ret[K_MODULE].wisp.config.wait_time * 1000;
					$.setTimeout(function(){
						closeLoading();
						window.location.reload();
					}, time);
				}else{
					handleError(code);
					closeLoading();
				}
			});
		}
	}

	function onSwitchClick(state, init){
		if (0 == state){
			$("#Param").hide();

			if (!init){
				apiGet({wisp:{config:null}}, function(ret){
					var enable = parseInt(ret[K_MODULE].wisp.config.enable, 10);
					if (state == enable){
						// 配置没改，直接return
						return;
					}

					var para = {wisp:{config:{enable:"0"}}};
					saveConfHandle(para, rebootConfirm, function(){
						// click cancel when showConfirm reboot
						resetSwitch("Switch", !state);
						wispConnectShow();
						if ("0" == extendSwitch){
							initRadio("WispModal", 0, radioClick);
						}
					});
				});
			}
		}else{
			wispConnectShow();
			if (!init){
				wispConnectShow();
				initRadio("WispModal", 0, radioClick);
			}
		}
	}

	initSwitch("Switch", extendSwitch, onSwitchClick);

	function wispConnectShow(){
		$("#Param").show();
		$("#AutoConfigure").show();
		$("#ApList").hide();
		$("#HandConfigure").hide();
		if ("0" == extendSwitch){
			$("#ExtendSuccess").hide();
			$("#ExtendFail").hide();
			$("#StartScan").show();
			$("#WispMode").show();
		}else{
			if ("1" == extendConnected && "" != wanIpaddr && "0.0.0.0" != wanIpaddr){
				$("#ExtendFail").hide();
				$("#StartScan").hide();
				$("#WispMode").hide();
				$("#ExtendSuccess").show();
			}else{
				$("#ExtendSuccess").hide();
				$("#StartScan").hide();
				$("#WispMode").hide();
				$("#ExtendFail").show();
			}
		}
	}

	function radioClick(idx){
		if (0 == idx){
			$("#AutoConfigure").show();
			$("#ApList").hide();
			$("#HandConfigure").hide();
			$("#ExtendSuccess").hide();
			$("#ExtendFail").hide();
			$("#StartScan").show();
			$("#WispMode").show();
		}else{
			$("#AutoConfigure").hide();
			$("#ApList").hide();
			$("#HandConfigure").show();
		}
		closeNote();
	}

	var curMode = 'OPEN';
	var modeList = [{name:"OPEN", value:"OPEN"},
						{name:"WPA-PSK", value:"WPA-PSK"},
						{name:"WPA2-PSK", value:"WPA2-PSK"}];

	initSelect("SafeMode", modeList, curMode, function(){
		var nowSelect = $("#SafeMode").attr("data-value");
		if ("OPEN" == nowSelect){
			$("#WifiPwd").hide();
			$("#WifiSafeType").hide();
		}else{
			$("#WifiPwd").show();
			$("#WifiSafeType").show();
		}
	});

	var curType = 'TKIP';
	var typeList = [{name:"TKIP", value:"TKIP"},
					{name:"AES", value:"AES"}];
	initSelect("SafeType", typeList, curType, function(val, init){});

	function sortByKey(array, key){
		return array.sort(function(a, b) {
			var x = a[key];
			var y = b[key];

			return ((x > y) ? -1 : ((x < y) ? 1 : 0));
		});
	}

	function apList(){
		var data = {
			wisp:{ap_list:null}
		};
		$("#StartScanbtn").attr("disabled", "disabled");
		$("#ConfigureSave").attr("disabled", "disabled");
		$("#reScanbtn").attr("disabled", "disabled");
		$("#reConSave").attr("disabled", "disabled");
		apiGet(data, function(result){
			var errNo = result[ERR_CODE];
			if (E_NONE == errNo){
				ret = result[K_MODULE];
				clients = ret.wisp.ap_list;

				var aplist = sortByKey(clients, 'signal');
				var len = aplist.length;

				for (var i = 0; i < len; i++){
					if (0 == clients[i].band) {
						$("#ApTab2G").append(initExtend(aplist[i], i));
					}else{
						$("#ApTab5G").append(initExtend(aplist[i], i));
					}
				}

				$(".connect-item").click(function(){
					var clientNum = $(this).attr("data-index");
					if (aplist[clientNum].safe_mode == "SHARED" || aplist[clientNum].safe_mode == "WEP"){
						showAlert(errStr.noSupportWifi);
						return false;
					}

					loadWidget("setExtend.htm", function(){
						if (aplist[clientNum].safe_mode == "OPEN"){
							$("#WispAutoPwd").addClass("invisible");
						}else{
							$("#WispAutoPwd").removeClass("invisible");
						}

						$("#WispBand").val(aplist[clientNum].band);
						$("#WispMac").val(aplist[clientNum].bssid);
						$("#SsidNameAuto").val(aplist[clientNum].ssid);
						$("#WispModeType").val(aplist[clientNum].safe_mode);
						$("#WispPwdType").val(aplist[clientNum].encryption);
					});
				});
				$("#StartScanbtn").removeAttr("disabled");
				$("#ConfigureSave").removeAttr("disabled");
				$("#reScanbtn").removeAttr("disabled");
				$("#reConSave").removeAttr("disabled");
				closeLoading();
			}else{
				console.log(result);
			}
		});
	}

	function initExtend(client, idx){
		var signalStreng = "";
		var wifiBand = "";
		var signal = Math.abs(client.signal);

		if (client.safe_mode == "OPEN"){
			if (signal < 25){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_1.png?_=20191016014108" />';
			}
			else if (signal < 50){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_2.png?_=20191016014108" />';
			}
			else if (signal < 75){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_3.png?_=20191016014108" />';
			}
			else{
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_4.png?_=20191016014108" />';
			}
		}else{
			if (signal < 25){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_1.png?_=20191016014108" />';
			}
			else if (signal < 50){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_2.png?_=20191016014108" />';
			}
			else if (signal < 75){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_3.png?_=20191016014108" />';
			}
			else{
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_4.png?_=20191016014108" />';
			}
		}

		wifiBand += '<span class="handle-tip color-orange connect-item" data-index="' + idx +'">';

		return  '<tr class="table-height">' +
					'<td>' + htmlEscape(client.ssid) + '</td>' +
					'<td>' + client.bssid + '</td>' +
					'<td>' + signalStreng + '</td>' +
					'<td>' + wifiBand + btn.connect +  '</span>' +
					'</td>' +
				'</tr>';
	}

	$("#StartScanbtn").click(scanAplist);

	$("#reScanbtn").click(scanAplist);

	$("#ConfigureSave").click(reConfigure);

	$("#reConSave").click(reConfigure);

	function reConfigure(){
		$("#ExtendSuccess").hide();
		$("#ExtendFail").hide();
		$("#StartScan").show();
		$("#WispMode").show();
		initRadio("WispModal", 0, radioClick);
	}

	function scanAplist(){
		$("div.err-note").hide();
		$("#ApTab2G  tr:not(:first)").html("");
		$("#ApTab5G  tr:not(:first)").html("");
		showLoading(label.scanAplist);
		$("#AutoConfigure").hide();
		$("#HandConfigure").hide();
		$("#ApList").show();
		apList();
	}

	$("#RetrySave").click(function(){
		var para = {
			wisp:{
				config:{
					enable:"1",
					band:extendBand,
					bssid:extendMac,
					ssid:extendSsid,
					safe_mode:extendModetype,
					encryption:extendPwdtype,
					password:extendPwd
				}
			}
		};

		saveConfHandle(para, rebootConfirm);
	});

	$("#ExtendSave").click(function(){
		var data = {};
		var para = {};
		para.wisp = {};
		para.wisp.config = data;
		data.enable = "1";
		data.band = "";
		data.bssid = "";
		data.ssid = $("#SsidName").val();
		if (handleError(checkSsid(data.ssid))){
			return;
		}

		data.safe_mode = $("#SafeMode").attr("data-value");
		if ("OPEN" == $("#SafeMode").attr("data-value")){
			data.encryption = "NONE";
		}else{
			data.password = $("#WispPwd").val();
			if (handleError(checkPwd(data.password))){
				return;
			}
			data.encryption = $("#SafeType").attr("data-value");
		}

		saveConfHandle(para, rebootConfirm);
	});
	function checkPwd(password){
		var err = checkStrFormat(password);
		switch(err){
		case E_STRINGBLANK:
			return E_WISP_PWD_BLANK;
		case E_STRINGFORMAT:
			return E_WISP_PWD_ILLEGAL;
		}

		if (checkStrLen(password, 63, 8) != E_NONE){
			return E_WISP_PWD_LEN;
		}

		return E_NONE;
	}
	function checkSsid(ssid){
		if("" == ssid){
			return E_WISP_SSID_BLANK;
		}

		if (checkStrLen(ssid, 32, 1) != E_NONE){
			return E_WISP_SSID_LEN;
		}

		return E_NONE;
	}
	function getInternetProto(proto){
		var protoList = [{proto:"STATIC",value:label.wanStatic},
						 {proto:"DHCP",value:label.wanDHCP},
						 {proto:"PPPoE",value:label.wanPPPoE},
						 {proto:"L2TP",value:label.wanL2tp},
						 {proto:"PPTP",value:label.wanPptp}];
		for(var i=0; i<protoList.length; i++){
			if(protoList[i].proto.toUpperCase() == proto.toUpperCase()){
				return protoList[i].value;
			}
		}
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/wisp.png?_=20191016014108" />
			<span class="help-title">{%label.wisp%}</span>
		</li>
		<li class="summary">{%helpStr.wisp%}</li>
		<li class="summary">{%helpStr.wispTip%}</li>
		<li class="summary">{%helpStr.networkTip%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/wisp.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.wisp%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.wisp%}</label>
			<span class="set-con-middle">
				<span id="Switch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</span>
		</li>
	</ul>
	<div id="Param">
		<ul id="WispMode" class="set-con set-con-radio">
			<li class="text-con">
				<label class="desc-lbl">{%label.wispModal%}</label>
				<span id="WispModal" class="radio-group">
					<span class="radio uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.scanGet%}</label>
					</span>
					<span class="radio radio-r uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.handSet%}</label>
					</span>
				</span>
			</li>
		</ul>
		<div id="AutoConfigure" class="hidden">
			<div class="btn-con" id="StartScan">
				<input id="StartScanbtn" class="btn" type="button" value="{%btn.startScan%}" />
			</div>
			<div id="ExtendSuccess" class="hidden">
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.networkName%}</label>
						<input id="ExtendSsid" class="text" value="" readonly />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.wanType%}</label>
						<input id="WanProto" class="text" value="" readonly />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.ipaddr%}</label>
						<input id="WanIpaddr" class="text" value="" readonly />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.gateway%}</label>
						<input id="WanGateway" class="text" value="" readonly />
					</li>
				</ul>
				<div class="btn-con">
					<input id="ConfigureSave" class="btn" type="button" value="{%btn.reConfigure%}" />
				</div>
			</div>

			<div id="ExtendFail" class="hidden">
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.networkName%}</label>
						<input id="ExtendSsidFail" class="text" value="" readonly />
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl"></label>
						<p class="wisp-remark color-red">{%label.extendFail%}</p>
					</li>
				</ul>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl"></label>
						<p class="wisp-remark">{%label.extendClose%}</p>
					</li>
				</ul>
				<div class="err-note hidden">
					<i class="err-icon icon_remind_line"></i>
					<p class="note-str"></p>
				</div>
				<div class="btn-con">
					<input id="reConSave" class="btn btn-wisp" type="button" value="{%btn.reConfigure%}" />
					<input id="RetrySave" class="btn btn-right btn-wisp" type="button" value="{%btn.retry%}" />
				</div>
			</div>
		</div>
		<div id="HandConfigure" class="hidden">
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.networkName%}</label>
					<input id="SsidName" class="text hover" maxLength="32" value="" />
				</li>
			</ul>
			<ul class="set-con" id="WifiSafeMode">
				<li class="text-con">
					<label class="desc-lbl">{%label.safeMode%}</label>
					<span id="SafeMode" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con" id="WifiSafeType">
				<li class="text-con">
					<label class="desc-lbl">{%label.encryptionType%}</label>
					<span id="SafeType" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con" id="WifiPwd">
				<li class="text-con">
					<label class="desc-lbl">{%label.networkPwd%}</label>
					<input id="WispPwd" class="text hover" type="password" autocomplete="new-password" maxLength="64" value="" /><i class="tip icon-eye" data-value="0"></i>
				</li>
			</ul>
			<div class="err-note hidden">
				<i class="err-icon icon_remind_line"></i>
				<p class="note-str"></p>
			</div>
			<div class="btn-con">
				<input id="ExtendSave" class="btn" type="button" value="{%btn.startExtend%}" />
			</div>
		</div>
		<div id="ApList" class="hidden">
			<div class="btn-con">
				<input id="reScanbtn" class="btn" type="button" value="{%btn.reScan%}" />
			</div>
			<div id="WISP2G" class="tab-con">
				<table  id="ApTab2G" class="set-con">
					<tr class="boder-tr">
						<th class="set-con-long">{%label.wifiName2G%}</th>
						<th class="set-con-long">{%label.macAddr%}</th>
						<th class="set-con-short">{%label.signalStreng%}</th>
						<th class="set-con-short">{%label.handle%}</th>
					</tr>
				</table>
			</div>
			<div id="WISP5G" class="tab-con">
				<table  id="ApTab5G" class="set-con">
					<tr class="boder-tr">
						<th class="set-con-long">{%label.wifiName5G%}</th>
						<th class="set-con-long">{%label.macAddr%}</th>
						<th class="set-con-short">{%label.signalStreng%}</th>
						<th class="set-con-short">{%label.handle%}</th>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
