<%
local dsp=require"luci.dispatcher"
local uci=luci.model.uci.cursor()
-%>
	
<style>
.pure-g
{
    letter-spacing: -.31em;
    text-rendering: optimizespeed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;	
    background-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.32), 0 1px 5px 0 rgba(0,0,0,0.2);
	scrollbar-color: rgba(255, 255, 255, 0.7) rgba(50,50,50,.7);
	scrollbar-width: thin;
	overflow-x: auto;
	padding: 0.5rem;
 
	
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {

table .pure-g
{
    display: block
}
}
.opera-only :-o-prefocus, .pure-g {
word-spacing:-.43em
}

.pure-u
{
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}

.pure-g [class*=pure-u]
{
    font-family: sans-serif
}

.pure-u-1, .pure-u-1-1, .pure-u-1-12, .pure-u-1-2, .pure-u-1-24, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6, .pure-u-1-8, .pure-u-10-24, .pure-u-11-12, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-2-24, .pure-u-2-3, .pure-u-2-5, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24, .pure-u-3-24, .pure-u-3-4, .pure-u-3-5, .pure-u-3-8, .pure-u-4-24, .pure-u-4-5, .pure-u-5-12, .pure-u-5-24, .pure-u-5-5, .pure-u-5-6, .pure-u-5-8, .pure-u-6-24, .pure-u-7-12, .pure-u-7-24, .pure-u-7-8, .pure-u-8-24, .pure-u-9-24
{
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;

}

.pure-u-1-24
{
    width: 4.1667%
}

.pure-u-1-12, .pure-u-2-24
{
    width: 8.3333%
}

.pure-u-1-8, .pure-u-3-24
{
    width: 12.5%
}

.pure-u-1-6, .pure-u-4-24
{
    width: 16.6667%
}

.pure-u-1-5
{
    width: 20%
}

.pure-u-5-24
{
    width: 20.8333%
}

.pure-u-1-4, .pure-u-6-24
{
    width: 25%
}

.pure-u-7-24
{
    width: 29.1667%
}

.pure-u-1-3, .pure-u-8-24
{
    width: 30%
}

.pure-u-3-8, .pure-u-9-24
{
    width: 37.5%
}

.pure-u-2-5
{
    width: 40%;
}

.pure-u-10-24, .pure-u-5-12
{
    width: 41.6667%
}

.pure-u-11-24
{
    width: 45.8333%
}

.pure-u-1-2, .pure-u-12-24
{
    width: 50%
}

.pure-u-13-24
{
    width: 54.1667%
}

.pure-u-14-24, .pure-u-7-12
{
    width: 58.3333%
}

.pure-u-3-5
{
    width: 55%;
}

.pure-u-15-24, .pure-u-5-8
{
    width: 62.5%
}

.pure-u-16-24, .pure-u-2-3
{
    width: 66.6667%
}

.pure-u-17-24
{
    width: 70.8333%
}

.pure-u-18-24, .pure-u-3-4
{
    width: 75%
}

.pure-u-19-24
{
    width: 79.1667%
}

.pure-u-4-5
{
    width: 80%
}

.pure-u-20-24, .pure-u-5-6
{
    width: 83.3333%
}

.pure-u-21-24, .pure-u-7-8
{
    width: 87.5%
}

.pure-u-11-12, .pure-u-22-24
{
    width: 91.6667%
}

.pure-u-23-24
{
    width: 95.8333%
}

.pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5
{
    width: 100%
}

.cbi-page-actions.control-group
{
    margin-bottom: 0.5rem;
}

.cbi-page-actions.control-group.fixed
{
    bottom: 2.9rem;
}

.block
{
    margin: 0.2rem;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    line-height: 2em;
    border-radius: .375rem;
    background-color: rgba(250, 250, 250, 0.04) !important;
}



.img-con
{
    margin: 0.5rem;
}

.green
{
    color: #2dce89;
}

.red
{
    color: #fb6340;
}

.yellow
{
    color: #fb9a05;
}

.block img
{
    width: 52px;
    height: auto;
    line-height: 2em;

}

.pure-u-5-8
{
    display: flex;
	align-items:center;
}

.block h4
{
    font-size: .9rem;
    font-weight: 600px;
    margin: 0rem;
    color: #8898aa!important;
    line-height: 2em;
    align-items: center;
    padding: 0;
    margin-top: 0.5rem;
}

.check
{
    cursor: pointer;
}

#check_port.pure-u-1-1 .pure-u-8-24
{
    width: 10%;
}

#check_port.pure-u-1-1 .pure-u-16-24
{
    width: 90%;
}
}
@media screen and (max-width:1366px) {

.block h4
{
    font-weight: normal;
    margin-top: 0.8rem;
    font-size: 0.8rem;
}

#check_port
{
    display: none;
}

.block
{
    margin: 0.8rem;
}

.pure-u-1-4
{
    width: 33%;
}

.pure-u-1-5
{
    width: 40%;
}

}

 @media screen and (max-width:992px) {
 .img-con {
 margin: 1rem;
}
.block h4
{
    font-size: .7rem;
}
 .block img {
 width: 36px;
}
.pure-u-1-4
{
    width: 50%;
}
}

