<!DOCTYPE html>
<html lang="ko">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
    <meta charset="utf-8" />
	<style>
		body { margin:0px; padding:0px; background:#45474a; }
	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div style="display:flex; justify-content:center; align-items:start;  flex-wrap:wrap; width:100vw; height:100vh; overflow:hidden; background:#45474a; box-sizing: border-box;">
	<div style="width:100vw; height:100vh; padding:0px; background:#45474a; overflow:hidden; box-sizing: border-box;">
		<div style="display:flex; justify-content:center; align-items:center; width:100vw; height:5vh; background:#45474a; border-bottom:1px solid #5a5d61; overflow:hidden; box-sizing: border-box;">
			<div style="width:100%; color:#afb1b3; text-align:center; font-size:16px; font-weight:bold; overflow:hidden;">
				<?php echo strtoupper($_SERVER["HTTP_HOST"]);?> IKEv2 VPN SERVER DASHBOARD
			</div>
		</div>
		<div style="display:flex; justify-content:center; align-items:center; width:100vw; height:5vh; background:#45474a; border-bottom:1px solid #5a5d61; overflow:hidden; box-sizing: border-box; flex-wrap:wrap;">
			<div id="clock" style="width:20%; color:#afb1b3; text-align:center; font-size:15px; overflow:hidden;">

			</div>
			<div id="MENU1" style="width:20%; color:#afb1b3; text-align:center; font-size:15px; overflow:hidden;">

			</div>
			<div id="MENU2" style="width:20%; color:#afb1b3; text-align:center; font-size:15px; overflow:hidden;">

			</div>
			<div id="MENU3" style="width:20%; color:#afb1b3; text-align:center; font-size:15px; overflow:hidden;">

			</div>
			<div id="MENU4" style="width:20%; color:#afb1b3; text-align:center; font-size:15px; overflow:hidden;">

			</div>
		</div>
		<div id="div0" style="display:none;">
			<div style="display:flex; justify-content:flex-start; align-items:start; flex-wrap:wrap; overflow-x:hidden; overflow-y:auto; width:100vw; height:90vh; padding:10px; box-sizing: border-box;">
				<?php
				for ($d=0; $d<=254; $d++) {
				?>

						<div id="div1<?php echo ($d+1);?>" style="display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:25%; height:auto; box-sizing: border-box;">
							<div style="display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; border:1px solid #c0c0c0; margin:5px; box-sizing: border-box;">
								<div id="div2a<?php echo ($d+1);?>" style="display:flex; justify-content:center; align-items:center; width:15%; height:48px; background:#90c653; text-align:center; font-size:20px; padding:5px; box-sizing: border-box;"><?php echo ($d+1);?></div>
								<div id="div2off<?php echo ($d+1);?>" style="display:flex; justify-content:center; align-items:center; width:10%; height:48px; background:#80c233; text-align:center; font-size:20px; padding:5px; box-sizing: border-box; cursor:pointer;" onclick="cutoff('<?php echo ($d+1);?>',$('#div2boff<?php echo ($d+1);?>').val()); return false;"><i class='fa fa-power-off' aria-hidden='true' style='color:#e4e6e7;'></i></div>
								<input id="div2boff<?php echo ($d+1);?>" style="display:none;">
								<div id="div2b<?php echo ($d+1);?>" style="display:flex; justify-content:flex-start; align-items:center; width:75%; height:48px; background:#afb1b3; font-size:0.9vw; text-align:left; padding:5px; box-sizing: border-box;"></div>
							</div>
						</div>

				<?php
				}
				?>
			</div>
		</div>
		<div style="position:fixed; bottom:0px; display:flex; justify-content:center; align-items:center; width:100vw; height:5vh; background:#45474a; border-bottom:1px solid #5a5d61; overflow:hidden; box-sizing: border-box;">
			<div style="width:100%; color:#afb1b3; text-align:center; font-size:10px; overflow:hidden;">
				Copyright © VPNLink.KR All rights reserved.
			</div>
		</div>
	</div>
</div>



<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
	$(document).ready(function () {
		auto_management();
		clock();
		var cnt = 0;
		var timer = setInterval(function(){
			clock();
			cnt++;

			if (cnt == 1)
			{
				$("#div0").fadeIn(1000);
			}

			if((cnt % 5) == 0){
				//console.log("검사",cnt);
				auto_management();
			}
		}, 1000);
	});
</script>

<script>
function auto_management()
{

	$.ajax({
		url: 'ajax_management.php',
		type: 'POST',
		dataType: 'html',
		data: {
			sort : $("#sort").val(),
		},
		success:function(data)
		{
			var strArr2 = data.split("Œ");
			var checkNum = new Array();
			for (var i=0; i<strArr2.length; i++)
			{
				//console.log(strArr2[i]);
				var strArr = strArr2[i].split("|");
				var dispdata = "<div><div style='font-weight:bold;'>"+strArr[2]+"</div><div>WAN:"+strArr[4]+" LAN:"+strArr[3]+"<br>"+strArr[8]+" ago , "+strArr[7]+" bytes"+"</div></div>";
//				console.log(dispdata);
//				$("#HeadInfo").html(dispdata);
				$("#div2b"+strArr[0]).html(dispdata);
				$("#div2boff"+strArr[0]).val(strArr[3]);
				$("#div1"+strArr[0]).fadeIn(1000);
				checkNum[i] = strArr[0];
			}
			for (var k=i; k<=255; k++ )
			{
				$("#div1"+k).fadeOut(500);
			}
		}
	});
}
</script>


<script>
function clock() {
    var date = new Date();
    var year = date.getYear();
    var month = date.getMonth();
    var clockDate = date.getDate();
    var day = date.getDay();
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    $("#clock").html( `${month+1}월 ${clockDate}일 ${week[day]}요일 ` +  `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`);
}

</script>

<script>
function cutoff(no,cutoffno) {
	if (confirm(no+" 번 접속을 강제로 차단시키시겠습니까?\n정말로 실행하실려면 아래 확인버튼을 누르십시오!\n\n[참고] 이 명령은 과금이 중단되는 이용중지 명령이 아닙니다. 따라서 이용자가 재접속을 시도하게 되면 다시 접속 가능합니다."))
	{
		$.ajax({
			url: 'ajax_cutoff_process.php',
			type: 'POST',
			dataType: 'html',
			data: {
				no : no,
				cutoffno : cutoffno,
			},
			success:function(data)
			{
				if (data == "SUCCESS")
				{
					alert("요청하신 "+no+" 번 접속에 대하여 강제로 접속을 차단하였습니다.\n\n단, 관리자에 의한 강제종료의 경우 사용자의 재접속 시도여부에 따라 대시보드 목록에서 지연삭제되거나 새로운 접속으로 업데이트 될수 있습니다.");
				}
			}
		});
	}
}
</script>

