동영상 재생 화면 추가

src/main/java/cokr/xit/fims/crdn/service/Crdn05Service.java

@@ -21,4 +21,6 @@ public interface Crdn05Service extends CrdnService {
 	 */
 	boolean create(Crdn crdn, List<FileInfo> fileInfoList);
 
+	boolean create(Crdn crdn);
+
 }

src/main/java/cokr/xit/fims/crdn/service/bean/Crdn05ServiceBean.java

@@ -33,6 +33,18 @@ public class Crdn05ServiceBean extends AbstractServiceBean implements Crdn05Serv
 
 	@Override
 	public boolean create(Crdn crdn, List<FileInfo> fileInfoList) {
+		crdn.setAtchFileCnt(fileInfoList.size());
+		boolean saved = this.create(crdn);
+		fileInfoList.forEach(fileInfo -> fileInfo.setInfoType(Crdn.INF_TYPE).setInfoKey(crdn.getCrdnId()));
+		fileBean.create(fileInfoList);
+		return saved;
+	}
+
+	@Override
+	public boolean create(Crdn crdn) {
+		if(ifEmpty(crdn.getAtchFileCnt(), () -> 0) == 0) {
+			crdn.setAtchFileCnt(0);
+		}
 
 		if(ifEmpty(crdn.getDoGuidance(), () -> "").equals("on")) {
 			crdn.setCrdnSttsCd("83");
@@ -40,11 +52,7 @@ public class Crdn05ServiceBean extends AbstractServiceBean implements Crdn05Serv
 			crdn.setCrdnSttsCd("01");
 		}
 
-		crdn.setAtchFileCnt(fileInfoList.size());
-
 		boolean saved = crdn05Bean.create(crdn);
-		fileInfoList.forEach(fileInfo -> fileInfo.setInfoType(Crdn.INF_TYPE).setInfoKey(crdn.getCrdnId()));
-		fileBean.create(fileInfoList);
 		return saved;
 	}
 }

src/main/java/cokr/xit/fims/crdn/web/Crdn05Controller.java