</style>
<fieldset id="bypass_status_fieldset" class="cbi-section">
  <div class="pure-g status">
    <div class="pure-u-1-4">
      <div class="block pure-g">
        <div class="pure-u-2-5">
					<div class="img-con">
					<img src="data:image/png;base64,[encoded data, 64264 characters]" >
					</div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="tcp_status">
            <%:TCP%>
            <br />
            <span class="red">
            <%:Not Running%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="block pure-g">
        <div class="pure-u-2-5">
					<div class="img-con">
					<img src="data:image/png;base64,[encoded data, 34144 characters]" >	
					</div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="udp_status">
            <%:UDP%>
            <br />
            <span class="red">
            <%:Not Running%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="block pure-g">
        <div class="pure-u-2-5">
          <div class="img-con">
		<img src="data:image/png;base64,[encoded data, 34284 characters]" >
		   </div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="chinadns_status">ChinaDNS<br />
            <span class="red">
            <%:Not Running%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="block pure-g">
        <div class="pure-u-2-5">
          <div class="img-con"> 
<img src="data:image/png;base64,[encoded data, 49268 characters]" >
  		</div>
  		</div>
        <div class="pure-u-3-5">
          <h4 id="dns_status">DNS<br />
            <span class="red">
            <%:Not Running%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="block pure-g">
        <div class="pure-u-2-5">
          <div class="img-con">
<img src="data:image/png;base64,[encoded data, 61796 characters]" >
</div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="nf_status">Netflix<br />
            <span class="red">
            <%:Not Running%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4 check" onclick="check_net('taobao')">
      <div class="block pure-g">
        <div class="pure-u-2-5">
		<div class="img-con">
<img src="data:image/png;base64,[encoded data, 34652 characters]" >
					</div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="status_taobao">
            <%:Taobao Delay%>
            <br/>
            <span id="taobao_status" class="yellow">
            <%:Touch Check%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4 check" onclick="check_net('google')">
      <div class="block pure-g">
        <div class="pure-u-2-5">
							<div class="img-con">
<img src="data:image/png;base64,[encoded data, 38620 characters]" >
					</div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="status_google">
            <%:Google Delay%>
            <br/>
            <span id="google_status" class="yellow">
            <%:Touch Check%>
            </span></h4>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4 check"  onclick="check_net('youtube')">
      <div class="block pure-g">
        <div class="pure-u-2-5">
          <div class="img-con">
		  <img src="data:image/png;base64,[encoded data, 22132 characters]" >
        </div>
        </div>
        <div class="pure-u-3-5">
          <h4 id="status_youtube">
            <%:Youtube Delay%>
            <br/>
            <span id="youtube_status" class="yellow">
            <%:Touch Check%>
            </span></h4>
        </div>
      </div>
    </div>
  </div>

  <script>

//<![CDATA[
    const STATUS1_URL = '<%=url([[admin]], [[services]], [[bypass]], [[run]])%>';
    XHR.poll(5, STATUS1_URL, null,
        function (x, data) {
          if (data) {
		  		var tcp_status = document.getElementById('tcp_status');
				var udp_status = document.getElementById('udp_status');
				var dns_status = document.getElementById('dns_status');
				var chinadns_status = document.getElementById('chinadns_status');
		  	       if (data.tcp) {
						tcp_status.innerHTML = 'TCP<br /><span class="green"><%:Running%></span>';
					} else {
						tcp_status.innerHTML = 'TCP<br /><span class="red"><%:Not Running%></span>';
					}
					
					if (data.udp) {
							udp_status.innerHTML = 'UDP<br /><span class="green"><%:Running%></span>'
						} else {
							udp_status.innerHTML = 'UDP<br /><span class="red"><%:Not Running%></span>'
						}
					if (data.sdns) {
							dns_status.innerHTML = 'SmartDNS<br /><span class="green"><%:Running%></span>'
						} else if (data.mdns)  {
							dns_status.innerHTML = 'MosDNS<br /><span class="green"><%:Running%></span>'
						} else {
							dns_status.innerHTML = 'DNS<br /><span class="red"><%:Not Running%></span>'
						}
					if (data.chinadns) {
							chinadns_status.innerHTML = 'ChinaDNS<br /><span class="green"><%:Running%></span>'
						} else {
							chinadns_status.innerHTML = 'ChinaDNS<br /><span class="red"><%:Not Running%></span>'
						}
 					if (data.nf) {
							nf_status.innerHTML = "<%:Netflix Server%><br /><span class='green'><%:Running%></span>"
						} else {
							nf_status.innerHTML = "<%:Netflix Server%><br /><span class='red'><%:Not Running%></span>"
						}
 
       }
     });

function check_net(url){
			var s=document.getElementById(url+'_status');
			if (s){
				var div=s.parentNode.parentNode.parentNode.parentNode;
				div.removeAttribute('onclick');
				s.innerHTML='<%:Check...%>';
				XHR.get('<%=dsp.build_url("admin/services/bypass/checknet")%>',
				
					{url:url},
					function(x,rv){
						if (rv.ret==0){
							s.className="red";
							s.innerHTML='<%:Connect Error%>';
						}else{
							if (rv.ret<1000){
								s.className="green";
							}else if (rv.ret<2000){
								s.className="yellow";
							}else{
								s.className="red";
							}
							s.innerHTML=rv.ret+" ms";
						}
						div.setAttribute('onclick','check_net("'+url+'")');
					}
				);
			}
			return false;
		}

setTimeout(function(){
			check_net('taobao')
			check_net('google')
			check_net('youtube')
		},500);
//]]>
</script>
</fieldset>
