<%--
  Class Name : selectSiteIpList.jsp
  Description : selectSiteIpList 화면
  Modification Information

      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2009.02.01   lee.m.j            최초 생성
     2011.08.31   JJY       경량환경 버전 생성

    author   : 공통서비스 개발팀 lee.m.j
    since    : 2009.02.01
--%>
<%@ page 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"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page import="kcc.com.cmm.LoginVO"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko" >
<title>로그인정책 목록조회</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<script type="text/javaScript" language="javascript" defer="defer">
function fn_select(pageNo){
    linkPage(1);
}

function fn_insert() {
      document.modiForm.action = "<c:url value='/sym/site/siteIpModifyView.do'/>";
      document.modiForm.submit();
    
}

/* 수정 */
function fn_modify(comId){
	var modiForm = document.modiForm;
	modiForm.comId.value = comId;
	modiForm.pageType.value = "Modify";
	modiForm.action = "<c:url value='/sym/site/siteIpModifyView.do'/>";
	modiForm.submit();
}


function linkPage(pageNo){
	var searchForm = document.searchForm ;
	searchForm.pageIndex.value = pageNo ;
	searchForm.searchKeyword.value = $('#searchKeyword').val();
	searchForm.searchCondition.value = $('#searchCondition').val();
	if($('#searchConditionSite').length != 0){
		searchForm.searchConditionSite.value = $('#searchConditionSite').val();	
	}
	if($('#searchConditionUse').length != 0){
		searchForm.searchConditionUse.value = $('#searchConditionUse').val();	
	}
	
	searchForm.action = "<c:url value='/sym/site/selectSiteIpList.do'/>";
	searchForm.submit();
}

/* 체크된  목록 삭제 */
function fn_delete(){
	if($("input[name=del]:checked").length == 0){
		alert("선택된 항목이 없습니다.");
		return;
	}
		
	if (confirm("삭제하시겠습니까?")){
		frm = document.listForm;
		frm.action = "<c:url value='/sym/site/deleteSiteIp.do' />";
	    frm.submit();
	}
}


function fnCheckAll(){
	if( $("#checkAll").is(':checked') ){
	  $("input[name=del]").prop("checked", true);
	}else{
	  $("input[name=del]").prop("checked", false);
	}
}	


</script>
</head>
<body>
<noscript>자바스크립트를 지원하지 않는 브라우저에서는 일부 기능을 사용하실 수 없습니다.</noscript>
<div class="contWrap">
		<div class="pageTitle">
			<div class="pageIcon"><img src="/pb/img/pageTitIcon4.png" alt=""></div>
			<h2 class="titType1 c_222222 fwBold">아이피관리</h2>
			<p class="tType6 c_999999">아이피 구성 및 사용량, 할당 현황을 알아볼 수 있습니다.</p>
		</div>
		<div class="pageNav">
			<img src="/pb/img/common/homeIcon.png" alt="홈이미지">&ensp;>&ensp;<p class="topDepth">아이피관리</p>&ensp;>&ensp;<p class="subDepth">아이피현황</p>
		</div>
        <div class="pageCont ipStatus">
            <div class=contBox>
				<span class="tbTit">전체 IP 구성도</span>
				<div class="boxWrap">
					<div class="chartArea">
						<img src="/pb/img/orgChart1.png" alt=""><!-- 차트 추가 후 이미지 삭제 -->
					</div>
				</div>
            </div>
            <div class="contBox lastBox">
                <span class="tbTit">사용량 현황</span>
                <div class="boxWrap">
         			<div class="chartArea">
         				<canvas id="myChart" width="283px" height="283px"></canvas>
					</div>
