From ea812e34a1ee7080bbc977b95b522249844aeb6b Mon Sep 17 00:00:00 2001 From: Paul Kim Date: Sat, 16 Mar 2024 21:53:02 +0900 Subject: [PATCH] issue #11 Done amenity cart scrolling function on category item selection popup. --- procentric/application/lib/hoteltv.api.js | 5 + .../application/lib/hoteltv.ui_appfull.js | 179 +++++++++++++----- .../theme/HJS00001/hoteltv.app.full.popup.css | 42 +++- 3 files changed, 173 insertions(+), 53 deletions(-) diff --git a/procentric/application/lib/hoteltv.api.js b/procentric/application/lib/hoteltv.api.js index 3b631c7..13b1974 100755 --- a/procentric/application/lib/hoteltv.api.js +++ b/procentric/application/lib/hoteltv.api.js @@ -753,6 +753,11 @@ HotelTV.api = (function() { }); }, + /** + * 통계데이터 발송 API + * @param {array} _arrary_event + * @param {string} _type : 어메니티&룸서비스의 경우, "indirect" 그외는 null + */ ReportEvent: function(_arrary_event, _type=null) { let _json_event = { "events": [], diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 3c99341..18d7904 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -117,7 +117,7 @@ HotelTV.ui_appfull = (function() { }else if ( ___schedule_day_obj.date.mode=="between" ){ var _from = new Date(___schedule_day_obj.date.start).getTime(); var _to = new Date(___schedule_day_obj.date.end).getTime(); - if(___curDayTime.getTime() >= _from && today <= _to) { + if(___curDayTime.getTime() >= _from && ___curDayTime.getTime() <= _to) { return true; } _result.avail_dtime = `${___schedule_day_obj.date.start}~${___schedule_day_obj.date.end}`; @@ -130,15 +130,16 @@ HotelTV.ui_appfull = (function() { let __month = ___curDayTime.getMonth() + 1; let __year = ___curDayTime.getFullYear(); - let _str_startTime = `${__day}/${__month}/${__year} ${___schedule_day_obj.time.start}`; - let _str_endTime = `${__day}/${__month}/${__year} ${___schedule_day_obj.time.end}`; + let _str_datePrefix = [__year, '-', (__month>9 ? '' : '0') + __month, '-', (__day>9 ? '' : '0') + __day].join(''); + let _str_startTime = `${_str_datePrefix}T${___schedule_day_obj.time.start}`; + let _str_endTime = `${_str_datePrefix}T${___schedule_day_obj.time.end}`; if ( ___schedule_day_obj.time.mode=="always" ){ return true; }else if ( ___schedule_day_obj.time.mode=="between" ){ var _from = new Date(_str_startTime).getTime(); var _to = new Date(_str_endTime).getTime(); - if(___curDayTime.getTime() >= _from && today <= _to) { + if(___curDayTime.getTime() >= _from && ___curDayTime.getTime() <= _to) { _result.result = true; return true; } @@ -650,6 +651,29 @@ HotelTV.ui_appfull = (function() { let __status_am_specific = null; + /** + * CART에 _itemID에 해당하는 항목이 있는지 검사 + * @param {object} _objCart + * @param {string} _itemID + * @returns + */ + const __ifxn_checkCartItemExist = function(_objCart, _itemID) { + for (__j = 1; __j <= _objCart.length; __j++) { + if ( _objCart[__j].id!=null && _objCart[__j].itemId == _itemID ) { + return true; + } + } + return false; + } + + const __ifxn_getCartIdbyItemID = function(_objCart, _itemID) { + for (__j = 1; __j <= _objCart.length; __j++) { + if ( _objCart[__j].id!=null && _objCart[__j].itemId == _itemID ) { + return _objCart[__j].id; + } + } + return null; + } /** * order/add to cart/back중 포커스 된 버턴의 ID를 반환 @@ -670,6 +694,10 @@ HotelTV.ui_appfull = (function() { } } + /** + * 어메니티 카트 테이블 갱신 + * @returns + */ const __ifxn_updateAmCartRecTable = function() { try{ const __ifxn_getValidCartItemCount = function(_cartObj) { @@ -721,13 +749,17 @@ HotelTV.ui_appfull = (function() { 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_CartItmesRecPrice.textContent = _objCartItem.amount[_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); + + // 전체 금액 갱신 + let _elAmCtgyBgMenuItemCartTotalAmountValue = _elAmCtgyBgMenuItemCartWinRight.find('.summary').children('#value'); + _elAmCtgyBgMenuItemCartTotalAmountValue.text(_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang]); } } catch ( _err ){ console.log(`Fail to update::> ${_err}`); @@ -747,15 +779,6 @@ HotelTV.ui_appfull = (function() { let _elDiv_QuntCtrlFrmQuantityValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_quantity'); let _elDiv_QuntCtrlFrmAmountValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_amount'); - const ___ifxn_checkCartItemExist = function(_object, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].itemId == _itemID) { - return true; - } - } - return false; - } - /** * cart 오브젝트에서 해당 item id에 해당하는 수량을 반환. * 찾지 못하면 1개(디퐅트)를 반환 @@ -796,8 +819,10 @@ HotelTV.ui_appfull = (function() { __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[_aminfo_item.id].req_quantity += 1; - ___ifxn_updateSubTotalAmount(_aminfo_item.id, __status_am_specific.stock[_aminfo_item.id].req_quantity); + if ( __status_am_specific.stock[_aminfo_item.id].req_quantity<_aminfo_item.limitation.max ){ + __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[_aminfo_item.id].req_quantity>1 ){ __status_am_specific.stock[_aminfo_item.id].req_quantity -= 1; @@ -915,7 +940,8 @@ HotelTV.ui_appfull = (function() { //// Quantity Window Title let _elDiv_CartWinSummary = document.createElement('div'); _elDiv_CartWinSummary.className = "summary"; - //_elDiv_CartWinSummary.textContent = _trTbl.ui.amenity.title.sum[_state.lang]; + _elDiv_CartWinSummary.innerHTML = `
${_trTbl.ui.amenity.title.sum[_state.lang].toUpperCase()}
`; + _elDiv_CartWinSummary.innerHTML += `
${_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang]}
`; _elAmCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinSummary); } } @@ -932,7 +958,6 @@ HotelTV.ui_appfull = (function() { { 'power': true, 'location':{ - // TODO: 통계 데이터 파라미터 확인해 'conId':_aminfo_item.id } }], "indirect"); @@ -952,22 +977,53 @@ HotelTV.ui_appfull = (function() { }); } - - const __ifxn_processAmAddtoCart = async function(_item_idx, _new_quantity, _cbFxn_Success, _cbFxn_Failure) { + /** + * 어메니티 상품을 쇼핑카트에 추가 + * @param {object} _am_itemInf + * @param {number} _new_quantity + * @param {callback} _cbFxn_Success + * @param {callback} _cbFxn_Failure + */ + const __ifxn_processAmAddtoCart = async function(_am_itemInf, _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(); - // } - // } + if ( __ifxn_checkCartItemExist(_carts.items, _am_itemInf.id)==true ) + { + // Modify API + let _result = await HotelTV.api.UpdateAmenityCarts(__ifxn_getCartIdbyItemID(_carts.items, _am_itemInf.id), _new_quantity); + if (_result) { + console.log(`Amenity Update cart successed::> ${_am_itemInf.id} ::> ${_am_itemInf.name}`); + if (_cbFxn_Success) { + HotelTV.carts.amenity = _carts = await HotelTV.api.GetAmenityCarts(null); + __ifxn_updateAmCartRecTable(); + _cbFxn_Success(); + } + } else { + console.log(`Amenity Update cart failed::> ${_am_itemInf.id} ::> ${_am_itemInf.name}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } + } + else + { + // Put API + let _result = await HotelTV.api.PutAmenityCarts(_am_itemInf.id, _new_quantity); + if (_result) { + console.log(`Amenity Add to cart successed::> ${_am_itemInf.id} ::> ${_am_itemInf.name}`); + if (_cbFxn_Success) { + HotelTV.carts.amenity = _carts = await HotelTV.api.GetAmenityCarts(null); + __ifxn_updateAmCartRecTable(); + _cbFxn_Success(); + } + } else { + console.log(`Amenity Add to cart failed::> ${_am_itemInf.id} ::> ${_am_itemInf.name}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } + } } catch ( _err ){ console.log(`Fail to call API::> ${_err}`); } @@ -1028,13 +1084,51 @@ HotelTV.ui_appfull = (function() { __ifxn_updateAmSelectedItemCartWin(__amctgyItemStatus.idx, "minus"); } break; + case "cart_scroll_up": { + let _elDiv_AmCtgyCartRecTable = _elAmCtgyBgMenuItemCartWinRight.find('.tbl_record').children('#record'); + if ( _elDiv_AmCtgyCartRecTable.children().length>0 ){ + let _heightTable = _elDiv_AmCtgyCartRecTable.outerHeight(true); // passing "true" will also include the top and bottom margin + let _numTrHeight = _elDiv_AmCtgyCartRecTable.find('tr').first().height(); //테이블 레코드 1줄 높이 + let _posFirstTr = _elDiv_AmCtgyCartRecTable.find('tr').first().position(); + let _posLastTr = _elDiv_AmCtgyCartRecTable.find('tr').last().position(); + + if ( _posFirstTr.top<0 ){ + _elDiv_AmCtgyCartRecTable.animate({ scrollTop: _posFirstTr.top-_numTrHeight}, 200); + } + } + } break; + + case "cart_scroll_down": { + let _elDiv_AmCtgyCartRecTable = _elAmCtgyBgMenuItemCartWinRight.find('.tbl_record').children('#record'); + if ( _elDiv_AmCtgyCartRecTable.children().length>0 ){ + const ___ifxn_calScrollTopOffset = function(){ + let neededScrollRowCnt = 1; + for (__kk = 0; __kk < _elDiv_AmCtgyCartRecTable.children().length; __kk++) { + if ( _elDiv_AmCtgyCartRecTable.children().eq(__kk).position().top>_numTrHeight ){ + break; + } + neededScrollRowCnt ++; + } + return neededScrollRowCnt*_numTrHeight; + } + let _heightTable = _elDiv_AmCtgyCartRecTable.outerHeight(true); // passing "true" will also include the top and bottom margin + let _numTrHeight = _elDiv_AmCtgyCartRecTable.find('tr').first().height(); //테이블 레코드 1줄 높이 + let _posFirstTr = _elDiv_AmCtgyCartRecTable.find('tr').first().position(); + let _posLastTr = _elDiv_AmCtgyCartRecTable.find('tr').last().position(); + + if ( _posLastTr.top > _heightTable ){ + _elDiv_AmCtgyCartRecTable.animate({ scrollTop: ___ifxn_calScrollTopOffset()}, 200); + } + } + } 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, + _aminfo_item, __status_am_specific.stock[_aminfo_item.id].req_quantity, function() { @@ -1190,7 +1284,6 @@ HotelTV.ui_appfull = (function() { // 테이블 ROW인덱스와 스크롤 OFFSET계산 __amctgyItemStatus.idx = _elTblTr_AmItemNext.prop('rowIndex'); - //__amctgyItemStatus.scroll_TOfset = __amctgyItemStatus.idx*_elTblTr_AmItemNext.prop('scrollHeight'); __amctgyItemStatus.scroll_TOfset += _elTblTr_AmItemNext.prop('scrollHeight'); //스크롤 에니메이션 수행 @@ -1221,7 +1314,6 @@ HotelTV.ui_appfull = (function() { // 테이블 ROW인덱스와 스크롤 OFFSET계산 __amctgyItemStatus.idx = _elTblTr_AmItemNext.prop('rowIndex'); - //__amctgyItemStatus.scroll_TOfset = __amctgyItemStatus.idx*_elTblTr_AmItemNext.prop('scrollHeight'); __amctgyItemStatus.scroll_TOfset += _elTblTr_AmItemNext.prop('scrollHeight'); //스크롤 에니메이션 수행 @@ -1259,15 +1351,6 @@ HotelTV.ui_appfull = (function() { let _elAmCtgyBg = _elAmPupRoot.children('.bg').find('#lst_ctgbg'); let _elAmCtgySel = _elAmPupRoot.children('.slider').find('#lst_ctgsel'); - const __ifxn_getRsItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id == _itemID) { - return _object[__j][_key]; - } - } - return ''; - } - // 어메니티 인포 Validation if (!_opening.amenity) { @@ -1319,7 +1402,11 @@ HotelTV.ui_appfull = (function() { if ( !(_aminfo_ctgy[_idx].name in __status_am_specific.items)==true ){ __status_am_specific.items[_aminfo_ctgy[_idx].name] = { "idx": 0, - "scroll_TOfset": 0 + "scroll_TOfset": 0, + "carts": { + "idx": 0, + "scroll_TOfset": 0 + } }; } } @@ -1605,6 +1692,10 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_DrawAmItemSeletionCart("quantity_plus"); } else if (event.keyCode == gRmtKey.down) { __uifxn_AppFull_DrawAmItemSeletionCart("quantity_minus"); + } else if (event.keyCode == gRmtKey.chup) { + __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_up"); + } else if (event.keyCode == gRmtKey.chdown) { + __uifxn_AppFull_DrawAmItemSeletionCart("cart_scroll_down"); } else if (event.keyCode == gRmtKey.back) { __uifxn_AppFull_DrawAmItemSeletionCart("return", function() { _state.menu.stage.cur = "amenity_ctgy_item_sel"; diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index 0a1b63d..a9e31f3 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -1002,7 +1002,6 @@ /**** Amenity Category item ::> Table Recored */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record { - /* height: 284px;*/ width:100%; line-height: 54px; font-size: 30px; @@ -1011,7 +1010,7 @@ } .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody { - /* height: 285px; */ + height: 446px; overflow-y: auto; display: block; } @@ -1103,19 +1102,44 @@ } - - - - - .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary{ position: relative; height: 65px; width: 96%; - padding: 20px 2% 20px 2%; - /* background: blue; */ + margin: 12px 2% 0px 2%; + padding: 4px 2% 0px 2%; + display: flex; + float: left; + flex-direction: row; + flex-wrap: wrap; + overflow: hidden; + border-top: 4px solid rgba(121,121,121,1); } + +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary>#lable{ + line-height: 65px; + width: 50%; + height: 100px; + font-size: 48px; + text-align: center; +} + +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary>#value{ + line-height: 65px; + width: 50%; + height: 100%; + font-size: 52px; + color: rgb(173, 255, 47); + text-align: center; +} + + + + + + + /********************************************************************************/ /*[AM2. Amenity slider style ] */ .popup .amenity .slider {