|
|
@@ -0,0 +1,280 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : MainContentsPopupForm.html
|
|
|
+ * @desc : 메인전시 GNB 카테고리탭 컨텐츠 수정 팝업 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.2.23 bin2107 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+ <div class="modalPopup" data-width="1400" >
|
|
|
+ <div class="panelStyle">
|
|
|
+ <div class="panelTitle">
|
|
|
+ <h2 id="popTitle" th:text="${contentsLoc}"></h2>
|
|
|
+ <button type="button" class="close" onclick="fnMainGnbContentsPopupFormClose()"><i class="fa fa-times"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="panelContent">
|
|
|
+ <ul class="panelBar">
|
|
|
+ <li class="aL">
|
|
|
+ <span class="cBlue">* 상단으로 드래그&드랍하여 순서 변경 가능합니다.d</span>
|
|
|
+ </li>
|
|
|
+ <li class="aR">
|
|
|
+ <button type="button" class="btn btn btn-base btn-sm" onclick="fnAddTab(this);">TAB 컨텐츠 추가</button>
|
|
|
+ <button type="button" class="btn btn btn-dark btn-sm" id="btnPopSave">임시저장</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <form style="height:600px; width:1370px; overflow:auto;" id="gnbTabList">
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ var cateNo = [[${cateNo}]];
|
|
|
+ var contentsLoc = [[${contentsLoc}]];
|
|
|
+ var contentsTitle = [[${contentsTitle}]];
|
|
|
+ var contentsLocArr = gagajf.convertToArray([[${contentsLocList}]]);
|
|
|
+ var tdWidth = $("#sortable").find("td").width();
|
|
|
+ var tdDeleteWidth = parseInt(tdWidth/11, 10);
|
|
|
+ tdWidth = tdWidth - tdDeleteWidth;
|
|
|
+ var cate1List = [[${cate1List}]];
|
|
|
+
|
|
|
+ // 컨텐츠 미리보기 리스트
|
|
|
+ var fnGetContentsPreviewList = function() {
|
|
|
+ $("#gnbTabList").html('');
|
|
|
+ var data = {cateNo : cateNo
|
|
|
+ ,contentsLoc : contentsLoc
|
|
|
+ };
|
|
|
+ var jsonData = JSON.stringify(data);
|
|
|
+ gagajf.ajaxJsonSubmit('/display/contents/preview/list', jsonData, fnCreatePopLayout);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 컨텐츠 추가 날짜 설정
|
|
|
+ var fnCreateTimeOption = function(val, sel) {
|
|
|
+ var html = '';
|
|
|
+ for(var i=0; i<val; i++){
|
|
|
+ var time = 0;
|
|
|
+ if(i<10){
|
|
|
+ time = '0'+i;
|
|
|
+ }else {
|
|
|
+ time = i;
|
|
|
+ }
|
|
|
+ var select = false;
|
|
|
+ if(sel==time){
|
|
|
+ select = true;
|
|
|
+ }
|
|
|
+ if(val==24){
|
|
|
+ time += '시';
|
|
|
+ }else if(val==60){
|
|
|
+ time += '분';
|
|
|
+ }
|
|
|
+ html += '<option value="'+time+'"';
|
|
|
+ if(select){
|
|
|
+ html += 'selected="selected"';
|
|
|
+ }
|
|
|
+ html += '>'+time+'</option>';
|
|
|
+ }
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 창닫기
|
|
|
+ var fnMainGnbContentsPopupFormClose = function (){
|
|
|
+ uifnPopupClose('popupMainGnbContents');
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnChangeCateType = function (obj, idx){
|
|
|
+ let cateType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
|
|
|
+ console.log('cateType>>>'+cateType);
|
|
|
+
|
|
|
+ var html = '';
|
|
|
+ if(cateType=='brand'){
|
|
|
+ $(obj).closest("table").find("[name=tabBrandRow]").show();
|
|
|
+ $(obj).closest("table").find("[name=tabCateRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabOutletRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkRow]").hide();
|
|
|
+ }else if(cateType=='category'){
|
|
|
+ $(obj).closest("table").find("[name=tabBrandRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabCateRow]").show();
|
|
|
+ $(obj).closest("table").find("[name=tabOutletRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkRow]").hide();
|
|
|
+ }else if(cateType=='outlet'){
|
|
|
+ $(obj).closest("table").find("[name=tabBrandRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabCateRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkRow]").hide();
|
|
|
+ }else if(cateType=='link'){
|
|
|
+ $(obj).closest("table").find("[name=tabBrandRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabCateRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabOutletRow]").hide();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkTitleRow]").show();
|
|
|
+ $(obj).closest("table").find("[name=tabLinkRow]").show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 몰메인 카테고리 탭일때
|
|
|
+ */
|
|
|
+ var tabIdx = 0;
|
|
|
+ var fnAddTab = function (param){
|
|
|
+ var html = '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+tabIdx+'">';
|
|
|
+ html += '<colgroup>';
|
|
|
+ html += '<col style="width:10%;"/>';
|
|
|
+ html += '<col style="width:55%;"/>';
|
|
|
+ html += '<col/>';
|
|
|
+ html += '</colgroup>';
|
|
|
+ html += '<thead>';
|
|
|
+ html += fnCateTypeArea();
|
|
|
+ html += '<tr><th>전시일시</th><td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar"/>';
|
|
|
+ html += '<select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
|
|
|
+ html += fnCreateTimeOption(24);
|
|
|
+ html += '</select>';
|
|
|
+ html += '<select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
|
|
|
+ html += fnCreateTimeOption(60);
|
|
|
+ html += '</select>';
|
|
|
+ html += '<span> ~ </span>';
|
|
|
+ html += '<input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar"/>';
|
|
|
+ html += '<select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
|
|
|
+ html += fnCreateTimeOption(24,23);
|
|
|
+ html += '</select>';
|
|
|
+ html += '<select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
|
|
|
+ html += fnCreateTimeOption(60,59);
|
|
|
+ html += '</select>';
|
|
|
+ html += '<input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center"/>';
|
|
|
+ html += '</td>';
|
|
|
+ html += '<td class="aL cateTypeBtnArea">';
|
|
|
+ html += '<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
|
|
|
+ html += '</tr>';
|
|
|
+ html += '</thead>';
|
|
|
+ html += '<tbody>';
|
|
|
+ html += ' <tr name="tabBrandRow" style="display:none;">';
|
|
|
+ html += ' <th>캐주얼<br><button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+tabIdx+'\',1);">브랜드조회</button></th>';
|
|
|
+ html += ' <td colspan="3" id="tabBrand1">';
|
|
|
+ html += ' </td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += ' <tr name="tabBrandRow" style="display:none;">';
|
|
|
+ html += ' <th>골프<br><button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+tabIdx+'\',2);">브랜드조회</button></th>';
|
|
|
+ html += ' <td colspan="3" id="tabBrand2"></td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += ' <tr name="tabBrandRow" style="display:none;">';
|
|
|
+ html += ' <th>키즈<br><button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+tabIdx+'\',3);">브랜드조회</button></th>';
|
|
|
+ html += ' <td colspan="3" id="tabBrand3"></td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += ' <tr name="tabCateRow" style="display:none;">';
|
|
|
+ html += ' <th>카테고리</th>';
|
|
|
+ html += ' <td colspan="3">카테고리선택';
|
|
|
+ html += ' <select name="cate1List">';
|
|
|
+ html += ' <option value="">[선택]</option>';
|
|
|
+ for(let i=0; i<cate1List.length; i++){
|
|
|
+ html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
|
|
|
+ }
|
|
|
+ html += ' </select>';
|
|
|
+ html += ' </td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += ' <tr name="tabLinkTitleRow" style="display:none;">';
|
|
|
+ html += ' <th>타이틀</th>';
|
|
|
+ html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value=""/></td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += ' <tr name="tabLinkRow" style="display:none;">';
|
|
|
+ html += ' <th>링크 (없으면 #)</th>';
|
|
|
+ html += ' <td><input name="link" type="text" maxlength="200" required="required" data-valid-name="링크" value=""/></td>';
|
|
|
+ html += ' </tr>';
|
|
|
+ html += '</tbody>';
|
|
|
+ html += '</table>';
|
|
|
+
|
|
|
+ $("#gnbTabList").prepend(html);
|
|
|
+ $("#gnbTabList").sortable();
|
|
|
+ $('.schDate').datepicker("destroy");
|
|
|
+ $('.schDate').datepicker({
|
|
|
+ changeMonth: true,
|
|
|
+ changeYear: true,
|
|
|
+ defaultDate: $('.schDate').val()
|
|
|
+ });
|
|
|
+ tabIdx++;
|
|
|
+ //fnResetTabIdx();
|
|
|
+ //fnResetCateTypeIdx();
|
|
|
+ }
|
|
|
+
|
|
|
+ var cateTypeIdx = 0;
|
|
|
+ var fnCateTypeArea = function (){
|
|
|
+ var html = '';
|
|
|
+ html += '<tr class="cateTypeTr">';
|
|
|
+ html += '<th>유형선택</th>';
|
|
|
+ html += '<td colspan="3">';
|
|
|
+ html += '<label class="rdoBtn"><input type="radio" name="cateType'+cateTypeIdx+'" value="brand" onclick="fnChangeCateType(this,'+cateTypeIdx+');"/>브랜드</label>';
|
|
|
+ html += '<label class="rdoBtn"><input type="radio" name="cateType'+cateTypeIdx+'" value="category" onclick="fnChangeCateType(this,'+cateTypeIdx+');"/>대카테고리</label>';
|
|
|
+ html += '<label class="rdoBtn"><input type="radio" name="cateType'+cateTypeIdx+'" value="outlet" onclick="fnChangeCateType(this,'+cateTypeIdx+');"/>아울렛</label>';
|
|
|
+ html += '<label class="rdoBtn"><input type="radio" name="cateType'+cateTypeIdx+'" value="link" onclick="fnChangeCateType(this,'+cateTypeIdx+');"/>이벤트링크</label>';
|
|
|
+ html += '</td>';
|
|
|
+ html += '</tr>';
|
|
|
+
|
|
|
+ cateTypeIdx++;
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnResetTabIdx = function (){
|
|
|
+ $(".tabTable").each(function(i){
|
|
|
+ $(this).attr('id','tabTable'+i);
|
|
|
+ $(this).find("input[name=dispOrd]").val(i+1);
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnResetCateTypeIdx = function (){
|
|
|
+ $(".cateTypeTr").each(function(i){
|
|
|
+ $(this).find("input:radio").attr('name','cateType'+i);
|
|
|
+ $(this).find("input:radio").removeAttr("onclick");
|
|
|
+ $(this).find("input:radio").attr("onclick","fnChangeCateType(this,"+i+");");
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var tabTableRow;
|
|
|
+ var callbackBrandTr;
|
|
|
+ var fnSearchBrand = function (idx,brandTr){
|
|
|
+ tabTableRow = idx;
|
|
|
+ callbackBrandTr = brandTr;
|
|
|
+ cfnOpenBrandGroupListPopup("callBackBrandGroup", "S", "S");
|
|
|
+ }
|
|
|
+
|
|
|
+ var callBackBrandGroup = function (result){
|
|
|
+ var html = '';
|
|
|
+
|
|
|
+ for(let i=0; i<result.length; i++){
|
|
|
+ console.log('brandGroupNo:::'+result[i].brandGroupNo);
|
|
|
+ html += '<ul id="brandUl'+i+'">';
|
|
|
+ html += '<span id="brandSpan'+i+'">';
|
|
|
+ html += ' <input type="hidden" name="brandGroupNo" value="'+result[i].brandGroupNo+'"/>'
|
|
|
+ html += ' <span style="margin-right:10px;">'+result[i].brandGroupNo+'<a href="javascript:void(0);" onclick="fnRemoveBrand(this,'+i+');">X</a></span>';
|
|
|
+ html += '</span>';
|
|
|
+ html += '</ul>';
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#tabTable"+tabTableRow +" #tabBrand"+callbackBrandTr).append(html);
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnRemoveBrand = function (obj, idx){
|
|
|
+ var divId = $(obj).closest('ul').attr('id');
|
|
|
+ $("#"+divId+" #brandSpan"+idx).remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 컨텐츠 행삭제
|
|
|
+ var fnDeleteContentsRow = function (obj){
|
|
|
+ $(obj).closest("table").remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ $("#gnbTabList").disableSelection();
|
|
|
+ });
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
bin2107