단속사진 순서 변경 기능 추가
parent
c905a5bf6c
commit
a554f0bf74
@ -0,0 +1,58 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
|
||||
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
|
||||
<div class="card" style="width:550px;min-width:550px;">
|
||||
<form id="frmFile--${pageName}" method="post" enctype="multipart/form-data">
|
||||
<input type="file" id="newFileList--${pageName}" name="newFileList"
|
||||
multiple accept="image/*" hidden />
|
||||
<input type="file" id="modifyFile--${pageName}" name="modifyFile"
|
||||
multiple accept="image/*" hidden />
|
||||
</form>
|
||||
|
||||
<div class="fs-4 fw-bold d-block">등록된 사진</div>
|
||||
<div class="col-md-12 d-flex justify-content-between">
|
||||
<div class="my-1">
|
||||
<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-primary">
|
||||
동영상 캡쳐
|
||||
</button>
|
||||
<button type="button" id="btnAddFile--${pageName}" class="btn btn-primary">
|
||||
사진 추가
|
||||
</button>
|
||||
<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-primary">
|
||||
선택 사진 편집
|
||||
</button>
|
||||
<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-primary">
|
||||
선택 사진 삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="displayForExist--${pageName}"
|
||||
style="border-style: solid;">
|
||||
<ul id="dragAndDrop--${pageName}"
|
||||
style="display:flex;flex-wrap:wrap;overflow-y: scroll;min-height: 40px;max-height: 650px;">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form id="frmUploadSet--${pageName}" method="post" enctype="multipart/form-data">
|
||||
<input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet"
|
||||
multiple accept="image/*" hidden />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<template id="imgRadioTemplate--${pageName}">
|
||||
<li style="display:flex">
|
||||
<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>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
LoadScript("photoMainJspScript","/resources/js/fims/photo-main.js");
|
||||
</script>
|
||||
@ -0,0 +1,288 @@
|
||||
function settingPhotoMain(pageName, crdnIdElementId){
|
||||
|
||||
var $P = pageObject[pageName];
|
||||
|
||||
$P.existFileArr = [];
|
||||
$P.localUploadArr = [];
|
||||
|
||||
//드래그앤드롭
|
||||
Sortable.create(document.getElementById("dragAndDrop--"+pageName), {
|
||||
onEnd : function(evt){
|
||||
if(evt.oldIndex != evt.newIndex){
|
||||
$P.updateFileInfo("changeOrder");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//파일처리 버튼
|
||||
//추가버튼
|
||||
$("#btnAddFile--"+pageName).on('click', () => {
|
||||
$("#inputUploadSet--"+pageName).trigger("click");
|
||||
});
|
||||
//동영상캡쳐버튼
|
||||
$("#btnOpenVideoCapture--"+pageName).on('click', () => {
|
||||
var crdnId = $("#"+crdnIdElementId).val();
|
||||
|
||||
window.open(wctx.url("/sprt/sprt03/010/main.do?openerPageName="+pageName+"&"+"crdnId="+crdnId)
|
||||
,"newVideoCapture"
|
||||
,"width=1800,height=950"
|
||||
);
|
||||
});
|
||||
|
||||
//편집버튼
|
||||
$("#btnEditPhoto--"+pageName).on('click', () => {
|
||||
var checked = $("#displayForExist--"+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"
|
||||
,"width=1400,height=750"
|
||||
);
|
||||
});
|
||||
//삭제버튼
|
||||
$("#btnDeleteExistPhoto--"+pageName).on('click', () => {
|
||||
|
||||
var checked = $("#displayForExist--"+pageName).find("[name='existPhoto']:checked");
|
||||
if(checked.length < 1){
|
||||
alert("선택된 사진이 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
var target = checked[0].value;
|
||||
|
||||
$P.existFileArr.forEach(function(item){
|
||||
if(item.FILE_ID == target){
|
||||
item.status = "delete";
|
||||
}
|
||||
});
|
||||
|
||||
$P.updateFileInfo("delete");
|
||||
});
|
||||
|
||||
$P.uploadSet = uploadSupport("#inputUploadSet--"+pageName);
|
||||
|
||||
$P.uploadSet.onDatasetChange = () => {
|
||||
|
||||
var files = $P.uploadSet.getDataset();
|
||||
if(files != null && files.length > 0){
|
||||
files.forEach(function(item){
|
||||
$P.localUploadArr.push(item);
|
||||
});
|
||||
|
||||
$P.updateFileInfo("insert");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$P.uploadSet.onRemove = () => { };
|
||||
|
||||
|
||||
//이미지 HTML태그 문자열 반환
|
||||
$P.fnMakeImgForExistFile = (fileArr) => {
|
||||
var tagsTextArr = [];
|
||||
|
||||
for(var index = 0, j = 0; index < fileArr.length; index++){
|
||||
var item = fileArr[index];
|
||||
|
||||
if(item.status == "delete"){
|
||||
continue;
|
||||
}
|
||||
|
||||
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=\"\"", "");
|
||||
}
|
||||
template = template.replace(/{crdnPhotoId}/gi, "exist" + item.FILE_ID + pageName);
|
||||
template = template.replace(/{mosaic}/gi, ifEmpty(item.MOSAIC,""));
|
||||
|
||||
tagsTextArr.push(template);
|
||||
|
||||
if(j % 2 == 1){
|
||||
//tagsTextArr.push("<br />");
|
||||
}
|
||||
|
||||
j++;
|
||||
}
|
||||
|
||||
return tagsTextArr.join("");
|
||||
}
|
||||
|
||||
//이미지 HTML 렌더링
|
||||
$P.fnDisplay = () => {
|
||||
|
||||
var tagsText = $P.fnMakeImgForExistFile($P.existFileArr);
|
||||
|
||||
if(tagsText == ""){
|
||||
document.querySelector("#dragAndDrop--"+pageName).innerHTML = "";
|
||||
$("#btnEditPhoto--"+pageName).hide();
|
||||
} else {
|
||||
document.querySelector("#dragAndDrop--"+pageName).innerHTML = tagsText;
|
||||
$("#btnEditPhoto--"+pageName).show();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//동영상캡쳐 콜백
|
||||
$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);
|
||||
file.mosaic = "";
|
||||
|
||||
$P.localUploadArr.push(file);
|
||||
if(index === array.length - 1){
|
||||
|
||||
$P.updateFileInfo("insert");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//사진 편집 콜백
|
||||
$P.editPhotoCallback = (modifiedFile, originalFileInfo, isNumberPlate) => {
|
||||
|
||||
modifiedFile.id = "file-" + new Date().getTime() + "-" + "0";
|
||||
modifiedFile.url = (window.URL || window.webkitURL).createObjectURL(modifiedFile);
|
||||
|
||||
if(isNumberPlate){
|
||||
modifiedFile.mosaic = "";
|
||||
$P.localUploadArr.push(modifiedFile);
|
||||
|
||||
$P.updateFileInfo("insert");
|
||||
|
||||
} else {
|
||||
$P.existFileArr.forEach(function(item,index){
|
||||
if(item.FILE_ID == originalFileInfo.FILE_ID){
|
||||
modifiedFile.URL = modifiedFile.url;
|
||||
modifiedFile.FILE_ID = originalFileInfo.FILE_ID;
|
||||
modifiedFile.SRT_ORD = originalFileInfo.SRT_ORD;
|
||||
modifiedFile.status = "modified";
|
||||
$P.existFileArr.splice(index, 1, modifiedFile);
|
||||
};
|
||||
});
|
||||
|
||||
$P.updateFileInfo("modifiy");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 사진 저장
|
||||
$P.updateFileInfo = (flag) => {
|
||||
|
||||
var formData = new FormData(document.getElementById("frmFile--"+pageName));
|
||||
formData.append("crdnId", $("#"+crdnIdElementId).val());
|
||||
formData.append("atchFileCnt", $P.existFileArr.length);
|
||||
|
||||
var fileProcessingURL = "";
|
||||
if(flag == "insert"){
|
||||
fileProcessingURL = wctx.url("file/insertCrdnImageFile.do");
|
||||
|
||||
formData.delete("newFileList");
|
||||
|
||||
if ($P.localUploadArr.length > 0) {
|
||||
$P.localUploadArr.forEach(function(item){
|
||||
formData.append("newFileList", item);
|
||||
});
|
||||
}
|
||||
} else if(flag == "modifiy"){
|
||||
fileProcessingURL = wctx.url("file/updateCrdnImageFile.do");
|
||||
|
||||
formData.delete("modifyFile");
|
||||
|
||||
if($P.existFileArr.length > 0) {
|
||||
$P.existFileArr.forEach(function(item){
|
||||
if(item.status == "modified"){
|
||||
formData.append("beforeKey", item.FILE_ID);
|
||||
formData.append("beforeOrder", item.SRT_ORD);
|
||||
formData.append("modifyFile", item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
} else if(flag == "delete"){
|
||||
fileProcessingURL = wctx.url("file/deleteCrdnImageFile.do");
|
||||
|
||||
if($P.existFileArr.length > 0) {
|
||||
$P.existFileArr.forEach(function(item){
|
||||
if(item.status == "delete"){
|
||||
formData.append("deleteKeys", item.FILE_ID);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if(flag == "changeOrder"){
|
||||
fileProcessingURL = wctx.url("file/changeOrderCrdnImageFile.do");
|
||||
|
||||
var inputs = $("#dragAndDrop--"+pageName).find("input[name='existPhoto']");
|
||||
for(var i=0; i < inputs.length; i++){
|
||||
formData.append("orderedKeys", inputs[i].value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ajax.post({
|
||||
url : fileProcessingURL,
|
||||
data : formData, contentType : false, processData : false,
|
||||
success : resp => {
|
||||
if(resp.saved){
|
||||
|
||||
var crdnId = $("#"+crdnIdElementId).val();
|
||||
ajax.post({
|
||||
url : wctx.url("file/list.do"),
|
||||
data : {
|
||||
infoKeys : crdnId,
|
||||
infoType : "100"
|
||||
},
|
||||
success : (resp) => {
|
||||
var hasVideo = false;
|
||||
if(resp.cvlcptVideoExistYn == "Y"){
|
||||
hasVideo = true;
|
||||
}
|
||||
initPhotoMain(pageName, resp.fileList, hasVideo);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function initPhotoMain(pageName, fileList, existVideo){
|
||||
|
||||
var $P = pageObject[pageName];
|
||||
|
||||
//동영상캡쳐버튼
|
||||
if(existVideo){
|
||||
$("#btnOpenVideoCapture--"+pageName).show();
|
||||
} else {
|
||||
$("#btnOpenVideoCapture--"+pageName).hide();
|
||||
}
|
||||
|
||||
$P.existFileArr = [];
|
||||
if(fileList){
|
||||
fileList.forEach(function(item){
|
||||
item.status = "";
|
||||
$P.existFileArr.push(item);
|
||||
});
|
||||
}
|
||||
|
||||
$P.localUploadArr = [];
|
||||
$("#inputUploadSet--"+pageName)[0].value = "";
|
||||
|
||||
$P.fnDisplay();
|
||||
}
|
||||
Loading…
Reference in New Issue