From 2b36279807d48052cf34b0c32396e2e43a4a1564 Mon Sep 17 00:00:00 2001 From: Paul Kim Date: Fri, 15 Mar 2024 22:37:30 +0900 Subject: [PATCH] issue #11 Done shooping cart on amenity category item selection. --- .../application/lib/hoteltv.ui_appfull.js | 308 ++++++++++++------ .../theme/HJS00001/hoteltv.app.full.popup.css | 64 +++- 2 files changed, 256 insertions(+), 116 deletions(-) diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 9766bff..3c99341 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -622,10 +622,16 @@ HotelTV.ui_appfull = (function() { } } + + + + /** * HotelTV UI[AppFull] Wrapper Function::> Draw amenity item selection cart ui + * @param {string} _action + * @param {function} _cbFxnExit */ - function __uifxn_AppFull_DrawAmItemSeletionCart(_action) { + function __uifxn_AppFull_DrawAmItemSeletionCart(_action, _cbFxnExit) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; let _opening = HotelTV.opening; @@ -633,6 +639,7 @@ HotelTV.ui_appfull = (function() { let _order = HotelTV.orders.amenity; let _aminfo_top = _opening.amenity; let _aminfo_ctgy = _aminfo_top.menu; + let _aminfo_item = null; let _elAmPupRoot = $('.popup .amenity'); let _elAmCtgyBg = _elAmPupRoot.children('.bg').find('#lst_ctgbg'); let _elAmCtgyBgFocus = _elAmCtgyBg.find('.owl-item.active.center'); @@ -643,9 +650,12 @@ HotelTV.ui_appfull = (function() { let __status_am_specific = null; - const __ifxn_estimateAmCartAmount = function(_item_idx) { - + /** + * order/add to cart/back중 포커스 된 버턴의 ID를 반환 + */ + const __ifxn_getFocusedBtnID = function() { + return _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id'); } @@ -662,56 +672,63 @@ HotelTV.ui_appfull = (function() { const __ifxn_updateAmCartRecTable = function() { try{ - let _elAmCtgyBgMenuItemCartLstRecTbl = _elAmCtgyBgMenuItemCartWinRight.children('.cart_table').find('.tbl_record'); - - if ( _elAmCtgyBgMenuItemCartLstRecTbl.length ) - { - // Remove all record under tbl_record - _elAmCtgyBgMenuItemCartLstRecTbl.children().remove(); - - // { - // let _elTBody_ItmesRec = document.createElement('tbody'); - // _elTBody_ItmesRec.setAttribute("id", "record"); - // for (let _j = 1; _j <= _objAm_ctgyItem.length; _j++) { - // let _objChkAvail=null; - // let _objItem = _objAm_ctgyItem[_j]; - - // var _elTr_ItmesRec = document.createElement('tr'); - // var _elDiv_ItmesRec = document.createElement('div'); - // _elDiv_ItmesRec.className = "cartItem"; - // var _elDiv_ItmesRecName = document.createElement('div'); - // _elDiv_ItmesRecName.setAttribute("id", "title"); - // _elDiv_ItmesRecName.textContent = _objItem.title[_state.lang]; - // _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecName); - - // var _elDiv_ItmesRecPrice = document.createElement('div'); - // _elDiv_ItmesRecPrice.setAttribute("id", "quantity"); - // _elDiv_ItmesRecPrice.textContent = _objItem.quantity[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang]; - // _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecPrice); - - - // var _elDiv_ItmesRecStatus = document.createElement('div'); - // _elDiv_ItmesRecStatus.setAttribute("id", "amount"); - - // _objChkAvail = __uifxn_Utils_CheckAmItemAvailable(_objItem.schedule); - // if(_objChkAvail.result==true){ - // _elDiv_ItmesRecStatus.textContent = _trTbl.ui.amenity.title.orderable[_state.lang]; - // }else{ - // _elDiv_ItmesRec.classList.add("unavailable"); - // if ( _objChkAvail.avail_dtime=="unorderable" ){ - // _elDiv_ItmesRecStatus.textContent = _trTbl.ui.amenity.title.unorderable[_state.lang]; - // }else{ - // _elDiv_ItmesRecStatus.textContent = _objChkAvail.avail_dtime; - // } - // } - // _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecStatus); - // _elTr_ItmesRec.appendChild(_elDiv_ItmesRec); - // _elTBody_ItmesRec.appendChild(_elTr_ItmesRec); - // } - // _elAmCtgyBgMenuItemCartLstRecTbl.appendChild(_elTBody_ItmesRec); - // } + const __ifxn_getValidCartItemCount = function(_cartObj) { + let ___validCnt = 0; + for (let _j = 1; _j <= _cartObj.items.length; _j++) { + if ( _cartObj.items[_j].id ){ + ___validCnt++; + } + } + return ___validCnt; } + + let _elAmCtgyBgMenuItemCartLstRecTbl = _elAmCtgyBgMenuItemCartWinRight.children('.cart_table').find('.tbl_record'); + + if ( _elAmCtgyBgMenuItemCartLstRecTbl.length ){ + // Remove all record under tbl_record + _elAmCtgyBgMenuItemCartLstRecTbl.children().remove(); + } + + if ( __ifxn_getValidCartItemCount(_carts)==0 ){ + // 카트에 유효한 아이템이 없음. 테이블 그릴필요 없음. + return ; + } + + // 카트 리스트 구성 + if ( _carts.items.length>0 ) + { + let _elTBody_ItmesRec = document.createElement('tbody'); + _elTBody_ItmesRec.setAttribute("id", "record"); + for (let _j = 1; _j <= _carts.items.length; _j++) { + let _objCartItem = _carts.items[_j]; + if ( _objCartItem.id==null ){ + continue; + } + + var _elTr_CartItmesRec = document.createElement('tr'); + var _elDiv_CartItmesRec = document.createElement('div'); + _elDiv_CartItmesRec.className = "cartItem"; + var _elDiv_CartItmesRecName = document.createElement('div'); + _elDiv_CartItmesRecName.setAttribute("id", "title"); + _elDiv_CartItmesRecName.textContent = _objCartItem.title[_state.lang]; + _elDiv_CartItmesRec.appendChild(_elDiv_CartItmesRecName); + + var _elDiv_CartItmesRecQuantity = document.createElement('div'); + _elDiv_CartItmesRecQuantity.setAttribute("id", "quantity"); + _elDiv_CartItmesRecQuantity.textContent = _objCartItem.quantity; + _elDiv_CartItmesRec.appendChild(_elDiv_CartItmesRecQuantity); + + var _elDiv_CartItmesRecPrice = document.createElement('div'); + _elDiv_CartItmesRecPrice.setAttribute("id", "amount"); + _elDiv_CartItmesRecPrice.textContent = _objCartItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang]; + _elDiv_CartItmesRec.appendChild(_elDiv_CartItmesRecPrice); + + _elTr_CartItmesRec.appendChild(_elDiv_CartItmesRec); + _elTBody_ItmesRec.appendChild(_elTr_CartItmesRec); + } + _elAmCtgyBgMenuItemCartLstRecTbl.append(_elTBody_ItmesRec); + } } catch ( _err ){ console.log(`Fail to update::> ${_err}`); } @@ -726,7 +743,6 @@ HotelTV.ui_appfull = (function() { let __api_resp_stock = null; let __selected_item_amount_quantity = 0; let __selected_item_amount_subTotal = 0; - let __item_info = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[_item_idx+1]; let _elDiv_QuntCtrlFrmQuantityValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_quantity'); let _elDiv_QuntCtrlFrmAmountValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_amount'); @@ -776,28 +792,31 @@ HotelTV.ui_appfull = (function() { // i) 현재 카트내에 해당 item id에 해당하는 개수르 구함. // ii) stock API로 총 비용을 산정 if ( _action=="build" ){ - __selected_item_amount_quantity = ___ifxn_getCartItemQuantity(_carts.items, __item_info.id); - __status_am_specific.stock[__item_info.id] = {"req_quantity": __selected_item_amount_quantity}; - ___ifxn_updateSubTotalAmount(__item_info.id, __selected_item_amount_quantity); + __selected_item_amount_quantity = ___ifxn_getCartItemQuantity(_carts.items, _aminfo_item.id); + __status_am_specific.stock[_aminfo_item.id] = {"req_quantity": __selected_item_amount_quantity}; + ___ifxn_updateSubTotalAmount(_aminfo_item.id, __selected_item_amount_quantity); } else if ( _action=="plus" ){ - __status_am_specific.stock[__item_info.id].req_quantity += 1; - ___ifxn_updateSubTotalAmount(__item_info.id, __status_am_specific.stock[__item_info.id].req_quantity); + __status_am_specific.stock[_aminfo_item.id].req_quantity += 1; + ___ifxn_updateSubTotalAmount(_aminfo_item.id, __status_am_specific.stock[_aminfo_item.id].req_quantity); } else if ( _action=="minus" ){ - if ( __status_am_specific.stock[__item_info.id].req_quantity>1 ){ - __status_am_specific.stock[__item_info.id].req_quantity -= 1; - ___ifxn_updateSubTotalAmount(__item_info.id, __status_am_specific.stock[__item_info.id].req_quantity); + if ( __status_am_specific.stock[_aminfo_item.id].req_quantity>1 ){ + __status_am_specific.stock[_aminfo_item.id].req_quantity -= 1; + ___ifxn_updateSubTotalAmount(_aminfo_item.id, __status_am_specific.stock[_aminfo_item.id].req_quantity); } } // 개수 및 금액 출력 if ( _elDiv_QuntCtrlFrmQuantityValue.length ){ - _elDiv_QuntCtrlFrmQuantityValue.text(__status_am_specific.stock[__item_info.id].req_quantity); + _elDiv_QuntCtrlFrmQuantityValue.text(__status_am_specific.stock[_aminfo_item.id].req_quantity); } } + /** + * 어메니티 수량 선택 및 카트 윈도우 빌드업 + * @param {number} _item_idx + */ const __ifxn_buildAmSelectedItemCartWin = function(_item_idx) { let _sz_styleOpt = null; - let __item_info = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[_item_idx+1]; const __iCbfxn_buildAmSelectedItemWin = function() { // 상품 상세 설명페이지 구성 @@ -814,7 +833,7 @@ HotelTV.ui_appfull = (function() { //// Quantity control Frame var _elDiv_QuntCtrlFrm = document.createElement('div'); _elDiv_QuntCtrlFrm.className = "control"; - _elDiv_QuntCtrlFrm.innerHTML = `
`; + _elDiv_QuntCtrlFrm.innerHTML = `
`; var _elDiv_QuntCtrlFrmQuantity = document.createElement('div'); _elDiv_QuntCtrlFrmQuantity.className = "quantity"; _elDiv_QuntCtrlFrmQuantity.innerHTML = `
${_trTbl.ui.amenity.title.quantity[_state.lang].toUpperCase()}
`; @@ -827,14 +846,14 @@ HotelTV.ui_appfull = (function() { //// Item description var _elDiv_QuntItemDesc = document.createElement('div'); _elDiv_QuntItemDesc.className = "description"; - _elDiv_QuntItemDesc.innerHTML = `
${__item_info.title[_state.lang]}
${__item_info.description[_state.lang]}
`; + _elDiv_QuntItemDesc.innerHTML = `
${_aminfo_item.title[_state.lang]}
${_aminfo_item.description[_state.lang]}
`; _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntItemDesc); //// Buttons var _elDiv_QuntBtnFrm = document.createElement('div'); _elDiv_QuntBtnFrm.className = "buttons"; - _elDiv_QuntBtnFrm.innerHTML = `
${_trTbl.ui.amenity.title.add_to_cart[_state.lang].toUpperCase()}
`; - _elDiv_QuntBtnFrm.innerHTML += `
${_trTbl.ui.amenity.title.order_now[_state.lang].toUpperCase()}
`; + _elDiv_QuntBtnFrm.innerHTML = `
${_trTbl.ui.amenity.title.order_now[_state.lang].toUpperCase()}
`; + _elDiv_QuntBtnFrm.innerHTML += `
${_trTbl.ui.amenity.title.add_to_cart[_state.lang].toUpperCase()}
`; _elDiv_QuntBtnFrm.innerHTML += `
${_trTbl.ui.amenity.title.back[_state.lang].toUpperCase()}
`; _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntBtnFrm); } @@ -862,18 +881,18 @@ HotelTV.ui_appfull = (function() { var _elTr_ItmesHdr = document.createElement('tr'); var _elTh_ItmesHdr_Title = document.createElement('th'); _elTh_ItmesHdr_Title.setAttribute("id", "title"); - _elTh_ItmesHdr_Title.textContent = _trTbl.ui.amenity.title.item[_state.lang]; + _elTh_ItmesHdr_Title.textContent = _trTbl.ui.amenity.title.item[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Title); var _elTh_ItmesHdr_Amount = document.createElement('th'); _elTh_ItmesHdr_Amount.setAttribute("id", "quantity"); - _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.amenity.title.quantity[_state.lang]; + _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.amenity.title.quantity[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Amount); var _elTh_ItmesHdr_Status = document.createElement('th'); _elTh_ItmesHdr_Status.setAttribute("id", "amount"); //toUppderCase() - _elTh_ItmesHdr_Status.textContent = _trTbl.ui.amenity.title.amount[_state.lang]; + _elTh_ItmesHdr_Status.textContent = _trTbl.ui.amenity.title.amount[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); @@ -885,12 +904,12 @@ HotelTV.ui_appfull = (function() { var _elTbl_ItemsRec = document.createElement('table'); _elTbl_ItemsRec.className = "tbl_record"; _elDiv_CartWinTable.appendChild(_elTbl_ItemsRec); - - //////// update cart table record - __ifxn_updateAmCartRecTable(); } _elAmCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinTable); + //////// update cart table record + __ifxn_updateAmCartRecTable(); + //// Quantity Window Title @@ -901,17 +920,20 @@ HotelTV.ui_appfull = (function() { } } + // 카테고리매뉴윈도우 hide -> 아이템선택 윈도우 빌드 -> 아이탬선택 윈도우 show -> 버튼 포커스(back) _elAmCtgyBgMenuItemWin.fadeOut(200, function() { __iCbfxn_buildAmSelectedItemWin(); _elAmCtgyBgMenuItemCartWin.fadeIn(500, function() { _elAmCtgyBgMenuItemCartWinLeft.find('#btn_back').addClass('focus'); __ifxn_updateAmSelectedItemCartWin(_item_idx, "build"); + + // 통계 이벤트 송출 HotelTV.api.ReportEvent([ { 'power': true, 'location':{ // TODO: 통계 데이터 파라미터 확인해 - 'conId':__item_info.id + 'conId':_aminfo_item.id } }], "indirect"); }); @@ -931,14 +953,47 @@ HotelTV.ui_appfull = (function() { } + const __ifxn_processAmAddtoCart = async function(_item_idx, _new_quantity, _cbFxn_Success, _cbFxn_Failure) { + try { + console.log("_item_idx:" + _item_idx); + console.log("_new_quantity:" + _new_quantity); + + // let _result = await HotelTV.api.PutAmenityCarts(_item_idx, _new_quantity); + // if (_result) { + // if (_cbFxn_Success) { + // _cbFxn_Success(); + // } + // } else { + // if (_cbFxn_Failure) { + // _cbFxn_Failure(); + // } + // } + } catch ( _err ){ + console.log(`Fail to call API::> ${_err}`); + } + } + + try{ + let _objChkAvail=null; + let _str_curBtnID = null; // 어메니티 정보 오브젝트 - _aminfo_top = _opening.amenity; - _aminfo_ctgy = _aminfo_top.menu; __status_am_specific = _state.hotkey.mm[_aminfo_top.button].status; let __amctgyIdx = __status_am_specific.category_sel.cur; let __amctgyItemStatus = __status_am_specific.items[_aminfo_ctgy[__amctgyIdx].name]; + // 선택된 어메니티 아이템 정보 매핑 + _aminfo_item = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[__amctgyItemStatus.idx+1]; + + _objChkAvail = __uifxn_Utils_CheckAmItemAvailable(_aminfo_item.schedule); + if(_objChkAvail.result==false){ + return false; + } + + if ( ["left","right","enter"].includes(_action) ){ + _str_curBtnID = __ifxn_getFocusedBtnID(); + } + switch ( _action ) { case "cart": { @@ -946,22 +1001,20 @@ HotelTV.ui_appfull = (function() { } break; case "left": { - let _str_curBtnID = _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id'); if ( _str_curBtnID=='btn_back' ){ - _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); - _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); - } else if ( _str_curBtnID=='btn_ordernow' ){ _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus'); + } else if ( _str_curBtnID=='btn_addtocart' ){ + _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); } } break; case "right": { - let _str_curBtnID = _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id'); - if ( _str_curBtnID=='btn_addtocart' ){ + if ( _str_curBtnID=='btn_ordernow' ){ _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); - _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); - } else if ( _str_curBtnID=='btn_ordernow' ){ + _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus'); + } else if ( _str_curBtnID=='btn_addtocart' ){ _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_back').addClass('focus'); } @@ -975,13 +1028,41 @@ HotelTV.ui_appfull = (function() { __ifxn_updateAmSelectedItemCartWin(__amctgyItemStatus.idx, "minus"); } break; + case "enter": { + if ( _str_curBtnID=='btn_ordernow' ){ + console.log("TODO::>> ORDERING NOW..."); + } else if ( _str_curBtnID=='btn_addtocart' ){ + //console.log("TODO::>> ADD TO CART NOW..."); + __ifxn_processAmAddtoCart( + __amctgyItemStatus.idx, + __status_am_specific.stock[_aminfo_item.id].req_quantity, + function() { + + }, + function() { + + } + ); + } else if ( _str_curBtnID=='btn_back' ){ + __ifxn_removeAmSelectedItemCartWin(); + if ( _cbFxnExit ){ + _cbFxnExit(); + } + } + } break; + case "return": { __ifxn_removeAmSelectedItemCartWin(); + if ( _cbFxnExit ){ + _cbFxnExit(); + } } break; } + return true; }catch(_err){ console.log(`Fail to draw::> ${_err}`); + return false; } } @@ -1002,7 +1083,7 @@ HotelTV.ui_appfull = (function() { let __status_am_specific = null; - const __ifxn_updateAmItemDesc = function(_item_idx) { + const __ifxn_updateAmItemDesc = function(_item_idx,_cbFxn) { let _sz_styleOpt = null; let __item_info = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[_item_idx+1]; // Remove All element under winright div @@ -1046,6 +1127,7 @@ HotelTV.ui_appfull = (function() { } __iCbfxn_updateAmItemDesc(); _elDivWinRight.fadeIn(500, function() { + if ( _cbFxn ){ _cbFxn(); } }); }); }else{ @@ -1055,6 +1137,7 @@ HotelTV.ui_appfull = (function() { __iCbfxn_updateAmItemDesc(); _elDivWinRight.fadeIn(500, function() { + if ( _cbFxn ){ _cbFxn(); } }); } } @@ -1093,6 +1176,7 @@ HotelTV.ui_appfull = (function() { } break; case "up": { + let _isNeedSoldOutMask = false; let _elTbl_AmItem = _elAmCtgyBgMenuItemWin.find('.tbl_record'); let _elTblTr_AmItemNext = _elTbl_AmItem.find('.focus').parent().prev('tr'); @@ -1100,6 +1184,10 @@ HotelTV.ui_appfull = (function() { _elTbl_AmItem.find('.focus').removeClass("focus"); _elTblTr_AmItemNext.children('.amctgyItem').addClass('focus'); + if ( _elTblTr_AmItemNext.children('.amctgyItem.unavailable').length ){ + _isNeedSoldOutMask = true; + } + // 테이블 ROW인덱스와 스크롤 OFFSET계산 __amctgyItemStatus.idx = _elTblTr_AmItemNext.prop('rowIndex'); //__amctgyItemStatus.scroll_TOfset = __amctgyItemStatus.idx*_elTblTr_AmItemNext.prop('scrollHeight'); @@ -1108,18 +1196,29 @@ HotelTV.ui_appfull = (function() { //스크롤 에니메이션 수행 _elTbl_AmItem.children('#record').animate({ scrollTop: __amctgyItemStatus.scroll_TOfset }, 200); - __ifxn_updateAmItemDesc(__amctgyItemStatus.idx); + __ifxn_updateAmItemDesc(__amctgyItemStatus.idx, function() { + if ( _isNeedSoldOutMask==true ){ + _elAmCtgyBgMenuItemWin.find('.winright').find('.amItemDescThumb').addClass('unavailable'); + }else { + _elAmCtgyBgMenuItemWin.find('.winright').find('.amItemDescThumb').removeClass('unavailable'); + } + }); } } break; case "down": { let _elTbl_AmItem = _elAmCtgyBgMenuItemWin.find('.tbl_record'); let _elTblTr_AmItemNext = _elTbl_AmItem.find('.focus').parent().next('tr'); + let _isNeedSoldOutMask = false; if (_elTblTr_AmItemNext.length) { _elTbl_AmItem.find('.focus').removeClass("focus"); _elTblTr_AmItemNext.children('.amctgyItem').addClass('focus'); + if ( _elTblTr_AmItemNext.children('.amctgyItem.unavailable').length ){ + _isNeedSoldOutMask = true; + } + // 테이블 ROW인덱스와 스크롤 OFFSET계산 __amctgyItemStatus.idx = _elTblTr_AmItemNext.prop('rowIndex'); //__amctgyItemStatus.scroll_TOfset = __amctgyItemStatus.idx*_elTblTr_AmItemNext.prop('scrollHeight'); @@ -1128,17 +1227,15 @@ HotelTV.ui_appfull = (function() { //스크롤 에니메이션 수행 _elTbl_AmItem.children('#record').animate({ scrollTop: __amctgyItemStatus.scroll_TOfset }, 200); - __ifxn_updateAmItemDesc(__amctgyItemStatus.idx); + __ifxn_updateAmItemDesc(__amctgyItemStatus.idx, function() { + if ( _isNeedSoldOutMask==true ){ + _elAmCtgyBgMenuItemWin.find('.winright').find('.amItemDescThumb').addClass('unavailable'); + }else { + _elAmCtgyBgMenuItemWin.find('.winright').find('.amItemDescThumb').removeClass('unavailable'); + } + }); } } break; - - case "plus": { - - } break; - - case "minus": { - - } break; } } catch (_err){ console.log(`Fail to draw::> ${_err}`); @@ -1278,17 +1375,17 @@ HotelTV.ui_appfull = (function() { var _elTr_ItmesHdr = document.createElement('tr'); var _elTh_ItmesHdr_Title = document.createElement('th'); _elTh_ItmesHdr_Title.setAttribute("id", "title"); - _elTh_ItmesHdr_Title.textContent = _trTbl.ui.amenity.title.item[_state.lang]; + _elTh_ItmesHdr_Title.textContent = _trTbl.ui.amenity.title.item[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Title); var _elTh_ItmesHdr_Amount = document.createElement('th'); _elTh_ItmesHdr_Amount.setAttribute("id", "price"); - _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.amenity.title.amount[_state.lang]; + _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.amenity.title.amount[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Amount); var _elTh_ItmesHdr_Status = document.createElement('th'); _elTh_ItmesHdr_Status.setAttribute("id", "status"); - _elTh_ItmesHdr_Status.textContent = _trTbl.ui.amenity.title.orderability[_state.lang]; + _elTh_ItmesHdr_Status.textContent = _trTbl.ui.amenity.title.orderability[_state.lang].toUpperCase(); _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); @@ -1493,8 +1590,11 @@ HotelTV.ui_appfull = (function() { _state.menu.stage.cur = "amenity_ctgy_sel"; } else if (event.keyCode == gRmtKey.enter) { console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode); - __uifxn_AppFull_DrawAmItemSeletionCart("cart"); - _state.menu.stage.cur = "amenity_ctgy_item_cart"; + if ( __uifxn_AppFull_DrawAmItemSeletionCart("cart")==true ){ + _state.menu.stage.cur = "amenity_ctgy_item_cart"; + } else { + HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.system.ott_service_not_ready[_state.lang], 5); + } } } else if (_state.menu.stage.cur == "amenity_ctgy_item_cart") { if (event.keyCode == gRmtKey.left) { @@ -1506,9 +1606,13 @@ HotelTV.ui_appfull = (function() { } else if (event.keyCode == gRmtKey.down) { __uifxn_AppFull_DrawAmItemSeletionCart("quantity_minus"); } else if (event.keyCode == gRmtKey.back) { - __uifxn_AppFull_DrawAmItemSeletionCart("return"); - _state.menu.stage.cur = "amenity_ctgy_item_sel"; + __uifxn_AppFull_DrawAmItemSeletionCart("return", function() { + _state.menu.stage.cur = "amenity_ctgy_item_sel"; + }); } else if (event.keyCode == gRmtKey.enter) { + __uifxn_AppFull_DrawAmItemSeletionCart("enter", function() { + _state.menu.stage.cur = "amenity_ctgy_item_sel"; + }); console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode); } } else { @@ -3370,7 +3474,7 @@ HotelTV.ui_appfull = (function() { HotelTV.api.ReportEvent([{ 'power': true, 'location':{ - 'category':_tvProg[_tvCtgIdx].id, + 'catId':_tvProg[_tvCtgIdx].id, 'chId': _tvChInfo.id, } }]) diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index 9b47a67..0a1b63d 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -534,10 +534,10 @@ } .popup .amenity .bg .am_item_sel_win .winleft>.tbl_header tbody tr>#title { - width: 50%; + width: 45%; float: left; /* text-align: left; */ - padding: 0 0px 0 80px; + padding: 0 0px 0 20px; } .popup .amenity .bg .am_item_sel_win .winleft>.tbl_header tbody tr>#price { @@ -546,7 +546,7 @@ } .popup .amenity .bg .am_item_sel_win .winleft>.tbl_header tbody tr>#status { - width: 30%; + width: 35%; float: left; padding: 0px 30px 0 0px; } @@ -579,7 +579,7 @@ height: 52px; width: 100%; font-size: 30px; - /* line-height: 54px; */ + line-height: 52px; border-bottom: 2px solid rgb(21, 27, 34); } @@ -601,8 +601,15 @@ color: rgb(121, 121, 121); } +.popup .amenity .bg .am_item_sel_win .winleft>.tbl_record tbody tr>.amctgyItem.focus.unavailable:before { + +} +.popup .amenity .bg .am_item_sel_win .winleft>.tbl_record tbody tr>.amctgyItem.focus.unavailable:after { + +} + .popup .amenity .bg .am_item_sel_win .winleft>.tbl_record tbody tr>.amctgyItem>#title { - width: 50%; + width: 45%; float: left; padding: 0px 0px 0px 20px; } @@ -614,7 +621,7 @@ } .popup .amenity .bg .am_item_sel_win .winleft>.tbl_record tbody tr>.amctgyItem>#status { - width: 30%; + width: 35%; float: left; /* text-align: right; */ padding: 0px 30px 0 0px; @@ -679,6 +686,33 @@ margin: 10px 25px 10px 25px; } +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailable:before { + /* content: 'Not available'; + width: 100%; + height: 100%; + transform: rotate(-30deg); + top: 0; + left: 0; + font-size: 7em; + font-weight: bolder; + color: rgba(1,1,1,1); + opacity: 0.7; + display: block; + align-items: center; + line-height: 479px; + text-align: center; */ +} +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailable:after { + /* content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #000; + opacity: 0.6 */ +} + .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescDetails{ width: 852px; height: 238px; @@ -757,12 +791,13 @@ } .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #img_thumbnail{ - width: 42%; + width: 40%; height: 228px; background-repeat: no-repeat; background-position: center center; background-size: contain; float: left; + margin: 0px 0px 0px 2%; } .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control>.quantity{ @@ -824,7 +859,7 @@ height: 54px; width: 100%; line-height: 54px; - font-size: 44px; + font-size: 38px; white-space: pre-wrap; text-overflow: ellipsis; overflow: hidden; @@ -868,13 +903,13 @@ background-color: rgba(173,255,47,1.0); } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_addtocart{ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_ordernow{ /* border-radius: 14px; */ /* background-color: rgba(255,255,255,1.0); */ margin: 0px 20px 0px 0px; } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_ordernow{ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_addtocart{ /* border-radius: 14px; */ /* background-color: rgba(255,255,255,1.0); */ margin: 0px 20px 0px 20px; @@ -950,16 +985,16 @@ width: 50%; float: left; /* text-align: left; */ - padding: 0 0px 0 80px; + padding: 0 0px 0 20px; } .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#quantity { - width: 25%; + width: 20%; float: left; } .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#amount { - width: 25%; + width: 30%; float: left; padding: 0px 30px 0 0px; } @@ -992,7 +1027,7 @@ height: 52px; width: 100%; font-size: 30px; - /* line-height: 54px; */ + line-height: 52px; border-bottom: 2px solid rgb(21, 27, 34); } @@ -2138,6 +2173,7 @@ left: 73%; width: 26%; height: 10%; + z-index: 3; } .popup>.notification>.balloon {