<%--                         <canvas id="myChart1" width="283px" height="283px"></canvas> --%>
                        <script>
                            /* new Chart(
                        			document.getElementById("myChart1")
                        			,{
                        				"type":"doughnut"
                        				, "data":{ "labels":["사용", "미사용"]
                        				,"datasets":[
                        					{"label":"My First Dataset"
                        					,"data":['<c:out value='${useSumCnt[0].useSumCnt}' />', '<c:out value='${useSumCnt[1].useSumCnt}' />']
                        					,"backgroundColor":["rgb(109, 129, 245)","rgb(28, 202, 184)"]
                        					}
                        				]
                        			}
                        		}); */
                        		Chart.defaults.doughnutLabels = Chart.helpers.clone(Chart.defaults.doughnut);

                        		var helpers = Chart.helpers;
                        		var defaults = Chart.defaults;

                        		Chart.controllers.doughnutLabels = Chart.controllers.doughnut.extend({
                        			updateElement: function(arc, index, reset) {
                        		    var _this = this;
                        		    var chart = _this.chart,
                        		        chartArea = chart.chartArea,
                        		        opts = chart.options,
                        		        animationOpts = opts.animation,
                        		        arcOpts = opts.elements.arc,
                        		        centerX = (chartArea.left + chartArea.right) / 2,
                        		        centerY = (chartArea.top + chartArea.bottom) / 2,
                        		        startAngle = opts.rotation, // non reset case handled later
                        		        endAngle = opts.rotation, // non reset case handled later
                        		        dataset = _this.getDataset(),
                        		        circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)),
                        		        innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius,
                        		        outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius,
                        		        custom = arc.custom || {},
                        		        valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;

                        		    helpers.extend(arc, {
                        		      // Utility
                        		      _datasetIndex: _this.index,
                        		      _index: index,

                        		      // Desired view properties
                        		      _model: {
                        		        x: centerX + chart.offsetX,
                        		        y: centerY + chart.offsetY,
                        		        startAngle: startAngle,
                        		        endAngle: endAngle,
                        		        circumference: circumference,
                        		        outerRadius: outerRadius,
                        		        innerRadius: innerRadius,
                        		        label: valueAtIndexOrDefault(dataset.label, index, chart.data.labels[index])
                        		      },

                        		      draw: function () {
                        		      	var ctx = this._chart.ctx,
                        								vm = this._view,
                        								sA = vm.startAngle,
                        								eA = vm.endAngle,
                        								opts = this._chart.config.options;
                        						
                        							var labelPos = this.tooltipPosition();
                        							var segmentLabel = vm.circumference / opts.circumference * 100;
                        							
                        							ctx.beginPath();
                        							
                        							ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
                        							ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
                        							
                        							ctx.closePath();
                        							ctx.strokeStyle = vm.borderColor;
                        							ctx.lineWidth = vm.borderWidth;
                        							
                        							ctx.fillStyle = vm.backgroundColor;
                        							
                        							ctx.fill();
                        							ctx.lineJoin = 'bevel';
                        							
                        							if (vm.borderWidth) {
                        								ctx.stroke();
                        							}
                        							
                        							if (vm.circumference > 0.15) { // Trying to hide label when it doesn't fit in segment
                        								ctx.beginPath();
                        								ctx.font = helpers.fontString(opts.defaultFontSize, opts.defaultFontStyle, opts.defaultFontFamily);
                        								ctx.fillStyle = "#fff";
                        								ctx.textBaseline = "top";
                        								ctx.textAlign = "center";
                        		            
                        		            // Round percentage in a way that it always adds up to 100%
                        								ctx.fillText(segmentLabel.toFixed(0) + "%", labelPos.x, labelPos.y);
                        							}
                        		      }
                        		    });

                        		    var model = arc._model;
                        		    model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
                        		    model.hoverBackgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
                        		    model.borderWidth = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
                        		    model.borderColor = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);

                        		    // Set correct angles if not resetting
                        		    if (!reset || !animationOpts.animateRotate) {
                        		      if (index === 0) {
                        		        model.startAngle = opts.rotation;
                        		      } else {
                        		        model.startAngle = _this.getMeta().data[index - 1]._model.endAngle;
                        		      }

                        		      model.endAngle = model.startAngle + model.circumference;
                        		    }

                        		    arc.pivot();
                        		  }
                        		});

                        		var config = {
                        		  type: 'doughnutLabels',
                        		  data: {
                        		    datasets: [{
                        		      data: [
                        		    	  "<c:out value='${useSumCnt[0].useSumCnt}' />",
                        		    	  "<c:out value='${useSumCnt[1].useSumCnt}' />"
                        		      ],
                        		      backgroundColor: [
                        		    	  "rgb(109, 129, 245)",
                        		    	  "rgb(28, 202, 184)"
                        		      ],
                        		    }],
                        		    labels: [
                        		    	"사용",
                        		    	"미사용"
                        		    ]
                        		  },
                        		};

                        		var ctx = document.getElementById("myChart").getContext("2d");
                        		new Chart(ctx, config);

                        </script>
                    <div class="ip_cont_2_cont_list">
                        <ul>
                            <li>
                                <div class="ip_list_bg"></div>사용
                            </li>
                            <li>
                                <div class="ip_list_bg"></div>미사용
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        
        <div class="tbWrap">
        	<span class="tbTit">부서별 IP 할당 현황</span>
            <div class="tableWrap">
                <table class="tbType3">
                	<colgroup>
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
							<col style="width: 12%">
						</colgroup>
					<thead>
	                    <tr>
	                        <th>사용여부</th>
	                        <c:forEach var="codeResult" items="${teamList}" varStatus="status">
						    	<th><c:out value='${codeResult.codeNm}' /></th>
							</c:forEach>
							<th>합계</th>
	                    </tr>
                    </thead>
                    <tbody>
	                    <tr>
	                        <th><span class="chartBg"></span>사용</th>
	                        <c:forEach var="codeResult" items="${teamList}" varStatus="status">
	                        	<c:forEach var="basicResult" items="${basicUseSumCnt}" varStatus="status">
	                        		<c:if test="${codeResult.codeId eq basicResult.team 
	                        					and codeResult.code eq basicResult.department 
	                        					and 'Y' eq basicResult.useYn }"> 		
	                        			<td><c:out value='${basicResult.useSumCnt}' /></td>
	                        		</c:if>
	                        	</c:forEach>
	                        </c:forEach>
	                        <td>
		                        <span class="chartColor"><c:out value='${useSumCnt[0].useSumCnt}' />
		                     	   <c:if test="${useSumCnt[0].useSumCnt == null}"><c:out value="0" /></c:if>
		                        </span>
	                        </td>
	                    </tr>
	                    <tr>
	                        <th><span class="chartBg"></span>미사용</th>
	                        <c:forEach var="codeResult" items="${teamList}" varStatus="status">
	                        	<c:forEach var="basicResult" items="${basicUseSumCnt}" varStatus="status">
	                        		<c:if test="${codeResult.codeId eq basicResult.team 
	                        					and codeResult.code eq basicResult.department 
	                        					and 'N' eq basicResult.useYn }"> 		
	                        			<td><c:out value='${basicResult.useSumCnt}' /></td>
	                        		</c:if>
	                        	</c:forEach>
	                        </c:forEach>
	                        <td>
		                        <span class="chartColor"><c:out value='${useSumCnt[1].useSumCnt}' />
		                      	  <c:if test="${useSumCnt[1].useSumCnt == null}"><c:out value="0" /></c:if>
		                        </span>
	                        </td>
	                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
   </div>
</body>
</html>