sysadmin/ct-dtv-hx0100-002kwos
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

issue #11 Done amenity category feature including add to cart, order feature.

Browse Source
This commit is contained in:
Paul Kim
2024-03-17 16:46:10 +09:00
parent f98e3d6520
commit 4ef3896e2c
2 changed files with 238 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
procentric/application/lib/hoteltv.ui_appfull.js
View File

@@ -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)
{
case "amenity_ctgy_sel": {
}break;
}
switch(_action)
{
case "enter": {
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;
case "amenity_ctgy_item_sel": {
_elAmUGRoot.fadeOut(200, function(){
_elAmUGRoot.html(_trTbl.ui.amenity.usage.category_item_nav[_state.lang]);
_elAmUGRoot.fadeIn(300);
});
} break;
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 += `<div id="message"></div>`;
_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() {
__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() {
__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");
});
})
});

47
procentric/application/theme/HJS00001/hoteltv.app.full.popup.css
View File

@@ -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;
}