diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 18d7904..ea104ef 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -598,24 +598,38 @@ HotelTV.ui_appfull = (function() { let __amctgyIdx = __status_am_specific.category_sel.cur; let __amctgyItemStatus = __status_am_specific.items[_aminfo_ctgy[__amctgyIdx].name]; - - if ( _action=="destroy" ){ - if ( _elAmUGRoot.children().length ){ - _elAmUGRoot.children().remove(); - } - return; - } - - switch(_state.menu.stage.cur) + switch(_action) { + case "destroy": { + _elAmUGRoot.fadeOut(200, function(){ + _elAmUGRoot.html(''); + }); + } break; + case "amenity_ctgy_sel": { + if ( _elAmUGRoot.css('display')=="none" ) { + _elAmUGRoot.html(_trTbl.ui.amenity.usage.category_menus_nav[_state.lang]); + _elAmUGRoot.fadeIn(300); + } else { + _elAmUGRoot.fadeOut(200, function(){ + _elAmUGRoot.html(_trTbl.ui.amenity.usage.category_menus_nav[_state.lang]); + _elAmUGRoot.fadeIn(300); + }); + } + } break; - }break; - } + case "amenity_ctgy_item_sel": { + _elAmUGRoot.fadeOut(200, function(){ + _elAmUGRoot.html(_trTbl.ui.amenity.usage.category_item_nav[_state.lang]); + _elAmUGRoot.fadeIn(300); + }); + } break; - switch ( _action ) - { - case "enter": { + case "amenity_ctgy_item_cart": { + _elAmUGRoot.fadeOut(200, function(){ + _elAmUGRoot.html(_trTbl.ui.amenity.usage.category_item_cart[_state.lang]); + _elAmUGRoot.fadeIn(300); + }); } break; } }catch(_err){ @@ -630,9 +644,10 @@ HotelTV.ui_appfull = (function() { /** * HotelTV UI[AppFull] Wrapper Function::> Draw amenity item selection cart ui * @param {string} _action - * @param {function} _cbFxnExit + * @param {function} _cbFxnExitPre AM 아이탬선택 카트 팝업 종료 처리 전에 해야할 callback + * @param {function} _cbFxnExitPost AM 아이탬선택 카트 팝업 종료 처리 후에 수행할 callback */ - function __uifxn_AppFull_DrawAmItemSeletionCart(_action, _cbFxnExit) { + function __uifxn_AppFull_DrawAmItemSeletionCart(_action, _cbFxnExitPre, _cbFxnExitPost) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; let _opening = HotelTV.opening; @@ -965,14 +980,22 @@ HotelTV.ui_appfull = (function() { }); } - const __ifxn_removeAmSelectedItemCartWin = function(_item_idx) { - // Remove All element under winleft&winright div + /** + * 어메니티 카트 팝업 제거 함수 + * @param {function} __cbFxn_preForExit + * @param {function} __cbFxn_postForExit + */ + const __ifxn_removeAmSelectedItemCartWin = function(__cbFxn_preForExit, __cbFxn_postForExit) { + if ( __cbFxn_preForExit ){ + __cbFxn_preForExit(); + } + _elAmCtgyBgMenuItemCartWin.fadeOut(200, function() { + // Remove All element under winleft&winright div __ifxn_removeAmSelectedItemCartWinElement(); - if ( _elAmCtgyBgMenuItemWin.css('display') == "none") { - _elAmCtgyBgMenuItemWin.fadeIn(500, function() { - }); + if ( __cbFxn_postForExit ){ + __cbFxn_postForExit(); } }); } @@ -1026,6 +1049,82 @@ HotelTV.ui_appfull = (function() { } } catch ( _err ){ console.log(`Fail to call API::> ${_err}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } + } + + /** + * 쇼핑카트에 담겨있는 어메니티 상품을 주문 + * @param {callback} _cbFxn_Success + * @param {callback} _cbFxn_Failure + */ + const __ifxn_processAmCartOrder = async function(_cbFxn_Success, _cbFxn_Failure) { + let _elAmCtgyBgMenuItemCartWinOrderWin = $('.popup .amenity .owl-item.active.center .am_item_sel_order_win'); + + try { + _elAmCtgyBgMenuItemCartWin.fadeOut(200, async function() { + const ____getOrderMenuName = function(){ + for (__jj = 1; __jj <= _aminfo_ctgy.length; __jj++) { + if ( _aminfo_ctgy[__jj].name=="ORDER" ) { + return _aminfo_ctgy[__jj].title[_state.lang]; + } + } + return "ORDER"; + } + + let _str_result_message = null; + // Remove All element under winleft&winright div + __ifxn_removeAmSelectedItemCartWinElement(); + + let _result = null; + + try { + _result = await HotelTV.api.PutAmenityOrders(); + } catch ( __err ){ + console.log("CALL API::>" + __err); + } finally { + if ( _result !=null ) { + console.log(`Success to order Amenity cart::>`); + _str_result_message = _trTbl.ui.amenity.message.orderSuccess[_state.lang].replace('__MENU__', ____getOrderMenuName()); + _elAmCtgyBgMenuItemCartWinOrderWin.children('#message').text(_str_result_message); + _elAmCtgyBgMenuItemCartWinOrderWin.fadeIn(500, async function() { + try{ + HotelTV.orders.amenity = await HotelTV.api.GetAmenityOrders(null); + HotelTV.carts.amenity = await HotelTV.api.GetAmenityCarts(null); + } catch (___err) { + console.log("CALL API::>" + ___err) + } finally { + setTimeout(function() { + _elAmCtgyBgMenuItemCartWinOrderWin.fadeOut(300); + + if ( _cbFxn_Success ){ + _cbFxn_Success(); + } + }, 5000); + } + }); + }else { + console.log(`Fail to order Amenity cart::>`); + _elAmCtgyBgMenuItemCartWinOrderWin.children('#message').text(_trTbl.ui.amenity.message.orderFailure[_state.lang]); + _elAmCtgyBgMenuItemCartWinOrderWin.fadeIn(500, async function() { + setTimeout(function() { + _elAmCtgyBgMenuItemCartWinOrderWin.fadeOut(300); + + if ( _cbFxn_Failure ){ + _cbFxn_Failure(); + } + }, 5000); + }); + } + } + }); + } catch ( _err ){ + console.log(`Fail to call API::> ${_err}`); + if ( _cbFxn_Failure ){ + _cbFxn_Failure(); + } } } @@ -1125,31 +1224,39 @@ HotelTV.ui_appfull = (function() { case "enter": { if ( _str_curBtnID=='btn_ordernow' ){ console.log("TODO::>> ORDERING NOW..."); + __ifxn_processAmCartOrder( + function() { + //Return to menu + if ( _cbFxnExitPost ){ + _cbFxnExitPost(); + } + }, + function() { + //Return to menu + if ( _cbFxnExitPost ){ + _cbFxnExitPost(); + } + } + ) } else if ( _str_curBtnID=='btn_addtocart' ){ - //console.log("TODO::>> ADD TO CART NOW..."); + //console.log("SUCCESS::>> ADD TO CART"); __ifxn_processAmAddtoCart( _aminfo_item, __status_am_specific.stock[_aminfo_item.id].req_quantity, function() { - + //TODO: 카트 API호출 성공시 호출할 루틴 }, function() { - + //TODO: 카트 API호출 실패시 호출할 루틴 } ); } else if ( _str_curBtnID=='btn_back' ){ - __ifxn_removeAmSelectedItemCartWin(); - if ( _cbFxnExit ){ - _cbFxnExit(); - } + __ifxn_removeAmSelectedItemCartWin(_cbFxnExitPre, _cbFxnExitPost); } } break; case "return": { - __ifxn_removeAmSelectedItemCartWin(); - if ( _cbFxnExit ){ - _cbFxnExit(); - } + __ifxn_removeAmSelectedItemCartWin(_cbFxnExitPre, _cbFxnExitPost); } break; } @@ -1350,6 +1457,7 @@ HotelTV.ui_appfull = (function() { let _elAmPupRoot = $('.popup .amenity'); let _elAmCtgyBg = _elAmPupRoot.children('.bg').find('#lst_ctgbg'); let _elAmCtgySel = _elAmPupRoot.children('.slider').find('#lst_ctgsel'); + let _elAmUGRoot = _elAmPupRoot.children('.use_guide'); // 어메니티 인포 Validation @@ -1368,6 +1476,7 @@ HotelTV.ui_appfull = (function() { // 초기 메인 메뉴 KEY설정 _state.menu.stage.cur = "preparing_amenity"; + _elAmUGRoot.hide(); // 어메니티 팝업 카테고리 셀렉터 노드를 동적으로 구성 for (let _idx = 1; _idx <= _aminfo_ctgy.length; _idx++) { @@ -1539,26 +1648,35 @@ HotelTV.ui_appfull = (function() { _elDiv_Ctgy.appendChild(_elDiv_ItemSelWin); // Selected Item Cart Window - let _elDiv_SelectedItemWin = document.createElement('div'); - _elDiv_SelectedItemWin.className = 'am_item_sel_cart_win'; - _elDiv_SelectedItemWin.style.display = 'none'; + let _elDiv_SelectedItemCartWin = document.createElement('div'); + _elDiv_SelectedItemCartWin.className = 'am_item_sel_cart_win'; + _elDiv_SelectedItemCartWin.style.display = 'none'; { if ( ["ORDER", "CARTS"].includes(_aminfo_ctgy[_idx].name)==false ) { ////// Window Left side let _elDiv_ItemWinCartLeft = document.createElement('div'); _elDiv_ItemWinCartLeft.className = 'winleft'; - _elDiv_SelectedItemWin.appendChild(_elDiv_ItemWinCartLeft); + _elDiv_SelectedItemCartWin.appendChild(_elDiv_ItemWinCartLeft); ////// Window Right side let _elDiv_ItemWinCartRight = document.createElement('div'); _elDiv_ItemWinCartRight.className = 'winright'; - _elDiv_SelectedItemWin.appendChild(_elDiv_ItemWinCartRight); + _elDiv_SelectedItemCartWin.appendChild(_elDiv_ItemWinCartRight); } } // _elDiv_Ctgy에 추가 - _elDiv_Ctgy.appendChild(_elDiv_SelectedItemWin); + _elDiv_Ctgy.appendChild(_elDiv_SelectedItemCartWin); + + + // Selected Item Cart Window + let _elDiv_SelectedItemOrderWin = document.createElement('div'); + _elDiv_SelectedItemOrderWin.className = 'am_item_sel_order_win'; + _elDiv_SelectedItemOrderWin.innerHTML += `
`; + _elDiv_SelectedItemOrderWin.style.display = 'none'; + // _elDiv_Ctgy에 추가 + _elDiv_Ctgy.appendChild(_elDiv_SelectedItemOrderWin); // _elAmCtgyBg에 추가 _elAmCtgyBg.append(_elDiv_Ctgy); @@ -1625,8 +1743,8 @@ HotelTV.ui_appfull = (function() { } else if (event.keyCode == gRmtKey.enter) { // 카테고리 화면 빌드 및 화면 전환 _state.menu.stage.cur = "amenity_ctgy_item_sel"; + __uifxn_AppFull_DrawAmUserGuide("amenity_ctgy_item_sel"); __uifxn_AppFull_DrawAmItemSeletion("enter"); - __uifxn_AppFull_DrawAmUserGuide(); } else if (event.keyCode == gRmtKey.back) { // 카테고리 폼의 썸네일 에니메이션용 타이머 제거 if (_hndl_tmrAmenityThumbAni != null) { @@ -1635,6 +1753,8 @@ HotelTV.ui_appfull = (function() { console.log("TMR(AMENITY CATEGORY CTZ ANI For Thumbnail)::>Destoried..."); } + __uifxn_AppFull_DrawAmUserGuide("destroy"); + // 어메니티 -> 메인 메뉴로 귀환 $(document.activeElement).off('keydown'); _elMainMenu.show(function() { @@ -1675,35 +1795,57 @@ HotelTV.ui_appfull = (function() { } else if (event.keyCode == gRmtKey.back) { __uifxn_AppFull_DrawAmItemSeletion("exit"); _state.menu.stage.cur = "amenity_ctgy_sel"; + __uifxn_AppFull_DrawAmUserGuide("amenity_ctgy_sel"); } else if (event.keyCode == gRmtKey.enter) { console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode); - if ( __uifxn_AppFull_DrawAmItemSeletionCart("cart")==true ){ + if ( __uifxn_AppFull_DrawAmItemSeletionCart("cart", null, null)==true ){ _state.menu.stage.cur = "amenity_ctgy_item_cart"; + __uifxn_AppFull_DrawAmUserGuide("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) { - __uifxn_AppFull_DrawAmItemSeletionCart("left"); + __uifxn_AppFull_DrawAmItemSeletionCart("left", null, null); } else if (event.keyCode == gRmtKey.right) { - __uifxn_AppFull_DrawAmItemSeletionCart("right"); + __uifxn_AppFull_DrawAmItemSeletionCart("right", null, null); } else if (event.keyCode == gRmtKey.up) { - __uifxn_AppFull_DrawAmItemSeletionCart("quantity_plus"); + __uifxn_AppFull_DrawAmItemSeletionCart("quantity_plus", null, null); } else if (event.keyCode == gRmtKey.down) { - __uifxn_AppFull_DrawAmItemSeletionCart("quantity_minus"); + __uifxn_AppFull_DrawAmItemSeletionCart("quantity_minus", null, null); } else if (event.keyCode == gRmtKey.chup) { - __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_up"); + __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_up", null, null); } else if (event.keyCode == gRmtKey.chdown) { - __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_down"); + __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_down", null, null); } else if (event.keyCode == gRmtKey.back) { - __uifxn_AppFull_DrawAmItemSeletionCart("return", function() { - _state.menu.stage.cur = "amenity_ctgy_item_sel"; - }); + __uifxn_AppFull_DrawAmItemSeletionCart( + "return", + null, + function() { + let _elAmCtgyBgFocusedItemSelWin = _elAmCtgyBg.find('.owl-item.active.center').find('.am_item_sel_win'); + if ( _elAmCtgyBgFocusedItemSelWin.css('display') == "none") { + _elAmCtgyBgFocusedItemSelWin.fadeIn(500, function() { + _state.menu.stage.cur = "amenity_ctgy_item_sel"; + __uifxn_AppFull_DrawAmUserGuide("amenity_ctgy_item_sel"); + }); + } + } + ); } else if (event.keyCode == gRmtKey.enter) { - __uifxn_AppFull_DrawAmItemSeletionCart("enter", function() { - _state.menu.stage.cur = "amenity_ctgy_item_sel"; - }); + __uifxn_AppFull_DrawAmItemSeletionCart( + "enter", + null, + function() { + let _elAmCtgyBgFocusedItemSelWin = _elAmCtgyBg.find('.owl-item.active.center').find('.am_item_sel_win'); + if ( _elAmCtgyBgFocusedItemSelWin.css('display') == "none") { + _elAmCtgyBgFocusedItemSelWin.fadeIn(500, function() { + _state.menu.stage.cur = "amenity_ctgy_item_sel"; + __uifxn_AppFull_DrawAmUserGuide("amenity_ctgy_item_sel"); + }); + } + } + ); console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode); } } else { @@ -1712,7 +1854,7 @@ HotelTV.ui_appfull = (function() { }); //어메니티 카테고리 선택 모드(생성시, 메뉴모드) _state.menu.stage.cur = "amenity_ctgy_sel"; - __uifxn_AppFull_DrawAmUserGuide(); + __uifxn_AppFull_DrawAmUserGuide("amenity_ctgy_sel"); }); }) }); diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index a9e31f3..7c8375c 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -484,10 +484,10 @@ .popup .amenity .bg .owl-carousel .owl-stage .bottom_gradient{ position: absolute; left: 0; - top: 948px; + top: 928px; width: 100%; - height: 132px; - background: linear-gradient(0deg, rgba(7,8,11,0.9) 0%, rgba(7,8,11,0.5) 65%, rgba(7,8,11,0) 100%); + height: 152px; + background: linear-gradient(0deg, rgba(7,8,11,0.9) 0%, rgba(7,8,11,50%) 75%, rgba(7,8,11,0) 100%); } /*[AM1-1-1-3. Amenity bg: owl: amenity item sel window ] */ @@ -1136,7 +1136,40 @@ +/*[AM1-1-1-5. Amenity bg: owl: selected item order style window ] */ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_order_win { + position: absolute; + left: 21px; + top: 207px; + width: 1874px; + height: 740px; + margin: 0; + padding: 0; + /* background: rgba(114,18,22,0.65); */ + display: flex; + align-items: center; + justify-content: center; +} +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_order_win #message{ + line-height: 42px; + font-size: 38px; + width: 88%; + height: 368px; + padding: 40px 20px 40px 20px; + background: rgba(14,18,22,0.8); + color: rgb(249, 249, 249); + white-space: pre-wrap; + text-align: center; + text-overflow: ellipsis; + overflow: hidden; + border-radius: 40px; + border: 4px solid rgba(121,121,121,1); + margin: 20px auto; + display: flex; + justify-content: center; + align-items: center; +} @@ -1255,7 +1288,13 @@ width: 100%; height: 132px; margin: 0; - padding: 0; + padding: 0px 20px 0px 20px; + color: rgb(245,245,245); + line-height: 32px; + font-size: 32px; + z-index: 1; + display: flex; + align-items: center; }