style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : SearchKeywordForm.html
 * @desc    : 검색키워드관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.07.01   bin2107     최초 작성
  *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- 검색조건 영역 -->
		<div class="panelStyle">
			<!-- TITLE -->
			<div class="panelTitle">
<!--				<h3><i class="fa fa-info-circle"></i>아래 검색조건 중 하나를 꼭 입력해 주세요.</h3>-->
			</div>
			<!-- //TITLE -->
			<div class="panelContent">
			
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/display/search/keyword/list'}">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>등록일</th>
						<td colspan="3" id="sellTerms">
						</td>
					</tr>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-default btn-lg" id="btnInit">초기화</button>
						<button type="button" class="btn btn-success btn-lg" id="btnSearch">조회</button>
					</li>
				</ul>
			</form>
			</div>
		</div>
		<!-- //검색조건 영역 -->
		
		<!-- 리스트 영역 -->
		<div class="panelStyle">
			<div id="gridList" style="width: 100%; height: 450px;" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->
		<!-- 등록/수정 -->
		<div class="panelStyle">
			<form id="detailForm" name="detailForm" action="#" >
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<td colspan='6'>키워드등록(상세)</td>
					</tr>
					<tr>
						<th>키워드번호</th>
						<td>
							<input type="text" class="w100" name="keywordSq" maxlength="20" placeholder="자동부여" readonly="readonly"/>
						</td>
						<th>키워드<em class="required" title="필수"></em></th>
						<td>
							<input type="text" class="w150" name="keyword" maxlength="20" required="required" data-valid-name="키워드"/>
						</td>
						<th>링크URL<em class="required" title="필수"></em></th>
						<td>
							<input type="text" class="w150" name="linkUrl" maxlength="100" required="required" data-valid-name="링크URL"/>
						</td>
					</tr>
					<tr>
						<th>기간<i class="required" title="필수"></i></th>
						<td colspan="3">
							<input type="text" class="schDate w100" name="dispStdt" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							~
							<input type="text" class="schDate w100" name="dispEddt" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
						</td>
					</tr>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
						<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
					</li>
				</ul>
			</form>
		</div>
	</div>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.kollus.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	var videoGbList = {'Y':'유투브', 'M':'MP4'};
	// specify the columns
	var columnDefs = [
		{headerName: 'No', width: 60, cellClass: 'text-center', valueGetter: function(params) { return params.node.rowIndex + 1 }},
		{headerName: "키워드번호", field: "keywordSq", width: 150, cellClass: 'text-center'},
		{headerName: "키워드", field: "keyword", width: 300, cellClass: 'text-center',
			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{headerName: "링크URL", field: "linkUrl", width: 300, cellClass: 'text-center'},
		{headerName: "시작일", field: "dispStdt", width:150, cellClass: 'text-center',
			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
		},
		{headerName: "종료일", field: "dispEddt", width:150, cellClass: 'text-center',
			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
		},
		{headerName: "등록자", field: "regNm", width:90, cellClass: 'text-center'},
		{headerName: "등록일자", field: "regDt", width:150, cellClass: 'text-center',
			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
		},
		{headerName: "수정자", field: "updNm", width:90, cellClass: 'text-center'},
		{headerName: "수정일자", field: "updDt", width:150, cellClass: 'text-center',
			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
		}
	];
	
	// Get GridOptions
	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
	
	gridOptions.rowSelection = 'multiple';
	gridOptions.suppressRowClickSelection = true;
	
	// 상품코드 셀 클릭
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field == "keyword"){
			var formId = '#detailForm';
			$(formId + " input[name=keywordSq]").val(event.data.keywordSq);
			$(formId + " input[name=keyword]").val(event.data.keyword);
			$(formId + " input[name=linkUrl]").val(event.data.linkUrl);
			var dispStdt = event.data.dispStdt.replaceAll('-','');
			$(formId + " input[name=dispStdt]").val(dispStdt.substr(0,4)+"-"+dispStdt.substr(4,2)+"-"+dispStdt.substr(6,2));
			var dispEddt = event.data.dispEddt.replaceAll('-','');
			$(formId + " input[name=dispEddt]").val(dispEddt.substr(0,4)+"-"+dispEddt.substr(4,2)+"-"+dispEddt.substr(6,2));
		}
		fnUnEscapeHtml();	//XSS변환
	}
	
	// 신규 버튼 클릭
	$("#btnNew").on('click', function() {
		$("#detailForm")[0].reset();
		$("#detailForm input[name=videoSq]").val('');
		$("#detailForm input[name=goodsCd]").prop("disabled", false);
		$("#detailForm select[name=videoGb]").prop("disabled", false);
		$('#youtubeArea').show();
		$('#fileArea').hide();
	});
	
	// 조회
	$('#btnSearch').on('click', function() {
		if(!fnConditionCheck()) return;

		$('#searchForm').find('input[name=stDate]').val($('#searchForm').find('input[name=stDate]').val().replaceAll('-',''));
		$('#searchForm').find('input[name=edDate]').val($('#searchForm').find('input[name=edDate]').val().replaceAll('-',''));

		// Fetch data
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm',fnChangeGrid);
		$("#btnNew").click();
	});
	
	//검색 조건 확인
	var fnConditionCheck = function(){
		var form = document.searchForm;

		// var searchFlag = false;
		// var cnt = 0;
		//
		// for (i = 0; i < form.elements.length; i++ ) {
		// 	var el = form.elements[i];
		//
		// 	if ($(el).prop("type") == "text" || ($(el).prop("type") == "select-one" && el.name != "search" && el.name != "pageSize" && el.name != "keyWord")) {
		// 		if (!(el.value == null || el.value == "")) {
		// 			cnt++;
		// 		}
		// 	}
		// }
		// if(cnt > 0) searchFlag = true;
		//
		//
		// if(searchFlag == false){
		// 	mcxDialog.alert("검색조건을 입력하세요.");
		// 	return false;
		// }
		
		// 기간 값 체크
		if (!fnCalendarDateValidation('#sellTerms', 'stDate', 'edDate')){
			return false;
		}

		return true;
	}
	
	// 검색조건 초기화
	$('#btnInit').on('click', function() {
		$("#searchForm")[0].reset();
	});
	
	// 동영상 저장
	$("#btnSave").on('click', function() {
		
		var formId = '#detailForm';
		var keywordSq = $(formId + " input[name=keywordSq]").val();
		var keyword = $(formId + " input[name=keyword]").val();
		var linkUrl = $(formId + " input[name=linkUrl]").val();

		// 날짜 체크
		if (gagajf.isNull($('#detailForm input[name=dispStdt]').val())) {
			mcxDialog.alertC('시작일자를 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#detailForm input[name=dispStdt]').focus();
				}
			});
			return;
		}

		if (gagajf.isNull($('#detailForm input[name=dispEddt]').val())) {
			mcxDialog.alertC('종료일자를 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#detailForm input[name=dispEddt]').focus();
				}
			});
			return;
		}
		var stDate = $('#detailForm input[name=dispStdt]').val().replaceAll('-','');
		var edDate = $('#detailForm input[name=dispEddt]').val().replaceAll('-','');

		if (stDate > edDate) {
			mcxDialog.alert("기간 종료일자는 시작일자 보다 클 수 없습니다.");
			return;
		}

		// validation
		if (!gagajf.validation('#detailForm'))
			return false;
		
		mcxDialog.confirm('저장 하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = { keywordSq : keywordSq
							,keyword : keyword
							,linkUrl : linkUrl
							,dispStdt : stDate
							,dispEddt : edDate
							};
				var jsonData = JSON.stringify(data);
				console.log(data);
				console.log(jsonData);
				gagajf.ajaxJsonSubmit('/display/search/keyword/save', jsonData, fnSaveCallback);
			}
		})
	});
	
	var fnSaveCallback = function() {
		$('#btnSearch').click();
	}
	
	// 동영상파일 선택 시
	$('#detailForm input[name=file]').on('change', function() {
		var file = this.files[0];
		gagaKollus.upload('Goods', file, $('input[name=kufKey]'));
	});
	
	var fnUnEscapeHtml = function(){	//XSS변환
		$('#detailForm input[name=keyword]').val($('#detailForm input[name=keyword]').val().replaceXSS());
		$('#detailForm input[name=linkUrl]').val($('#detailForm input[name=linkUrl]').val().replaceXSS());
	};
	
	var fnChangeGrid = function(){	//XSS 그리드 내 변환
		var data = gagaAgGrid.getAllRowData(gridOptions);
		
		let modifyList = [];
		$.each(data, function(idx, item) {
			let keyword = item.keyword;
			let linkUrl = item.linkUrl;
			
			item.keyword = keyword.replaceXSS();
			item.linkUrl = linkUrl.replaceXSS();
			
			modifyList.push(item);
		});
		gridOptions.api.setRowData(modifyList);
	};
	
	$(document).ready(function() {
		
		cfnCreateCalendar('#sellTerms', 'stDate', 'edDate', true, '등록일', true);
		
		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);
		
		//$('#btnSearch').click();
	});
/*]]>*/
</script>

</html>