단속사진 영역 소스 정리

main
이범준 3 months ago
parent 981362504b
commit d9c26ba8a7

@ -1,42 +1,42 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%> <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<div class="card" id="photoMainWrapper--${pageName}" name="photoMainWrapper"> <div class="card" name="photoMainWrapper">
<form id="frmFile--${pageName}" name="frmFile" method="post" enctype="multipart/form-data"> <form name="frmFile" method="post" enctype="multipart/form-data">
<input type="file" id="newFileList--${pageName}" name="newFileList" <input type="file" name="newFileList"
multiple accept="image/*" hidden /> multiple accept="image/*" hidden />
<input type="file" id="modifyFile--${pageName}" name="modifyFile" <input type="file" name="modifyFile"
multiple accept="image/*" hidden /> multiple accept="image/*" hidden />
</form> </form>
<div class="col-md-12 d-flex justify-content-between"> <div class="col-md-12 d-flex justify-content-between">
<div class="my-1"> <div class="my-1">
<button type="button" id="btnOpenVideoCapture--${pageName}" name="btnOpenVideoCapture" class="btn btn-primary"> <button type="button" name="btnOpenVideoCapture" class="btn btn-primary">
동영상 캡쳐 동영상 캡쳐
</button> </button>
<button type="button" id="btnAddFile--${pageName}" name="btnAddFile" class="btn btn-primary"> <button type="button" name="btnAddFile" class="btn btn-primary">
사진 추가 사진 추가
</button> </button>
<button type="button" id="btnEditPhoto--${pageName}" name="btnEditPhoto" class="btn btn-primary"> <button type="button" name="btnEditPhoto" class="btn btn-primary">
사진 편집 사진 편집
</button> </button>
<button type="button" id="btnDeleteExistPhoto--${pageName}" name="btnDeleteExistPhoto" class="btn btn-primary"> <button type="button" name="btnDeleteExistPhoto" class="btn btn-primary">
사진 삭제 사진 삭제
</button> </button>
</div> </div>
</div> </div>
<div id="displayForExist--${pageName}" name="displayForExist" class="border-default"> <div name="displayForExist" class="border-default">
<ul id="dragAndDrop--${pageName}" name="dragAndDrop" class="oy-scroll d-flex flex-wrap mh-px-580"> <ul name="dragAndDrop" class="oy-scroll d-flex flex-wrap mh-px-580">
</ul> </ul>
</div> </div>
<form id="frmUploadSet--${pageName}" name="frmUploadSet" method="post" enctype="multipart/form-data"> <form name="frmUploadSet" method="post" enctype="multipart/form-data">
<input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet" <input type="file" name="inputUploadSet"
multiple accept="image/*" hidden /> multiple accept="image/*" hidden />
</form> </form>
</div> </div>
<template id="imgRadioTemplate--${pageName}" name="imgRadioTemplate"> <template name="imgRadioTemplate">
<li class="d-flex"> <li class="d-flex">
<label class='mx-1 d-flex flex-row'> <label class='mx-1 d-flex flex-row'>
<input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" /> <input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />
@ -50,7 +50,7 @@
</li> </li>
</template> </template>
<template id="imgRadioTemplateTotalInfo--${pageName}" name="imgRadioTemplateTotalInfo"> <template name="imgRadioTemplateTotalInfo">
<li class="d-flex"> <li class="d-flex">
<label class="mx-1 d-flex flex-row"> <label class="mx-1 d-flex flex-row">
<input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" /> <input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />

