450 lines
12 KiB
Plaintext
450 lines
12 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%
|
|
String cntx = request.getContextPath();
|
|
%>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<%@ include file="/WEB-INF/include/include-header3.jspf" %>
|
|
<style type="text/css">
|
|
.col-sm-3 {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.valign-wrapper {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.bd-example {
|
|
position: relative;
|
|
padding: 5px;
|
|
border: solid #dee2e6;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
border-width: 1px;
|
|
border-radius: .25rem .25rem .25rem .25rem;
|
|
}
|
|
|
|
.mb-3, .my-3 {
|
|
margin-bottom: 0rem!important;
|
|
}
|
|
|
|
</style>
|
|
<meta name="theme-color" content="#7952b3">
|
|
<title>wall info</title>
|
|
</head>
|
|
|
|
<body>
|
|
<form name="frm">
|
|
<input type="hidden" id="center_id" name="center_id" value="KW_WELLS,KW_COMMON">
|
|
<input type="hidden" id="id" name="id">
|
|
<input type="hidden" id="bg_info" name="bg_info">
|
|
<input type="hidden" id="ci_info" name="ci_info">
|
|
</form>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div>
|
|
<i class="far fa-caret-square-right"></i> <label class="form-label" style="font-size: 1.3em; font-weight: 700;">장표목록</label>
|
|
</div>
|
|
<table
|
|
id="table"
|
|
class="table-sm"
|
|
data-virtual-scroll="true"
|
|
data-sort-name="id"
|
|
data-sort-order="asc"
|
|
data-sortable="true"
|
|
data-pagination="false"
|
|
data-search="false"
|
|
data-single-select="true"
|
|
data-click-to-select="true"
|
|
data-show-toggle="false"
|
|
data-use-row-attr-func="true"
|
|
data-reorderable-rows="false"
|
|
style="text-align: center;">
|
|
<thead style="text-align: center;">
|
|
<tr>
|
|
<th data-field="state" data-radio="true"></th>
|
|
<th data-field="ID" data-visible="false">장표ID</th>
|
|
<th data-field="CENTER_ID" data-visible="false">센터ID</th>
|
|
<th data-field="CENTER_NAME">센터명</th>
|
|
<th data-field="WALL_NAME">장표명</th>
|
|
<th data-field="BG_INFO" data-visible="false">배경 이미지 주소</th>
|
|
<th data-field="CI_INFO" data-visible="false">CI 이미지 주소</th>
|
|
<th data-field="WALL_URL" data-visible="false">장표주소</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="col-md">
|
|
<i class="far fa-caret-square-right"></i> <label class="form-label" style="font-size: 1.3em; font-weight: 700;">장표상세</label>
|
|
</div>
|
|
<div class="bd-example">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="c_id" class="col-sm-3 col-form-label">센터ID</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="c_id" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="center_name" class="col-sm-3 col-form-label">센터명</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="center_name" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="style3">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="w_id" class="col-sm-3 col-form-label">장표ID</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="w_id" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="wall_name" class="col-sm-3 col-form-label">장표명</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="wall_name" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="style3">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="bg_info" class="col-sm-3 col-form-label">배경정보</label>
|
|
<div class="col-sm-9">
|
|
<div class="card" style="height: 25vh; width:80%;">
|
|
<img id="bg_img" class="img-thumbnail" style="height: 100%; width:100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="bg_path" class="col-sm-3 col-form-label">경로</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="bg_path" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="bg_file" class="col-sm-3 col-form-label">파일명</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="bg_file" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="bg_nm" class="col-sm-3 col-form-label">이미지명</label>
|
|
<div class="col-sm-5 valign-wrapper">
|
|
<input type="text" class="form-control" id="bg_nm" disabled>
|
|
</div>
|
|
<div class="col-sm-4 valign-wrapper" style="padding-right: 0px; text-align: right;">
|
|
<button type="button" class="btn btn-sm btn-primary" id="btnBgChange">배경변경</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="style3">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="ci_info" class="col-sm-3 col-form-label">CI정보</label>
|
|
<div class="col-sm-9">
|
|
<div class="card" style="height: 8vh; width:50%;">
|
|
<img id="ci_img" class="img-thumbnail" style="height: 100%; width:100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row mb-3">
|
|
<label for="ci_path" class="col-sm-3 col-form-label">경로</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="ci_path" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="ci_file" class="col-sm-3 col-form-label">파일명</label>
|
|
<div class="col-sm-9 valign-wrapper">
|
|
<input type="text" class="form-control" id="ci_file" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="ci_nm" class="col-sm-3 col-form-label">이미지명</label>
|
|
<div class="col-sm-5 valign-wrapper">
|
|
<input type="text" class="form-control" id="ci_nm" disabled>
|
|
</div>
|
|
<div class="col-sm-4 valign-wrapper" style="padding-right: 0px; text-align: right;">
|
|
<button type="button" class="btn btn-sm btn-primary" id="btnCiChange">CI변경</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="style3">
|
|
<div class="col-md">
|
|
<div class="row mb-3">
|
|
<label for="wall_url" class="col-sm-2 col-form-label">장표URL</label>
|
|
<div class="col-sm-10 valign-wrapper">
|
|
<input type="text" class="form-control" id="wall_url" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="col-md">
|
|
<button type="button" class="btn btn-sm btn-primary" id="btnSave">저장</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnCancel">취소</button>
|
|
</div>
|
|
</div>
|
|
<textarea id="ckeditor">
|
|
</textarea>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
$("#btnBgChange").click(function(e) {
|
|
if($('#bg_file').val() != ""){
|
|
fncPopup("B");
|
|
}
|
|
});
|
|
|
|
$("#btnCiChange").click(function(e) {
|
|
if($('#ci_file').val() != ""){
|
|
fncPopup("C");
|
|
}
|
|
});
|
|
|
|
|
|
$("#btnSave").click(function(e) {
|
|
$('#id').val($('#w_id').val());
|
|
saveWallInfo();
|
|
});
|
|
|
|
function createEditor(){
|
|
ClassicEditor.create(document.querySelector('#ckeditor'), {
|
|
toolbar:{items:[
|
|
'heading',
|
|
'|',
|
|
'italic',
|
|
'link',
|
|
'bulletedList',
|
|
'numberedList',
|
|
'|',
|
|
'indent',
|
|
'outdent',
|
|
'|',
|
|
'imageUpload',
|
|
'blockQuote',
|
|
'insertTable',
|
|
'mediaEmbed',
|
|
'undo',
|
|
'redo',
|
|
'exportPdf',
|
|
'fontBackgroundColor',
|
|
'fontColor',
|
|
'fontSize',
|
|
'fontFamily',
|
|
'highlight',
|
|
'horizontalLine',
|
|
'underLine'
|
|
]
|
|
},
|
|
language:'ko',
|
|
image:{toolbar:['imageTextAlternative',
|
|
'imageStyle:full',
|
|
'imageStyle:side'
|
|
]
|
|
},
|
|
table: {
|
|
contentToolbar:[
|
|
'tableColumn',
|
|
'tableRow',
|
|
'mergeTableCells',
|
|
'tableCellProperties',
|
|
'tableProperties'
|
|
]
|
|
},
|
|
ckfinder: {
|
|
uploadUrl: 'ckeditor/ckeditor5ImageUpload'
|
|
}
|
|
|
|
})
|
|
.then(editor => {
|
|
window.editor = editor;
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function saveWallInfo(){
|
|
var queryString = $("form[name=frm]").serialize() ;
|
|
$.ajax({
|
|
url:"<c:url value='/saveWallInfo'/>",
|
|
data : queryString,
|
|
type:"post",
|
|
datatype:"json",
|
|
success:function(args){
|
|
$('#table').bootstrapTable('load', args.list);
|
|
},
|
|
error : function(x,o,e){
|
|
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
|
|
alert(msg);
|
|
}
|
|
});
|
|
}
|
|
|
|
function resetElements(){
|
|
$('#c_id').val("");
|
|
$('#center_name').val("");
|
|
$('#w_id').val("");
|
|
$('#wall_name').val("");
|
|
$('#bg_info').val("");
|
|
$('#bg_path').val("");
|
|
$('#bg_file').val("");
|
|
$('#bg_nm').val("");
|
|
$("#bg_img").attr("src", "");
|
|
$('#ci_info').val("");
|
|
$('#ci_path').val("");
|
|
$('#ci_file').val("");
|
|
$('#ci_nm').val("");
|
|
$("#ci_img").attr("src", "");
|
|
$('#wall_url').val("");
|
|
}
|
|
|
|
$(function() {
|
|
$('#table').bootstrapTable();
|
|
getWallData();
|
|
createEditor();
|
|
|
|
});
|
|
|
|
function setImage(img_type, id, name, file, path){
|
|
if(img_type == "B"){
|
|
$('#bg_info').val(id);
|
|
$('#bg_path').val(path);
|
|
$('#bg_file').val(file);
|
|
$('#bg_nm').val(name);
|
|
$("#bg_img").attr("src", "/" + path + file+ "");
|
|
}else if(img_type == "C"){
|
|
$('#ci_info').val(id);
|
|
$('#ci_path').val(path);
|
|
$('#ci_file').val(file);
|
|
$('#ci_nm').val(name);
|
|
$("#ci_img").attr("src", "/" + path + file+ "");
|
|
}
|
|
}
|
|
|
|
function fn_openPop(obj){
|
|
//document.frm.IDX.value = obj[0].id;
|
|
fncPop_Click();
|
|
}
|
|
|
|
function fncPopup(imgtype){
|
|
goPage_Popup('<%=cntx%>/image_selector?IMG_TYPE=' + imgtype, '880', '500','no', 'pop_image_' + imgtype);
|
|
}
|
|
var popupX = (document.body.offsetWidth / 2) - (900 / 2);
|
|
// 만들 팝업창 좌우 크기의 1/2 만큼 보정값으로 빼주었음
|
|
|
|
var popupY= (document.body.offsetHeight / 2) - (600 / 2);
|
|
// 만들 팝업창 상하 크기의 1/2 만큼 보정값으로 빼주었음
|
|
|
|
|
|
//팝업화면 띄우기
|
|
function goPage_Popup(pagename, Wsize, Hsize, ScrollYn, scrnm){
|
|
var id=window.open(pagename,scrnm,"toolbar=no,directories=no, width="+Wsize+", height="+Hsize+", top="+popupY+", left="+popupX+", scrollbars="+ScrollYn+", status=no,resizable=no, menubar=no");
|
|
id.focus();
|
|
}
|
|
|
|
function loadData(){
|
|
var current_array_tmp = [];
|
|
for(var i=0; i<20; i++){
|
|
var obj = new Object();
|
|
obj.id = i+1;
|
|
obj.name = "길동" + i;
|
|
obj.price = i * 100;
|
|
|
|
current_array_tmp.push(obj);
|
|
}
|
|
$('#table').bootstrapTable('load', current_array_tmp); //통화중 테이블 세팅
|
|
}
|
|
|
|
function getWallData(){
|
|
var queryString = $("form[name=frm]").serialize() ;
|
|
$.ajax({
|
|
url:"<c:url value='/getWallInfo_Manage'/>",
|
|
data : queryString,
|
|
type:"post",
|
|
datatype:"json",
|
|
success:function(args){
|
|
$('#table').bootstrapTable('load', args.list);
|
|
resetElements();
|
|
},
|
|
error : function(x,o,e){
|
|
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
|
|
alert(msg);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$('#table').bootstrapTable({
|
|
onClickRow: function (row, el, field) {
|
|
$('#c_id').val(row.CENTER_ID);
|
|
$('#center_name').val(row.CENTER_NAME);
|
|
$('#w_id').val(row.ID);
|
|
$('#wall_name').val(row.WALL_NAME);
|
|
$('#bg_info').val(row.BG_INFO);
|
|
$('#bg_path').val(row.BG_PATH);
|
|
$('#bg_file').val(row.BG_FILE);
|
|
$('#bg_nm').val(row.BG_NM);
|
|
$("#bg_img").attr("src", "/" + row.BG_PATH + row.BG_FILE+ "");
|
|
$('#ci_info').val(row.CI_INFO);
|
|
$('#ci_path').val(row.CI_PATH);
|
|
$('#ci_file').val(row.CI_FILE);
|
|
$('#ci_nm').val(row.CI_NM);
|
|
$("#ci_img").attr("src", "/" + row.CI_PATH + row.CI_FILE+ "");
|
|
$('#wall_url').val(row.WALL_URL);
|
|
}
|
|
});
|
|
|
|
function StudioUploadAdapterPlugin(editor) {
|
|
editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
|
|
return new StudioUploadAdapter(loader);
|
|
};
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|