민원접수자료 상세조회 화면 이미지표시 수정

src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01020-info.jsp

@@ -415,6 +415,31 @@
 	</div>
 </div>
 <label for="" id="refreshEnd--${pageName}" class="parentGrid" hidden></label>
+
+<template id="imgRadioTemplate--${pageName}">
+	<label class='mx-1'>
+		<div style='display:relative;'>
+			<input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />
+			<img src="{src}" width='200' height='200' style='display:absolute;' 
+			data-crdn-photo-id="{crdnPhotoId}"
+			data-mosaic="{mosaic}"
+			onload='fn_photoMask($("#photoMask--top").is(":checked"),this);' />
+		</div>
+	</label>
+</template>
+
+<template id="imgCheckboxTemplate--${pageName}">
+	<label class='mx-1'>
+		<div style='display:relative;'>
+			<input type="checkbox" name="{name}" class="form-check-input" value="{value}" />
+			<img src="{src}" width='200' height='200' style='display:absolute;' 
+			data-crdn-photo-id="{crdnPhotoId}"
+			data-mosaic="{mosaic}"
+			onload='fn_photoMask($("#photoMask--top").is(":checked"),this);' />
+		</div>
+	</label>
+</template>
+
 <script>
 /**************************************************************************
  * Global Variable
@@ -527,7 +552,10 @@ $(document).ready(function(){
 
 	$P.uploadSet.onDatasetChange  = () => {
 		var files = $P.uploadSet.getDataset();
-		files.forEach(item => $P.localUploadArr.push(item));
+		files.forEach(function(item){
+			item.mosaic = "";
+			$P.localUploadArr.push(item);
+		});
 
 		$P.fnDisplay(false);
 	};
@@ -564,7 +592,7 @@ $(document).ready(function(){
 	 * pageObject.function
 	 **************************************************************************/
 	$P.fnMakeImgForExistFile = (fileArr) => {
-		var tagsText = "";
+		var tagsTextArr = [];
 
 		for(var index = 0, j = 0; index < fileArr.length; index++){
 			var item = fileArr[index];
@@ -572,45 +600,51 @@ $(document).ready(function(){
 			if(item.status == "delete"){
 				continue;
 			}
-
-			tagsText += "<label class='mx-2'>";
-			tagsText += "<input type='radio' name='existPhoto' class='form-check-input' value='"+item.FILE_ID +"' ";
-			if(index == 0){
-				tagsText += " checked='checked' ";
+			
+			var template = document.getElementById("imgRadioTemplate--${pageName}").innerHTML;
+			template = template.replace(/{name}/gi, "existPhoto");
+			template = template.replace(/{value}/gi, item.FILE_ID);
+			template = template.replace(/{src}/gi, item.URL);
+			if(index != 0){
+				template = template.replace("checked=\"\"", "");
 			}
-			tagsText += " />";
-			tagsText += "<img src='"+ item.URL +"' width='200' height='200' />";
-			tagsText += "</label>";
+			template = template.replace(/{crdnPhotoId}/gi, "exist"+item.FILE_ID+"${pageName}");
+			template = template.replace(/{mosaic}/gi, item.MOSAIC);
+			
+			tagsTextArr.push(template);
 
 			if(j % 2 == 1){
-				tagsText += "<br />";
+				tagsTextArr.push("<br />");
 			}
 
 			j++;
 		}
 
-		return tagsText;
+		return tagsTextArr.join();
 	}
 
 
 	$P.fnMakeImgForNewFile = (fileArr) => {
-		var tagsText = "";
+		var tagsTextArr = [];
 
 		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>";
-
+			var template = document.getElementById("imgCheckboxTemplate--${pageName}").innerHTML;
+			template = template.replace(/{name}/gi, "newPhoto");
+			template = template.replace(/{value}/gi, item.id);
+			template = template.replace(/{src}/gi, item.url);
+			template = template.replace(/{crdnPhotoId}/gi, "new"+item.id+"${pageName}");
+			template = template.replace(/{mosaic}/gi, item.mosaic);
+			
+			tagsTextArr.push(template);
+			
 			if(index % 2 == 1){
-				tagsText += "<br />";
+				tagsTextArr.push("<br />");
 			}
 		}
 
-		return tagsText;
+		return tagsTextArr.join();
 	}
 
 	$P.fnDisplay = (isExist) => {
@@ -714,6 +748,7 @@ $(document).ready(function(){
 				var file = new File([blob], "capture-"+identify+".png", {type: "image/png"});
 				file.id = "file-" + identify;
 				file.url = (window.URL || window.webkitURL).createObjectURL(file);
+				file.mosaic = "";
 				$P.captureFileArr.push(file);
 				if(index === array.length - 1){
 					$P.fnDisplay(false);
@@ -729,6 +764,7 @@ $(document).ready(function(){
 		modifiedFile.url = (window.URL || window.webkitURL).createObjectURL(modifiedFile);
 
 		if(isNumberPlate){
+			modifiedFile.mosaic = "";
 			$P.numberPlateArr.push(modifiedFile);
 			$P.fnDisplay(false);
 		} else {
@@ -737,6 +773,7 @@ $(document).ready(function(){
 					modifiedFile.URL = modifiedFile.url;
 					modifiedFile.FILE_ID = originalFileInfo.FILE_ID;
 					modifiedFile.status = "modified";
+					modifiedFile.MOSAIC = originalFileInfo.MOSAIC;
 					$P.existFileArr.splice(index, 1, modifiedFile);
 				};
 			});