@ -351,14 +351,14 @@
// pageObject // pageObject
let $P = pageObject["${pageName}"]; let $P = pageObject["${pageName}"];
$("#photoMainWrapper--${pageName}").addClass("w-px-380 min-w-px-380"); $P.$find("photoMainWrapper").addClass("w-px-380 min-w-px-380");
// FormFields // FormFields
$P.formFields = new FimsFormFields("#frmEdit--${pageName}"); $P.formFields = new FimsFormFields("#frmEdit--${pageName}");
// 단속 사진 // 단속 사진
$P.existFileArr = []; $P.existFileArr = [];
$P.localUploadArr = []; $P.localUploadArr = [];
$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}"); $P.uploadSet = uploadSupport($P.selector("inputUploadSet"));
/************************************************************************** /**************************************************************************
* DatasetControl * DatasetControl
@ -975,10 +975,10 @@
$("#btnUpdateCrdnSttsCd--${pageName}").prop("disabled", true); $("#btnUpdateCrdnSttsCd--${pageName}").prop("disabled", true);
$("#btnDeleteCrdnPayer--${pageName}").prop("disabled", true); $("#btnDeleteCrdnPayer--${pageName}").prop("disabled", true);
$("#btnUpdatePayer--${pageName}").prop("disabled", true); $("#btnUpdatePayer--${pageName}").prop("disabled", true);
$("#btnOpenVideoCapture--${pageName}").prop("disabled", true); $P.$find("btnOpenVideoCapture").prop("disabled", true);
$("#btnAddFile--${pageName}").prop("disabled", true); $P.$find("btnAddFile").prop("disabled", true);
$("#btnEditPhoto--${pageName}").prop("disabled", true); $P.$find("btnEditPhoto").prop("disabled", true);
$("#btnDeleteExistPhoto--${pageName}").prop("disabled", true); $P.$find("btnDeleteExistPhoto").prop("disabled", true);
// 화면 호출(callPurpose)이 view가 아니라면 버튼 비활성화 disabled = false // 화면 호출(callPurpose)이 view가 아니라면 버튼 비활성화 disabled = false
if (pageObject['${pageNameMain}'].callPurpose != "view") { if (pageObject['${pageNameMain}'].callPurpose != "view") {
@ -989,10 +989,10 @@
$("#btnUpdateCrdnSttsCd--${pageName}").prop("disabled", false); $("#btnUpdateCrdnSttsCd--${pageName}").prop("disabled", false);
$("#btnDeleteCrdnPayer--${pageName}").prop("disabled", false); $("#btnDeleteCrdnPayer--${pageName}").prop("disabled", false);
$("#btnUpdatePayer--${pageName}").prop("disabled", false); $("#btnUpdatePayer--${pageName}").prop("disabled", false);
$("#btnOpenVideoCapture--${pageName}").prop("disabled", false); $P.$find("btnOpenVideoCapture").prop("disabled", false);
$("#btnAddFile--${pageName}").prop("disabled", false); $P.$find("btnAddFile").prop("disabled", false);
$("#btnEditPhoto--${pageName}").prop("disabled", false); $P.$find("btnEditPhoto").prop("disabled", false);
$("#btnDeleteExistPhoto--${pageName}").prop("disabled", false); $P.$find("btnDeleteExistPhoto").prop("disabled", false);
} }
let taskSeCd = pageObject["${pageNameMain}"].mainControl.dataset.getValue("TASK_SE_CD"); let taskSeCd = pageObject["${pageNameMain}"].mainControl.dataset.getValue("TASK_SE_CD");

@ -2,7 +2,7 @@ LoadScript("sortableScript","/webjars/3rd-party/sneat/libs/sortablejs/sortable.j
function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
var $P = pageObject[pageName]; let $P = pageObject[pageName];
$P.existFileArr = []; $P.existFileArr = [];
$P.localUploadArr = []; $P.localUploadArr = [];
@ -11,7 +11,7 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
$P.carLinkFunc = carLinkFunc; $P.carLinkFunc = carLinkFunc;
//드래그앤드롭 //드래그앤드롭
Sortable.create(document.getElementById("dragAndDrop--"+pageName), { Sortable.create($P.find("dragAndDrop"), {
onEnd : function(evt){ onEnd : function(evt){
if(evt.oldIndex != evt.newIndex){ if(evt.oldIndex != evt.newIndex){
$P.updateFileInfo("changeOrder"); $P.updateFileInfo("changeOrder");
@ -21,11 +21,11 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
//파일처리 버튼 //파일처리 버튼
//추가버튼 //추가버튼
$("#btnAddFile--"+pageName).on('click', () => { $P.$find("btnAddFile").on('click', () => {
$("#inputUploadSet--"+pageName).trigger("click"); $P.$find("inputUploadSet").trigger("click");
}); });
//동영상캡쳐버튼 //동영상캡쳐버튼
$("#btnOpenVideoCapture--"+pageName).on('click', () => { $P.$find("btnOpenVideoCapture").on('click', () => {
var crdnId = $(crdnIdElement).val(); var crdnId = $(crdnIdElement).val();
var popupWidth = 1800; var popupWidth = 1800;
@ -46,8 +46,8 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
}); });
//편집버튼 //편집버튼
$("#btnEditPhoto--"+pageName).on('click', async() => { $P.$find("btnEditPhoto").on('click', async() => {
var checked = $("#displayForExist--"+pageName).find("[name='existPhoto']:checked"); var checked = $P.$find("displayForExist").find("[name='existPhoto']:checked");
if(checked.length < 1){ if(checked.length < 1){
await alert2("선택된 사진이 없습니다."); await alert2("선택된 사진이 없습니다.");
return; return;
@ -72,9 +72,9 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
}; };
}); });
//삭제버튼 //삭제버튼
$("#btnDeleteExistPhoto--"+pageName).on('click', async() => { $P.$find("btnDeleteExistPhoto").on('click', async() => {
var checked = $("#displayForExist--"+pageName).find("[name='existPhoto']:checked"); var checked = $P.$find("displayForExist").find("[name='existPhoto']:checked");
if(checked.length < 1){ if(checked.length < 1){
await alert2("선택된 사진이 없습니다."); await alert2("선택된 사진이 없습니다.");
return; return;
@ -91,7 +91,7 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
$P.updateFileInfo("delete"); $P.updateFileInfo("delete");
}); });
$P.uploadSet = uploadSupport("#inputUploadSet--"+pageName); $P.uploadSet = uploadSupport($P.selector("inputUploadSet"));
$P.uploadSet.onDatasetChange = () => { $P.uploadSet.onDatasetChange = () => {
@ -123,9 +123,9 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
// pageName에 따라 template이 다르다. // pageName에 따라 template이 다르다.
var template; var template;
if (pageName == "sprt02020") { if (pageName == "sprt02020") {
template = document.getElementById("imgRadioTemplateTotalInfo--" + pageName).innerHTML; template = $P.find("imgRadioTemplateTotalInfo").innerHTML;
} else { } else {
template = document.getElementById("imgRadioTemplate--" + pageName).innerHTML; template = $P.find("imgRadioTemplate").innerHTML;
} }
template = template.replace(/{name}/gi, "existPhoto"); template = template.replace(/{name}/gi, "existPhoto");
@ -155,11 +155,11 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
var tagsText = $P.fnMakeImgForExistFile($P.existFileArr); var tagsText = $P.fnMakeImgForExistFile($P.existFileArr);
if(tagsText == ""){ if(tagsText == ""){
document.querySelector("#dragAndDrop--"+pageName).innerHTML = ""; $P.find("dragAndDrop").innerHTML = "";
$("#btnEditPhoto--"+pageName).hide(); $P.$find("btnEditPhoto").hide();
} else { } else {
document.querySelector("#dragAndDrop--"+pageName).innerHTML = tagsText; $P.find("dragAndDrop").innerHTML = tagsText;
$("#btnEditPhoto--"+pageName).show(); $P.$find("btnEditPhoto").show();
} }
}; };
@ -216,7 +216,7 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
// 사진 저장 // 사진 저장
$P.updateFileInfo = (flag) => { $P.updateFileInfo = (flag) => {
var formData = new FormData(document.getElementById("frmFile--"+pageName)); var formData = new FormData($P.find("frmFile"));
formData.append("crdnId", $(crdnIdElement).val()); formData.append("crdnId", $(crdnIdElement).val());
formData.append("atchFileCnt", $P.existFileArr.length); formData.append("atchFileCnt", $P.existFileArr.length);
@ -260,7 +260,7 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
} else if(flag == "changeOrder"){ } else if(flag == "changeOrder"){
fileProcessingURL = wctx.url("file/changeOrderCrdnImageFile.do"); fileProcessingURL = wctx.url("file/changeOrderCrdnImageFile.do");
var inputs = $("#dragAndDrop--"+pageName).find("input[name='existPhoto']"); var inputs = $P.$find("dragAndDrop").find("input[name='existPhoto']");
for(var i=0; i < inputs.length; i++){ for(var i=0; i < inputs.length; i++){
formData.append("orderedKeys", inputs[i].value); formData.append("orderedKeys", inputs[i].value);
} }
@ -298,13 +298,13 @@ function settingPhotoMain(pageName, crdnIdElement, carInfoFunc, carLinkFunc){
function initPhotoMain(pageName, fileList, existVideo){ function initPhotoMain(pageName, fileList, existVideo){
var $P = pageObject[pageName]; let $P = pageObject[pageName];
//동영상캡쳐버튼 //동영상캡쳐버튼
if(existVideo){ if(existVideo){
$("#btnOpenVideoCapture--"+pageName).show(); $P.$find("btnOpenVideoCapture").show();
} else { } else {
$("#btnOpenVideoCapture--"+pageName).hide(); $P.$find("btnOpenVideoCapture").hide();
} }
$P.existFileArr = []; $P.existFileArr = [];
@ -316,8 +316,8 @@ function initPhotoMain(pageName, fileList, existVideo){
} }
$P.localUploadArr = []; $P.localUploadArr = [];
$("#inputUploadSet--"+pageName)[0].value = ""; $P.find("inputUploadSet").value = "";
$("#inputUploadSet--"+pageName).trigger("change"); $P.$find("inputUploadSet").trigger("change");
$P.fnDisplay(); $P.fnDisplay();
} }
Loading…
Cancel
Save