xit-app
/
fims-war
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

이미지 표시 수정

Browse Source
main
이범준 1 year ago
parent 3bf9a3e13c
commit b8a163ec74
2 changed files with 136 additions and 56 deletions
Show Stats Download Patch File Download Diff File

132
src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp
Unescape Escape View File

@ -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="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 = () => {
var displayArea = document.querySelector("#display--${pageName}");
for(var index = 0; index < fileArr.length; index++){
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='radio' name='existPhoto' class='form-check-input' value='"+item.FILE_ID +"' ";
if(index == 0){
tagsText += " checked='checked' ";
}
tagsText += " />";
tagsText += "<img src='"+ item.URL +"' width='200' height='200' />";
tagsText += "</label>";
var imgTagsFromNumberPlate = "";
if($P.numberPlateArr.length > 0){
$P.numberPlateArr.forEach(function(item, index){
imgTagsFromNumberPlate += "<img src='" + item.url + "' width='200' height='200' />";
});
if(index % 2 == 1){
tagsText += "<br />"
}
}
var imgTagsFromVideo = "";
if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(function(item, index){
imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
});
return tagsText;
}
$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 />"
}
}
return tagsText;
}
$P.fnDisplay = () => {
var displayArea = document.querySelector("#display--${pageName}");
displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromNumberPlate + imgTagsFromVideo;
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 = "";
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);
var tagsText = $P.fnMakeImgForExistFile(crdnInfo.fileList);
$("#display0--${pageName}").append(tagsText);
} else {
$("#display0--${pageName}").append("등록된 사진이 없습니다.");

48
src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp
Unescape Escape View File

@ -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 = () => {
var displayArea = document.querySelector("#display--${pageName}");
for(var index = 0; index < fileArr.length; index++){
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>";
if(index % 2 == 1){
tagsText += "<br />"
}
}
var imgTagsFromVideo = "";
if($P.captureFileArr.length > 0){
$P.captureFileArr.forEach(function(item, index){
imgTagsFromVideo += "<img src='" + item.url + "' width='200' height='200' />";
});
return tagsText;
}
displayArea.innerHTML = imgTagsFromUploadSet + imgTagsFromVideo;
$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();
});
/**************************************************************************
* 초기화

Write Preview
Loading…
Cancel
Save