| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828 |
- <!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="btnGnbTabSave">임시저장</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 brandGroupNo = [[${brandGroupNo}]];
- var contentsTitle = [[${contentsTitle}]];
- var contentsLocArr = gagajf.convertToArray([[${contentsLocList}]]);
- var tdWidth = $("#gnbTabList").find("td").width();
- var tdDeleteWidth = parseInt(tdWidth/11, 10);
- tdWidth = tdWidth - tdDeleteWidth;
- var cate1List = [[${cate1List}]];
- var tableIdx = 0;
- // 컨텐츠 추가 날짜 설정
- 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 addIdx = 0;
- var fnAddTab = function (param){
- addIdx = tableIdx;
- var html = '';
- html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+addIdx+'">';
- html += '<input type="hidden" name="tableIdx" value="'+addIdx+'" data-id="'+addIdx+'" />';
- html += ' <colgroup>';
- html += ' <col style="width:10%;"/>';
- html += ' <col style="width:55%;"/>';
- html += ' <col/>';
- html += ' </colgroup>';
- html += ' <thead>';
- if(contentsLoc=='STAB002'){
- html += '<tr class="cateTypeTr">';
- html += ' <th>유형선택</th>';
- html += ' <td colspan="3">';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="C" onclick="fnChangeCateType(this,'+addIdx+');"/>대카테고리</label>';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="O" onclick="fnChangeCateType(this,'+addIdx+');"/>아울렛</label>';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeCateType(this,'+addIdx+');"/>이벤트링크</label>';
- html += ' </td>';
- html += '</tr>';
- }else if(contentsLoc=='SBM002' || contentsLoc=='SBMM002'){
- html += '<tr class="cateTypeTr">';
- html += ' <th>유형선택</th>';
- html += ' <td colspan="3">';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeGnbType(this,'+addIdx+');" checked="checked"/>이벤트링크</label>';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="B" onclick="fnChangeGnbType(this,'+addIdx+');" />룩북</label>';
- html += ' <label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="P" onclick="fnChangeGnbType(this,'+addIdx+');" />기획전</label>';
- html += ' </td>';
- html += '</tr>';
- }
- html += ' <tr>';
- html += ' <th>전시일시</th>';
- html += ' <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>';
- if(contentsLoc=='STAB001'){
- for(var i=0; i<3; i++){
- html += ' <tr class="groupTr">';
- html += ' <th>GROUP '+(i+1)+'<br><input type="text" name="brandGroup'+addIdx+'" id="bTitle'+(i+1)+'" class="w100" value=""/><br>';
- html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+addIdx+'\',\''+(i+1)+'\');">브랜드조회</button><br></th>';
- html += ' <td colspan="2" name="brandArr'+addIdx+'" id="tabBrand'+(i+1)+'">';
- html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
- html += ' <div class="itemWrap ui-sortable" id="brandListTd'+(i+1)+'" data-id="'+(i+1)+'">';
- html += ' </div>';
- html += ' </div>';
- html += ' </td>';
- html += ' </tr>';
- }
- }else if(contentsLoc=='SBM002'||contentsLoc=='SBMM002'){
- html += ' <tr name="tabLinkTitleRow">';
- html += ' <th>타이틀</th>';
- html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value=""/></td>';
- html += ' </tr>';
- html += ' <tr name="tabLinkRow">';
- html += ' <th>링크 (없으면 #)</th>';
- html += ' <td><input name="link" type="text" maxlength="200" data-valid-name="링크" value=""/></td>';
- html += ' </tr>';
- }else{
- 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" 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()
- });
- if(contentsLoc=='STAB001'){
- $("#brandListTd1").sortable();
- $("#brandListTd2").sortable();
- $("#brandListTd3").sortable();
- }
- fnResetDispOrd();
- tableIdx = tableIdx+1;
- }
- var tabTableRow;
- var callbackBrandTr;
- var fnSearchBrand = function (idx,brandTr){
- tabTableRow = idx;
- callbackBrandTr = brandTr;
- cfnOpenBrandGroupListPopup("callBackBrandGroup", "S", "S");
- }
- // 브랜드 코드, 브랜드 명, 브랜드 이미지 3개 불러와야함 -> 로직 수정 필요
- var brandCdIdx=0;
- var uploadGoodsUrl = [[${@environment.getProperty('domain.image')}]];
- var callBackBrandGroup = function (result) {
- var html = '';
- brandCdIdx = $("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr + " >ul").size()
- for (let i = 0; i < result.length; i++) {
- html += '<ul id="brandUl' + brandCdIdx + '" class="item ui-state-default brandClass" style="min-height:80px;">';
- html += ' <input type="hidden" name="brandGroupNo" value="' + result[i].brandGroupNo + '">';
- html += ' <input type="hidden" name="imgPath1" value="' + result[i].logoFileNm + '">';
- html += ' <li class="img">';
- html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + result[i].logoFileNm + '" onerror="this.src=\'/image/no.png\';"/>';
- html += ' </li>';
- html += ' <li class="cont">';
- html += ' <ul>';
- html += ' <li class="no" name="brandCdLi"><span>' + result[i].brandGroupNo + '</span>';
- html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + brandCdIdx + ');">X</a></span>';
- html += ' </li>';
- html += ' <li class="title">' + result[i].brandGroupNm + '</li>';
- html += ' </ul>';
- html += ' </li>';
- html += '</ul>';
- }
- $("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr).append(html);
- brandCdIdx++;
- }
- var fnRemoveBrand = function (obj , idx){
- var divId = $(obj).closest('div').attr('id');
- $("#"+divId+" #brandUl"+idx).remove();
- //fnReloadGoodsListIdx(divId);
- }
- // 카테고리 유형 선택
- var fnChangeCateType = function (obj, idx){
- let cateType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
- if(cateType=='C'){
- $(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=='O'){
- $(obj).closest("table").find("[name=tabCateRow]").hide();
- $(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
- $(obj).closest("table").find("[name=tabLinkRow]").hide();
- }else if(cateType=='L'){
- $(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 fnMainGnbContentsPopupFormClose = function (){
- uifnPopupClose('popupMainGnbContents');
- }
- // 컨텐츠 행삭제
- var fnDeleteContentsRow = function (obj){
- mcxDialog.confirm('삭제시 전시순서가 초기화됩니다. 삭제하시겠습니까?', {
- cancelBtnText: "취소",
- sureBtnText: "확인",
- sureBtnClick: function(){
- $(obj).closest("table").remove();
- fnResetDispOrd();
- }
- });
- }
- // 전시 일시 체크
- function dateValidation(){
- var dateBool = true;
- $(".tabTable").each(function(i){
- var dispStdt = $(this).find("[name=dispStdt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=stTimeHour]").val().replace('시', '') + "" +$(this).find("[name=stTimeMin]").val().replace('분', '') + "00";
- var dispEddt = $(this).find("[name=dispEddt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=edTimeHour]").val().replace('시', '') + "" +$(this).find("[name=edTimeMin]").val().replace('분', '') + "59";
- let fromDate = dispStdt.replace(/[^0-9]/g, '');
- let toDate = dispEddt.replace(/[^0-9]/g, '');
- if(fromDate > toDate){
- mcxDialog.alert("시작일자는 종료일자 보다 클 수 없습니다.");
- $(this).find('input[name=dispStdt]').focus();
- dateBool = false;
- }
- });
- if(!dateBool){
- return false;
- }else{
- return true;
- }
- }
- /**
- * 임시저장
- */
- var dataArr = [];
- $("#btnGnbTabSave").on('click', function(){
- if(!gagajf.checkRequired("#gnbTabList")){
- return;
- }
- // 전시일시 체크
- if(!dateValidation()){
- return false;
- }
- dataArr = [];
- $("#gnbTabList .tabTable").each(function (){
- var newImgFileArr = [];
- var imgPath1 = '';
- var imgPath2 = '';
- var imgPath3 = '';
- var imgPath4 = '';
- var strVar1 = '';
- var strVar2 = '';
- var strVar3 = '';
- var strVar4 = '';
- var strVar5 = '';
- var strVar6 = '';
- var strVar7 = '';
- var strVar8 = '';
- var strTitle1 = '';
- var strTitle2 = '';
- var strTitle3 = '';
- var strTitle4 = '';
- var subText1 = '';
- var subText2 = '';
- var subText3 = '';
- var subText4 = '';
- var i=1;
- if(contentsLoc=='STAB001'){
- strTitle3 = $(".tabTable").find("input[name=tableIdx]").val();
- console.log('dispStdt::'+$(this).find("input[name=dispStdt]").val());
- var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
- var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';
- $(this).find(".brandClass").each(function (){
- var idx = $(this).closest('div').attr('data-id');
- strTitle1 = $(".groupTr").find("input[id=bTitle"+idx+"]").val();
- var dispOrd = $(this).find("[name=dispOrd]").val();
- strVar1 = $(this).find("input[name=brandGroupNo]").val();
- imgPath1 = $(this).find("input[name=imgPath1]").val();
- strTitle2 = idx;
- var data = {
- cateNo : cateNo
- , contentsLoc : contentsLoc
- , dispStdt : dispStdt
- , dispEddt : dispEddt
- , newImgFileArr : newImgFileArr
- , imgPath1 : imgPath1
- , imgPath2 : imgPath2
- , imgPath3 : imgPath3
- , imgPath4 : imgPath4
- , strVar1 : strVar1
- , strVar2 : strVar2
- , strVar3 : strVar3
- , strVar4 : strVar4
- , strVar5 : strVar5
- , strVar6 : strVar6
- , strVar7 : strVar7
- , strVar8 : strVar8
- , strTitle1 : strTitle1
- , strTitle2 : strTitle2
- , strTitle3 : strTitle3
- , strTitle4 : strTitle4
- , subText1 : subText1
- , subText2 : subText2
- , subText3 : subText3
- , subText4 : subText4
- , useYn : 'Y'
- , dispOrd : dispOrd
- };
- dataArr.push(data);
- });
- }else{
- var gtabGb = '';
- if(contentsLoc=='STAB002'){
- gtabGb = 'C';
- }else{
- gtabGb = 'B';
- }
- var gtabNm = '';
- var cate1No = '';
- var linkUrl = '';
- var radioNm = $(this).find(".rdoBtn input").attr("name");
- var radioValue = $(this).find("input:radio[name="+radioNm+"]:checked").val();
- if(radioValue=='C'){
- var cateText = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").text();
- var cateValue = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").val();
- var cateTextArr = cateText.split(" ");
- gtabNm = cateTextArr[1];
- cate1No = cateValue;
- }
- if(radioValue=='O'){
- gtabNm = "아울렛";
- }
- if(radioValue=='L' || radioValue=='B' || radioValue=='P'){
- gtabNm = $(this).find("input[name=title]").val();
- linkUrl = $(this).find("input[name=link]").val();
- }
- var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
- var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';
- var dispOrd = $(this).find("[name=dispOrd]").val();
- var data = {
- gtabGb : gtabGb
- , gtabNm : gtabNm
- , contentsType : radioValue
- , dispOrd : dispOrd
- , dispStdt : dispStdt
- , dispEddt : dispEddt
- , cate1No : cate1No
- , linkUrl : linkUrl
- , useYn : 'Y'
- , brandGroupNo : brandGroupNo
- }
- dataArr.push(data);
- }
- });
- var jsonData = JSON.stringify(dataArr);
- mcxDialog.confirm('저장하시겠습니까?', {
- cancelBtnText: "취소",
- sureBtnText: "확인",
- sureBtnClick: function(){
- if(contentsLoc=='STAB001'){
- gagajf.ajaxJsonSubmit('/display/contents/preview/save', jsonData, fnGetBrandPreviewList);
- }else{
- gagajf.ajaxJsonSubmit('/display/contents/gnbtab/preview/save', jsonData, fnGetCategoryPreviewList);
- }
- }
- });
- });
- // 브랜드 코드에 해당하는 브랜드 명, 브랜드 이미지 join해서 가져와야함 -> 로직 수정 필요
- var fnGetBrandPreviewList = function (result){
- $("#gnbTabList").html('');
- var data = {cateNo : cateNo
- ,contentsLoc : contentsLoc
- };
- var jsonData = JSON.stringify(data);
- gagajf.ajaxJsonSubmit('/display/contents/gnbtab/brand/preview/list', jsonData, fnCreateBrandLayout);
- }
- var fnCreateBrandLayout = function (result){
- var html = '';
- for(var i=0; i<result.length; i++){
- var g1cdArr;
- var g2cdArr;
- var g3cdArr;
- var g1nmArr;
- var g2nmArr;
- var g3nmArr;
- var g1imgArr;
- var g2imgArr;
- var g3imgArr;
- if(!gagajf.isNull(result[i].group1brandCd)){
- g1cdArr = result[i].group1brandCd.split(",");
- }
- if(!gagajf.isNull(result[i].group2brandCd)){
- g2cdArr = result[i].group2brandCd.split(",");
- }
- if(!gagajf.isNull(result[i].group3brandCd)){
- g3cdArr = result[i].group3brandCd.split(",");
- }
- if(!gagajf.isNull(result[i].group1brandNm)){
- g1nmArr = result[i].group1brandNm.split(",");
- }
- if(!gagajf.isNull(result[i].group2brandNm)){
- g2nmArr = result[i].group2brandNm.split(",");
- }
- if(!gagajf.isNull(result[i].group3brandNm)){
- g3nmArr = result[i].group3brandNm.split(",");
- }
- if(!gagajf.isNull(result[i].group1brandImg)){
- g1imgArr = result[i].group1brandImg.split(",");
- }
- if(!gagajf.isNull(result[i].group2brandImg)){
- g2imgArr = result[i].group2brandImg.split(",");
- }
- if(!gagajf.isNull(result[i].group3brandImg)){
- g3imgArr = result[i].group3brandImg.split(",");
- }
- var dispStdt = result[i].dispStdt.split(" ");
- var dispEddt = result[i].dispEddt.split(" ");
- html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
- html += '<input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'" />';
- html += ' <colgroup>';
- html += ' <col style="width:10%;"/>';
- html += ' <col style="width:55%;"/>';
- html += ' <col/>';
- html += ' </colgroup>';
- html += ' <thead>';
- html += ' <tr>';
- html += ' <th>전시일시</th>';
- html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
- html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
- html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
- html += ' </select>';
- html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
- html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
- 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" value="'+dispEddt[0]+'"/>';
- html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
- html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
- html += ' </select>';
- html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
- html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
- html += ' </select>';
- html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
- 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 class="groupTr">';
- html += ' <th>GROUP1<br><input type="text" name="brandGroup'+i+'" id="bTitle1" class="w100" value="'+result[i].group1Title+'"/><br>';
- html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',1);">브랜드조회</button><br></th>';
- html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand1">';
- html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
- html += ' <div class="itemWrap ui-sortable" id="brandListTd1" data-id="1">';
- for(let k=0; k<g1cdArr.length; k++){
- html += '<ul id="brandUl' + k + '" class="item ui-state-default brandClass" style="min-height:80px;">';
- html += ' <input type="hidden" name="brandGroupNo" value="' + g1cdArr[k] + '">';
- html += ' <li class="img">';
- if(gagajf.isNull(g1imgArr)){
- html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
- }else{
- html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g1imgArr[k] + '" onerror="this.src=\'/image/no.png\';"/>';
- }
- html += ' </li>';
- html += ' <li class="cont">';
- html += ' <ul>';
- html += ' <li class="no" name="brandCdLi"><span>' + g1cdArr[k] + '</span>';
- html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + k + ');">X</a></span>';
- html += ' </li>';
- html += ' <li class="title">' + g1nmArr[k] + '</li>';
- html += ' </ul>';
- html += ' </li>';
- html += '</ul>';
- }
- html += ' </div>';
- html += ' </div>';
- html += ' </td>';
- html += ' </tr>';
- html += ' <tr class="groupTr">';
- html += ' <th>GROUP2<br><input type="text" name="brandGroup'+i+'" id="bTitle2" class="w100" value="'+result[i].group2Title+'"/><br>';
- html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',2);">브랜드조회</button><br></th>';
- html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand2">';
- html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
- html += ' <div class="itemWrap ui-sortable" id="brandListTd2" data-id="2">';
- for(let m=0; m<g2cdArr.length; m++){
- html += '<ul id="brandUl' + m + '" class="item ui-state-default brandClass" style="min-height:80px;">';
- html += ' <input type="hidden" name="brandGroupNo" value="' + g2cdArr[m] + '">';
- html += ' <li class="img">';
- if(gagajf.isNull(g2imgArr)){
- html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
- }else{
- html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g2imgArr[m] + '" onerror="this.src=\'/image/no.png\';"/>';
- }
- html += ' </li>';
- html += ' <li class="cont">';
- html += ' <ul>';
- html += ' <li class="no" name="brandCdLi"><span>' + g2cdArr[m] + '</span>';
- html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + m + ');">X</a></span>';
- html += ' </li>';
- html += ' <li class="title">' + g2nmArr[m] + '</li>';
- html += ' </ul>';
- html += ' </li>';
- html += '</ul>';
- }
- html += ' </div>';
- html += ' </div>';
- html += ' </td>';
- html += ' </tr>';
- html += ' <tr class="groupTr">';
- html += ' <th>GROUP3<br><input type="text" name="brandGroup'+i+'" id="bTitle3" class="w100" value="'+result[i].group3Title+'"/><br>';
- html += ' <button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',3);">브랜드조회</button><br></th>';
- html += ' <td colspan="2" name="brandArr'+i+'" id="tabBrand3">';
- html += ' <div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
- html += ' <div class="itemWrap ui-sortable" id="brandListTd3" data-id="3">';
- for(let n=0; n<g3cdArr.length; n++){
- html += '<ul id="brandUl' + n + '" class="item ui-state-default brandClass" style="min-height:80px;">';
- html += ' <input type="hidden" name="brandGroupNo" value="' + g3cdArr[n] + '">';
- html += ' <li class="img">';
- if(gagajf.isNull(g3imgArr)){
- html += ' <img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
- }else{
- html += ' <img style="height:100%;" src="' + uploadGoodsUrl + "/" + g3imgArr[n] + '" onerror="this.src=\'/image/no.png\';"/>';
- }
- html += ' </li>';
- html += ' <li class="cont">';
- html += ' <ul>';
- html += ' <li class="no" name="brandCdLi"><span>' + g3cdArr[n] + '</span>';
- html += ' <span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + n + ');">X</a></span>';
- html += ' </li>';
- html += ' <li class="title">' + g3nmArr[n] + '</li>';
- html += ' </ul>';
- html += ' </li>';
- html += '</ul>';
- }
- html += ' </div>';
- html += ' </div>';
- html += ' </td>';
- html += ' </tr>';
- html += ' </tbody>';
- html += '</table>';
- }
- $("#gnbTabList").prepend(html);
- $("#gnbTabList").sortable();
- $('.schDate').datepicker("destroy");
- $('.schDate').datepicker({
- changeMonth: true,
- changeYear: true,
- defaultDate: $('.schDate').val()
- });
- if(contentsLoc=='STAB001'){
- $("#brandListTd1").sortable();
- $("#brandListTd2").sortable();
- $("#brandListTd3").sortable();
- }
- tableIdx = tableIdx+1;
- }
- var fnGetCategoryPreviewList = function (result){
- var gtabGb = '';
- if(contentsLoc=='STAB002'){
- gtabGb = 'C';
- }else{
- gtabGb = 'B';
- }
- $("#gnbTabList").html('');
- var data = {
- gtabGb : gtabGb
- ,brandGroupNo : brandGroupNo
- };
- var jsonData = JSON.stringify(data);
- gagajf.ajaxJsonSubmit('/display/contents/gnbtab/category/preview/list', jsonData, fnCreateCategoryLayout);
- }
- var fnCreateCategoryLayout = function (result){
- var html = '';
- for(var i=0; i<result.length; i++){
- var dispStdt = result[i].dispStdt.split(" ");
- var dispEddt = result[i].dispEddt.split(" ");
- var cateNo = result[i].cate1No;
- html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
- html += ' <input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'">';
- html += ' <colgroup>';
- html += ' <col style="width:10%;"/>';
- html += ' <col style="width:55%;"/>';
- html += ' <col/>';
- html += ' </colgroup>';
- html += ' <thead>';
- html += ' <tr class="cateTypeTr">';
- html += ' <th>유형선택</th>';
- html += ' <td colspan="3">';
- if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeGnbType(this,'+i+');"';
- if(result[i].contentsType=='L'){
- html += ' checked="checked" ';
- }
- html += '/>이벤트링크</label>';
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="B" onclick="fnChangeGnbType(this,'+i+');"';
- if(result[i].contentsType=='B'){
- html += ' checked="checked" ';
- }
- html += ' />룩북</label>';
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="P" onclick="fnChangeGnbType(this,'+i+');"';
- if(result[i].contentsType=='P'){
- html += ' checked="checked" ';
- }
- html += ' />기획전</label>';
- }else{
- if(result[i].contentsType=='C'){
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>대카테고리</label>';
- }else{
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');"/>대카테고리</label>';
- }
- if(result[i].contentsType=='O'){
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>아울렛</label>';
- }else{
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');"/>아울렛</label>';
- }
- if(result[i].contentsType=='L'){
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>이벤트링크</label>';
- }else{
- html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');"/>이벤트링크</label>';
- }
- }
- html += ' </td>';
- html += ' </tr>';
- html += ' <tr>';
- html += ' <th>전시일시</th>';
- html += ' <td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
- html += ' <select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
- html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
- html += ' </select>';
- html += ' <select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
- html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
- 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" value="'+dispEddt[0]+'"/>';
- html += ' <select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
- html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
- html += ' </select>';
- html += ' <select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
- html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
- html += ' </select>';
- html += ' <input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
- 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>';
- if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
- html += ' <tr name="tabLinkTitleRow">';
- html += ' <th>타이틀</th>';
- html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
- html += ' </tr>';
- html += ' <tr name="tabLinkRow">';
- html += ' <th>링크 (없으면 #)</th>';
- html += ' <td><input name="link" type="text" maxlength="200" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
- html += ' </tr>';
- }else{
- if(result[i].contentsType=='C'){
- html += ' <tr name="tabCateRow">';
- html += ' <th>카테고리</th>';
- html += ' <td colspan="3">카테고리선택';
- html += ' <select name="cate1List">';
- html += ' <option value="">[선택]</option>';
- for(let i=0; i<cate1List.length; i++){
- if(cateNo == cate1List[i].cd){
- html += '<option value="'+cate1List[i].cd+'" selected="selected">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
- }else{
- html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
- }
- }
- html += ' </select>';
- html += ' </td>';
- html += ' </tr>';
- }else if(result[i].contentsType=='L'){
- html += ' <tr name="tabLinkTitleRow">';
- html += ' <th>타이틀</th>';
- html += ' <td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value="'+result[i].gtabNm+'"/></td>';
- html += ' </tr>';
- html += ' <tr name="tabLinkRow">';
- html += ' <th>링크 (없으면 #)</th>';
- html += ' <td><input name="link" type="text" maxlength="200" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
- html += ' </tr>';
- }
- }
- html += '</tbody>';
- html += '</table>';
- tableIdx = i;
- }
- $("#gnbTabList").append(html);
- $("#gnbTabList").sortable();
- $('.schDate').datepicker("destroy");
- $('.schDate').datepicker({
- changeMonth: true,
- changeYear: true,
- defaultDate: $('.schDate').val()
- });
- tableIdx = tableIdx+1;
- }
- var fnChangeGnbType = function (obj, idx){
- let chkType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
- if(chkType=='L'){
- $("#tabTable"+idx).find("input[name=link]").val('');
- }else if(chkType=='B'){
- $("#tabTable"+idx).find("input[name=link]").val('/display/lookbook/main/form?brandGroupNo='+brandGroupNo);
- }else{
- $("#tabTable"+idx).find("input[name=link]").val('/planning/main/form?brandGroupNo='+brandGroupNo);
- }
- }
- var fnResetDispOrd = function (){
- $('.tabTable').each(function (idx){
- $(this).find('input[name=dispOrd]').val(idx+1);
- });
- }
- $(document).ready(function() {
- $("#gnbTabList").disableSelection();
- $("#gnbTabList").sortable({
- stop: function(event, ui) {
- //fnResetTabIdx();
- fnResetDispOrd();
- }
- });
- if(contentsLoc=='STAB001'){
- fnGetBrandPreviewList();
- }else{
- fnGetCategoryPreviewList();
- }
- });
- /*]]>*/
- </script>
- </html>
|