<%+cbi/valueheader%>
<textarea id="cbid.openclash.config.clog" class="cbi-input-textarea" style="width: 100%;display:inline" data-update="change" rows="32" cols="60" readonly="readonly" > </textarea>
<fieldset class="cbi-section">
	<table width="100%">
		<tr>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="stop_refresh_button" value="<%:Stop Refresh Log%>" onclick=" return stop_refresh() "/>
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="start_refresh_button" value="<%:Start Refresh Log%>" onclick=" return start_refresh() "/>
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="del_log_button" value="<%:Clean Log%>" style=" display:inline;" onclick=" return del_log() " />
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="down_log_button" value="<%:Download Log%>" style=" display:inline;" onclick=" return download_log() " />
			</td>
		</tr>
	</table>
</fieldset>

<script type="text/javascript">//<![CDATA[
var r

function stop_refresh() {
	clearTimeout(r);
	return
}

function start_refresh() {
	clearTimeout(r);
	r=setTimeout("poll_log()",1000*2);
	return
}

function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}
function download_log(){
	var lv = document.getElementById('cbid.openclash.config.clog');
	var dt = new Date();
	var timestamp = dt.getFullYear()+"-"+(dt.getMonth()+1)+"-"+dt.getDate()+"-"+dt.getHours()+"-"+dt.getMinutes()+"-"+dt.getSeconds();
	createAndDownloadFile("OpenClash-"+timestamp+".log",lv.innerHTML)
	return
}

function del_log() {
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "del_log")%>',null,function(x, data){
	var lv = document.getElementById('cbid.openclash.config.clog');
		lv.innerHTML="";
	}
		);
	return
}

function p(s) {
	return s < 10 ? '0' + s: s;
}

function line_tolocal(str){
	var strt=new Array();
	str.trim().split('\n').forEach(function(v, i) {
	var dt = new Date(v.substring(6,26));
	if (dt != "Invalid Date"){
	  strt[i]=dt.getFullYear()+"-"+p(dt.getMonth()+1)+"-"+p(dt.getDate())+" "+p(dt.getHours())+":"+p(dt.getMinutes())+":"+p(dt.getSeconds())+v.substring(27);
	}else{
	  strt[i]=v;}})
	var old_log_line = sessionStorage.log_line;
	if ( old_log_line != null && strt.length != null ) {
		if (old_log_line - strt.length < 0) {
			sessionStorage.log_line = strt.length;
			return strt.slice('-'+(strt.length-old_log_line))
		}
		else if (old_log_line == strt.length) {
			sessionStorage.log_line = strt.length;
			return
		}
		else if (old_log_line - strt.length > 0) {
			sessionStorage.log_line = strt.length;
			var lv = document.getElementById('cbid.openclash.config.clog');
			lv.innerHTML = "";
			return strt
		}
	}
	else if ( strt.length != null ) {
	   sessionStorage.log_line = strt.length;
	   return strt
	}
	else {
		sessionStorage.log_line = "0";
	  return strt
	}
}

function poll_log(){
XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "refresh_log")%>', null,
	function(x, data) {
		if ( x && x.status == 200 ) {
			var lv = document.getElementById('cbid.openclash.config.clog');
			if (x.responseText && lv) {
				var lines=line_tolocal(x.responseText);
				if (lines != null) {
					lv.innerHTML = lines.reverse().join('\n')+'\n'+lv.innerHTML;
					//lv.innerHTML = x.responseText.split('\n').reverse().join('\n')+lv.innerHTML;
				}
			}
		}
	}
);
	r=setTimeout("poll_log()",1000*2);
}
sessionStorage.removeItem("log_line");
poll_log();
//]]>
</script>	


<%+cbi/valuefooter%>
