이미지 표시 수정

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

@@ -269,8 +269,8 @@
 		<div class="col-md-12 d-flex justify-content-between">
 			<div class="fs-4 fw-bold">등록된 사진</div>
 			<div>
-				<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
 				<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button>
+				<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
 			</div>
 		</div>
 		<div id="display0--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
@@ -281,8 +281,11 @@
 		</form>		
 		<div class="col-md-12 d-flex justify-content-between">
 			<div class="fs-4 fw-bold">추가한 사진</div>
-			<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
+			<div>
-			<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button>
+				<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button>
+				<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
+				<button type="button" id="btnCancelAddFile--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
+			</div>
 		</div>
 		<div id="display--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
 		</div>
@@ -348,6 +351,8 @@ $(document).ready(function(){
 			$P.captureFileArr.forEach(item => formData.append("uploadFileList",item));
 		}
 		
+		//TODO : 편집된 파일, 삭제 사진 키값
+		
 		ajax.post({
 			url:!create ? $P.crdnControl.urls.update : $P.crdnControl.urls.create,
 			data: formData, contentType : false, processData : false,
@@ -379,29 +384,56 @@ $(document).ready(function(){
 	/**************************************************************************
 	 * pageObject.function
 	 **************************************************************************/
+	$P.fnMakeImgForExistFile = (fileArr) => {
+		var tagsText = "";
 		
-	$P.fnDisplay = () => {
+		for(var index = 0; index < fileArr.length; index++){
-		var displayArea = document.querySelector("#display--${pageName}");
+			var item = fileArr[index];
 			
-		var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
+			tagsText += "<label class='mx-2'>";
-			return "<img src='"+item.url+"' width='200' height='200' />";
+			tagsText += "<input type='radio' name='existPhoto' class='form-check-input' value='"+item.FILE_ID +"' ";
-		}).join("\n");
+			if(index == 0){
+				tagsText += " checked='checked' ";
+			}
+			tagsText += " />";
+			tagsText += "<img src='"+ item.URL +"' width='200' height='200' />";
+			tagsText += "</label>";
 				
-		var imgTagsFromNumberPlate = "";
+			if(index % 2 == 1){
-		if($P.numberPlateArr.length > 0){
+				tagsText += "<br />"
-			$P.numberPlateArr.forEach(function(item, index){
+			}
-				imgTagsFromNumberPlate += "<img src='" + item.url + "' width='200' height='200' />";
-			});
 		}
 
-		var imgTagsFromVideo = "";
+		return tagsText;
-		if($P.captureFileArr.length > 0){
+	}
-			$P.captureFileArr.forEach(function(item, index){
+	
-				imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
+	
-			});
+	$P.fnMakeImgForNewFile = (fileArr) => {
+		var tagsText = "";
+		
+		for(var index = 0; index < fileArr.length; index++){
+			var item = fileArr[index];
+			
+			tagsText += "<label class='mx-2'>";
+			tagsText += "<input type='checkbox' name='newPhoto' class='form-check-input' value='"+item.id +"' ";
+			tagsText += " />";
+			tagsText += "<img src='"+ item.url +"' width='200' height='200' />";
+			tagsText += "</label>";
+				
+			if(index % 2 == 1){
+				tagsText += "<br />"
+			}
 		}
 
-		displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromNumberPlate + imgTagsFromVideo;
+		return tagsText;
+	}
+	 
+	$P.fnDisplay = () => {
+		var displayArea = document.querySelector("#display--${pageName}");
+				
+		var concatArr = $P.localUploadArr.concat($P.numberPlateArr).concat($P.captureFileArr);
+		var tagsText = $P.fnMakeImgForNewFile(concatArr);
+		displayArea.innerHTML = tagsText;
 	};
 
 	$P.fnSave = () => {
@@ -447,9 +479,19 @@ $(document).ready(function(){
 	}
 	
 	$P.editPhotoCallback = (modifiedFile, originalFileInfo, isNumberPlate) => {
-		console.log(modifiedFile);
+		
+		modifiedFile.id = "file-" + new Date().getTime() + "-" + "0";
+		modifiedFile.url = (window.URL || window.webkitURL).createObjectURL(modifiedFile);
+		
+		if(isNumberPlate){
+			$P.numberPlateArr.push(modifiedFile);
+			$P.fnDisplay();
+		} else {
+			// TODO : 편집된사진 표시
+		}
+
 		console.log(originalFileInfo);
-		console.log(isNumberPlate);
+
 		
 	}
 	/**************************************************************************
@@ -469,7 +511,13 @@ $(document).ready(function(){
 		);
 	});
 	$("#btnEditPhoto--${pageName}").on('click', () => {
-		var fileId = $("#display0--${pageName}").find("[name='editTarget']:checked").val();
+		var checked = $("#display0--${pageName}").find("[name='existPhoto']:checked");
+		if(checked.length < 1){
+			alert("선택된 사진이 없습니다.");
+			return;
+		}
+		
+		var fileId = checked.val();
 		
 		window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId)
 				,"editPhoto"
@@ -477,6 +525,28 @@ $(document).ready(function(){
 		);
 	});
 
+	$("#btnDeleteExistPhoto--${pageName}").on('click', () => {
+		//기 등록 사진 삭제
+	});
+	
+	$("#btnCancelAddFile--${pageName}").on('click', () => {
+		var checked = $("#display--${pageName}").find("[name='newPhoto']:checked");
+		if(checked.length < 1){
+			alert("선택된 사진이 없습니다.");
+			return;
+		}
+		
+		var checkedArr = [];
+		for(var i=0; i < checked.length; i++){
+			checkedArr.push(checked[i].value);
+		}
+		
+		$P.captureFileArr = $P.captureFileArr.filter(item => checkedArr.indexOf(item.id) == -1);
+		$P.localUploadArr = $P.localUploadArr.filter(item => checkedArr.indexOf(item.id) == -1);
+		$P.numberPlateArr = $P.numberPlateArr.filter(item => checkedArr.indexOf(item.id) == -1);
+
+		$P.fnDisplay();
+	});
 	
 	/**************************************************************************
 	 * 초기화
@@ -525,24 +595,8 @@ $(document).ready(function(){
 	}
 	
 	if(crdnInfo.fileList){
-		var editPhotoArea = "";
+		var tagsText = $P.fnMakeImgForExistFile(crdnInfo.fileList);
-		
+		$("#display0--${pageName}").append(tagsText);
-		crdnInfo.fileList.forEach(function(item, index){
-			editPhotoArea += "<label class='mx-2'>"
-			editPhotoArea += "<input type='radio' name='editTarget' class='form-check-input' value='"+item.FILE_ID +"' ";
-			if(index == 0){
-				editPhotoArea += " checked='checked' ";
-			}
-			editPhotoArea += " />";
-			editPhotoArea += "<img src='"+ item.URL +"' width='200' height='200' />";
-			editPhotoArea += "</label>";
-			
-			if(index % 2 == 1){
-				editPhotoArea += "<br />"
-			}
-		});
-		
-		$("#display0--${pageName}").append(editPhotoArea);
 	} else {
 		
 		$("#display0--${pageName}").append("등록된 사진이 없습니다.");

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

@@ -246,6 +246,7 @@
 		<div class="col-md-12">
 			<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">이미지 추가</button>
 			<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-blue">동영상 캡쳐</button>
+			<button type="button" id="btnCancelAddFile--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
 		</div>
 		<div id="display--${pageName}" style="overflow-y: scroll;height: 600px;border-style: solid;">
 			
@@ -335,24 +336,32 @@ $(document).ready(function(){
 	/**************************************************************************
 	 * pageObject.function
 	 **************************************************************************/
+	$P.fnMakeImgForNewFile = (fileArr) => {
+		var tagsText = "";
 		
-	$P.fnDisplay = () => {
+		for(var index = 0; index < fileArr.length; index++){
-		var displayArea = document.querySelector("#display--${pageName}");
+			var item = fileArr[index];
-		
-		var imgTagsFromUploadSet = $P.localUploadArr.map(function(item){
-			return "<img src='"+item.url+"' width='200' height='200' />";
-		}).join("\n");
 			
+			tagsText += "<label class='mx-2'>";
+			tagsText += "<input type='checkbox' name='newPhoto' class='form-check-input' value='"+item.id +"' ";
+			tagsText += " />";
+			tagsText += "<img src='"+ item.url +"' width='200' height='200' />";
+			tagsText += "</label>";
 				
-		var imgTagsFromVideo = "";
+			if(index % 2 == 1){
-		if($P.captureFileArr.length > 0){
+				tagsText += "<br />"
-			$P.captureFileArr.forEach(function(item, index){
+			}
-				imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
-			});
 		}
 
-		displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromVideo;
+		return tagsText;
+	}
 	 
+	$P.fnDisplay = () => {
+		var displayArea = document.querySelector("#display--${pageName}");
+
+		var concatArr = $P.localUploadArr.concat($P.captureFileArr);
+		var tagsText = $P.fnMakeImgForNewFile(concatArr);
+		displayArea.innerHTML = tagsText;
 	};
 
 	$P.fnSave = () => {
@@ -411,6 +420,23 @@ $(document).ready(function(){
 		);
 	});
 	
+	$("#btnCancelAddFile--${pageName}").on('click', () => {
+		var checked = $("#display--${pageName}").find("[name='newPhoto']:checked");
+		if(checked.length < 1){
+			alert("선택된 사진이 없습니다.");
+			return;
+		}
+		
+		var checkedArr = [];
+		for(var i=0; i < checked.length; i++){
+			checkedArr.push(checked[i].value);
+		}
+		
+		$P.captureFileArr = $P.captureFileArr.filter(item => checkedArr.indexOf(item.id) == -1);
+		$P.localUploadArr = $P.localUploadArr.filter(item => checkedArr.indexOf(item.id) == -1);
+
+		$P.fnDisplay();
+	});
 	
 	/**************************************************************************
 	 * 초기화