@@ -103,13 +103,17 @@ public class Crdn05Controller extends ApplicationController {
 	 */
 	@PostMapping(name="단속자료 수기 등록", value="/030/create.do")
 	public ModelAndView createCrdnDataByManual(Crdn crdn, MultipartFile[] uploadFileList) {
-
+		boolean saved = false;
-		List<FileInfo> fileInfoList = new FileInfoFactory().makeFileInfos(null, uploadFileList);
 
 		crdn.setCrdnRegSeCd("01");
 		crdn.setCrdnInptSeCd("03");//TODO : 사용자 기관의 시청,구청 구분
-		boolean saved = crdn05Service.create(crdn, fileInfoList);
 
+		if(uploadFileList != null) {
+			List<FileInfo> fileInfoList = new FileInfoFactory().makeFileInfos(null, uploadFileList);
+			saved = crdn05Service.create(crdn, fileInfoList);
+		} else {
+			saved = crdn05Service.create(crdn);
+		}
 
 		return new ModelAndView("jsonView")
 			.addObject("saved", saved);

src/main/java/cokr/xit/fims/crdn/web/Crdn09Controller.java

@@ -0,0 +1,20 @@
+package cokr.xit.fims.crdn.web;
+
+import org.springframework.web.servlet.ModelAndView;
+
+import cokr.xit.base.web.ApplicationController;
+
+public class Crdn09Controller extends ApplicationController {
+
+	/** 동영상 재생 메인화면을 연다.
+	 * @return fims/crdn/crdn09010-main
+	 */
+	public ModelAndView videoMain(String openerPageName) {
+		ModelAndView mav = new ModelAndView();
+		mav.setViewName("fims/crdn/crdn09010-main");
+		mav.addObject("openerPageName", openerPageName);
+
+		return mav;
+	}
+
+}

src/main/java/cokr/xit/fims/task/CmnController.java

@@ -14,6 +14,7 @@ public class CmnController {
 		/** 민원 접수 자료 메인화면을 연다.
 		 * @return fims/crdn/crdn01010-main
 		 */
+		@Override
 		@RequestMapping(name="민원 접수 자료 메인", value="/010/main.do")
 		public ModelAndView civilComplaintReceiptDataMain() {
 			return super.civilComplaintReceiptDataMain();
@@ -22,6 +23,7 @@ public class CmnController {
 		/** 민원 답변 대상 자료 메인화면을 연다.
 		 * @return fims/crdn/crdn01030-main
 		 */
+		@Override
 		@RequestMapping(name="민원 답변 대상 자료 메인", value="/030/main.do")
 		public ModelAndView civilComplaintAnswerTargetDataMain() {
 			return super.civilComplaintAnswerTargetDataMain();
@@ -30,6 +32,7 @@ public class CmnController {
 		/** 민원 관리 메인화면을 연다.
 		 * @return fims/crdn/crdn01040-main
 		 */
+		@Override
 		@RequestMapping(name="민원 관리 메인", value="/040/main.do")
 		public ModelAndView civilComplaintManagementMain() {
 			return super.civilComplaintManagementMain();
@@ -42,6 +45,7 @@ public class CmnController {
 		/** 민원 개별 등록 메인화면을 연다.
 		 * @return fims/crdn/crdn02010-main
 		 */
+		@Override
 		@RequestMapping(name="민원 개별 등록 메인", value="/010/main.do")
 		public ModelAndView civilComplaintIndividualRegistrationMain() {
 			return super.civilComplaintIndividualRegistrationMain();
@@ -54,6 +58,7 @@ public class CmnController {
 		/** 단속 자료 등록 메인화면을 연다.
 		 * @return fims/crdn/crdn05010-main
 		 */
+		@Override
 		@RequestMapping(name="단속 자료 등록 메인", value="/010/main.do")
 		public ModelAndView crackdownDataRegistrationMain() {
 			return super.crackdownDataRegistrationMain();
@@ -66,6 +71,7 @@ public class CmnController {
 		/** 단속 관리 메인화면을 연다.
 		 * @return fims/crdn/crdn06010-main
 		 */
+		@Override
 		@RequestMapping(name="단속 관리 메인", value="/010/main.do")
 		public ModelAndView crackdownManagementMain() {
 			return super.crackdownManagementMain();
@@ -74,6 +80,7 @@ public class CmnController {
 		/** 단속 자료 검사 메인화면을 연다.
 		 * @return fims/crdn/crdn06020-main
 		 */
+		@Override
 		@RequestMapping(name="단속 자료 검사 메인", value="/020/main.do")
 		public ModelAndView crackdownDataInspectionMain() {
 			return super.crackdownDataInspectionMain();
@@ -82,21 +89,27 @@ public class CmnController {
 		/** 표지정보 미확인 자료 메인화면을 연다.
 		 * @return fims/crdn/crdn06030-main
 		 */
+		@Override
 		@RequestMapping(name="표지정보 미확인 자료 메인", value="/030/main.do")
 		public ModelAndView tagInformationUndefinedDataMain() {
 			return super.tagInformationUndefinedDataMain();
 		}
 
-		/** 과태료 감경 자료 메인화면을 연다.
+	}
-		 * @return fims/crdn/crdn06040-main
+
+	@Controller
+	@RequestMapping(name="동영상 재생", value="/crdn/crdn09")
+	class Crdn09Controller extends cokr.xit.fims.crdn.web.Crdn09Controller {
+		/** 동영상 재생 메인화면을 연다.
+		 * @return fims/crdn/crdn09010-main
 		 */
-		@RequestMapping(name="과태료 감경 자료 메인", value="/040/main.do")
+		@Override
-		public ModelAndView fineReductionDataMain() {
+		@RequestMapping(name="동영상 재생 메인", value="/010/main.do")
-			return super.fineReductionDataMain();
+		public ModelAndView videoMain(String openerPageName) {
+			return super.videoMain(openerPageName);
 		}
 	}
 
-
 	@Controller
 	@RequestMapping(name="업무지원", value="/sprt/sprt01")
 	class Sprt01Controller extends cokr.xit.fims.sprt.web.Sprt01Controller {
@@ -104,6 +117,7 @@ public class CmnController {
 		/** 통합조회 메인화면을 연다.
 		 * @return fims/sprt/sprt01010-main
 		 */
+		@Override
 		@RequestMapping(name="통합조회 메인", value="/010/main.do")
 		public ModelAndView integratedInquireMain() {
 			return super.integratedInquireMain();

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp

@@ -136,14 +136,20 @@
 		</form>
 	</div>
 	<div class="card" style="width:400px;">
-		<div class="col-md-12">
-			<button type="button" id="" class="btn btn-blue">동영상 캡쳐</button>
-		</div>
 		<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data">
-			<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" />
+			<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
 		</form>
-		<div id="display--${pageName}" style="overflow-y: scroll;max-height: 680px;">
+		<div class="col-md-12">
-
+			<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">이미지 추가</button>
+		</div>
+		<div id="display--${pageName}" style="overflow-y: scroll;height: 340px;border-style: solid;">
+			
+		</div>
+		<div class="col-md-12">
+			<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
+		</div>
+		<div id="display2--${pageName}" style="overflow-y: scroll;height: 340px;border-style: solid;">
+			
 		</div>
 	</div>
 
@@ -225,11 +231,12 @@
 
 pageObject["${pageName}"] = {};
 
-
 $(document).ready(function(){
 
 	var $P = pageObject["${pageName}"];
-
+	
+	$P.captureFileArr = [];
+	
 	/**************************************************************************
 	 * DatasetControl, Dataset, FormFields
 	 **************************************************************************/
@@ -248,6 +255,7 @@ $(document).ready(function(){
 		}
 	});
 
+	
 	$P.crdnControl.save = (info) => {
 		if (!info) return;
 		var item = $P.crdnControl.getCurrent("item"),
@@ -258,7 +266,14 @@ $(document).ready(function(){
 		    var value = info[key];
 		    formData.append(key,value);
 		}
-
+		
+		if(formData.get("uploadFileList").size == 0){
+			formData.delete("uploadFileList");
+		}
+		if($P.captureFileArr.length > 0){
+			$P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
+		}
+		
 		ajax.post({
 			url:!create ? $P.crdnControl.urls.update : $P.crdnControl.urls.create,
 			data: formData, contentType : false, processData : false,
@@ -269,9 +284,15 @@ $(document).ready(function(){
 	/**************************************************************************
 	 * DatasetControl.on, Dataset.on
 	 **************************************************************************/
-	$P.uploadSet.onDatasetChange  = () => { $P.uploadSet.onRemove(); };
+	$P.uploadSet.onDatasetChange  = () => { $P.fnDisplay(); };
 	$P.uploadSet.onRemove = () => { $P.fnDisplay(); };
 
+	$P.crdnControl.onSave = (resp) => {
+		if (resp.saved) {
+			dialog.alert("저장됐습니다.");
+			dialog.close("manualdialog");
+		}
+	};
 	/**************************************************************************
 	 * pageObject.function
 	 **************************************************************************/
@@ -280,6 +301,15 @@ $(document).ready(function(){
 		var displayArea = document.querySelector("#display--${pageName}");
 		var imgTags = $P.uploadSet.inStrings("<img src='{url}' width='200' height='200' />").join("\n");
 		displayArea.innerHTML = imgTags;
+		
+		var display2Area = document.querySelector("#display2--${pageName}");
+		var imgTags2 = "";
+		if($P.captureFileArr.length > 0){
+			$P.captureFileArr.forEach(function(item, index){
+				imgTags2 += "<img src='" + item.url + "' width='200' height='200' />";
+			});
+		}
+		display2Area.innerHTML = imgTags2;
 	};
 
 	$P.fnSave = () => {
@@ -293,11 +323,35 @@ $(document).ready(function(){
 		});
 	};
 
+	$P.videoCallback = (snapshots) => {
+		snapshots.forEach(function(canvas, index, array){
+			canvas.toBlob(function(blob){
+				var identify = new Date().getTime()+ "-" + index;
+				var file = new File([blob], "capture-"+identify+".png", {type: "image/png"});
+				file.id = "file-" + identify;
+				file.url = (window.URL || window.webkitURL).createObjectURL(file);
+				$P.captureFileArr.push(file);
+				if(index === array.length - 1){ 
+					$P.fnDisplay();
+				}
+			});
+		});
+		
+	}
 	/**************************************************************************
 	 * element.on
 	 **************************************************************************/
+	 
 	$("#btnInst--${pageName}").on('click', () => $P.fnSave());
-
+	$("#btnAddFile--${pageName}").on('click', () => { $("#uploadFileList--${pageName}").trigger("click"); });
+	$("#btnOpenVideoCapture--${pageName}").on('click', () => {
+		window.open(wctx.url("/crdn/crdn09/010/main.do?openerPageName=${pageName}")
+				,"newVideoCapture"
+				,"width=1800,height=950"
+		);
+	});
+	
+	
 	/**************************************************************************
 	 * 초기화
 	 **************************************************************************/

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp

@@ -134,7 +134,7 @@
 				            	<a href="#" id="" class="btn btn-blue" title="업무처리1">업무 처리1</a>
 				            	<a href="#" id="" class="btn btn-blue" title="업무처리2">업무 처리2</a>
 				            </span>
-				        </span>
+				        </div>
 				    </div>
 
 				    <div class="card-datatable text-nowrap">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn09010-main.jsp

@@ -1,3 +1,185 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
-<c:set var="prefixName" scope="request">동영상 재생</c:set>
+<!DOCTYPE html>
+<html
+		lang="kr"
+		class="light-style layout-navbar-fixed layout-menu-fixed"
+		dir="ltr"
+		data-theme="theme-default"
+		data-assets-path="<c:url value="/resources/"/>"
+		data-template="vertical-menu-template-starter">
+<head>
+	<meta charset="UTF-8">
+	<title>과태료통합관리시스템</title>
+
+	<!-- Favicon -->
+	<link rel="icon" type="image/x-icon" href="<c:url value="/resources/image/favicon.ico"/>" />
+
+	<!-- Fonts -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" >
+
+	<!-- Icons. Uncomment required icon fonts -->
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/boxicons.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/fontawesome.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/flag-icons.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-icon.css"/>" />
+	<!-- Core CSS -->
+	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/theme-default.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/docs.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core-extend.css"/>" />
+
+	<!-- Vendors CSS -->
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/css/styles.css"/>" />
+
+	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/common.css"/>"/>
+	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/jquery-ui/1.13.2/themes/redmond/jquery-ui.css"/>" />
+	<link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/datepicker/datepicker.css"/>" />
+
+</head>
+<body>
+
+<c:set var="prefixName" scope="request">동영상 재생</c:set>
+<input type="file" id="file" name="file" hidden accept="video/*" />
+
+<div class="container-page-btn px-5 bg-program-title green cleanparking" style="width:100%;height:75px;">
+
+	<h2 class="text-white modal-title">동영상 캡쳐</h2>
+	<span class="container-window-btn-right">
+    	<button id="btnLoad" class="btn p-0 d-block w-px-100" style="height:70px;">
+    		<i class='bx bx-lg bx-folder-open' ></i><br/><span class="text-black">동영상 오픈</span>
+    	</button>
+    	<button id="btnCapture" class="btn p-0 d-block w-px-100" style="height:70px;">
+			<i class='bx bx-lg bxs-camera'></i><br/><span class="text-black">캡처</span>
+		</button>
+		<button id="btnSave" class="btn p-0 d-block w-px-100" style="height:70px;">
+			<i class='bx bx-lg bxs-save'></i><br/><span class="text-black">캡처 이미지 저장</span>
+		</button>
+    </span>
+	
+</div>
+
+<div class="d-flex justify-content-center">
+	<div class="card d-inline-flex" 
+	style="width:1400px;height:850px;padding: 10px;background-color: #E2E6E9;border: solid 1px #ccc;">
+		<div class="d-flex justify-content-center align-items-center" style="border-style: solid;width:100%;height: 100%">
+			<video id="video" width="1200" controls="true" hidden>
+			</video>
+		</div>
+	</div>
+	<div class="card d-inline-flex ms-1" style="width:290px;height:850px;padding: 10px;">
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+			
+		</div>
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+			
+		</div>
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+			
+		</div>
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+			
+		</div>
+	</div>
+</div>
+
+<script src="<c:url value="/resources/3rd-party/sneat/js/helpers.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/jquery-ui/1.13.2/jquery-ui.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/popper/popper.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/js/bootstrap.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/hammer/hammer.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/i18n/i18n.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/js/menu.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/sneat/libs/jstree/jstree.js"/>"></script>
+<script src="<c:url value="/resources/3rd-party/jstree/jstree-support.js"/>"></script>
+<script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
+<script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
+
+<script>
+var openerPageName = "${openerPageName}";
+
+var scaleFactor = 0.25;
+var snapshots = [];
+
+document.getElementById("video").addEventListener('play', function () { 
+	document.getElementById("btnCapture").focus();
+});
+
+
+function capture(video, scaleFactor) {
+    if(scaleFactor == null){
+        scaleFactor = 1;
+    }
+    var w = video.videoWidth * scaleFactor;
+    var h = video.videoHeight * scaleFactor;
+    var canvas = document.createElement('canvas');
+        canvas.width  = w;
+        canvas.height = h;
+    var ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0, w, h);
+    return canvas;
+} 
+ 
+
+$("#btnLoad").on("click",function(){
+	 $("#file").trigger("click");
+});
+$("#file").on("change", function(){
+	
+	var files = this.files,
+		length = files.length;
+	
+	snapshots = [];
+	$(".capture-output").html = "";
+	
+	if(files.length > 0){
+		var file = files[0];
+		file.url = (window.URL || window.webkitURL).createObjectURL(file);
+		
+		$("#video").removeAttr("hidden");
+		$("#video").html("<source src='"+file.url+"'>");
+	} else {
+		$("#video").attr("hidden","hidden");
+		$("#video").html("");
+	}
+	
+});
+
+$("#btnCapture").on("click",function(){
+	if($("#video").is(":hidden")){
+		return;
+	}
+	
+	var video  = document.getElementById("video");
+    var canvas = capture(video, scaleFactor);
+    canvas.ondblclick = function(){
+        window.open(this.toDataURL());
+    };
+    if(snapshots.length >= 4){
+    	return;
+    }
+
+  	snapshots.push(canvas);
+  	
+  	$(".capture-output").html = "";
+  	var outputs = $(".capture-output");
+    for(var i=0; i<snapshots.length; i++){
+        outputs[i].appendChild(snapshots[i]);
+    }
+});
+
+$("#btnSave").on("click",function(){
+	if(snapshots.length > 0){
+		
+		window.opener.pageObject[openerPageName].videoCallback(snapshots);
+		window.close();
+	}
+});
+</script>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/index.jsp

@@ -40,7 +40,7 @@
     </c:set>
     
     <script>
-    	let pageObject = {};
+    	var pageObject = {};
     	
     	function getBrowserName() {
     	    var agent = navigator.userAgent.toUpperCase();

src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css

@@ -507,25 +507,42 @@
 
 
 /* 배경색, 외곽선 */
-.border-cleanparking {
+.traffic {
-    box-shadow: 0 0 0 1px inset #FCFFFF !important;
+
-    border : 1px solid #B5B9BB !important;
+}
+.cleanparking {
+	--program-border : 1px solid #B5B9BB;
+	--program-border-shadow : 0 0 0 1px inset #FCFFFF;
+	
+	--program-bg : #E3E6E8;
+	--program-title-bg : #EEC575;
+	--program-btn-bg : #F0F0F0;
+	--program-popup-bg : #E2E6E9;
+}
+
+.cleanparking.green {
+	--program-title-bg : #ADD773;
+}
+
+.border-program {
+    box-shadow: var(--program-border-shadow) !important;
+    border : var(--program-border) !important;
 }
 
-.bg-cleanparking {
+.bg-program {
-    background-color: #E3E6E8 !important;
+    background-color: var(--program-bg) !important;
 }
 
-.bg-btn-cleanparking {
+.bg-program-btn {
-    background-color: #F0F0F0 !important;
+    background-color: var(--program-btn-bg) !important;
 }
 
-.bg-popup-cleanparking {
+.bg-program-popup {
-    background-color: #E2E6E9 !important;
+    background-color: var(--program-popup-bg)!important;
 }
 
-.bg-title-cleanparking {
+.bg-program-title {
-    background-color: #EEC575 !important;
+    background-color: var(--program-title-bg) !important;
 }
 
 /* 다이얼로그 창 넓이 */