<%--
  Class Name : IpFilePopup.jsp
  Description : 파일 첨부 팝업  화면
  Modification Information
 
      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2018.06.11   ITN              최초 생성
 
    author   : ITN
    since    : 2018.06.11
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<link href="<c:url value='/'/>css/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<title>자산관리</title>
<script src="<c:url value='/js/Chart-2.8.0.min.js' />"></script>
<script type="text/javaScript" language="javascript">
$( document ).ready(function() {
	barChart();
});

$(function(){
	$("span.tooltip").css({
	    opacity:"0.9",
	    position:"absolute",
	    display:"none"
	}); 
	$(".ip_network_bottom_box").mouseover(function(){
	    $("span.tooltip").fadeIn();
	}).mouseout(function(){
	    $("span.tooltip").fadeOut();
	}).mousemove(function(e){
	    $("span.tooltip").css({
		"top":e.pageY+10+"px",
		"left":e.pageX+10+"px"
	    });
	});
});

function barChart(){
	var ctx = document.getElementById("barCanvas").getContext("2d");
	var myChart = new Chart(ctx, {
		type: 'bar',
		data: {
			labels: ['사용', '미사용', '기타'],
			datasets: [{
				label: '사용',
				data: ['${ipUseCodeGroupCnt[0].ipUseCodeCnt}', '${ipUseCodeGroupCnt[1].ipUseCodeCnt}', '${ipUseCodeGroupCnt[2].ipUseCodeCnt}'],
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)'
				],
				borderColor: [
					'rgba(255, 99, 132, 1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)'
				],
				borderWidth: 0
			}]
		},
		options: {
			legend: {
		        display: false
		    },
			responsive: false,
			scales: {
				xAxes: [{
					 barThickness: 50,  // number (pixels) or 'flex'
		             maxBarThickness: 80 // number (pixels)
				}],
				yAxes: [{
		             ticks: {
		                beginAtZero: true,
		                stepSize: ${paginationInfo.totalRecordCount}
		            }
				}]
			},
		}
	});
	    
}

</script>
</head>
<body>
<form name="detailForm" id="detailForm" action="<c:url value='/uss/itsm/ip/IpList.do'/>" method="post">
	<input type="hidden" name="ipId" id="ipId" >
	<div class="ip_network_middle_area">
		<div class="ip_network_info">
			<div class="ip_network_info_title">
				<img src="/direct/img/network_title.png" alt=""> 네트워크 정보 <input type="button" class="ip_network_info_popup">
			</div>
			<div class="ip_network_info_table" id="ip_network_info_table">
				<table>
					<tr>
						<th>부서</th>
						<td>${ipVO.ipHost}</td>
					</tr>
					<tr>
						<th>성명</th>
						<td>${ipVO.ipUserName}</td>
					</tr>
					<tr>
						<th>직위</th>
						<td>${ipVO.ipManager}</td>
					</tr>
					<tr>
						<th>IP주소</th>
						<td>${ipVO.ipAddr}</td>
					</tr>
					<tr>
						<th>위치</th>
						<td>${ipVO.ipLoc}</td>
					</tr>
					<tr>
						<th>랜선번호</th>
						<td>${ipVO.ipLanNum}</td>
					</tr>
					<tr>
						<th>사용여부</th>
						<td>${ipVO.ipUseCode}</td>
					</tr>
					<tr>
						<th>등록일자</th>
						<td>${ipVO.ipManager}</td>
					</tr>
				</table>
			</div>
			
			
			<div class="ip_network_info_gr">
				<div class="ip_use_total">
					<img src="/direct/img/bottom_title_all.png" alt="">총 <span class="ip_use_total_num">${paginationInfo.totalRecordCount}</span>개
					<canvas id="barCanvas" width="490px" height="265px" style="padding-top:20px;"></canvas>
				</div>
			</div>
		</div>
	</div>
	
	<c:if test="${ipVO.searchCondition_01 ne ''}">
		<div class="ip_network_bottom_area">
			<c:forEach var="result" items="${ipVOList}" varStatus="status">
				<c:choose>
					<c:when test = "${result.ipUseCode eq '사용'}">
						<div title="${result.ipAddr}(${result.ipUseCode})" class="ip_network_bottom_box use_network" alt="tooltip" onclick="getIpDetailInfo('${result.ipId}');">${status.count}</div>
					</c:when>
					<c:when test = "${result.ipUseCode eq '미사용'}">
						<div title="${result.ipAddr}(${result.ipUseCode})" class="ip_network_bottom_box none_use_network" onclick="getIpDetailInfo('${result.ipId}');">${status.count}</div>
					</c:when>
					<c:otherwise>
						<div title="${result.ipAddr}(${result.ipUseCode})" class="ip_network_bottom_box" onclick="getIpDetailInfo('${result.ipId}');">${status.count}</div>
					</c:otherwise>
		 			</c:choose>
			</c:forEach>
		</div>
	</c:if>
	
</form>
</body>

</html>