jkhong
/
i-framework-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
i-framework-lite/.svn/pristine/f3/f33388157228275ecafe1176952...

537 lines
21 KiB
Plaintext
Raw Blame History

<%@page import="org.springframework.boot.web.servlet.server.Session"%>
<%@ 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" %>
<!-- Multi Select-->
<link href="<c:url value='/vendor/bootstrap-multiselect-2.0/dist/css/bootstrap-multiselect.css' />" rel="stylesheet">
<script src="<c:url value='/vendor/bootstrap-multiselect-2.0/dist/js/bootstrap-multiselect.js' />"></script>
<style type="text/css">
.col-sm-2,.col-sm-3,.col-sm-4 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.form-check-input-reverse{
margin-left: 10px;
}
.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 manage</title>
</head>
<body>
<form id="frm" name="frm" enctype="multipart/form-data">
<input type="hidden" class="form-control" id="use_yn" name="use_yn">
<input type="hidden" class="form-control" id="p_code" name="p_code">
<input type="hidden" class="form-control" id="grade" name="grade">
<input type="hidden" class="form-control" id="bg_info" name="bg_info">
<input type="hidden" class="form-control" id="bg_path" name="bg_path">
<input type="hidden" class="form-control" id="bg_real_nm" name="bg_real_nm">
<input type="hidden" class="form-control" id="ci_info" name="ci_info">
<input type="hidden" class="form-control" id="ci_path" name="ci_path">
<input type="hidden" class="form-control" id="ci_real_nm" name="ci_real_nm">
<input type="hidden" class="form-control" id="center_id" name="center_id">
<input type="hidden" class="form-control" id="screen_id" name="screen_id">
<input type="hidden" class="form-control" id="wall_id" name="wall_id">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div>
<div class="row">
<div class="col-4">
<i class="far fa-caret-square-right"></i>&nbsp;<label class="form-label" style="font-size: 1.3em; font-weight: 700;">장표목록</label>
</div>
<div class="col-8" style="text-align: right;">
<button type="button" class="btn btn-sm btn-primary" id="btnSaveOrder">순서저장</button>
</div>
</div>
</div>
<table
id="table"
class="table-sm"
data-virtual-scroll="true"
data-sort-name="id"
data-sort-order="asc"
data-height="400"
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="true"
style="text-align: center;">
<thead style="text-align: center;">
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="WALL_ID" data-visible="false">ID</th>
<th data-field="CENTER_NAME" data-width="20%">센터명</th>
<th data-field="SCREEN_NAME" data-width="40%">화면명</th>
<th data-field="WALL_NAME" data-width="40%">장표명</th>
<th data-field="CENTER_ID" data-visible="false">센터ID</th>
<th data-field="SCREEN_ID" data-visible="false">SCREEN_ID</th>
<th data-field="BG_INFO" data-visible="false">배경정보</th>
<th data-field="BG_PATH" data-visible="false">배경경로</th>
<th data-field="BG_REAL_NM" data-visible="false">배경실제파일명</th>
<th data-field="BG_FILE" data-visible="false">배경파일명</th>
<th data-field="BG_NM" data-visible="false">배경명</th>
<th data-field="CI_PATH" data-visible="false">CI경로</th>
<th data-field="CI_REAL_NM" data-visible="false">CI실제파일명</th>
<th data-field="CI_FILE" data-visible="false">CI_파일명</th>
<th data-field="CI_NM" data-visible="false">CI명</th>
<th data-field="CI_INFO" data-visible="false">CI정보</th>
<th data-field="WALL_URL" data-visible="false">WALL_URL</th>
<th data-field="VIEW_YN" data-visible="false">VIEW_YN</th>
<th data-field="WALL_ORDER" data-visible="false">WALL_ORDER</th>
<th data-field="WALL_DURATION" data-visible="false">WALL_DURATION</th>
<th data-field="FONT_COLOR" data-visible="false">FONT_COLOR</th>
<th data-field="CHANGE_EFFECT" data-visible="false">CHANGE_EFFECT</th>
<th data-field="READY_CUST" data-visible="false">READY_CUST</th>
<th data-field="SVC_LVL" data-visible="false">SVC_LVL</th>
<th data-field="ABN_CALL" data-visible="false">ABN_CALL</th>
<th data-field="ANS_RTO" data-visible="false">ANS_RTO</th>
<th data-field="CUSTOM1" data-visible="false">커스텀1</th>
<th data-field="CUSTOM2" data-visible="false">커스텀2</th>
</tr>
</thead>
</table>
<div style="text-align: right; margin-top: 0.5vw;">
<button type="button" class="btn btn-sm btn-primary" id="btnAdd">장표추가</button>
<button type="button" class="btn btn-sm btn-primary" id="btnRemove">장표제거</button>
</div>
</div>
<div class="col-6">
<div class="col-md">
<i class="far fa-caret-square-right"></i>&nbsp;<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-12">
<div class="row mb-3">
<label for="center_name" class="col-sm-2 col-form-label">센터명</label>
<div class="col-sm-4 valign-wrapper">
<input type="text" class="form-control" id="center_name" name="center_name" readonly>
</div>
<label for="center_name" class="col-sm-2 col-form-label">화면명</label>
<div class="col-sm-4 valign-wrapper">
<input type="text" class="form-control" id="screen_name" name="screen_name" readonly>
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-3">
<label for="obj_name" class="col-sm-2 col-form-label">장표명</label>
<div class="col-sm-10 valign-wrapper">
<input type="text" class="form-control" id="wall_name" name="wall_name" readonly>
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-3">
<label for="obj_name" class="col-sm-2 col-form-label"></label>
<div class="col-sm-3 valign-wrapper">
<label class="col-form-label">표시여부&nbsp;&nbsp;</label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="view_yn">
<label class="custom-control-label" for="view_yn"></label>
</div>
</div>
<div class="col-sm-4 valign-wrapper">
<label class="col-form-label">표시시간&nbsp;&nbsp;</label>
<input type="number" class="form-control" id="wall_duration" name="wall_duration" value="0" style="width: 5vw;">
<label class="col-form-label">&nbsp;초</label>
</div>
<div class="col-sm-3 valign-wrapper">
<label class="col-form-label">폰트색상&nbsp;&nbsp;</label>
<input type="color" style="width: 50px;" class="form-control form-control-color" id="font_color" name="font_color" value="#ffffff">
</div>
<label for="obj_name" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10 valign-wrapper">
<label class="col-form-label">화면전환효과&nbsp;&nbsp;</label>
<select id="change_effect">
<option>----------------</option>
<option value="1">오른쪽에서 왼쪽으로 이동</option> <option value="2">왼쪽에서 오른쪽으로 이동</option> <option value="3">아래쪽에서 위로 이동</option><option value="4">위쪽에서 아래로 이동</option>
<option value="5">오른쪽에서 사라짐</option><option value="6">왼쪽에서 사라짐</option><option value="7">아래쪽에서 사라짐</option><option value="8">위쪽에서 사라짐</option>
<option value="9">왼쪽에서 오른쪽으로 사라짐</option><option value="10">오른쪽에서 왼쪽으로 사라짐</option><option value="11">위쪽에서 아래로 사라짐</option><option value="12">아래쪽에서 위로 사라짐</option>
<option value="13">오른쪽으로 움직임</option><option value="14">왼쪽으로 움직임</option><option value="15">아래쪽으로 움직임</option><option value="16">위쪽으로 움직임</option><option value="17">오른쪽으로 작아짐</option>
<option value="18">왼쪽으로 작아짐</option><option value="19">아래쪽으로 작아짐</option><option value="20">위쪽으로 작아짐</option><option value="21">작아짐</option><option value="22">커짐</option>
<option value="23">왼쪽으로 이동하며 커짐</option><option value="24">오른쪽으로 이동하며 커짐</option><option value="25">위쪽으로 이동하며 커짐</option><option value="26">아래쪽으로 이동하며 커짐</option>
<option value="27">작아지며 커짐</option><option value="28">오른쪽에서 왼쪽으로 접착</option><option value="29">왼쪽에서 오른쪽으로 접착</option><option value="30">위쪽에서 아래로 접착</option>
<option value="31">아래쪽에서 위로 접착</option><option value="32">오른쪽으로 뒤집기</option><option value="33">왼쪽으로 뒤집기</option><option value="34">위쪽으로 뒤집기</option>
<option value="35">아래쪽으로 뒤집기</option><option value="36">떨어지기</option><option value="37">뉴스페이퍼</option><option value="38">오른쪽에서 왼쪽으로 밀기</option>
<option value="39">왼쪽에서 오른쪽으로 밀기</option><option value="40">아래에서 위로 밀기</option><option value="41">위쪽에서 아래로 밀기</option><option value="42">왼쪽 밀고 오른쪽 당기기</option>
<option value="43">오른쪽 밀고 왼쪽 당기기</option><option value="44">위쪽 밀고 아래쪽 당기기</option><option value="45">아래쪽 밀고 위쪽 당기기</option><option value="46">오른쪽에서 왼쪽으로 접기</option>
<option value="47">왼쪽에서 오른쪽으로 접기</option><option value="48">아래에서 위로 접기</option><option value="49">위에서 아래로 접기</option><option value="50">왼쪽 펴면서 오른쪽으로 이동</option>
<option value="51">오른쪽 펴면서 왼쪽으로 이동</option><option value="52">위쪽 펴면서 이래로 이동</option><option value="53">아래쪽 펴면서 위로 이동</option><option value="58">왼쪽큐브</option>
<option value="59">오른쪽큐브</option><option value="60">위쪽큐브</option><option value="61">아래쪽큐브</option><option value="62">왼쪽으로 회전</option>
<option value="63">오른쪽으로 회전</option><option value="64">위쪽으로 회전</option><option value="65">아래쪽으로 회전</option>
</select>
</div>
<div class="col-sm-4 valign-wrapper">
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-3">
<label for="obj_name" class="col-sm-2 col-form-label">임계치 설정</label>
<div class="col-sm-10 valign-wrapper">
<label for="center_name" class="col-sm-3 col-form-label" style="text-align: right;">대기고객</label>
<input type="text" class="form-control" id="ready_cust" name="ready_cust" style="width: 8vw;">
<label class="col-form-label">&nbsp;명</label>
<label for="center_name" class="col-sm-3 col-form-label" style="text-align: right;">포기콜수</label>
<input type="text" class="form-control" id="abn_call" name="abn_call" style="width: 8vw;">
<label class="col-form-label">&nbsp;건</label>
</div>
<label for="obj_name" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10 valign-wrapper">
<label for="center_name" class="col-sm-3 col-form-label" style="text-align: right;">응대율</label>
<input type="text" class="form-control" id="ans_rto" name="ans_rto" style="width: 8vw;">
<label class="col-form-label">&nbsp;%</label>
<label for="center_name" class="col-sm-3 col-form-label" style="text-align: right;">서비스레벨</label>
<input type="text" class="form-control" id="svc_lvl" name="svc_lvl" style="width: 8vw;">
<label class="col-form-label">&nbsp;%</label>
</div>
</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>
</div>
</div>
</form>
<script>
$("#btnSave").click(function(e) {
if($('#selCenter').val() == ""){
alert("센터를 선택해주세요");
return;
}
if($('#selScreen').val() == ""){
alert("화면을 선택해주세요");
return;
}
if($('#id').val() == ""){
alert("장표ID를 입력해주세요");
return;
}
if($('#name').val() == ""){
alert("장표명을 입력해주세요");
return;
}
setData();
if(updateCheck()){
updateInfo();
}else{
insertInfo();
}
});
$("#btnAdd").click(function(e) {
fncPopup();
});
$("#btnRemove").click(function(e) {
});
$("#btnSaveOrder").click(function(e) {
});
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);
//&nbsp;만들 팝업창 좌우 크기의 1/2 만큼 보정값으로 빼주었음
var popupY= (document.body.offsetHeight / 2) - (600 / 2);
//&nbsp;만들 팝업창 상하 크기의 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 updateCheck(){
var updateflag = false;
var id = $('#id').val();
var dataarray = $('#table').bootstrapTable('getData');
for (var i=0; i<dataarray.length; i++){
if(id == dataarray[i].ID){
updateflag = true;
}
}
return updateflag;
}
function updateInfo(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<c:url value='/updateWall_Custom'/>",
data : queryString,
type:"post",
datatype:"json",
success:function(args){
$('#table').bootstrapTable('load', args.list);
alert("저장됐습니다");
},
error : function(x,o,e){
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
alert(msg);
}
});
}
function insertInfo(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<c:url value='/insertWall_Custom'/>",
data : queryString,
type:"post",
datatype:"json",
success:function(args){
$('#table').bootstrapTable('load', args.list);
alert("저장됐습니다");
},
error : function(x,o,e){
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
alert(msg);
}
});
}
function setData(){
$('#center_id').val($('#selCenter').val());
$('#screen_id').val($('#selScreen').val());
}
function resetElements(){
$('#img_id').val("");
$('#img_nm').val("");
$('#img_file_nm').val("");
$('#img_real_nm').val("");
$('#img_path').val("");
$('#selImgType').val("");
$('#custom1').val("");
$("#bg_img").attr("");
}
$(function() {
$('#dbid').val("0");
$('#table').bootstrapTable();
getCenterList();
getScreenList();
getData();
});
//센터 리스트 조회
function getCenterList(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<%=cntx%>/getCenterInfo_Manage",
type:"post",
data : queryString,
datatype:"json",
success:function(args){
var frm1 = document.frm;
for(var i=0; i<args.list.length; i++){
op = new Option();
op.value = args.list[i].CENTER_ID;
op.text = args.list[i].CENTER_NAME;
frm1.selCenter.options.add(op);
}
},
error : function(x,o,e){
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
alert(msg);
}
});
}
//화면 리스트 조회
function getScreenList(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<%=cntx%>/getScreenInfo_Manage",
type:"post",
data : queryString,
datatype:"json",
success:function(args){
var frm1 = document.frm;
for(var i=0; i<args.list.length; i++){
op = new Option();
op.value = args.list[i].ID;
op.text = args.list[i].NAME;
frm1.selScreen.options.add(op);
}
},
error : function(x,o,e){
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
alert(msg);
}
});
}
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%>/wall_selector', '480', '300','no', 'pop_image_' + imgtype);
}
var popupX = (document.body.offsetWidth / 2) - (900 / 2);
//&nbsp;만들 팝업창 좌우 크기의 1/2 만큼 보정값으로 빼주었음
var popupY= (document.body.offsetHeight / 2) - (600 / 2);
//&nbsp;만들 팝업창 상하 크기의 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 getData(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<c:url value='/getWall_Custom'/>",
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);
}
});
}
function getWallList(){
var queryString = $("form[name=frm]").serialize() ;
$.ajax({
url:"<c:url value='/getWallList'/>",
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 onClick이벤트시 유저 데이터 세팅
$('#table').bootstrapTable({
onClickRow: function (row, el, field) {
$('#wall_id').val(row.WALL_ID);
$('#wall_name').val(row.WALL_NAME);
$('#font_color').val(row.FONT_COLOR);
if(row.VIEW_YN == "Y"){
$("input:checkbox[id='view_yn']").prop("checked", true);
}else{
$("input:checkbox[id='view_yn']").prop("checked", false);
}
$('#wall_duration').val(row.WALL_DURATION);
$('#change_effect').val(row.CHANGE_EFFECT);
$('#ready_cust').val(row.READY_CUST);
$('#abn_call').val(row.ABN_CALL);
$('#ans_rto').val(row.ANS_RTO);
$('#svc_lvl').val(row.SVC_LVL);
$('#bg_info').val(row.BG_INFO);
$('#bg_path').val(row.BG_PATH);
$('#bg_real_nm').val(row.BG_REAL_NM);
$('#ci_info').val(row.CI_INFO);
$('#ci_path').val(row.CI_PATH);
$('#ci_real_nm').val(row.CI_REAL_NM);
$('#center_name').val(row.CENTER_NAME);
$('#screen_name').val(row.SCREEN_NAME);
$('#center_id').val(row.CENTER_ID);
$('#screen_id').val(row.SCREEN_ID);
$('#custom1').val(row.CUSTOM1);
$('#custom2').val(row.CUSTOM2);
$("#bg_img").attr("src", "/" + row.BG_PATH + row.BG_REAL_NM+ "");
$("#ci_img").attr("src", "/" + row.CI_PATH + row.CI_REAL_NM+ "");
},
onCheck: function (row, el) {
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink