diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index b52f6ff..65df808 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -229,90 +229,52 @@
-
-
-
-
- - - - - - - -
- - -
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
+
+
-
-
-
-
- - - - - - - - -
- - -
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 44acd7b..993b71e 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -64,6 +64,7 @@ HotelTV.ui_appfull = (function() { var _hndl_tmrCtzThumbAni = null; var _hndl_tmrCtzBgAni = null; var _hndl_tmrAmenityThumbAni = null; + var _hndl_tmrRoomserviceThumbAni = null; const _lastTm = { 'tvchannel_changed': null, 'keyevt': { @@ -125,6 +126,97 @@ HotelTV.ui_appfull = (function() { return false; } + + + const __ifxn_checkTimekValid = function(___schedule_day_obj, ___curDayTime) { + let __day = ___curDayTime.getDate(); + let __month = ___curDayTime.getMonth() + 1; + let __year = ___curDayTime.getFullYear(); + + 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 && ___curDayTime.getTime() <= _to) { + _result.result = true; + return true; + } + _result.avail_dtime = `${___schedule_day_obj.time.start}~${___schedule_day_obj.time.end}`; + } + return false; + } + + try{ + if ( __ifxn_checkWeekValid(_schedule,_curDtime) == true ) { + if ( __ifxn_checkDatekValid(_schedule,_curDtime) == true ){ + if ( __ifxn_checkTimekValid(_schedule,_curDtime) == true ){ + _result.result = true; + return _result; + } + } + } + return _result; + }catch(__err){ + return _result; + } + } + + /** + * _schedule오브젝트내의 시간범위 항목들을 검사하여 현재 시간이 + * _schedule에 기술된 범위 안에 있으면 true 그렇지 않으면 false를 출력 + * @param {object} _schedule + * @returns {object} {"result": false or true, "avail_dtime": string} + */ + function __uifxn_Utils_CheckRsItemAvailable(_schedule) { + let _result = {"result": false, "avail_dtime": "unorderable"}; + let _curDtime = new Date(); // current time + + /** + * Check validation week + * @param {object} ___schedule_week_obj + * @param {object} ___curDayTime + * @returns true or false + */ + const __ifxn_checkWeekValid = function(___schedule_week_obj, ___curDayTime) { + if ( ___schedule_week_obj.week[Object.keys(___schedule_week_obj.week)[___curDayTime.getDay()]]==true ){ + return true; + } + return false; + } + + const __ifxn_checkDatekValid = function(___schedule_day_obj, ___curDayTime) { + if ( ___schedule_day_obj.date.mode=="always" ){ + return true; + }else if ( ___schedule_day_obj.date.mode=="start" ){ + var _from = new Date(___schedule_day_obj.date.start).getTime(); + if(___curDayTime.getTime() >= _from ) { + return true; + } + _result.avail_dtime = ___schedule_day_obj.date.start; + }else if ( ___schedule_day_obj.date.mode=="end" ){ + var _to = new Date(___schedule_day_obj.date.end).getTime(); + if(___curDayTime.getTime() <= _to ) { + return true; + } + _result.avail_dtime = ___schedule_day_obj.date.end; + }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 && ___curDayTime.getTime() <= _to) { + return true; + } + _result.avail_dtime = `${___schedule_day_obj.date.start}~${___schedule_day_obj.date.end}`; + } + return false; + } + + + const __ifxn_checkTimekValid = function(___schedule_day_obj, ___curDayTime) { let __day = ___curDayTime.getDate(); let __month = ___curDayTime.getMonth() + 1; @@ -503,6 +595,7 @@ HotelTV.ui_appfull = (function() { let _state = HotelTV.state; let _opening = HotelTV.opening; let _amenity = null; + let _roomservice = null; if (!_opening.amenity) { @@ -532,6 +625,36 @@ HotelTV.ui_appfull = (function() { if ( _elAmPupOoderRoot.css('display')!="none" ){ _elAmPupOoderRoot.hide(); } + + + + if (!_opening.roomService) { + return; + } + _roomservice = _opening.roomService; + + // HOTKEY정보를 state에 기록 + if (!(_roomservice.button in _state.hotkey.mm)) { + _state.hotkey.mm[_roomservice.button] = { + 'type': "roomservice", + 'id': _roomservice.id, + "status": { + "focus": "category_sel", + "category_sel": { + 'cnt': 0, + 'cur': 1, + 'prev': 1, + }, + "items": {}, + "stock": {}, + } + }; + } + + let _elRsPupOoderRoot = $('.popup .roomservice').children('.order'); + if ( _elRsPupOoderRoot.css('display')!="none" ){ + _elRsPupOoderRoot.hide(); + } return; } @@ -993,7 +1116,7 @@ HotelTV.ui_appfull = (function() { const __ifxn_buildAmSelectedItemCartWin = function(_item_idx) { let _sz_styleOpt = null; - const __iCbfxn_buildAmSelectedItemWin = function() { + const ___iCbfxn_buildAmSelectedItemWin = function() { // 상품 상세 설명페이지 구성 __ifxn_removeAmSelectedItemCartWinElement(); @@ -1098,7 +1221,7 @@ HotelTV.ui_appfull = (function() { // 카테고리매뉴윈도우 hide -> 아이템선택 윈도우 빌드 -> 아이탬선택 윈도우 show -> 버튼 포커스(back) _elAmCtgyBgMenuItemWin.fadeOut(200, function() { - __iCbfxn_buildAmSelectedItemWin(); + ___iCbfxn_buildAmSelectedItemWin(); _elAmCtgyBgMenuItemCartWin.fadeIn(500, function() { _elAmCtgyBgMenuItemCartWinLeft.find('#btn_back').addClass('focus'); __ifxn_updateAmSelectedItemCartWin(_item_idx, "build"); @@ -1427,7 +1550,7 @@ HotelTV.ui_appfull = (function() { // Remove All element under winright div let _elDivWinRight = _elAmCtgyBgMenuItemWin.find('.winright'); - const __iCbfxn_updateAmItemDesc = function() { + const ___iCbfxn_updateAmItemDesc = function() { //상품 상세 설명페이지 구성 ////썸네일 let _elDiv_ItmesThumb = document.createElement('div'); @@ -1463,7 +1586,7 @@ HotelTV.ui_appfull = (function() { if ( _elDivWinRight.children().length ){ _elDivWinRight.children().remove(); } - __iCbfxn_updateAmItemDesc(); + ___iCbfxn_updateAmItemDesc(); _elDivWinRight.fadeIn(500, function() { if ( _cbFxn ){ _cbFxn(); } }); @@ -1472,7 +1595,7 @@ HotelTV.ui_appfull = (function() { if ( _elDivWinRight.children().length ){ _elDivWinRight.children().remove(); } - __iCbfxn_updateAmItemDesc(); + ___iCbfxn_updateAmItemDesc(); _elDivWinRight.fadeIn(500, function() { if ( _cbFxn ){ _cbFxn(); } @@ -2052,975 +2175,1479 @@ HotelTV.ui_appfull = (function() { return; } + /** - * HotelTV UI[AppFull] Wrapper Function::> build amenity - * @param {boolean} _show show/hide + * HotelTV UI[AppFull] Wrapper Function::> Draw room service feature user's guide + * @param {string} _action */ - function __uifxn_AppFull_DrawRoomserviceOrderAlert(_show) { + function __uifxn_AppFull_DrawRsUserGuide(_action) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; + let _opening = HotelTV.opening; + let _rsinfo_top = _opening.roomService; + let _rsinfo_ctgy = _rsinfo_top.menu; let _elRsPupRoot = $('.popup .roomservice'); - let _elRsOderAlertRoot = _elRsPupRoot.children('.alert'); - let _elRsOderAlertOrderComplete = _elRsOderAlertRoot.children('#order-complete'); + let _elRsUGRoot = _elRsPupRoot.children('.use_guide'); + let __status_rs_specific = null; - if (_show == false) { - if (_elRsOderAlertRoot.css('display') != "none") { - _elRsOderAlertOrderComplete.hide(0, function() { - _elRsOderAlertRoot.hide(); - }); + + try{ + // 룸서비스 정보 오브젝트 + _rsinfo_top = _opening.roomService; + _rsinfo_ctgy = _rsinfo_top.menu; + __status_rs_specific = _state.hotkey.mm[_rsinfo_top.button].status; + let __rsctgyIdx = __status_rs_specific.category_sel.cur; + let __rsctgyItemStatus = __status_rs_specific.items[_rsinfo_ctgy[__rsctgyIdx].name]; + + switch(_action) + { + case "destroy": { + _elRsUGRoot.fadeOut(200, function(){ + _elRsUGRoot.html(''); + }); + } break; + + case "roomservice_ctgy_sel": { + if ( _elRsUGRoot.css('display')=="none" ) { + _elRsUGRoot.html(_trTbl.ui.roomservice.usage.category_menus_nav[_state.lang]); + _elRsUGRoot.fadeIn(300); + } else { + _elRsUGRoot.fadeOut(200, function(){ + _elRsUGRoot.html(_trTbl.ui.roomservice.usage.category_menus_nav[_state.lang]); + _elRsUGRoot.fadeIn(300); + }); + } + } break; + + case "roomservice_ctgy_item_sel": { + _elRsUGRoot.fadeOut(200, function(){ + _elRsUGRoot.html(_trTbl.ui.roomservice.usage.category_item_nav[_state.lang]); + _elRsUGRoot.fadeIn(300); + }); + } break; + + case "roomservice_ctgy_item_cart": { + _elRsUGRoot.fadeOut(200, function(){ + _elRsUGRoot.html(_trTbl.ui.roomservice.usage.category_item_cart[_state.lang]); + _elRsUGRoot.fadeIn(300); + }); + } break; } - return; - } - - // Draw Titile and message - _elRsOderAlertOrderComplete.children("#title").text(_trTbl.ui.roomservice.title.ordercomplete[_state.lang]); - _elRsOderAlertOrderComplete.children("#message").text(_trTbl.ui.roomservice.usage.orderAlertComplete[_state.lang]); - - if (_elRsOderAlertOrderComplete.css('display') == "none") { - _elRsOderAlertOrderComplete.show(); - } - - if (_elRsOderAlertRoot.css('display') == "none") { - _elRsOderAlertRoot.fadeIn(300); + }catch(_err){ + console.log(`Fail to draw::> ${_err}`); } } /** - * HotelTV UI[AppFull] Wrapper Function::> update room service order list - * @param {boolean} _show show/hide - * @param {string} _keyEvt key event + * HotelTV UI[AppFull] Wrapper Function::> Draw room service order history + * @param {string} _action */ - async function __uifxn_AppFull_DrawRoomservceOrderList(_show, _keyEvt) { + function __uifxn_AppFull_DrawRsOrderList(_action) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; - let _RsOrder = null; - let _roomservice = HotelTV.opening.roomService; - + let _opening = HotelTV.opening; + let _order = HotelTV.orders.roomservice; + let _rsinfo_top = _opening.roomService; + let _rsinfo_ctgy = _rsinfo_top.menu; let _elRsPupRoot = $('.popup .roomservice'); - let _elRsOLstRoot = _elRsPupRoot.children('.order-details'); - let _elRsOLstItems = _elRsOLstRoot.children(`#orders`); - let _elRsOLstSummary = _elRsOLstRoot.children('#summary'); + let _elRsOrderRoot = _elRsPupRoot.children('.order'); + let _elRsOrderWinleft = _elRsOrderRoot.children('.winleft'); + let __status_rs_specific = null; - const __ifxn_getRsItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id == _itemID) { - return _object[__j][_key]; - } + const __ifxn_removeOrderElements = function(){ + if ( _elRsOrderWinleft.children().length>0 ){ + _elRsOrderWinleft.children().remove(); } - return ''; - } - - const __ifxn_padZero = function(_num, _size) { - _num = _num.toString(); - while (_num.length < _size) _num = "0" + _num; - return _num; } + try{ + // 룸서비스 정보 오브젝트 + _rsinfo_top = _opening.roomService; + _rsinfo_ctgy = _rsinfo_top.menu; + __status_rs_specific = _state.hotkey.mm[_rsinfo_top.button].status; + let __rsctgyIdx = __status_rs_specific.category_sel.cur; + let __rsctgyItemStatus = __status_rs_specific.items[_rsinfo_ctgy[__rsctgyIdx].name]; + + switch(_action) + { + case 'hide': { + if ( _elRsOrderRoot.css('display')!="none" ){ + _elRsOrderRoot.fadeOut(100); + } + } break; + + case 'build': { + __ifxn_removeOrderElements(); + + ////// ADD Table Header + var _elTbl_ItemsHdr = document.createElement('table'); + _elTbl_ItemsHdr.className = "tbl_header"; + + let _elTBody_ItmesHdr = document.createElement('tbody'); + { + _elTBody_ItmesHdr.setAttribute("id", "hdr"); + + var _elTr_ItmesHdr = document.createElement('tr'); + var _elTh_ItmesHdr_Title = document.createElement('th'); + _elTh_ItmesHdr_Title.setAttribute("id", "orderid"); + _elTh_ItmesHdr_Title.textContent = _trTbl.ui.roomservice.title.ordernum[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Title); + + var _elTh_ItmesHdr_Amount = document.createElement('th'); + _elTh_ItmesHdr_Amount.setAttribute("id", "amount"); + _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.roomservice.title.amount[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Amount); + + var _elTh_ItmesHdr_Status = document.createElement('th'); + _elTh_ItmesHdr_Status.setAttribute("id", "date"); + _elTh_ItmesHdr_Status.textContent = _trTbl.ui.roomservice.title.orderdate[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); + + _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); + } + _elTbl_ItemsHdr.appendChild(_elTBody_ItmesHdr); + _elRsOrderWinleft.append(_elTbl_ItemsHdr); + + ////// Append item list record + var _elTbl_ItemsRec = document.createElement('table'); + _elTbl_ItemsRec.className = "tbl_record"; + + let _elTBody_ItmesRec = document.createElement('tbody'); + { + _elTBody_ItmesRec.setAttribute("id", "record"); + for (let _j = 1; _j <= _order.orders.length; _j++) { + let _objChkAvail=null; + let _objItem = _order.orders[_j]; + + var _elTr_ItmesRec = document.createElement('tr'); + var _elDiv_ItmesRec = document.createElement('div'); + _elDiv_ItmesRec.className = "rsOrderedItem"; + var _elDiv_ItmesRecID = document.createElement('div'); + _elDiv_ItmesRecID.setAttribute("id", "orderid"); + _elDiv_ItmesRecID.textContent = _objItem.id.toUpperCase(); + _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecID); + + var _elDiv_ItmesRecAmount = document.createElement('div'); + _elDiv_ItmesRecAmount.setAttribute("id", "amount"); + _elDiv_ItmesRecAmount.textContent = _objItem.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]; + _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecAmount); - if (_show == false) { - if (_elRsOLstRoot.css('display') != "none") { - _elRsOLstRoot.hide(); + var _elDiv_ItmesRecDate = document.createElement('div'); + _elDiv_ItmesRecDate.setAttribute("id", "date"); + _elDiv_ItmesRecDate.textContent = _objItem.createdAt; + _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecDate); + _elTr_ItmesRec.appendChild(_elDiv_ItmesRec); + _elTBody_ItmesRec.appendChild(_elTr_ItmesRec); + } + _elTbl_ItemsRec.appendChild(_elTBody_ItmesRec); + } + _elRsOrderWinleft.append(_elTbl_ItemsRec); + + var _elDiv_Summary = document.createElement('div'); + _elDiv_Summary.className = "summary"; + var _elDiv_Label = document.createElement('div'); + _elDiv_Label.setAttribute("id", "label"); + _elDiv_Label.textContent = _trTbl.ui.roomservice.title.sum[_state.lang].toUpperCase(); + _elDiv_Summary.appendChild(_elDiv_Label); + var _elDiv_Value = document.createElement('div'); + _elDiv_Value.setAttribute("id", "value"); + _elDiv_Value.textContent = _order.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]; + _elDiv_Summary.appendChild(_elDiv_Value); + _elRsOrderWinleft.append(_elDiv_Summary); + + if ( _elRsOrderRoot.css('display')=="none" ){ + _elRsOrderRoot.fadeIn(100); + } + } break; + + case "destroy": { + __ifxn_removeOrderElements(); + } break; } - return; - } - - - switch (_keyEvt) { - case "build": - { - let _total_quantity = 0; - - try { - HotelTV.orders.roomservice = _RsOrder = await HotelTV.api.GetRoomserviceOrders(null); - } catch (_error) { - console.log(`Fail to call API::> ${_error}`); - return; - } - - _elRsOLstRoot.children(`#title`).text(_trTbl.ui.roomservice.title.orderdetails[_state.lang]); - _elRsOLstRoot.children(`#usage`).text(_trTbl.ui.roomservice.usage.details[_state.lang]); - - //Draw Room service Order Items - try { - // Delete elements under room service item table - let _elRsOLstItemTblRec = _elRsOLstItems.children('.order_list').children('tbody'); - - // Delete elements under room service item table - if (_elRsOLstItemTblRec.children('tr').length) { - _elRsOLstItemTblRec.children('tr').remove(); - } - - for (let _idx = 1; _idx <= _RsOrder.orders.length; _idx++) { - let _Order = _RsOrder.orders[_idx]; - - var _eltr_ordering = document.createElement('tr'); - _eltr_ordering.setAttribute("id", _Order.id); - _eltr_ordering.setAttribute("index", _idx); { - //룸서비스 아이탬 화면 드로잉 - var _eldiv_ordering = document.createElement('div'); - _eldiv_ordering.setAttribute("class", "ordering"); - - // Append Sub elements:: index - let _elDiv_index = document.createElement('div'); - _elDiv_index.setAttribute("id", "index"); - _elDiv_index.textContent = `[${__ifxn_padZero(_idx,2)}]`; - _eldiv_ordering.appendChild(_elDiv_index); - - // Append Sub elements:: date - let _elDiv_date = document.createElement('div'); - _elDiv_date.setAttribute("id", "date"); - _elDiv_date.textContent = `${_trTbl.ui.roomservice.title.orderdate[_state.lang]}:${_Order.createdAt}`; - _eldiv_ordering.appendChild(_elDiv_date); - - // Append Sub elements:: Order Id - let _elDiv_OrderId = document.createElement('div'); - _elDiv_OrderId.setAttribute("id", "orderId"); - _elDiv_OrderId.textContent = `${_trTbl.ui.roomservice.title.ordernumber[_state.lang]}:${_Order.id}`; - _eldiv_ordering.appendChild(_elDiv_OrderId); - - _eltr_ordering.appendChild(_eldiv_ordering); - } - - // Append Ordered Item list - { - let _elDiv_OdItemsLst = document.createElement('div'); - _elDiv_OdItemsLst.className = "OdItemLst"; - - // Append item list hdr - { - var _elTbl_OdItemsHdr = document.createElement('table'); - _elTbl_OdItemsHdr.className = "tbl_header"; - - let _elTBody_OdItmesHdr = document.createElement('tbody'); { - _elTBody_OdItmesHdr.setAttribute("id", "hdr"); - - var _elTr_OdItmesHdr = document.createElement('tr'); - var _elTh_OdItmesHdr_Type = document.createElement('th'); - _elTh_OdItmesHdr_Type.setAttribute("id", "type"); - _elTh_OdItmesHdr_Type.textContent = _trTbl.ui.roomservice.title.item[_state.lang]; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Type); - - var _elTh_OdItmesHdr_Quantity = document.createElement('th'); - _elTh_OdItmesHdr_Quantity.setAttribute("id", "quantity"); - _elTh_OdItmesHdr_Quantity.textContent = _trTbl.ui.roomservice.title.quantity[_state.lang]; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Quantity); - - var _elTh_OdItmesHdr_Amount = document.createElement('th'); - _elTh_OdItmesHdr_Amount.setAttribute("id", "amount"); - _elTh_OdItmesHdr_Amount.textContent = _trTbl.ui.roomservice.title.amount[_state.lang]; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Amount); - - var _elTh_OdItmesHdr_Subtotal1 = document.createElement('th'); - _elTh_OdItmesHdr_Subtotal1.setAttribute("id", "subtotal1"); - _elTh_OdItmesHdr_Subtotal1.textContent = `[ ${_trTbl.ui.roomservice.title.sum[_state.lang]} `; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Subtotal1); - - var _elTh_OdItmesHdr_Subtotal2 = document.createElement('th'); - _elTh_OdItmesHdr_Subtotal2.setAttribute("id", "subtotal2"); - _elTh_OdItmesHdr_Subtotal2.textContent = `${_Order.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}${_roomservice.currency[_state.lang]}`; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Subtotal2); - - var _elTh_OdItmesHdr_Subtotal3 = document.createElement('th'); - _elTh_OdItmesHdr_Subtotal3.setAttribute("id", "subtotal3"); - _elTh_OdItmesHdr_Subtotal3.textContent = `${_trTbl.ui.roomservice.title.quantity[_state.lang]} `; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Subtotal3); - - var _elTh_OdItmesHdr_Subtotal4 = document.createElement('th'); - _elTh_OdItmesHdr_Subtotal4.setAttribute("id", "subtotal4"); - _elTh_OdItmesHdr_Subtotal4.textContent = `## `; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Subtotal4); - - var _elTh_OdItmesHdr_Subtotal5 = document.createElement('th'); - _elTh_OdItmesHdr_Subtotal5.setAttribute("id", "subtotal5"); - _elTh_OdItmesHdr_Subtotal5.textContent = ` ]`; - _elTr_OdItmesHdr.appendChild(_elTh_OdItmesHdr_Subtotal5); - - _elTBody_OdItmesHdr.appendChild(_elTr_OdItmesHdr); - } - _elTbl_OdItemsHdr.appendChild(_elTBody_OdItmesHdr); - } - _elDiv_OdItemsLst.appendChild(_elTbl_OdItemsHdr); - - - // Append item list record - { - var _elTbl_OdItemsRec = document.createElement('table'); - _elTbl_OdItemsRec.className = "tbl_record"; - - let _elTBody_OdItmesRec = document.createElement('tbody'); { - _elTBody_OdItmesRec.setAttribute("id", "record"); - for (let _j = 1; _j <= _Order.items.length; _j++) { - let _OdItem = _Order.items[_j]; - var _elTr_OdItmesRec = document.createElement('tr'); - var _elDiv_OdItmesRec = document.createElement('div'); - _elDiv_OdItmesRec.className = "oditem"; - var _elDiv_OdItmesRecName = document.createElement('div'); - _elDiv_OdItmesRecName.setAttribute("id", "name"); - _elDiv_OdItmesRecName.textContent =`[${_j}] ` + __ifxn_getRsItemValue(_roomservice.children, "title", _OdItem.itemId)[_state.lang]; - _elDiv_OdItmesRec.appendChild(_elDiv_OdItmesRecName); - - var _elDiv_OdItmesRecQuantity = document.createElement('div'); - _elDiv_OdItmesRecQuantity.setAttribute("id", "quantity"); - _elDiv_OdItmesRecQuantity.textContent = _OdItem.quantity; - _elDiv_OdItmesRec.appendChild(_elDiv_OdItmesRecQuantity); - - _total_quantity += _OdItem.quantity; - - var _elDiv_OdItmesRecAmount = document.createElement('div'); - _elDiv_OdItmesRecAmount.setAttribute("id", "amount"); - _elDiv_OdItmesRecAmount.textContent = _OdItem.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]; - _elDiv_OdItmesRec.appendChild(_elDiv_OdItmesRecAmount); - _elTr_OdItmesRec.appendChild(_elDiv_OdItmesRec); - _elTBody_OdItmesRec.appendChild(_elTr_OdItmesRec); - } - } - _elTbl_OdItemsRec.appendChild(_elTBody_OdItmesRec); - } - _elDiv_OdItemsLst.appendChild(_elTbl_OdItemsRec); - _eltr_ordering.appendChild(_elDiv_OdItemsLst); - } - - _elRsOLstItemTblRec.append(_eltr_ordering); - } - - // Draw Total Amount and Quantity - _elRsOLstSummary.children(`#title`).text(_trTbl.ui.roomservice.title.sum[_state.lang]); - _elRsOLstSummary.children(`#quantity`).text(_total_quantity); - _elRsOLstSummary.children(`#amount`).text(_RsOrder.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]); - - // Activate first order lists - _elRsOLstItemTblRec.children('tr').first().addClass('active'); - } catch (_error) { - console.log(`Fail to call order detail page::> ${_error}`); - //return; - } - - - if (_elRsOLstRoot.css('display') == "none") { - _elRsOLstRoot.fadeIn(400); - } - } - break; - case "up": - { - let _elRsOLstItemTblRec = _elRsOLstItems.children('.order_list').children('tbody'); - let selectedTblItem = _elRsOLstItemTblRec.children('tr.active').prev(".order_list tr"); - if (selectedTblItem.length) { - _elRsOLstItemTblRec.children('tr.active').removeClass("active"); - selectedTblItem.addClass('active'); - _state.hotkey.mm[_roomservice.button].status.orderdetails.idx = selectedTblItem.prop('rowIndex'); - - // 스크롤이 필요한 경우 스크롤링 하기 - let _scrollTopVal = _state.hotkey.mm[_roomservice.button].status.orderdetails.scroll_TOfset; - _scrollTopVal -= selectedTblItem.prop('scrollHeight'); - _elRsOLstItems.animate({ scrollTop: _scrollTopVal }, 200); - _state.hotkey.mm[_roomservice.button].status.orderdetails.scroll_TOfset = _scrollTopVal; - } - } - break; - case "down": - { - let _elRsOLstItemTblRec = _elRsOLstItems.children('.order_list').children('tbody'); - let selectedTblItem = _elRsOLstItemTblRec.children('tr.active').next(".order_list tr"); - if (selectedTblItem.length) { - _elRsOLstItemTblRec.children('tr.active').removeClass("active"); - selectedTblItem.addClass('active'); - _state.hotkey.mm[_roomservice.button].status.orderdetails.idx = selectedTblItem.prop('rowIndex'); - - // 스크롤이 필요한 경우 스크롤링 하기 - let _scrollTopVal = _state.hotkey.mm[_roomservice.button].status.orderdetails.scroll_TOfset; - _scrollTopVal += selectedTblItem.prop('scrollHeight'); - _elRsOLstItems.animate({ scrollTop: _scrollTopVal }, 200); - _state.hotkey.mm[_roomservice.button].status.orderdetails.scroll_TOfset = _scrollTopVal; - } - } - break; - case "back": - break; + }catch(_err){ + console.log(`Fail to draw::> ${_err}`); } } /** - * HotelTV UI[AppFull] Wrapper Function::> update room service cart list for ordering - * @param {boolean} _show show/hide - * @param {string} _keyEvt key event + * HotelTV UI[AppFull] Wrapper Function::> Draw room service item selection cart ui + * @param {string} _action + * @param {function} _cbFxnExitPre RS 아이탬선택 카트 팝업 종료 처리 전에 해야할 callback + * @param {function} _cbFxnExitPost RS 아이탬선택 카트 팝업 종료 처리 후에 수행할 callback */ - function __uifxn_AppFull_DrawRoomservceCartList(_show, _keyEvt) { + function __uifxn_AppFull_DrawRsItemSeletionCart(_action, _cbFxnExitPre, _cbFxnExitPost) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; - let _roomservice = HotelTV.opening.roomService; - let _rsCart = HotelTV.carts.roomservice; - + let _opening = HotelTV.opening; + let _carts = HotelTV.carts.roomservice; + let _order = HotelTV.orders.roomservice; + let _rsinfo_top = _opening.roomService; + let _rsinfo_ctgy = _rsinfo_top.menu; + let _rsinfo_item = null; let _elRsPupRoot = $('.popup .roomservice'); - let _elRsCLstRoot = _elRsPupRoot.children('.cart-list'); - let _elRsCLstSummary = _elRsCLstRoot.children('#summary'); - let _elRsCLstButtons = _elRsCLstRoot.children('#buttons'); - - const __ifxn_getRsItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id == _itemID) { - return _object[__j][_key]; - } - } - } - - if (_show == false) { - if (_elRsCLstRoot.css('display') != "none") { - _elRsCLstButtons.find('#confirm').removeClass("active"); - _elRsCLstButtons.find('#cancel').removeClass("active"); - _elRsCLstRoot.hide(); - } - return; - } + let _elRsCtgyBg = _elRsPupRoot.children('.bg').find('#lst_ctgbg'); + let _elRsCtgyBgFocus = _elRsCtgyBg.find('.owl-item.active.center'); + let _elRsCtgyBgMenuItemWin = _elRsCtgyBgFocus.find('.rs_item_sel_win'); + let _elRsCtgyBgMenuItemCartWin = _elRsCtgyBgFocus.find('.rs_item_sel_cart_win'); + let _elRsCtgyBgMenuItemCartWinLeft = _elRsCtgyBgMenuItemCartWin.children('.winleft'); + let _elRsCtgyBgMenuItemCartWinRight = _elRsCtgyBgMenuItemCartWin.children('.winright'); + let __status_rs_specific = null; - if (!_rsCart || !_roomservice) { - return; - } - - switch (_keyEvt) { - case "build": - let _total_quantity = 0; - - _elRsCLstRoot.children('#title').text(_trTbl.ui.roomservice.title.cartslist[_state.lang]); - _elRsCLstRoot.children('#usage').text(_trTbl.ui.roomservice.usage.orderConfirm[_state.lang]); - - //Draw Roomservice Cart Items - try { - let _elRsCLstItems = _elRsCLstRoot.children(`#items`); - let _elRsCLstItemTblHdr = _elRsCLstItems.children('.tbl_header').children('tbody'); - let _elRsCLstItemTblRec = _elRsCLstItems.children('.tbl_record').children('tbody'); - // Drawing Item Table Headers - _elRsCLstItemTblHdr.children('tr').children('th#type').text(`${_trTbl.ui.roomservice.title.item[_state.lang]}`); - _elRsCLstItemTblHdr.children('tr').children('th#quantity').text(_trTbl.ui.roomservice.title.quantity[_state.lang]); - _elRsCLstItemTblHdr.children('tr').children('th#amount').text(_trTbl.ui.roomservice.title.amount[_state.lang]); - - // Delete elements under room service item table - if (_elRsCLstItemTblRec.children('tr').length) { - _elRsCLstItemTblRec.children('tr').remove(); - } - - for (let _idx = 1; _idx <= _rsCart.items.length; _idx++) { - let _rsItem = _rsCart.items[_idx]; - if (_rsItem.id) { - var _eltr_item = document.createElement('tr'); - _eltr_item.setAttribute("id", _rsCart.items[_idx].id); - _eltr_item.setAttribute("index", _idx); { - //룸서비스 아이탬 화면 드로잉 - var _eldiv_item_ctz = document.createElement('div'); - _eldiv_item_ctz.setAttribute("class", "products"); - - // Append Sub elements::title - let _elDiv_title = document.createElement('div'); - _elDiv_title.setAttribute("id", "title"); - _elDiv_title.textContent = __ifxn_getRsItemValue(_roomservice.children, "title", _rsItem.itemId)[_state.lang]; - _eldiv_item_ctz.appendChild(_elDiv_title); - - // Append Sub elements::quantity - let _elDiv_quantity = document.createElement('div'); - _elDiv_quantity.setAttribute("id", "quantity"); - _elDiv_quantity.textContent = _rsItem.quantity; - _eldiv_item_ctz.appendChild(_elDiv_quantity); - _total_quantity += _rsItem.quantity; - - // Append Sub elements::amount - let _elDiv_price = document.createElement('div'); - _elDiv_price.setAttribute("id", "price"); - _elDiv_price.textContent = _rsItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]; - _eldiv_item_ctz.appendChild(_elDiv_price); - } - _eltr_item.appendChild(_eldiv_item_ctz); - _elRsCLstItemTblRec.append(_eltr_item); - } - } - // 첫번째 테이블 아애템에 active 클래스 추가 (플래그용으로 사용) - // _elRsCLstItemTblRec.children('tr').first().addClass('active'); - } catch (_error) { - console.log(_error.message); - } - - // Drawing Summary - _elRsCLstSummary.children('#title').text(_trTbl.ui.roomservice.title.sum[_state.lang]); - _elRsCLstSummary.children('#quantity').text(_total_quantity); - _elRsCLstSummary.children('#amount').text(_rsCart.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]); - - // Drawing Notice - _elRsCLstRoot.children('#notice').text(_trTbl.ui.roomservice.usage.orderNoticeFinal[_state.lang]); - - // Drawing Buttons - _elRsCLstButtons.find('#confirm').text(_trTbl.ui.roomservice.title.confirm[_state.lang]); - _elRsCLstButtons.find('#cancel').text(_trTbl.ui.roomservice.title.back[_state.lang]); - - // Focus button - _elRsCLstButtons.find('#confirm').addClass("active"); - - if (_elRsCLstRoot.css('display') == "none") { - _elRsCLstRoot.fadeIn(300); - } - break; - case "left": - if (_state.hotkey.mm[_roomservice.button].status.cartlist.idx == "confirm") { - _elRsCLstButtons.find('#confirm').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.cartlist.idx = "cancel"; - _elRsCLstButtons.find('#cancel').addClass("active"); - } else if (_state.hotkey.mm[_roomservice.button].status.cartlist.idx == "cancel") { - _elRsCLstButtons.find('#cancel').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.cartlist.idx = "confirm"; - _elRsCLstButtons.find('#confirm').addClass("active"); - } - break; - case "right": - if (_state.hotkey.mm[_roomservice.button].status.cartlist.idx == "confirm") { - _elRsCLstButtons.find('#confirm').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.cartlist.idx = "cancel"; - _elRsCLstButtons.find('#cancel').addClass("active"); - } else if (_state.hotkey.mm[_roomservice.button].status.cartlist.idx == "cancel") { - _elRsCLstButtons.find('#cancel').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.cartlist.idx = "confirm"; - _elRsCLstButtons.find('#confirm').addClass("active"); - } - break; - case "back": - break; - } - } - - /** - * HotelTV UI[AppFull] Wrapper Function::> update room service item description - * @param {boolean} _show show/hide - */ - function __uifxn_AppFull_DrawRoomservceItemDescription(_show) { - let _state = HotelTV.state; - let _roomservice = HotelTV.opening.roomService; - - let _elRsPupRoot = $('.popup .roomservice'); - let _elRsMnRoot = _elRsPupRoot.children('.menu'); - let _elRsMnItmTbl = _elRsMnRoot.children('#items').find('.tbl_record').children('#record'); - let _elRsMnDesc = _elRsPupRoot.children('.description'); - - const __ifxn_getRsItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id == _itemID) { - return _object[__j][_key]; - } - } - } - - if (_show == false) { - if (_elRsMnDesc.css('display') != "none") { - _elRsMnDesc.hide(); - } - return; - } - - //선택된 테이블 레코드의 ID속성값 읽어오기 - let selectedTblItemID = _elRsMnItmTbl.children('tr.active').prop('id'); - - //Redraw Description - _elRsMnDesc.children('#title').text(__ifxn_getRsItemValue(_roomservice.children, "title", selectedTblItemID)[_state.lang]); - _elRsMnDesc.children('#comment').text(__ifxn_getRsItemValue(_roomservice.children, "description", selectedTblItemID)[_state.lang]); - _elRsMnDesc.children('#thumb').css('background-image', 'url(' + __ifxn_getRsItemValue(_roomservice.children, "thumbnail", selectedTblItemID).files[_state.lang].download + ')'); - - if (_elRsMnDesc.css('display') == "none") { - _elRsMnDesc.show(); - } - - HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':__ifxn_getRsItemValue(_roomservice.children, "id", selectedTblItemID)}}]) - } - - /** - * HotelTV UI[AppFull] Wrapper Function::> update room service item - * @param {boolean} _isUpdateDescrption show/hide item description - */ - async function __uifxn_AppFull_DrawRoomserviceItem(_isUpdateDescrption) { - let _state = HotelTV.state; - let _roomservice = HotelTV.opening.roomService; - let _carts = null; - const __ifxn_cartItemExist = function(_object, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].itemId == _itemID) { + /** + * 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_cartItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].itemId == _itemID) { - return _object[__j][_key]; + 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를 반환 + */ + const __ifxn_getFocusedBtnID = function() { + return _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id'); + } + + + const __ifxn_removeRsSelectedItemCartWinElement = function() { + // Remove All element under winright div + if ( _elRsCtgyBgMenuItemCartWinLeft.children().length ){ + _elRsCtgyBgMenuItemCartWinLeft.children().remove(); + } + + if ( _elRsCtgyBgMenuItemCartWinRight.children().length ){ + _elRsCtgyBgMenuItemCartWinRight.children().remove(); + } } - try { - let _total_quantity = 0; - let _elRsMnItemTblRoot = $('.popup .roomservice>.menu #items>table.tbl_record'); - HotelTV.carts.roomservice = _carts = await HotelTV.api.GetRoomserviceCarts(); - for (let _idx = 1; _idx <= _roomservice.children.length; _idx++) { - let _rsItem = _roomservice.children[_idx]; - let _elRsItemRecRoot = _elRsMnItemTblRoot.find(`tr#${_rsItem.id}`).children('div.products'); - // Update Unit price - _elRsItemRecRoot.find('#price').text(_rsItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]); - - // Update quantity - if (_carts.items.length && __ifxn_cartItemExist(_carts.items, _rsItem.id) == true) { - let _cart_item_quantity = __ifxn_cartItemValue(_carts.items, "quantity", _rsItem.id); - _total_quantity += _cart_item_quantity; - // Cart Quantity - _elRsItemRecRoot.find('#quantity').text(_cart_item_quantity); - } - } - - //Update Total amount as well as quantity - let _elRsMnSummary = $('.popup .roomservice>.menu #summary'); - _elRsMnSummary.children('#value').text(_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _roomservice.currency[_state.lang]); - _elRsMnSummary.children('#quantity').text(_total_quantity); - - //Refresh menu description - if (_isUpdateDescrption == true) { - __uifxn_AppFull_DrawRoomservceItemDescription(true); - } - } catch (_error) { - console.log(_error.message); - } - } - - /** - * HotelTV UI[AppFull] Wrapper Function::> room service handling function - * @param {string} _evtKey event - * @param {boolean} _isFlushCart flag for flush cart - * @param {callback} _cbFxn post-processing callback - */ - async function __uifxn_AppFull_HandleRoomservice(_evtKey, _isFlushCart, _isDoOrder, _cbFxn) { - let _state = HotelTV.state; - let _opening = HotelTV.opening; - let _roomservice = null; - let _carts = HotelTV.carts.roomservice; - let _scrollTopVal = 0; - let _elRsPupRoot = $('.popup .roomservice'); - let _elRsMnRoot = _elRsPupRoot.children('.menu'); - let _elRsMnItmTbl = _elRsMnRoot.children('#items').find('.tbl_record').children('#record'); - let _elRsMnBtn = _elRsMnRoot.children('#buttons'); - let _elRsOdDetails = _elRsPupRoot.children('.order-details'); - - const __ifxn_cartEmpty = function(_object) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id) { - return false; - } - } - return true; - } - - const __ifxn_cartItemValue = function(_object, _key, _itemID) { - for (__j = 1; __j <= _object.length; __j++) { - if (_object[__j].id == _itemID) { - return _object[__j][_key]; - } - } - } - - const __ifxn_close_RsPopup = function(_fxn_post_process) { - // 아이템 디스크립션(메뉴 오른쪽) 하이드 - __uifxn_AppFull_DrawRoomservceItemDescription(false); - - _elRsPupRoot.animate({ top: 96, left: -560 }, 500, () => { - // 아이탬 테이블 스크롤 맨 위로 이동 - _elRsMnItmTbl.animate({ scrollTop: 0 }, 200); - - // CART LIST 제거 및 Off - __uifxn_AppFull_DrawRoomservceCartList(false, "back"); - - // 매뉴 아이탬 및 버튼에서 active클래스 초기화 - _elRsMnItmTbl.children('tr.active').removeClass("active"); - _elRsMnItmTbl.children('tr').first().addClass('active'); - _elRsMnBtn.children('div').removeClass("active"); - - // state내의 Room service관련 HOTKEY정보를 초기화 - _state.hotkey.mm[_roomservice.button] = { - 'type': "roomservice", - 'id': _roomservice.id, - "status": { - "focus": "menu", - "menu": { - "idx": 0, - "scroll_TOfset": 0 - }, - "button": { - "idx": null - }, - "cartlist": { - "idx": null, - "scroll_TOfset": 0 - }, - "orderdetails": { - "idx": null, - "scroll_TOfset": 0 + /** + * 룸서비스 카트 테이블 갱신 + * @returns + */ + const __ifxn_updateRsCartRecTable = function() { + try{ + 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; + } - // Do post-processing - if (_fxn_post_process) { - _fxn_post_process(); + + let _elRsCtgyBgMenuItemCartLstRecTbl = _elRsCtgyBgMenuItemCartWinRight.children('.cart_table').find('.tbl_record'); + + if ( _elRsCtgyBgMenuItemCartLstRecTbl.length ){ + // Remove all record under tbl_record + _elRsCtgyBgMenuItemCartLstRecTbl.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.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]; + _elDiv_CartItmesRec.appendChild(_elDiv_CartItmesRecPrice); + + _elTr_CartItmesRec.appendChild(_elDiv_CartItmesRec); + _elTBody_ItmesRec.appendChild(_elTr_CartItmesRec); + } + _elRsCtgyBgMenuItemCartLstRecTbl.append(_elTBody_ItmesRec); + + // 전체 금액 갱신 + let _elRsCtgyBgMenuItemCartTotalAmountValue = _elRsCtgyBgMenuItemCartWinRight.find('.summary').children('#value'); + _elRsCtgyBgMenuItemCartTotalAmountValue.text(_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]); + } + } catch ( _err ){ + console.log(`Fail to update::> ${_err}`); + } + } + + /** + * 주어진 _item_idx 아이탬의 수량 및 금액을 갱신 + * @param {string} _item_idx + * @param {string} _action + */ + const __ifxn_updateRsSelectedItemCartWin = async function(_item_idx, _action) { + let __api_resp_stock = null; + let __selected_item_amount_quantity = 0; + let __selected_item_amount_subTotal = 0; + + let _elDiv_QuntCtrlFrmQuantityValue = _elRsCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_quantity'); + let _elDiv_QuntCtrlFrmAmountValue = _elRsCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_amount'); + + /** + * cart 오브젝트에서 해당 item id에 해당하는 수량을 반환. + * 찾지 못하면 1개(디퐅트)를 반환 + * @param {object} _object + * @param {string} _itemID + * @returns + */ + const ___ifxn_getCartItemQuantity = function(_object, _itemID) { + for (__j = 1; __j <= _object.length; __j++) { + if ( _object[__j].id != null ){ + if ( _object[__j].itemId == _itemID ) { + return _object[__j].quantity; + } + } + } + return 1; + } + + const ___ifxn_updateSubTotalAmount = async function(_itemID, _quantityNum) { + let __api_resp = await HotelTV.api.GetRoomserviceStocks(_itemID, _quantityNum); + if ( __api_resp==null ){ + console.log("error"); + __selected_item_amount_subTotal = "Error"; + } else { + __selected_item_amount_subTotal = __api_resp['amount'][_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]; + } + + if ( _elDiv_QuntCtrlFrmAmountValue.length ){ + _elDiv_QuntCtrlFrmAmountValue.text(__selected_item_amount_subTotal); + } + } + + // 개수 및 산정 로직 + // i) 현재 카트내에 해당 item id에 해당하는 개수르 구함. + // ii) stock API로 총 비용을 산정 + if ( _action=="build" ){ + __selected_item_amount_quantity = ___ifxn_getCartItemQuantity(_carts.items, _rsinfo_item.id); + __status_rs_specific.stock[_rsinfo_item.id] = {"req_quantity": __selected_item_amount_quantity}; + ___ifxn_updateSubTotalAmount(_rsinfo_item.id, __selected_item_amount_quantity); + } else if ( _action=="plus" ){ + if ( __status_rs_specific.stock[_rsinfo_item.id].req_quantity<_rsinfo_item.limitation.max ){ + __status_rs_specific.stock[_rsinfo_item.id].req_quantity += 1; + ___ifxn_updateSubTotalAmount(_rsinfo_item.id, __status_rs_specific.stock[_rsinfo_item.id].req_quantity); + } + } else if ( _action=="minus" ){ + if ( __status_rs_specific.stock[_rsinfo_item.id].req_quantity>1 ){ + __status_rs_specific.stock[_rsinfo_item.id].req_quantity -= 1; + ___ifxn_updateSubTotalAmount(_rsinfo_item.id, __status_rs_specific.stock[_rsinfo_item.id].req_quantity); + } + } + + // 개수 및 금액 출력 + if ( _elDiv_QuntCtrlFrmQuantityValue.length ){ + _elDiv_QuntCtrlFrmQuantityValue.text(__status_rs_specific.stock[_rsinfo_item.id].req_quantity); + } + } + + /** + * 룸서비스 수량 선택 및 카트 윈도우 빌드업 + * @param {number} _item_idx + */ + const __ifxn_buildRsSelectedItemCartWin = function(_item_idx) { + let _sz_styleOpt = null; + + const ___iCbfxn_buildRsSelectedItemWin = function() { + // 상품 상세 설명페이지 구성 + __ifxn_removeRsSelectedItemCartWinElement(); + + // Quantity Window + { + //// Quantity Window Title + let _elDiv_QuntWinTitle = document.createElement('div'); + _elDiv_QuntWinTitle.className = "title"; + _elDiv_QuntWinTitle.textContent = _trTbl.ui.roomservice.title.selected_menu_quantity[_state.lang].toUpperCase(); + _elRsCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntWinTitle); + + //// Quantity control Frame + var _elDiv_QuntCtrlFrm = document.createElement('div'); + _elDiv_QuntCtrlFrm.className = "control"; + _elDiv_QuntCtrlFrm.innerHTML = `
`; + var _elDiv_QuntCtrlFrmQuantity = document.createElement('div'); + _elDiv_QuntCtrlFrmQuantity.className = "quantity"; + _elDiv_QuntCtrlFrmQuantity.innerHTML = `
${_trTbl.ui.roomservice.title.quantity[_state.lang].toUpperCase()}
`; + _elDiv_QuntCtrlFrmQuantity.innerHTML += `
`; + _elDiv_QuntCtrlFrmQuantity.innerHTML += `
${_trTbl.ui.roomservice.title.amount[_state.lang].toUpperCase()}
`; + _elDiv_QuntCtrlFrmQuantity.innerHTML += `
`; + _elDiv_QuntCtrlFrm.append(_elDiv_QuntCtrlFrmQuantity); + _elRsCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntCtrlFrm); + + //// Item description + var _elDiv_QuntItemDesc = document.createElement('div'); + _elDiv_QuntItemDesc.className = "description"; + _elDiv_QuntItemDesc.innerHTML = `
${_rsinfo_item.title[_state.lang]}
${_rsinfo_item.description[_state.lang]}
`; + _elRsCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntItemDesc); + + //// Buttons + var _elDiv_QuntBtnFrm = document.createElement('div'); + _elDiv_QuntBtnFrm.className = "buttons"; + _elDiv_QuntBtnFrm.innerHTML = `
${_trTbl.ui.roomservice.title.order_now[_state.lang].toUpperCase()}
`; + _elDiv_QuntBtnFrm.innerHTML += `
${_trTbl.ui.roomservice.title.add_to_cart[_state.lang].toUpperCase()}
`; + _elDiv_QuntBtnFrm.innerHTML += `
${_trTbl.ui.roomservice.title.back[_state.lang].toUpperCase()}
`; + _elRsCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntBtnFrm); + } + + // CART Window + { + //// Cart Window Title + let _elDiv_CartWinTitle = document.createElement('div'); + _elDiv_CartWinTitle.className = "title"; + _elDiv_CartWinTitle.textContent = _trTbl.ui.roomservice.title.cartslist[_state.lang].toUpperCase(); + _elRsCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinTitle); + + //// Cart item table + let _elDiv_CartWinTable = document.createElement('div'); + _elDiv_CartWinTable.className = "cart_table"; + { + ////// ADD Table Header + var _elTbl_ItemsHdr = document.createElement('table'); + _elTbl_ItemsHdr.className = "tbl_header"; + + let _elTBody_ItmesHdr = document.createElement('tbody'); + { + _elTBody_ItmesHdr.setAttribute("id", "hdr"); + + 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.roomservice.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.roomservice.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.roomservice.title.amount[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); + + _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); + } + _elTbl_ItemsHdr.appendChild(_elTBody_ItmesHdr); + _elDiv_CartWinTable.appendChild(_elTbl_ItemsHdr); + + ////// Append item list record + var _elTbl_ItemsRec = document.createElement('table'); + _elTbl_ItemsRec.className = "tbl_record"; + _elDiv_CartWinTable.appendChild(_elTbl_ItemsRec); + } + _elRsCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinTable); + + //////// update cart table record + __ifxn_updateRsCartRecTable(); + + + + //// Quantity Window Title + let _elDiv_CartWinSummary = document.createElement('div'); + _elDiv_CartWinSummary.className = "summary"; + _elDiv_CartWinSummary.innerHTML = `
${_trTbl.ui.roomservice.title.sum[_state.lang].toUpperCase()}
`; + _elDiv_CartWinSummary.innerHTML += `
${_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]}
`; + _elRsCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinSummary); + } + } + + // 카테고리매뉴윈도우 hide -> 아이템선택 윈도우 빌드 -> 아이탬선택 윈도우 show -> 버튼 포커스(back) + _elRsCtgyBgMenuItemWin.fadeOut(200, function() { + ___iCbfxn_buildRsSelectedItemWin(); + _elRsCtgyBgMenuItemCartWin.fadeIn(500, function() { + _elRsCtgyBgMenuItemCartWinLeft.find('#btn_back').addClass('focus'); + __ifxn_updateRsSelectedItemCartWin(_item_idx, "build"); + + // 통계 이벤트 송출 + HotelTV.api.ReportEvent([ + { + 'power': true, + 'location':{ + 'conId':_rsinfo_item.id + } + }], "indirect"); + }); + }); + } + + /** + * 룸서비스 카트 팝업 제거 함수 + * @param {function} __cbFxn_preForExit + * @param {function} __cbFxn_postForExit + */ + const __ifxn_removeRsSelectedItemCartWin = function(__cbFxn_preForExit, __cbFxn_postForExit) { + if ( __cbFxn_preForExit ){ + __cbFxn_preForExit(); + } + + _elRsCtgyBgMenuItemCartWin.fadeOut(200, function() { + // Remove All element under winleft&winright div + __ifxn_removeRsSelectedItemCartWinElement(); + + if ( __cbFxn_postForExit ){ + __cbFxn_postForExit(); } }); } + /** + * 룸서비스 상품을 쇼핑카트에 추가 + * @param {object} _rs_itemInf + * @param {number} _new_quantity + * @param {callback} _cbFxn_Success + * @param {callback} _cbFxn_Failure + */ + const __ifxn_processRsAddtoCart = async function(_rs_itemInf, _new_quantity, _cbFxn_Success, _cbFxn_Failure) { + try { + console.log("_new_quantity:" + _new_quantity); - - if (!_opening.roomService) { - return; + if ( __ifxn_checkCartItemExist(_carts.items, _rs_itemInf.id)==true ) + { + // Modify API + let _result = await HotelTV.api.UpdateRoomserviceCarts(__ifxn_getCartIdbyItemID(_carts.items, _rs_itemInf.id), _new_quantity); + if (_result) { + console.log(`Roomservice Update cart successed::> ${_rs_itemInf.id} ::> ${_rs_itemInf.name}`); + if (_cbFxn_Success) { + HotelTV.carts.roomservice = _carts = await HotelTV.api.GetRoomserviceCarts(null); + __ifxn_updateRsCartRecTable(); + _cbFxn_Success(); + } + } else { + console.log(`Roomservice Update cart failed::> ${_rs_itemInf.id} ::> ${_rs_itemInf.name}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } + } + else + { + // Put API + let _result = await HotelTV.api.PutRoomserviceCarts(_rs_itemInf.id, _new_quantity); + if (_result) { + console.log(`Roomservice Add to cart successed::> ${_rs_itemInf.id} ::> ${_rs_itemInf.name}`); + if (_cbFxn_Success) { + HotelTV.carts.roomservice = _carts = await HotelTV.api.GetRoomserviceCarts(null); + __ifxn_updateRsCartRecTable(); + _cbFxn_Success(); + } + } else { + console.log(`Roomservice Add to cart failed::> ${_rs_itemInf.id} ::> ${_rs_itemInf.name}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } + } + } catch ( _err ){ + console.log(`Fail to call API::> ${_err}`); + if (_cbFxn_Failure) { + _cbFxn_Failure(); + } + } } - _roomservice = _opening.roomService; - switch (_evtKey) { - case "up": - switch (_state.hotkey.mm[_roomservice.button].status.focus) { - case "menu": - // 선택한 아이탬 알아내기 - let selectedTblItem = _elRsMnItmTbl.children('tr.active').prev(".tbl_record tr"); - if (selectedTblItem.length) { - _elRsMnItmTbl.children('tr.active').removeClass("active"); - selectedTblItem.addClass('active'); - _state.hotkey.mm[_roomservice.button].status.menu.idx = selectedTblItem.prop('rowIndex'); + /** + * 쇼핑카트에 담겨있는 룸서비스 상품을 주문 + * @param {callback} _cbFxn_Success + * @param {callback} _cbFxn_Failure + */ + const __ifxn_processRsCartOrder = async function(_cbFxn_Success, _cbFxn_Failure) { + let _elRsCtgyBgMenuItemCartWinOrderWin = $('.popup .roomservice .owl-item.active.center .rs_item_sel_order_win'); - // 스크롤이 필요한 경우 스크롤링 하기 - _scrollTopVal = selectedTblItem.prop('scrollHeight') * _state.hotkey.mm[_roomservice.button].status.menu.idx; - _state.hotkey.mm[_roomservice.button].status.menu.scroll_TOfset = _scrollTopVal; - _elRsMnItmTbl.animate({ scrollTop: _scrollTopVal }, 200); - - //Update Item Description Frame - __uifxn_AppFull_DrawRoomservceItemDescription(true); - } - break; - case "button": - _elRsMnBtn.children('div').removeClass("active"); - if (_state.hotkey.mm[_roomservice.button].status.button.idx == "cancel") { - _state.hotkey.mm[_roomservice.button].status.button.idx = "details"; - _elRsMnBtn.children('div#details').addClass("active"); - } else if (_state.hotkey.mm[_roomservice.button].status.button.idx == "details") { - if (__ifxn_cartEmpty(_carts.items) == false) { - _state.hotkey.mm[_roomservice.button].status.button.idx = "order"; - _elRsMnBtn.children('div#order').addClass("active"); - } else { - _state.hotkey.mm[_roomservice.button].status.button.idx = null; - _state.hotkey.mm[_roomservice.button].status.focus = "menu"; - _elRsMnItmTbl.children('tr').eq(_state.hotkey.mm[_roomservice.button].status.menu.idx).addClass('active'); - __uifxn_AppFull_DrawRoomservceItemDescription(true); - } - } else { - _state.hotkey.mm[_roomservice.button].status.button.idx = null; - _state.hotkey.mm[_roomservice.button].status.focus = "menu"; - _elRsMnItmTbl.children('tr').eq(_state.hotkey.mm[_roomservice.button].status.menu.idx).addClass('active'); - // Shows up Menu Item description - __uifxn_AppFull_DrawRoomservceItemDescription(true); - } - break; - case "orderdetails": - //Navigate order lists - __uifxn_AppFull_DrawRoomservceOrderList(true, "up"); - break; - } - break; - case "down": - switch (_state.hotkey.mm[_roomservice.button].status.focus) { - case "menu": - // 선택한 아이탬 알아내기 - let selectedTblItem = _elRsMnItmTbl.children('tr.active').next(".tbl_record tr"); - if (selectedTblItem.length) { - _elRsMnItmTbl.children('tr.active').removeClass("active"); - selectedTblItem.addClass('active'); - _state.hotkey.mm[_roomservice.button].status.menu.idx = selectedTblItem.prop('rowIndex'); - - // 스크롤이 필요한 경우 스크롤링 하기 - _scrollTopVal = selectedTblItem.prop('scrollHeight') * _state.hotkey.mm[_roomservice.button].status.menu.idx; - _state.hotkey.mm[_roomservice.button].status.menu.scroll_TOfset = _scrollTopVal; - _elRsMnItmTbl.animate({ scrollTop: _scrollTopVal }, 200); - - //Update Item Description Frame - __uifxn_AppFull_DrawRoomservceItemDescription(true); - } else { - _elRsMnItmTbl.children('tr.active').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.focus = "button"; - - //Hide Item Description Frame - __uifxn_AppFull_DrawRoomservceItemDescription(false); - if (__ifxn_cartEmpty(_carts.items) == false) { - _state.hotkey.mm[_roomservice.button].status.button.idx = "order"; - _elRsMnBtn.children('div#order').addClass("active"); - } else { - _state.hotkey.mm[_roomservice.button].status.button.idx = "details"; - _elRsMnBtn.children('div#details').addClass("active"); + try { + _elRsCtgyBgMenuItemCartWin.fadeOut(200, async function() { + const ____getOrderMenuName = function(){ + for (__jj = 1; __jj <= _rsinfo_ctgy.length; __jj++) { + if ( _rsinfo_ctgy[__jj].name=="ORDER" ) { + return _rsinfo_ctgy[__jj].title[_state.lang]; } } - break; - case "button": - if (_state.hotkey.mm[_roomservice.button].status.button.idx == "order") { - _elRsMnBtn.children('div').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.button.idx = "details"; - _elRsMnBtn.children('div#details').addClass("active"); - } else if (_state.hotkey.mm[_roomservice.button].status.button.idx == "details") { - _elRsMnBtn.children('div').removeClass("active"); - _state.hotkey.mm[_roomservice.button].status.button.idx = "cancel"; - _elRsMnBtn.children('div#cancel').addClass("active"); - } - break; - case "orderdetails": - //Navigate order lists - __uifxn_AppFull_DrawRoomservceOrderList(true, "down"); - break; - } - break; - case "right": - if (_state.hotkey.mm[_roomservice.button].status.focus == "menu") { - let selectedTblItem = _elRsMnItmTbl.children('tr.active'); - let _sel_itemID = selectedTblItem.attr('id'); + return "ORDER"; + } + + let _str_result_message = null; + // Remove All element under winleft&winright div + __ifxn_removeRsSelectedItemCartWinElement(); + + let _result = null; + try { - let _result = await HotelTV.api.PutRoomserviceCarts(_sel_itemID, 1); - if (_result) { - __uifxn_AppFull_DrawRoomserviceItem(false); - } - } catch (_error) { - console.log(`Fail to call API::> ${_error}`); - } - } else if (_state.hotkey.mm[_roomservice.button].status.focus == "cartlist") { - __uifxn_AppFull_DrawRoomservceCartList(true, "left"); - } - break; - case "left": - if (_state.hotkey.mm[_roomservice.button].status.focus == "menu") { - let selectedTblItem = _elRsMnItmTbl.children('tr.active'); - let _sel_itemID = selectedTblItem.attr('id'); - try { - let _result = await HotelTV.api.PutRoomserviceCarts(_sel_itemID, -1); - if (_result) { - __uifxn_AppFull_DrawRoomserviceItem(false); - } - } catch (_error) { - console.log(`Fail to call API::> ${_error}`); - } - } else if (_state.hotkey.mm[_roomservice.button].status.focus == "cartlist") { - __uifxn_AppFull_DrawRoomservceCartList(true, "right"); - } - break; - case "enter": - if (_state.hotkey.mm[_roomservice.button].status.focus == "button") { - switch (_state.hotkey.mm[_opening.roomService.button].status.button.idx) { - case "cancel": - __ifxn_close_RsPopup(_cbFxn); - break; - case "order": - //Remove active class from menu buttons - _elRsMnBtn.children('div').removeClass("active"); - - // Build Cart List - _state.hotkey.mm[_roomservice.button].status.focus = "cartlist"; - __uifxn_AppFull_DrawRoomservceCartList(true, "build"); - _state.hotkey.mm[_opening.roomService.button].status.cartlist.idx = "confirm"; - break; - case "details": - // Hide Menu - _elRsMnRoot.hide(); - - // Build Order details - _state.hotkey.mm[_roomservice.button].status.focus = "orderdetails"; - __uifxn_AppFull_DrawRoomservceOrderList(true, "build"); - break; - } - } else if (_state.hotkey.mm[_roomservice.button].status.focus == "cartlist") { - switch (_state.hotkey.mm[_opening.roomService.button].status.cartlist.idx) { - case "confirm": - _state.hotkey.mm[_roomservice.button].status.focus = "orderalert"; - try { - let _result = await HotelTV.api.PutRoomserviceOrders(); - if (_result) { - console.log(`Success to order CARTID::>`); - __uifxn_AppFull_DrawRoomserviceItem(true); - + _result = await HotelTV.api.PutRoomserviceOrders(); + } catch ( __err ){ + console.log("CALL API::>" + __err); + } finally { + if ( _result !=null ) { + console.log(`Success to order Roomservice cart::>`); + _str_result_message = _trTbl.ui.roomservice.message.orderSuccess[_state.lang].replace('__MENU__', ____getOrderMenuName()); + _elRsCtgyBgMenuItemCartWinOrderWin.children('#message').text(_str_result_message); + _elRsCtgyBgMenuItemCartWinOrderWin.fadeIn(500, async function() { + try{ HotelTV.orders.roomservice = await HotelTV.api.GetRoomserviceOrders(null); - } else { - console.log(`Fail to order CARTID::>`); + HotelTV.carts.roomservice = await HotelTV.api.GetRoomserviceCarts(null); + } catch (___err) { + console.log("CALL API::>" + ___err) + } finally { + setTimeout(function() { + _elRsCtgyBgMenuItemCartWinOrderWin.fadeOut(300); + + if ( _cbFxn_Success ){ + _cbFxn_Success(); + } + }, 5000); } - } catch (_error) { - console.log(`Fail to call API::> ${_error}`); - } + }); + }else { + console.log(`Fail to order Roomservice cart::>`); + _elRsCtgyBgMenuItemCartWinOrderWin.children('#message').text(_trTbl.ui.roomservice.message.orderFailure[_state.lang]); + _elRsCtgyBgMenuItemCartWinOrderWin.fadeIn(500, async function() { + setTimeout(function() { + _elRsCtgyBgMenuItemCartWinOrderWin.fadeOut(300); - //Show Order confirm alert - __uifxn_AppFull_DrawRoomserviceOrderAlert(true); - break; - case "cancel": - //Hide Cart List - __uifxn_AppFull_DrawRoomservceCartList(false, "back"); - //Return to button - _state.hotkey.mm[_roomservice.button].status.focus = "button"; - _elRsMnBtn.children('div#order').addClass("active"); - break; + if ( _cbFxn_Failure ){ + _cbFxn_Failure(); + } + }, 5000); + }); + } } - } else if (_state.hotkey.mm[_roomservice.button].status.focus == "orderalert") { - //Hide Cart List - __uifxn_AppFull_DrawRoomservceCartList(false, "back"); - //Hide Order confirm alert - __uifxn_AppFull_DrawRoomserviceOrderAlert(false); - //Return to button - _state.hotkey.mm[_roomservice.button].status.focus = "button"; - _elRsMnBtn.children('div#order').addClass("active"); + }); + } catch ( _err ){ + console.log(`Fail to call API::> ${_err}`); + if ( _cbFxn_Failure ){ + _cbFxn_Failure(); } - break; - case "back": - if (_state.hotkey.mm[_roomservice.button].status.focus == "orderalert") { - //Hide Cart List - __uifxn_AppFull_DrawRoomservceCartList(false, "back"); - //Hide Order confirm alert - __uifxn_AppFull_DrawRoomserviceOrderAlert(false); - //Return to button - _state.hotkey.mm[_roomservice.button].status.focus = "button"; - _elRsMnBtn.children('div#order').addClass("active"); - } else if (_state.hotkey.mm[_roomservice.button].status.focus == "orderdetails") { - //Hide Order Details - __uifxn_AppFull_DrawRoomservceOrderList(false, null); + } + } - //Return to button - _state.hotkey.mm[_roomservice.button].status.focus = "button"; - // Hide Menu - _elRsMnRoot.fadeIn(400); - } else { - __ifxn_close_RsPopup(_cbFxn); - } - break; + try{ + let _objChkAvail=null; + let _str_curBtnID = null; + // 룸서비스 정보 오브젝트 + __status_rs_specific = _state.hotkey.mm[_rsinfo_top.button].status; + let __rsctgyIdx = __status_rs_specific.category_sel.cur; + let __rsctgyItemStatus = __status_rs_specific.items[_rsinfo_ctgy[__rsctgyIdx].name]; + + // 선택된 룸서비스 아이템 정보 매핑 + _rsinfo_item = _rsinfo_ctgy[__status_rs_specific.category_sel.cur].items[__rsctgyItemStatus.idx+1]; + + _objChkAvail = __uifxn_Utils_CheckRsItemAvailable(_rsinfo_item.schedule); + if(_objChkAvail.result==false){ + return false; + } + + if ( ["left","right","enter"].includes(_action) ){ + _str_curBtnID = __ifxn_getFocusedBtnID(); + } + + switch ( _action ) + { + case "cart": { + __ifxn_buildRsSelectedItemCartWin(__rsctgyItemStatus.idx); + } break; + + case "left": { + if ( _str_curBtnID=='btn_back' ){ + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus'); + } else if ( _str_curBtnID=='btn_addtocart' ){ + if ( _elRsCtgyBgMenuItemCartWinRight.find('.tbl_record').children().length>0 ){ + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); + } + } + } break; + + case "right": { + if ( _str_curBtnID=='btn_ordernow' ){ + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus'); + } else if ( _str_curBtnID=='btn_addtocart' ){ + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elRsCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_back').addClass('focus'); + } + } break; + + case "quantity_plus": { + __ifxn_updateRsSelectedItemCartWin(__rsctgyItemStatus.idx, "plus"); + } break; + + case "quantity_minus": { + __ifxn_updateRsSelectedItemCartWin(__rsctgyItemStatus.idx, "minus"); + } break; + + case "cart_scroll_up": { + let _elDiv_RsCtgyCartRecTable = _elRsCtgyBgMenuItemCartWinRight.find('.tbl_record').children('#record'); + if ( _elDiv_RsCtgyCartRecTable.children().length>0 ){ + let _heightTable = _elDiv_RsCtgyCartRecTable.outerHeight(true); // passing "true" will also include the top and bottom margin + let _numTrHeight = _elDiv_RsCtgyCartRecTable.find('tr').first().height(); //테이블 레코드 1줄 높이 + let _posFirstTr = _elDiv_RsCtgyCartRecTable.find('tr').first().position(); + let _posLastTr = _elDiv_RsCtgyCartRecTable.find('tr').last().position(); + + if ( _posFirstTr.top<0 ){ + _elDiv_RsCtgyCartRecTable.animate({ scrollTop: _posFirstTr.top-_numTrHeight}, 200); + } + } + } break; + + case "cart_scroll_down": { + let _elDiv_RsCtgyCartRecTable = _elRsCtgyBgMenuItemCartWinRight.find('.tbl_record').children('#record'); + if ( _elDiv_RsCtgyCartRecTable.children().length>0 ){ + const ___ifxn_calScrollTopOffset = function(){ + let neededScrollRowCnt = 1; + for (__kk = 0; __kk < _elDiv_RsCtgyCartRecTable.children().length; __kk++) { + if ( _elDiv_RsCtgyCartRecTable.children().eq(__kk).position().top>_numTrHeight ){ + break; + } + neededScrollRowCnt ++; + } + return neededScrollRowCnt*_numTrHeight; + } + let _heightTable = _elDiv_RsCtgyCartRecTable.outerHeight(true); // passing "true" will also include the top and bottom margin + let _numTrHeight = _elDiv_RsCtgyCartRecTable.find('tr').first().height(); //테이블 레코드 1줄 높이 + let _posFirstTr = _elDiv_RsCtgyCartRecTable.find('tr').first().position(); + let _posLastTr = _elDiv_RsCtgyCartRecTable.find('tr').last().position(); + + if ( _posLastTr.top > _heightTable ){ + _elDiv_RsCtgyCartRecTable.animate({ scrollTop: ___ifxn_calScrollTopOffset()}, 200); + } + } + } break; + + case "enter": { + if ( _str_curBtnID=='btn_ordernow' ){ + console.log("TODO::>> ORDERING NOW..."); + __ifxn_processRsCartOrder( + function() { + //Return to menu + if ( _cbFxnExitPost ){ + _cbFxnExitPost(); + } + }, + function() { + //Return to menu + if ( _cbFxnExitPost ){ + _cbFxnExitPost(); + } + } + ) + } else if ( _str_curBtnID=='btn_addtocart' ){ + //console.log("SUCCESS::>> ADD TO CART"); + __ifxn_processRsAddtoCart( + _rsinfo_item, + __status_rs_specific.stock[_rsinfo_item.id].req_quantity, + function() { + //TODO: 카트 API호출 성공시 호출할 루틴 + }, + function() { + //TODO: 카트 API호출 실패시 호출할 루틴 + } + ); + } else if ( _str_curBtnID=='btn_back' ){ + __ifxn_removeRsSelectedItemCartWin(_cbFxnExitPre, _cbFxnExitPost); + } + } break; + + case "return": { + __ifxn_removeRsSelectedItemCartWin(_cbFxnExitPre, _cbFxnExitPost); + } break; + } + + return true; + }catch(_err){ + console.log(`Fail to draw::> ${_err}`); + return false; } } - /** - * HotelTV UI[AppFull] Wrapper Function::> build room service + * HotelTV UI[AppFull] Wrapper Function::> Draw room service item selection ui */ - function __uifxn_AppFull_BuildRoomService() { + function __uifxn_AppFull_DrawRsItemSeletion(_action) { let _state = HotelTV.state; let _trTbl = HotelTV.translation; let _opening = HotelTV.opening; - let _order = HotelTV.orders.roomService; - let _roomservice = null; + let _order = HotelTV.orders.roomservice; + let _rsinfo_top = _opening.roomService; + let _rsinfo_ctgy = _rsinfo_top.menu; let _elRsPupRoot = $('.popup .roomservice'); - let _elRsMnRoot = _elRsPupRoot.children('.menu'); - let _elRsMnBtn = _elRsMnRoot.children('#buttons'); - let _elRsMnSummary = _elRsMnRoot.children('#summary'); + let _elRsCtgyBg = _elRsPupRoot.children('.bg').find('#lst_ctgbg'); + let _elRsCtgyBgFocus = _elRsCtgyBg.find('.owl-item.active.center'); + let _elRsCtgyBgMenuItemWin = _elRsCtgyBgFocus.find('.rs_item_sel_win'); + let __status_rs_specific = null; + + const __ifxn_updateRsItemDesc = function(_item_idx,_cbFxn) { + let _sz_styleOpt = null; + let __item_info = _rsinfo_ctgy[__status_rs_specific.category_sel.cur].items[_item_idx+1]; + // Remove All element under winright div + let _elDivWinRight = _elRsCtgyBgMenuItemWin.find('.winright'); + + const ___iCbfxn_updateRsItemDesc = function() { + //상품 상세 설명페이지 구성 + ////썸네일 + let _elDiv_ItmesThumb = document.createElement('div'); + _elDiv_ItmesThumb.className = "rsItemDescThumb"; + //let thuri = __item_info.thumbnail.files[_state.lang].download; + _sz_styleOpt = "background-image: url(" + __item_info.thumbnail.files[_state.lang].download + "); "; + _sz_styleOpt += "background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; "; + _elDiv_ItmesThumb.setAttribute("style", _sz_styleOpt); + + ////상세설명 + let _elDiv_ItmesDetails = document.createElement('div'); + _elDiv_ItmesDetails.className = "rsItemDescDetails"; + + var _elDiv_ItmesTitle = document.createElement('div'); + _elDiv_ItmesTitle.setAttribute("id", "title"); + _elDiv_ItmesTitle.textContent = __item_info.title[_state.lang]; + + var _elDiv_ItmesDescription = document.createElement('div'); + _elDiv_ItmesDescription.setAttribute("id", "description"); + _elDiv_ItmesDescription.textContent = __item_info.description[_state.lang]; + //_elDiv_ItmesDescription.textContent = __item_info.description[_state.lang].replace(/(?:\r\n|\r|\n)/g, '
'); + + _elDiv_ItmesDetails.appendChild(_elDiv_ItmesTitle); + _elDiv_ItmesDetails.appendChild(_elDiv_ItmesDescription); + + //winright에 썸네일과 상세설명 추가 + _elDivWinRight.append(_elDiv_ItmesThumb); + _elDivWinRight.append(_elDiv_ItmesDetails); + } + + if ( _elDivWinRight.css('display') != "none") { + _elDivWinRight.fadeOut(200, function() { + if ( _elDivWinRight.children().length ){ + _elDivWinRight.children().remove(); + } + ___iCbfxn_updateRsItemDesc(); + _elDivWinRight.fadeIn(500, function() { + if ( _cbFxn ){ _cbFxn(); } + }); + }); + }else{ + if ( _elDivWinRight.children().length ){ + _elDivWinRight.children().remove(); + } + ___iCbfxn_updateRsItemDesc(); + + _elDivWinRight.fadeIn(500, function() { + if ( _cbFxn ){ _cbFxn(); } + }); + } + } + + const __ifxn_removeRsItemDesc = function(_item_idx) { + // Remove All element under winright div + let _elDivWinRight = _elRsCtgyBgMenuItemWin.find('.winright'); + if ( _elDivWinRight.children().length ){ + _elDivWinRight.children().remove(); + } + + if ( _elDivWinRight.css('display') != "none") { + _elDivWinRight.fadeOut(300, function() { + }); + } + } + + try{ + // 룸서비스 정보 오브젝트 + _rsinfo_top = _opening.roomService; + _rsinfo_ctgy = _rsinfo_top.menu; + __status_rs_specific = _state.hotkey.mm[_rsinfo_top.button].status; + let __rsctgyIdx = __status_rs_specific.category_sel.cur; + let __rsctgyItemStatus = __status_rs_specific.items[_rsinfo_ctgy[__rsctgyIdx].name]; + + switch ( _action ) + { + case "enter": { + _elRsCtgyBgMenuItemWin.find('.rsctgyItem').first().addClass("focus"); + __ifxn_updateRsItemDesc(__rsctgyItemStatus.idx); + } break; + + case "exit": { + _elRsCtgyBgMenuItemWin.find('.rsctgyItem').removeClass("focus"); + __ifxn_removeRsItemDesc(); + } break; + + case "up": { + let _isNeedSoldOutMask = false; + let _elTbl_RsItem = _elRsCtgyBgMenuItemWin.find('.tbl_record'); + let _elTblTr_RsItemNext = _elTbl_RsItem.find('.focus').parent().prev('tr'); + + if (_elTblTr_RsItemNext.length) { + _elTbl_RsItem.find('.focus').removeClass("focus"); + _elTblTr_RsItemNext.children('.rsctgyItem').addClass('focus'); + + if ( _elTblTr_RsItemNext.children('.rsctgyItem.unavailable').length ){ + _isNeedSoldOutMask = true; + } + + // 테이블 ROW인덱스와 스크롤 OFFSET계산 + __rsctgyItemStatus.idx = _elTblTr_RsItemNext.prop('rowIndex'); + __rsctgyItemStatus.scroll_TOfset += _elTblTr_RsItemNext.prop('scrollHeight'); + + //스크롤 에니메이션 수행 + _elTbl_RsItem.children('#record').animate({ scrollTop: __rsctgyItemStatus.scroll_TOfset }, 200); + + __ifxn_updateRsItemDesc(__rsctgyItemStatus.idx, function() { + if ( _isNeedSoldOutMask==true ){ + _elRsCtgyBgMenuItemWin.find('.winright').find('.rsItemDescThumb').addClass('unavailable'); + }else { + _elRsCtgyBgMenuItemWin.find('.winright').find('.rsItemDescThumb').removeClass('unavailable'); + } + }); + } + } break; + + case "down": { + let _elTbl_RsItem = _elRsCtgyBgMenuItemWin.find('.tbl_record'); + let _elTblTr_RsItemNext = _elTbl_RsItem.find('.focus').parent().next('tr'); + let _isNeedSoldOutMask = false; + + if (_elTblTr_RsItemNext.length) { + _elTbl_RsItem.find('.focus').removeClass("focus"); + _elTblTr_RsItemNext.children('.rsctgyItem').addClass('focus'); + + if ( _elTblTr_RsItemNext.children('.rsctgyItem.unavailable').length ){ + _isNeedSoldOutMask = true; + } + + // 테이블 ROW인덱스와 스크롤 OFFSET계산 + __rsctgyItemStatus.idx = _elTblTr_RsItemNext.prop('rowIndex'); + __rsctgyItemStatus.scroll_TOfset += _elTblTr_RsItemNext.prop('scrollHeight'); + + //스크롤 에니메이션 수행 + _elTbl_RsItem.children('#record').animate({ scrollTop: __rsctgyItemStatus.scroll_TOfset }, 200); + + __ifxn_updateRsItemDesc(__rsctgyItemStatus.idx, function() { + if ( _isNeedSoldOutMask==true ){ + _elRsCtgyBgMenuItemWin.find('.winright').find('.rsItemDescThumb').addClass('unavailable'); + }else { + _elRsCtgyBgMenuItemWin.find('.winright').find('.rsItemDescThumb').removeClass('unavailable'); + } + }); + } + } break; + } + } catch (_err){ + console.log(`Fail to draw::> ${_err}`); + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> build room service service + */ + function __uifxn_AppFull_BuildRoomservice() { + let _state = HotelTV.state; + let __status_rs_specific = null; + let _trTbl = HotelTV.translation; + let _opening = HotelTV.opening; + let _order = HotelTV.orders.roomservice; + let _rsinfo_top = null; + let _rsinfo_ctgy = null; + let _elMainRoot = $('.main'); + let _elMainMenu = _elMainRoot.children('.mm'); + let _elRsPupRoot = $('.popup .roomservice'); + let _elRsCtgyBg = _elRsPupRoot.children('.bg').find('#lst_ctgbg'); + let _elRsCtgySel = _elRsPupRoot.children('.slider').find('#lst_ctgsel'); + let _elRsUGRoot = _elRsPupRoot.children('.use_guide'); + + + // 룸서비스 인포 Validation if (!_opening.roomService) { return; } - _roomservice = _opening.roomService; - _elRsMnRoot.children('#title').text(_roomservice.title[_state.lang]); - _elRsMnRoot.children('#usage').text(_trTbl.ui.roomservice.usage.order[_state.lang]); + // 룸서비스 정보 오브젝트 + _rsinfo_top = _opening.roomService; + _rsinfo_ctgy = _rsinfo_top.menu; - //Draw Roomservice Cart Items - try { - let _elRsMnItems = _elRsMnRoot.children(`#items`); - let _elRsMnItemTblHdr = _elRsMnItems.children('.tbl_header').children('tbody'); - let _elRsMnItemTblRec = _elRsMnItems.children('.tbl_record').children('tbody'); - // Drawing Item Table Headers - _elRsMnItemTblHdr.children('tr').children('th#type').text(`${_trTbl.ui.roomservice.title.item[_state.lang]} [${_roomservice.children.length}]`); - _elRsMnItemTblHdr.children('tr').children('th#quantity').text(_trTbl.ui.roomservice.title.quantity[_state.lang]); + __status_rs_specific = _state.hotkey.mm[_rsinfo_top.button].status; - // Delete elements under room service item table - if (_elRsMnItemTblRec.children('tr').length) { - _elRsMnItemTblRec.children('tr').remove(); + + + // 초기 메인 메뉴 KEY설정 + _state.menu.stage.cur = "preparing_roomservice"; + _elRsUGRoot.hide(); + + // 룸서비스 팝업 카테고리 셀렉터 노드를 동적으로 구성 + for (let _idx = 1; _idx <= _rsinfo_ctgy.length; _idx++) { + let _elDiv_Ctgy = document.createElement('div'); + _elDiv_Ctgy.className = 'item'; + _elDiv_Ctgy.id = _rsinfo_ctgy[_idx].id; + _elDiv_Ctgy.setAttribute("rs_ctgy_id", _idx); + + // Append Category elements::title + let _elDiv_CtgyTitle = document.createElement('div'); + _elDiv_CtgyTitle.setAttribute("id", "rs_item_title"); + + if (_rsinfo_ctgy[_idx].showTitle && _rsinfo_ctgy[_idx].showTitle == true) { + _elDiv_CtgyTitle.textContent = _rsinfo_ctgy[_idx].title[_state.lang]; } - for (let _idx = 1; _idx <= _roomservice.children.length; _idx++) { - let _rsItem = _roomservice.children[_idx]; + // Append Category elements::btn + let _elDiv_CtgyBtn = document.createElement('div'); + _elDiv_CtgyBtn.setAttribute("id", "ctgy_item_btn"); + let _sz_styleOpt = "--icon_unfocus: url(" + _rsinfo_ctgy[_idx].unfocusIcon.file.download + "); "; + _sz_styleOpt += "--icon_focus: url(" + _rsinfo_ctgy[_idx].focusIcon.file.download + "); "; + //_sz_styleOpt += "background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%; "; + _sz_styleOpt += "background-repeat: no-repeat; background-position: center bottom;"; + _elDiv_CtgyBtn.setAttribute("style", _sz_styleOpt); - var _eltr_item = document.createElement('tr'); - _eltr_item.setAttribute("id", _roomservice.children[_idx].id); - _eltr_item.setAttribute("index", _idx); { - //어메니티 아이탬 화면 드로잉 - var _eldiv_item_ctz = document.createElement('div'); - _eldiv_item_ctz.setAttribute("class", "products"); + _elDiv_Ctgy.appendChild(_elDiv_CtgyBtn); + _elDiv_Ctgy.appendChild(_elDiv_CtgyTitle); - // Append Sub elements::index - let _elDiv_index = document.createElement('div'); - _elDiv_index.setAttribute("id", "index"); - _elDiv_index.textContent = `[${_idx}]`; - _eldiv_item_ctz.appendChild(_elDiv_index); + _elRsCtgySel.append(_elDiv_Ctgy); - // Append Sub elements::title - let _elDiv_title = document.createElement('div'); - _elDiv_title.setAttribute("id", "title"); - _elDiv_title.textContent = _rsItem.title[_state.lang]; - _eldiv_item_ctz.appendChild(_elDiv_title); - - // Append Sub elements::price - let _elDiv_price = document.createElement('div'); - _elDiv_price.setAttribute("id", "price"); - _elDiv_price.textContent = _rsItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); - _eldiv_item_ctz.appendChild(_elDiv_price); - - // Append Sub elements::quantity - let _elDiv_quantity = document.createElement('div'); - _elDiv_quantity.setAttribute("id", "quantity"); - _elDiv_quantity.textContent = "0"; - _eldiv_item_ctz.appendChild(_elDiv_quantity); - - } - _eltr_item.appendChild(_eldiv_item_ctz); - _elRsMnItemTblRec.append(_eltr_item); - } - // 첫번째 테이블 아애템에 active 클래스 추가 (플래그용으로 사용) - _elRsMnItemTblRec.children('tr').first().addClass('active'); - } catch (_error) { - console.log(_error.message); - } - - // Drawing Amount(Cart) - _elRsMnSummary.children('#title').text(_trTbl.ui.roomservice.title.sum[_state.lang]); - // _elRsMnSummary.children('#value').text("0"); - // _elRsMnSummary.children('#quantity').text("0"); - - // - __uifxn_AppFull_DrawRoomservceCartList(false, null); - __uifxn_AppFull_DrawRoomservceOrderList(false, null); - __uifxn_AppFull_DrawRoomserviceOrderAlert(false); - - // Draw Buttons - _elRsMnBtn.children('#order').text(_trTbl.ui.roomservice.title.order[_state.lang]); - _elRsMnBtn.children('#details').text(_trTbl.ui.roomservice.title.orderdetails[_state.lang]); - _elRsMnBtn.children('#cancel').text(_trTbl.ui.roomservice.title.cancel[_state.lang]); - - - // HOTKEY정보를 state에 기록 - if (!(_roomservice.button in _state.hotkey.mm)) { - _state.hotkey.mm[_roomservice.button] = { - 'type': "roomservice", - 'id': _roomservice.id, - "status": { - "focus": "menu", - "menu": { + // 각 카테고리별 아이템 스크롤위치등을 관리하기 위하여 status맴버 초기화 및 구성 + if ( !(_rsinfo_ctgy[_idx].name in __status_rs_specific.items)==true ){ + __status_rs_specific.items[_rsinfo_ctgy[_idx].name] = { + "idx": 0, + "scroll_TOfset": 0, + "carts": { "idx": 0, "scroll_TOfset": 0 - }, - "button": { - "idx": null - }, - "cartlist": { - "idx": null, - "scroll_TOfset": 0 - }, - "orderdetails": { - "idx": null, - "scroll_TOfset": 0 + } + }; + } + } + + // 룸서비스 팝업 카테고리 백그라운드 이미지 노드를 동적으로 구성 + for (let _idx = 1; _idx <= _rsinfo_ctgy.length; _idx++) { + let _objRs_ctgyItem = _rsinfo_ctgy[_idx].items; + let _sz_styleOpt = null; + let _elDiv_Ctgy = document.createElement('div'); + + _elDiv_Ctgy.className = 'item'; + _elDiv_Ctgy.id = _rsinfo_ctgy[_idx].id; + _elDiv_Ctgy.setAttribute("rs_ctgy_id", _idx); + _sz_styleOpt = "background-image: url(" + _rsinfo_ctgy[_idx].background.file.download + "); "; + _sz_styleOpt += "background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; "; + _elDiv_Ctgy.setAttribute("style", _sz_styleOpt); + + // TOP 그라데이션 + let _elDiv_CtgyGradientTop = document.createElement('div'); + _elDiv_CtgyGradientTop.className = 'top_gradient'; + + _elDiv_Ctgy.appendChild(_elDiv_CtgyGradientTop); + + // BOTTOM 그라데이션 + let _elDiv_CtgyGradientBottom = document.createElement('div'); + _elDiv_CtgyGradientBottom.className = 'bottom_gradient'; + + _elDiv_Ctgy.appendChild(_elDiv_CtgyGradientBottom); + + // ITEM LIST TOP-LEVEL ELEMENTS + //// ITEM SELECTION WINDOW + let _elDiv_ItemSelWin = document.createElement('div'); + _elDiv_ItemSelWin.className = 'rs_item_sel_win'; + { + ////// Window Left side + let _elDiv_ItemWinLeft = document.createElement('div'); + _elDiv_ItemWinLeft.className = 'winleft'; + + if ( ["ORDER", "CARTS"].includes(_rsinfo_ctgy[_idx].name)==true ) + { + _elDiv_ItemWinLeft.classList.add(_rsinfo_ctgy[_idx].name.toLowerCase()); + _elDiv_ItemWinLeft.style.display = 'none'; + } + else + { + ////// ADD Table Header + var _elTbl_ItemsHdr = document.createElement('table'); + _elTbl_ItemsHdr.className = "tbl_header"; + + let _elTBody_ItmesHdr = document.createElement('tbody'); + { + _elTBody_ItmesHdr.setAttribute("id", "hdr"); + + 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.roomservice.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.roomservice.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.roomservice.title.orderability[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); + + _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); + } + _elTbl_ItemsHdr.appendChild(_elTBody_ItmesHdr); + _elDiv_ItemWinLeft.appendChild(_elTbl_ItemsHdr); + + ////// Append item list record + var _elTbl_ItemsRec = document.createElement('table'); + _elTbl_ItemsRec.className = "tbl_record"; + + let _elTBody_ItmesRec = document.createElement('tbody'); + { + _elTBody_ItmesRec.setAttribute("id", "record"); + for (let _j = 1; _j <= _objRs_ctgyItem.length; _j++) { + let _objChkAvail=null; + let _objItem = _objRs_ctgyItem[_j]; + + var _elTr_ItmesRec = document.createElement('tr'); + var _elDiv_ItmesRec = document.createElement('div'); + _elDiv_ItmesRec.className = "rsctgyItem"; + 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", "price"); + _elDiv_ItmesRecPrice.textContent = _objItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _rsinfo_top.currency[_state.lang]; + _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecPrice); + + + var _elDiv_ItmesRecStatus = document.createElement('div'); + _elDiv_ItmesRecStatus.setAttribute("id", "status"); + + _objChkAvail = __uifxn_Utils_CheckRsItemAvailable(_objItem.schedule); + if(_objChkAvail.result==true){ + _elDiv_ItmesRecStatus.textContent = _trTbl.ui.roomservice.title.orderable[_state.lang]; + }else{ + _elDiv_ItmesRec.classList.add("unavailable"); + if ( _objChkAvail.avail_dtime=="unorderable" ){ + _elDiv_ItmesRecStatus.textContent = _trTbl.ui.roomservice.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); + } + _elTbl_ItemsRec.appendChild(_elTBody_ItmesRec); + } + _elDiv_ItemWinLeft.appendChild(_elTbl_ItemsRec); + } + _elDiv_ItemSelWin.appendChild(_elDiv_ItemWinLeft); + + ////// Window Right side + let _elDiv_ItemWinRight = document.createElement('div'); + _elDiv_ItemWinRight.className = 'winright'; + + _elDiv_ItemSelWin.appendChild(_elDiv_ItemWinRight); + } + // _elDiv_Ctgy에 추가 + _elDiv_Ctgy.appendChild(_elDiv_ItemSelWin); + + // Selected Item Cart Window + let _elDiv_SelectedItemCartWin = document.createElement('div'); + _elDiv_SelectedItemCartWin.className = 'rs_item_sel_cart_win'; + _elDiv_SelectedItemCartWin.style.display = 'none'; + { + if ( ["ORDER", "CARTS"].includes(_rsinfo_ctgy[_idx].name)==false ) + { + ////// Window Left side + let _elDiv_ItemWinCartLeft = document.createElement('div'); + _elDiv_ItemWinCartLeft.className = 'winleft'; + _elDiv_SelectedItemCartWin.appendChild(_elDiv_ItemWinCartLeft); + + ////// Window Right side + let _elDiv_ItemWinCartRight = document.createElement('div'); + _elDiv_ItemWinCartRight.className = 'winright'; + + _elDiv_SelectedItemCartWin.appendChild(_elDiv_ItemWinCartRight); + } + } + // _elDiv_Ctgy에 추가 + _elDiv_Ctgy.appendChild(_elDiv_SelectedItemCartWin); + + + // Selected Item Cart Window + let _elDiv_SelectedItemOrderWin = document.createElement('div'); + _elDiv_SelectedItemOrderWin.className = 'rs_item_sel_order_win'; + _elDiv_SelectedItemOrderWin.innerHTML += `
`; + _elDiv_SelectedItemOrderWin.style.display = 'none'; + // _elDiv_Ctgy에 추가 + _elDiv_Ctgy.appendChild(_elDiv_SelectedItemOrderWin); + + // _elRsCtgyBg에 추가 + _elRsCtgyBg.append(_elDiv_Ctgy); + } + + + _elRsCtgyBg.owlCarousel({ + center: true, + items: 1, //Number of Items on Screen what you want + loop: true, + rewind: false, + checkVisible: false, + animateOut: 'fadeOut', + animateIn: 'fadeIn', + margin: 0, + smartSpeed: 1000, + lazyLoad: true, + mouseDrag: false, + touchDrag: false, + pullDrag: false, + freeDrag: false, + dots: false, + startPosition: (Number(__status_rs_specific.category_sel.cur) - 1), + }); + // _elRsPupRoot.children('.bg').fadeIn(1000, function() { + // __uifxn_AppFull_HotKey_ShowBtnOnMM(false); + // __uifxn_AppFull_TopWidjetShow(false); + // }); + + _elRsCtgySel.owlCarousel({ + center: true, + items: 5, //Number of Items on Screen what you want + loop: true, + rewind: false, + checkVisible: false, + margin: 0, + smartSpeed: 0, + autoWidth: false, + mouseDrag: false, + touchDrag: false, + pullDrag: false, + freeDrag: false, + dots: true, + startPosition: (Number(__status_rs_specific.category_sel.cur) - 1), + }); + + //메인 페이지->룸서비스 페이지 화면 전환 + _elMainRoot.fadeOut(500, function() { + __uifxn_AppFull_HotKey_ShowBtnOnMM(false); + __uifxn_AppFull_TopWidjetShow(false); + _elMainRoot.removeClass("depth_mm"); + _elRsPupRoot.children('.slider').fadeIn(300, function() { + _elRsPupRoot.children('.bg').fadeIn(500, function() { + _elRsCtgySel.find('.owl-item').addClass('unfocus'); + _elRsCtgySel.trigger("to.owl.carousel", [(Number(__status_rs_specific.category_sel.cur) - 1), 10, true]); + _elRsCtgySel.trigger('translate.owl.carousel', [0, 500, true]); + + $(document.activeElement).keydown(function(event) { //attach event listener + if (_state.menu.stage.cur == "roomservice_ctgy_sel") { + if (event.keyCode == gRmtKey.left) { + _elRsCtgySel.trigger('prev.owl', [700]); + } else if (event.keyCode == gRmtKey.right) { + _elRsCtgySel.trigger('next.owl', [700]); + } else if (event.keyCode == gRmtKey.enter) { + // 카테고리 화면 빌드 및 화면 전환 + _state.menu.stage.cur = "roomservice_ctgy_item_sel"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_item_sel"); + __uifxn_AppFull_DrawRsItemSeletion("enter"); + } else if (event.keyCode == gRmtKey.back) { + // 카테고리 폼의 썸네일 에니메이션용 타이머 제거 + if (_hndl_tmrRoomserviceThumbAni != null) { + clearInterval(_hndl_tmrRoomserviceThumbAni); + _hndl_tmrRoomserviceThumbAni = null; + console.log("TMR(ROOMSERVICE CATEGORY CTZ ANI For Thumbnail)::>Destoried..."); + } + + __uifxn_AppFull_DrawRsUserGuide("destroy"); + + // 룸서비스 -> 메인 메뉴로 귀환 + $(document.activeElement).off('keydown'); + _elMainMenu.show(function() { + $('#lst_mmsel').trigger('translate.owl.carousel', [0]); + }); + + _elRsCtgySel.off('refresh.owl.carousel'); + _elRsCtgySel.off('change.owl.carousel'); + _elRsCtgySel.off('changed.owl.carousel'); + _elRsCtgySel.off('translate.owl.carousel'); + + _elRsCtgyBg.owlCarousel('destroy'); + _elRsCtgySel.owlCarousel('destroy'); + + _elRsCtgySel.children('div').remove(); + _elRsCtgyBg.children('div').remove(); + _elRsPupRoot.children('.bg').hide(); + _elRsPupRoot.children('.slider').hide(); + + setTimeout(function() { + $('.main').fadeIn(1000, () => { + _state.menu.stage.cur = "main"; + $('.main').addClass("depth_mm"); + __uifxn_AppFull_HotKey_ShowBtnOnMM(true); + __uifxn_AppFull_TopWidjetShow(true); + }); + }, 500); + } + } else if (_state.menu.stage.cur == "roomservice_ctgy_orderlists") { + if (event.keyCode == gRmtKey.left) { + _elRsCtgySel.trigger('prev.owl', [700]); + } else if (event.keyCode == gRmtKey.right) { + _elRsCtgySel.trigger('next.owl', [700]); + } + } else if (_state.menu.stage.cur == "roomservice_ctgy_item_sel") { + if (event.keyCode == gRmtKey.left) { + __uifxn_AppFull_DrawRsItemSeletion("plus"); + } else if (event.keyCode == gRmtKey.right) { + __uifxn_AppFull_DrawRsItemSeletion("minus"); + } else if (event.keyCode == gRmtKey.up) { + __uifxn_AppFull_DrawRsItemSeletion("up"); + } else if (event.keyCode == gRmtKey.down) { + __uifxn_AppFull_DrawRsItemSeletion("down"); + } else if (event.keyCode == gRmtKey.back) { + __uifxn_AppFull_DrawRsItemSeletion("exit"); + _state.menu.stage.cur = "roomservice_ctgy_sel"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_sel"); + } else if (event.keyCode == gRmtKey.enter) { + console.log('ROOMSERVICE CATEGORY ITEM SEL: KEY::> ' + event.keyCode); + if ( __uifxn_AppFull_DrawRsItemSeletionCart("cart", null, null)==true ){ + _state.menu.stage.cur = "roomservice_ctgy_item_cart"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_item_cart"); + } else { + HotelTV.ui_utils.ShowNotificationMsgBalloon(_trTbl.system.ott_service_not_ready[_state.lang], 5); + } + } + } else if (_state.menu.stage.cur == "roomservice_ctgy_item_cart") { + if (event.keyCode == gRmtKey.left) { + __uifxn_AppFull_DrawRsItemSeletionCart("left", null, null); + } else if (event.keyCode == gRmtKey.right) { + __uifxn_AppFull_DrawRsItemSeletionCart("right", null, null); + } else if (event.keyCode == gRmtKey.up) { + __uifxn_AppFull_DrawRsItemSeletionCart("quantity_plus", null, null); + } else if (event.keyCode == gRmtKey.down) { + __uifxn_AppFull_DrawRsItemSeletionCart("quantity_minus", null, null); + } else if (event.keyCode == gRmtKey.chup) { + __uifxn_AppFull_DrawRsItemSeletionCart("cart_scroll_up", null, null); + } else if (event.keyCode == gRmtKey.chdown) { + __uifxn_AppFull_DrawRsItemSeletionCart("cart_scroll_down", null, null); + } else if (event.keyCode == gRmtKey.back) { + __uifxn_AppFull_DrawRsItemSeletionCart( + "return", + null, + function() { + let _elRsCtgyBgFocusedItemSelWin = _elRsCtgyBg.find('.owl-item.active.center').find('.rs_item_sel_win'); + if ( _elRsCtgyBgFocusedItemSelWin.css('display') == "none") { + _elRsCtgyBgFocusedItemSelWin.fadeIn(500, function() { + _state.menu.stage.cur = "roomservice_ctgy_item_sel"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_item_sel"); + }); + } + } + ); + } else if (event.keyCode == gRmtKey.enter) { + __uifxn_AppFull_DrawRsItemSeletionCart( + "enter", + null, + function() { + let _elRsCtgyBgFocusedItemSelWin = _elRsCtgyBg.find('.owl-item.active.center').find('.rs_item_sel_win'); + if ( _elRsCtgyBgFocusedItemSelWin.css('display') == "none") { + _elRsCtgyBgFocusedItemSelWin.fadeIn(500, function() { + _state.menu.stage.cur = "roomservice_ctgy_item_sel"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_item_sel"); + }); + } + } + ); + console.log('ROOMSERVICE CATEGORY ITEM SEL: KEY::> ' + event.keyCode); + } + } else { + console.log("ROOMSERVICE SLIDER KEYEVT: Skip events"); + } + }); + //룸서비스 카테고리 선택 모드(생성시, 메뉴모드) + _state.menu.stage.cur = "roomservice_ctgy_sel"; + __uifxn_AppFull_DrawRsUserGuide("roomservice_ctgy_sel"); + }); + }) + }); + + _elRsCtgySel.on('change.owl.carousel', function(event) { + // Update HotelTV Roomservice menu sel status + __status_rs_specific.category_sel.prev = Object.keys(_rsinfo_ctgy)[event.page.index]; + }); + + _elRsCtgySel.on('destroy.owl.carousel', function(event) { + console.log("ROOMSERVICE MM SEL destroied::>" ); + }); + + _elRsCtgySel.on('changed.owl.carousel', function(event) { + // Update HotelTV Roomservice menu sel status + __status_rs_specific.category_sel.cur = Object.keys(_rsinfo_ctgy)[event.page.index]; + //console.log("ROOMSERVICE CATEGORY EVT IDX::>" + event.page.index); + console.log("ROOMSERVICE CATEGORY SEL IDX::>" + __status_rs_specific.category_sel.cur); + if ( __status_rs_specific.category_sel.cur in Object.keys(_rsinfo_ctgy) ){ + if ( _rsinfo_ctgy[__status_rs_specific.category_sel.cur].name == "CARTS" ){ + console.log("TODO::> Draw Carts"); + }else if ( _rsinfo_ctgy[__status_rs_specific.category_sel.cur].name == "ORDER" ){ + console.log("TODO::> Draw Order"); + __uifxn_AppFull_DrawRsOrderList('build'); + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "roomservice_ctgy_orderlists"; + }else{ + __uifxn_AppFull_DrawRsOrderList('hide'); + if ( _state.menu.stage.prev!=null ){ + _state.menu.stage.cur = _state.menu.stage.prev; } } - }; - } + } + _elRsCtgyBg.trigger("to.owl.carousel", [event.page.index, 1000]); + }); + + _elRsCtgySel.on('translate.owl.carousel', function(event) { + // 메뉴 셀렉터 좌/우 헨들링 및 이펙트 + let _uiCtrl_idx = 0; + if (typeof event.item != 'undefined') { + _uiCtrl_idx = event.item.index; + } else { + _uiCtrl_idx = _elRsCtgySel.find('.owl-item.active.center').index(); + } + console.log("ROOMSERVICE CATEGORY CTRL IDX::>" + _uiCtrl_idx); + _elRsCtgySel.find('.owl-item.focus').addClass('unfocus'); + _elRsCtgySel.find('.owl-item.focus').removeClass('focus'); + _elRsCtgySel.find('.owl-item').eq(_uiCtrl_idx).addClass('focus'); + _elRsCtgySel.find('.owl-item').eq(_uiCtrl_idx).removeClass('unfocus'); + }); return; } + /** * HotelTV UI[AppFull] Wrapper Function::> build news */ @@ -5814,12 +6441,9 @@ HotelTV.ui_appfull = (function() { //Build Brochures __uifxn_AppFull_BuildBrochure(); - //Build Amenity + //Register Amenity&Room service hotkey __uifxn_AppFull_HotKey_RegisterAmenity(); - //Build Room Service - __uifxn_AppFull_BuildRoomService(); - //위젯 표시 $('.widjet').show(); }); @@ -5938,13 +6562,9 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_BuildAmenity(); } } else if (_state.hotkey.mm.red.type == "roomservice") { - $('.popup .roomservice').show(0, function() { - $('.popup .roomservice').animate({ top: 96, left: 64 }, 500, () => { - _state.menu.stage.cur = "hotkey_mm_roomservice"; - __uifxn_AppFull_DrawRoomserviceItem(true); - __uifxn_AppFull_HotKey_ShowBtnOnMM(false); - }); - }); + if (_opening.roomService) { + __uifxn_AppFull_BuildRoomservice(); + } } }); HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':_state.hotkey.mm['red'].id}}]) @@ -5964,13 +6584,9 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_BuildAmenity(); } } else if (_state.hotkey.mm.green.type == "roomservice") { - $('.popup .roomservice').show(0, function() { - $('.popup .roomservice').animate({ top: 96, left: 64 }, 500, () => { - _state.menu.stage.cur = "hotkey_mm_roomservice"; - __uifxn_AppFull_DrawRoomserviceItem(true); - __uifxn_AppFull_HotKey_ShowBtnOnMM(false); - }); - }); + if (_opening.roomService) { + __uifxn_AppFull_BuildRoomservice(); + } } }); HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':_state.hotkey.mm['green'].id}}]) @@ -5990,13 +6606,9 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_BuildAmenity(); } } else if (_state.hotkey.mm.yellow.type == "roomservice") { - $('.popup .roomservice').show(0, function() { - $('.popup .roomservice').animate({ top: 96, left: 64 }, 500, () => { - _state.menu.stage.cur = "hotkey_mm_roomservice"; - __uifxn_AppFull_DrawRoomserviceItem(true); - __uifxn_AppFull_HotKey_ShowBtnOnMM(false); - }); - }); + if (_opening.roomService) { + __uifxn_AppFull_BuildRoomservice(); + } } }); HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':_state.hotkey.mm['yellow'].id}}]) @@ -6016,13 +6628,9 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_BuildAmenity(); } } else if (_state.hotkey.mm.blue.type == "roomservice") { - $('.popup .roomservice').show(0, function() { - $('.popup .roomservice').animate({ top: 96, left: 64 }, 500, () => { - _state.menu.stage.cur = "hotkey_mm_roomservice"; - __uifxn_AppFull_DrawRoomserviceItem(true); - __uifxn_AppFull_HotKey_ShowBtnOnMM(false); - }); - }); + if (_opening.roomService) { + __uifxn_AppFull_BuildRoomservice(); + } } }); HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':_state.hotkey.mm['blue'].id}}]) @@ -6037,14 +6645,7 @@ HotelTV.ui_appfull = (function() { // DEDICATED HOT KEY: Room service // Check room service menu enabled if (_opening.roomService) { - $('.popup .roomservice').show(0, function() { - $('.popup .roomservice').animate({ top: 96, left: 64 }, 500, () => { - _state.menu.stage.cur = "hotkey_mm_roomservice"; - __uifxn_AppFull_DrawRoomserviceItem(true); - __uifxn_AppFull_HotKey_ShowBtnOnMM(false); - }); - }); - HotelTV.api.ReportEvent([{'power': true, 'location':{'conId':_opening.amenity.roomService}}]) + __uifxn_AppFull_BuildRoomservice(); } } else if (_evt.keyCode == gRmtKey.flight) { // DEDICATED HOT KEY: Flight diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index bb30be7..79627a6 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -1574,385 +1574,207 @@ + /******************************************************************************** * ROOMSERVICE STYLE [ START HERE] * ********************************************************************************/ +/*[RS1. Roomservice style ] */ .popup .roomservice { + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} + +.popup .roomservice div .item { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +/*[RS1-1. Roomservice bg style ] */ +.popup .roomservice .bg { position: absolute; - top: 96px; - left: -560px; - width: 1302px; - height: 700px; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + padding: 0px; overflow: hidden; display: none; - /* background-color: rgba(47, 47, 47, 1); */ - /* border-style: solid; */ - /* border-color: rgb(96, 96, 96); */ - /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ } -.popup .roomservice .menu { - width: 496px; - height: 700px; - overflow: hidden; - display: inline-block; - background-color: rgba(51, 63, 80, 1); - color: rgb(255, 255, 255); - vertical-align: top; - /* border-style: solid; */ - /* border-color: rgb(96, 96, 96); */ - /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ - /* box-shadow: 0px 0px 30px rgba(0, 0, 0, 1); */ -} - -.popup .roomservice .menu>#title { - /* width: 466px; */ - height: 45px; - line-height: 36px; - overflow: hidden; - font-size: 38px; - text-align: left; - margin: 10px 20px 5px 20px; -} - -.popup .roomservice .menu>#usage { - /* width: 454px; */ - height: 112px; - line-height: 22px; - font-size: 18px; - text-align: left; - margin: 5px 22px 5px 22px; - border-bottom: 1px solid rgb(67, 82, 105); - white-space: pre-line; - overflow: hidden; -} - -.popup .roomservice .menu>#items { - height: 282px; - overflow-y: hidden; - overflow-x: hidden; - margin: 5px 22px 5px 22px; -} - -.popup .roomservice .menu>#items table { +.popup .roomservice .bg div { width: 100%; - margin: 0px 10px 0 0px; - border-collapse: collapse; + height: 100%; + margin: 0; + padding: 0; } -.popup .roomservice .menu>#items>.tbl_header { - height: 34px; - max-height: 34px; - line-height: 32px; - font-size: 30px; - text-align: center; - margin: 5px 0 25px 0; -} - -.popup .roomservice .menu>#items>.tbl_header tbody tr { +/*[RS1-1-1. Roomservice bg: owl style ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .owl-item { width: 100%; } -.popup .roomservice .menu>#items>.tbl_header tbody tr>#type { - width: 70%; - float: left; -} - -.popup .roomservice .menu>#items>.tbl_header tbody tr>#quantity { - width: 30%; - float: left; -} - -.popup .roomservice .menu>#items>.tbl_record { - height: 210px; -} - -.popup .roomservice .menu>#items>.tbl_record tbody { - height: 210px; - display: block; - overflow: hidden; -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr { - height: 70px; - max-height: 70px; - border: 1px solid rgb(67, 82, 105); -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr.active { - border: 2px solid rgb(255, 192, 0); - /* background-color: rgba(67, 67, 67, 1); */ - /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr>.products { - height: 70px; -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#index { - font-size: 22px; - line-height: 24px; - width: 10%; - float: left; - text-align: center; -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#title { - font-size: 22px; - line-height: 24px; - width: 90%; - float: left; -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#price { - font-size: 36px; - line-height: 36px; - width: 70%; - float: left; - text-align: right; - padding: 0 55px 0 0; -} - -.popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#quantity { - font-size: 36px; - line-height: 36px; - width: 30%; - float: left; - text-align: center; -} - -.popup .roomservice .menu>#summary { - height: 70px; - font-size: 38px; - line-height: 64px; - margin: 15px 22px 5px 22px; - border: 1px solid rgb(67, 82, 105); -} - -.popup .roomservice .menu>#summary>#title { - width: 22%; - float: left; - text-align: center; - /* padding: 0% 5% 0 20%; */ -} - -.popup .roomservice .menu>#summary>#value { - width: 48%; - float: left; - text-align: right; - color: rgb(255, 192, 0); - padding: 0px 55px 0px 0px; -} - -.popup .roomservice .menu>#summary>#quantity { - width: 30%; - float: left; - text-align: center; - color: rgb(255, 192, 0); -} - -.popup .roomservice .menu>div#buttons { - height: 145px; - font-size: 30px; - text-align: center; - color: rgba(255, 255, 255, 1.0); - margin: 15px 22px 5px 22px; -} - -.popup .roomservice .menu>div#buttons div { - height: 38px; - border: 1px solid rgb(90, 90, 90); -} - -.popup .roomservice .menu>div#buttons .active { - border: 1px solid rgb(255, 192, 0); - background-color: rgba(34, 42, 53, 1.0); -} - -.popup .roomservice .menu>div#buttons #order { +/*[RS1-1-1-1. Roomservice bg: owl: top gradient style ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .top_gradient{ + top: 0; + left: 0; width: 100%; - background-color: rgba(34, 42, 53, 1.0); - /* border-radius: 5px; */ + height: 240px; + background: linear-gradient(0deg, rgba(7,8,11,0) 0%, rgba(7,8,11,0.5) 45%, rgba(7,8,11,0.9) 100%); } -.popup .roomservice .menu>div#buttons #cancel { +/*[RS1-1-1-2. Roomservice bg: owl: bottom gradient style ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .bottom_gradient{ + position: absolute; + left: 0; + top: 928px; width: 100%; - /* border-radius: 5px; */ + 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%); } -.popup .roomservice .menu>div#buttons #details { - width: 100%; - /* border-radius: 5px; */ +/*[RS1-1-1-3. Roomservice bg: owl: roomservice item sel window ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win { + position: absolute; + left: 21px; + top: 207px; + width: 1874px; + height: 740px; + margin: 0; + padding: 0; + /* background: rgba(114,18,22,0.65); */ + display: flex; } - -/* ROOM SERVICE -> ITEM Description */ - -.popup .roomservice .description { - width: 802px; - height: 700px; - display: inline-block; - margin: 0px 0px 0px -4px; - color: rgb(255, 255, 255); - /* padding: 0; */ - background-color: rgba(36, 44, 56, 1.0); +/*[RS1-1-1-3-1. Roomservice bg: owl: roomservice item sel window : winleft ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winleft { + position: relative; + width: 902px; + height: 100%; + margin: 0; + padding: 0; + background: rgba(14,18,22,0.65); + margin: 0px 10px 0px 25px; + color: rgb(249, 249, 249); + border-top: 2px solid rgba(121,121,121,1); + border-bottom: 2px solid rgba(121,121,121,1); } -.popup .roomservice .description>#title { - width: 100%; - height: 64px; - line-height: 38px; - overflow: hidden; - font-size: 36px; - padding: 10px 10px 5px 10px; -} - -.popup .roomservice .description>#comment { - width: 100%; - height: 89px; - line-height: 24px; - overflow: hidden; - font-size: 22px; - padding: 5px 10px 5px 15px; - white-space: pre-line; -} - -.popup .roomservice .description>#thumb { - width: 760px; - height: 460px; - background-repeat: no-repeat; - background-size: cover; - margin: 30px 0px 0px 21px; - border: 1px solid rgb(255, 255, 255); -} - - -/* ROOM SERVICE -> CART LIST */ - -.popup .roomservice>.cart-list { - width: 802px; - height: 700px; - display: inline-block; - margin: 0px 0px 0px -4px; - color: rgb(255, 255, 255); - /* padding: 0; */ - background-color: rgba(36, 44, 56, 1.0); -} - -.popup .roomservice>.cart-list>#title { - height: 45px; - line-height: 36px; - overflow: hidden; - font-size: 38px; - text-align: left; - margin: 10px 20px 5px 20px; -} - -.popup .roomservice>.cart-list>#usage { - height: 102px; - line-height: 22px; - font-size: 18px; - text-align: left; - margin: 5px 22px 5px 22px; - white-space: pre-line; - overflow: hidden; -} - -.popup .roomservice .cart-list>#items { - /* height: 352px; */ - /* overflow-y: auto; */ - /* overflow-y: hidden; - overflow-x: hidden; */ - margin: 5px 22px 5px 22px; -} - -.popup .roomservice .cart-list>#items table { - width: 100%; - margin: 0px 10px 0 0px; - border-collapse: collapse; -} - -.popup .roomservice .cart-list>#items>.tbl_header { +/*[RS1-1-1-3-1-1. Roomservice bg: owl: roomservice item sel window : winleft: item table] */ +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_header { + width:100%; line-height: 54px; font-size: 30px; text-align: center; - margin: 5px 0 15px 0; + /* margin: 5px 0 15px 0; */ + border-bottom: 4px solid rgba(121,121,121,1); + /* border-top: 2px solid rgba(121,121,121,1); */ } -.popup .roomservice .cart-list>#items>.tbl_header tbody tr { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_header tbody tr { height: 54px; max-height: 54px; - background-color: rgb(51, 63, 80); - border: 1px solid rgb(67, 82, 105); + background-color: rgba(21, 27, 34, 1); } -.popup .roomservice .cart-list>#items>.tbl_header tbody tr>#type { - width: 50%; +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_header tbody tr>#title { + width: 45%; float: left; - text-align: left; - padding: 0 0px 0 80px; + /* text-align: left; */ + padding: 0 0px 0 20px; } -.popup .roomservice .cart-list>#items>.tbl_header tbody tr>#quantity { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_header tbody tr>#price { width: 20%; float: left; } -.popup .roomservice .cart-list>#items>.tbl_header tbody tr>#amount { - width: 30%; +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_header tbody tr>#status { + width: 35%; float: left; padding: 0px 30px 0 0px; } -.popup .roomservice .cart-list>#items>.tbl_record { + +/**** Roomservice Category item ::> Table Recored */ +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record { /* height: 284px;*/ -} - -.popup .roomservice .cart-list>#items>.tbl_record tbody { - height: 276px; - display: block; - /* overflow: hidden; */ - overflow-y: auto; -} - -.popup .roomservice .cart-list>#items>.tbl_record tbody tr { - height: 52px; -} - -.popup .roomservice .cart-list>#items>.tbl_record tbody tr.active { - border: 2px solid rgb(255, 192, 0); - /* background-color: rgba(67, 67, 67, 1); */ - /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ -} - -.popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products { - height: 52px; - width: 754px; - font-size: 30px; + width:100%; line-height: 54px; - border: 1px solid rgb(67, 82, 105); + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ } -.popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#title { - width: 50%; +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody { + /* height: 285px; */ + overflow-y: auto; + display: block; +} + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr { + /* height: 52px; */ + display: block; + background-color: rgba(36, 45, 57, 1); +} + + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem { + height: 52px; + width: 100%; + font-size: 30px; + line-height: 52px; + border-bottom: 2px solid rgb(21, 27, 34); +} + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem.focus { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(29,36,47,1.0); +} + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem.focus.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem.focus.unavailable:before { + +} +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem.focus.unavailable:after { + +} + +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem>#title { + width: 45%; float: left; padding: 0px 0px 0px 20px; } -.popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#quantity { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem>#price { width: 20%; float: left; text-align: center; } -.popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#price { - width: 30%; +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record tbody tr>.rsctgyItem>#status { + width: 35%; float: left; - text-align: right; + /* text-align: right; */ padding: 0px 30px 0 0px; } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar { display: block; width: 20px; /* 세로축 스크롤바 길이 */ @@ -1960,375 +1782,937 @@ /* 가로축 스크롤바 길이 */ } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-track { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar-track { background-color: rgb(67, 82, 105); } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-track-piece { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar-track-piece { background-color: rgb(80, 98, 124); } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-thumb { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgb(51, 63, 80); } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:start { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar-button:start { display: none; /* background-color: orange; */ /* Top, Left 방향의 이동버튼 */ } -.popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:end { +.popup .roomservice .bg .rs_item_sel_win .winleft>.tbl_record ::-webkit-scrollbar-button:end { display: none; /* background-color: orange; */ /* Bottom, Right 방향의 이동버튼 */ } -.popup .roomservice .cart-list>#summary { - height: 54px; - font-size: 38px; - line-height: 54px; - background-color: rgb(51, 63, 80); - margin: 5px 22px 5px 22px; - border: 1px solid rgb(67, 82, 105); + +/*[RS1-1-1-3-2. Roomservice bg: owl: roomservice item sel window : winright ] */ +/**** Roomservice Item Description ::> */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright { + position: relative; + width: 902px; + height: 740px; + margin: 0; + padding: 0; + background: rgba(14,18,22,0.65); + margin: 0px 25px 0px 10px; + color: rgb(249, 249, 249); + border-top: 2px solid rgba(121,121,121,1); + border-bottom: 2px solid rgba(121,121,121,1); + display: none; } -.popup .roomservice .cart-list>#summary>#title { - width: 30%; - float: left; - text-align: center; - /* padding: 0% 5% 0 20%;*/ +.popup .roomservice .bg .owl-carousel .owl-item.active[class*="focus"] .rs_item_sel_win .winright{ + } -.popup .roomservice .cart-list>#summary>#quantity { - width: 40%; - float: left; - text-align: center; - padding: 0 0 0 142px; - color: rgb(255, 192, 0); +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescThumb{ + width: 852px; + height: 479px; + margin: 10px 25px 10px 25px; } -.popup .roomservice .cart-list>#summary>#amount { - width: 30%; - float: left; - text-align: right; - color: rgb(255, 192, 0); - padding: 0px 30px 0px 0px; -} - -.popup .roomservice .cart-list>#notice { - font-size: 22px; - line-height: 24px; - margin: 10px 22px 5px 22px; - text-align: center; -} - -.popup .roomservice .cart-list>div#buttons { - font-size: 38px; - text-align: center; - color: rgba(255, 255, 255, 1.0); - margin: 15px 22px 5px 22px; -} - -.popup .roomservice .cart-list>div#buttons>div { - height: 38px; - float: left; - width: 50%; -} - -.popup .roomservice .cart-list>div#buttons>div div { - height: 48px; - border: 1px solid rgb(184, 184, 184); - margin: 0px 25% 0px 25%; - background-color: rgb(51, 63, 80); -} - -.popup .roomservice .cart-list>div#buttons .active { - border: 1px solid rgb(255, 192, 0); - background-color: rgba(34, 42, 53, 1.0); -} - -.popup .roomservice .cart-list>div#buttons #confirm { - width: 50%; -} - -.popup .roomservice .cart-list>div#buttons #cancel { - width: 50%; -} - - -/* ROOM SERVICE -> ORDER Details */ - -.popup .roomservice .order-details { - position: absolute; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescThumb.unavailabel:before { + /* content: 'Not available'; width: 100%; height: 100%; - background-color: rgb(36, 44, 56); - /* display: block; */ - display: inline-block; - color: rgb(255, 255, 255); + 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 .roomservice .order-details>#title { - /* width: 466px; */ - height: 45px; - line-height: 36px; - overflow: hidden; - font-size: 38px; - text-align: left; - margin: 10px 20px 5px 30px; -} - -.popup .roomservice .order-details>#usage { - height: 80px; - line-height: 22px; - font-size: 18px; - text-align: left; - margin: 5px 22px 5px 30px; - /* border-bottom: 1px solid rgb(67, 82, 105); */ - white-space: pre-line; - overflow: hidden; -} - -.popup .roomservice .order-details>#orders { - height: 470px; - overflow-y: hidden; - overflow-x: hidden; - margin: 5px 30px 5px 30px; -} - -.popup .roomservice .order-details>#orders>table { - border-collapse: collapse; -} - -.popup .roomservice .order-details>#orders>.order_list { +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescThumb.unavailabel:after { + /* content: ''; width: 100%; - height: 485px; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #000; + opacity: 0.6 */ } -.popup .roomservice .order-details>#orders>.order_list>tbody { - height: 210px; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescDetails{ + width: 852px; + height: 238px; + margin: 0px 25px 0px 25px; } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr { - height: 70px; - max-height: 70px; - border: 1px solid rgb(67, 82, 105); +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescDetails div#title{ + height: 54px; + width: 100%; + line-height: 54px; + font-size: 44px; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 4px solid rgb(235,235,235); + filter: drop-shadow(0 0 5px rgb(0, 0, 0)); } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr.active { - border: 2px solid rgb(255, 192, 0); - /* background-color: rgba(67, 67, 67, 1); */ - /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering { - height: 44px; - max-height: 44px; - background-color: rgb(51, 63, 80); -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>div { - padding: 0px 0px 5px 0px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#index { +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_win .winright .rsItemDescDetails div#description{ + height:174px; + line-height: 30px; font-size: 30px; - line-height: 32px; - width: 5%; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + padding: 14px 0px 0px 0px; +} + +/*[RS1-1-1-4. Roomservice bg: owl: selected item cart style window ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win { + position: absolute; + left: 21px; + top: 207px; + width: 1874px; + height: 740px; + margin: 0; + padding: 0; + /* background: rgba(114,18,22,0.65); */ + display: flex; +} + +/*[RS1-1-1-4-1. Roomservice bg: owl: roomservice item sel cart window : winleft ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft { + position: relative; + width: 902px; + height: 100%; + margin: 0; + padding: 0; + background: rgba(14,18,22,0.8); + margin: 0px 10px 0px 25px; + color: rgb(249, 249, 249); + border-top: 5px solid rgba(121,121,121,1); + border-bottom: 5px solid rgba(121,121,121,1); + /* border-top: 6px solid rgba(218,165,32,1); + border-bottom: 6px solid rgba(218,165,32,1); */ + /* display: none; */ +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.title{ + height: 54px; + width: 96%; + line-height: 54px; + font-size: 44px; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 4px solid rgb(235,235,235); + filter: drop-shadow(0 0 5px rgb(0, 0, 0)); + margin: 10px 2% 0px 2%; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control{ + position: relative; + height: 254px; + width: 96%; + padding: 20px 2% 20px 2%; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control #img_thumbnail{ + width: 40%; + height: 228px; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + float: left; + margin: 0px 0px 0px 2%; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control>.quantity{ + height: 228px; + width: 58%; + display: flex; + float: left; + flex-direction: row; + flex-wrap: wrap; + padding: 0px 30px 0px 30px; + overflow: hidden; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control #label_quantity{ + line-height: 137px; + width: 50%; + height: 60%; + font-size: 38px; + text-align: center; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control #value_quantity{ + line-height: 137px; + width: 50%; + height: 60%; + font-size: 52px; + text-align: center; + color: rgba(218,165,32,1.0); + background-image: url(./images/quantity_edit_arrow.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control #label_amount{ + line-height: 91px; + width: 50%; + height: 40%; + font-size: 38px; + text-align: center; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.control #value_amount{ + line-height: 91px; + width: 50%; + height: 40%; + font-size: 52px; + text-align: center; + color: rgba(218,165,32,1.0); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.description{ + height: 316px; + width: 100%; + padding: 20px 2% 20px 2%; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.description>#title{ + height: 54px; + width: 100%; + line-height: 54px; + font-size: 38px; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 4px solid rgb(235,235,235); + filter: drop-shadow(0 0 5px rgb(0, 0, 0)); +} +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.description>#details{ + /* height:174px; */ + line-height: 30px; + font-size: 30px; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + padding: 14px 0px 0px 0px; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.buttons{ + line-height: 65px; + height: 65px; + width: 100%; + display: flex; + float: left; + flex-direction: row; + flex-wrap: nowrap; + padding: 0px 30px 0px 30px; + overflow: hidden; + text-align: center; + font-size: 32px; + color: rgba(51,51,51,1.0); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.buttons>div{ + border-radius: 14px; + background-color: rgba(255,255,255,1.0); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.buttons>div.focus{ + /*border: 8px solid rgba(218,165,32,1.0); */ + /* color: rgba(0,0,0,1); */ + /* background-color: rgba(218,165,32,1.0); */ + background-color: rgba(173,255,47,1.0); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_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 .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.buttons #btn_addtocart{ + /* border-radius: 14px; */ + /* background-color: rgba(255,255,255,1.0); */ + margin: 0px 20px 0px 20px; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winleft>.buttons #btn_back{ + /* border-radius: 14px; */ + /* background-color: rgba(255,255,255,1.0); */ + margin: 0px 0px 0px 20px; +} + +/*[RS1-1-1-4-2. Roomservice bg: owl: roomservice item sel cart window : winright ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright { + position: relative; + width: 902px; + height: 740px; + margin: 0; + padding: 0; + background: rgba(14,18,22,0.8); + margin: 0px 25px 0px 10px; + color: rgb(249, 249, 249); + border-top: 5px solid rgba(121,121,121,1); + border-bottom: 5px solid rgba(121,121,121,1); + /* border-top: 6px solid rgba(218,165,32,1); + border-bottom: 6px solid rgba(218,165,32,1); */ + /* display: none; */ +} + + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.title{ + height: 54px; + width: 96%; + line-height: 54px; + font-size: 44px; + white-space: pre-wrap; + text-overflow: ellipsis; + overflow: hidden; + border-bottom: 4px solid rgb(235,235,235); + filter: drop-shadow(0 0 5px rgb(0, 0, 0)); + margin: 10px 2% 0px 2%; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table{ + position: relative; + height: 550px; + width: 100%; + padding: 20px 2% 20px 2%; +} + +/**** Roomservice Category item ::> Table Header */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_header { + width:100%; + line-height: 54px; + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ + border-bottom: 4px solid rgba(121,121,121,1); + /* border-top: 2px solid rgba(121,121,121,1); */ +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr { + height: 54px; + max-height: 54px; + background-color: rgba(21, 27, 34, 1); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#title { + width: 50%; + float: left; + /* text-align: left; */ + padding: 0 0px 0 20px; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#quantity { + width: 20%; + float: left; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#amount { + width: 30%; + float: left; + padding: 0px 30px 0 0px; +} + + +/**** Roomservice Category item ::> Table Recored */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record { + width:100%; + line-height: 54px; + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody { + height: 446px; + overflow-y: auto; + display: block; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr { + /* height: 52px; */ + display: block; + background-color: rgba(36, 45, 57, 1); +} + + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem { + height: 52px; + width: 100%; + font-size: 30px; + line-height: 52px; + border-bottom: 2px solid rgb(21, 27, 34); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.focus { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(29,36,47,1.0); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem.focus.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#title { + width: 50%; + float: left; + padding: 0px 0px 0px 20px; +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#quantity { + width: 20%; float: left; text-align: center; - border-bottom: 1px solid; - margin: 5px 0px 0px 2%; } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#date { - font-size: 30px; - line-height: 32px; - width: 37%; - float: left; - border-bottom: 1px solid; - margin: 5px 0px 0px 0; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#orderId { - font-size: 28px; - line-height: 32px; - width: 53%; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#amount { + width: 30%; float: left; /* text-align: right; */ - margin: 5px 2% 0px 0%; + padding: 0px 30px 0 0px; } - -/* */ - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst { - width: 100%; - float: left; - background-color: rgb(51, 63, 80); - margin: 0px 0px 5px 0px; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar { + display: block; + width: 20px; + /* 세로축 스크롤바 길이 */ + height: 20px; + /* 가로축 스크롤바 길이 */ } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header { - width: 100%; - font-size: 36px; - line-height: 36px; - border-collapse: collapse; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track { + background-color: rgb(67, 82, 105); } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header>tbody { - /* */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track-piece { + background-color: rgb(80, 98, 124); } -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header tr { - font-size: 30px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #type { - width: 40%; - font-size: 25px; - text-align: left; - padding: 0px 0px 0px 90px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #quantity { - width: 10%; - font-size: 25px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #amount { - width: 20%; - font-size: 25px; - text-align: right; - padding: 0px 30px 0px 0px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal1 {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal2 { - color: rgb(255, 192, 0); -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal3 {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal4 { - color: rgb(255, 192, 0); -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal5 {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record { - width: 100%; - font-size: 36px; - line-height: 36px; - border-collapse: collapse; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record>tbody {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem {} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div { - float: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#name { - width: 40%; - text-align: left; - padding: 0px 0px 0px 90px; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#quantity { - width: 10%; - text-align: center; -} - -.popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#amount { - width: 20%; - text-align: right; - padding: 0px 20px 0px 0px; -} - -.popup .roomservice .order-details>#summary { - height: 54px; - line-height: 50px; - overflow: hidden; - font-size: 38px; - text-align: left; - margin: 15px 20px 5px 30px; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-thumb { + border-radius: 8px; background-color: rgb(51, 63, 80); } -.popup .roomservice .order-details>#summary>div { +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:start { + display: none; + /* background-color: orange; */ + /* Top, Left 방향의 이동버튼 */ +} + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:end { + display: none; + /* background-color: orange; */ + /* Bottom, Right 방향의 이동버튼 */ +} + + +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.summary{ + position: relative; + height: 65px; + width: 96%; + 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 .roomservice .order-details>#summary>#title { - width: 40%; - padding: 0px 0px 0px 90px; - text-align: left; -} -.popup .roomservice .order-details>#summary>#quantity { - width: 10%; +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_cart_win .winright>.summary>#label{ + line-height: 65px; + width: 50%; + height: 100px; + font-size: 48px; text-align: center; - color: rgb(255, 192, 0); } -.popup .roomservice .order-details>#summary>#amount { - width: 20%; - text-align: right; - padding: 0px 20px 0px 0px; - color: rgb(255, 192, 0); +.popup .roomservice .bg .owl-carousel .owl-stage .rs_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; } -/* ROOM SERVICE -> ALRET */ -.popup .roomservice .alert { +/*[RS1-1-1-5. Roomservice bg: owl: selected item order style window ] */ +.popup .roomservice .bg .owl-carousel .owl-stage .rs_item_sel_order_win { position: absolute; - top: 197px; - left: 340px; - width: 600px; - height: 325px; - color: rgb(255, 255, 255); + 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 .roomservice .alert>div#order-complete { +.popup .roomservice .bg .owl-carousel .owl-stage .rs_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; +} + + + +/********************************************************************************/ +/*[RS2. Roomservice slider style ] */ +.popup .roomservice .slider { + position: absolute; + top: 60px; + left: 0px; + width: 1920px; + /* height: 300px; */ + padding: 0px; + overflow: hidden; + display: none; +} + +.popup .roomservice .slider .owl-carousel.owl-theme { + max-height: 266px; + height: 100px; + padding-left: 0; + /* margin: 5px 0 0 0; */ +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer { + /* height: 266px; + max-height: 266px; */ + height: 100%; + padding-left: 0; + margin: 0; +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer .owl-stage { + height: 100%; +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer .owl-stage .owl-item{ + height: 100%; +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer #rs_item_title{ + position: absolute; + /* top: 190px; */ + top: 22px; width: 100%; height: 100%; - background-color: rgb(36, 44, 56); - border: 1px solid rgb(255, 255, 255); -} - -.popup .roomservice .alert>div#order-complete>div#title { - float: left; - width: 100%; - height: 54px; - background-color: rgb(51, 63, 80); - margin: 42px 0px 0 0px; + margin: 0; + padding: 0; + color: rgb(235, 235, 235); + /* font-size: 2.2vw; */ font-size: 38px; line-height: 52px; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + overflow: hidden; +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer .owl-item.focus.active.center #rs_item_title{ + font-size: 42px; +} + +.popup .roomservice .slider .owl-carousel.owl-theme .owl-stage-outer #ctgy_item_btn{ + height: 100%; + margin: 0; + padding: 0; + display: block +} + + + +/*** OWL Roomservice Menu Selector dot Container */ +.popup .roomservice .slider .owl-dots { + position: absolute; + top: -45px; + width: 100%; + align-content: center; + display: none; +} + +.popup .roomservice .slider .owl-theme .owl-dots .owl-dot span { + width: 20px; + height: 20px; + background: none; +} + +.popup .roomservice .slider .owl-theme .owl-dots .owl-dot.active span { + /* background: rgb(181, 218, 16); */ + background: rgb(245, 245, 245); +} + +.popup .roomservice .slider .owl-carousel .owl-item.active.focus:after { + width: 336px; +} + +.popup .roomservice .slider .owl-carousel .owl-item.active[class*="unfocus"]:after { + width: 264px; +} + +.popup .roomservice .slider .owl-carousel .owl-item.active.focus div [id*="ctgy_item_btn"] { + background-image: var(--icon_focus); +} + +.popup .roomservice .slider .owl-carousel .owl-item.active[class*="unfocus"] div [id*="ctgy_item_btn"] { + background-image: var(--icon_unfocus); +} + +/* .popup .roomservice .slider .owl-carousel .owl-item.active.focus div [id*="mm_item_title"] { + transform: scale(1.1); +} */ + +/*[RS3. Roomservice Use guide style ] */ +.popup .roomservice>div.use_guide { + position: absolute; + top: 948px; + left: 0px; + width: 100%; + height: 132px; + margin: 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; +} + + + +/*[RS4. Roomservice cart style ] */ +.popup .roomservice>div.cart { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 946px; + padding: 0px; + overflow: hidden; + display: none; + background: rgba(0,0,0,0.7); + z-index: 1; +} + +.popup .roomservice>div.cart>div { + top: 60px; + left: 0px; + width: 100%; + height: 100%; + display: flex; + /* background: rgba(1,1,1,1.0); */ +} + +.popup .roomservice>div.cart .menu { + width: 902px; + height: 876px; + margin: 0px 37px 0px 21px; + display: block; + /* background: rgba(100,1,1,1.0); */ +} + +.popup .roomservice>div.cart .items { + width: 902px; + height: 876px; + margin: 0px 37px 0px 21px; + display: block; + /* background: rgba(100,1,1,1.0); */ +} + +.popup .roomservice>div.cart .menu div#title { + +} + +.popup .roomservice>div.cart .menu div#control { + +} + +.popup .roomservice>div.cart .menu div#control #thumb { + +} + +.popup .roomservice>div.cart .menu div#control #quantity { + +} + +.popup .roomservice>div.cart .menu div#description { + +} + +/*[RS5 Roomservice order style ] */ +.popup .roomservice .order { + position: absolute; + left: 21px; + top: 207px; + width: 1874px; + height: 740px; + margin: 0; + padding: 0; + /* background: rgba(114,18,22,0.65); */ + display: flex; + z-index: 1; +} + +/*[RS5-1. Roomservice order: winleft ] */ +.popup .roomservice .order .winleft { + position: relative; + width: 902px; + height: 100%; + margin: 0; + padding: 0; + background: rgba(14,18,22,0.65); + margin: 0px 10px 0px 25px; + color: rgb(249, 249, 249); + /* border-top: 2px solid rgba(121,121,121,1); + border-bottom: 2px solid rgba(121,121,121,1); */ +} + +/*[RS1-1-1-3-1-1. Roomservice bg: owl: roomservice item sel window : winleft: item table] */ +.popup .roomservice .order .winleft>.tbl_header { + width:100%; + line-height: 54px; + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ + border-bottom: 4px solid rgba(121,121,121,1); + /* border-top: 2px solid rgba(121,121,121,1); */ +} + +.popup .roomservice .order .winleft>.tbl_header tbody tr { + height: 54px; + max-height: 54px; + background-color: rgba(21, 27, 34, 1); +} + +.popup .roomservice .order .winleft>.tbl_header tbody tr>#orderid { + width: 45%; + float: left; + /* text-align: left; */ + padding: 0 0px 0 20px; +} + +.popup .roomservice .order .winleft>.tbl_header tbody tr>#amount { + width: 20%; + float: left; +} + +.popup .roomservice .order .winleft>.tbl_header tbody tr>#date { + width: 35%; + float: left; + padding: 0px 30px 0 0px; +} + + +/**** Roomservice Category item ::> Table Recored */ +.popup .roomservice .order .winleft>.tbl_record { + width:100%; + line-height: 54px; + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ +} + +.popup .roomservice .order .winleft>.tbl_record tbody { + height: 572px; + overflow-y: auto; + display: block; +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr { + /* height: 52px; */ + display: block; + background-color: rgba(36, 45, 57, 1); +} + + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem { + height: 52px; + width: 100%; + font-size: 30px; + line-height: 52px; + border-bottom: 2px solid rgb(21, 27, 34); +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem.focus { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(29,36,47,1.0); +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem.focus.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + border-bottom: 2px solid rgb(173, 255, 47); + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem.focus.unavailable:before { + +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem.focus.unavailable:after { + +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem>#orderid { + width: 45%; + float: left; + padding: 0px 0px 0px 20px; +} + +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem>#amount { + width: 20%; + float: left; text-align: center; } -.popup .roomservice .alert>div#order-complete>div#message { - width: 95%; +.popup .roomservice .order .winleft>.tbl_record tbody tr>.rsOrderedItem>#date { + width: 35%; float: left; - margin: 40px 20px 5px 20px; - font-size: 22px; - line-height: 24px; - text-align: center; - white-space: pre-wrap; + /* text-align: right; */ + padding: 0px 30px 0 0px; } +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar { + display: block; + width: 20px; + /* 세로축 스크롤바 길이 */ + height: 20px; + /* 가로축 스크롤바 길이 */ +} + +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar-track { + background-color: rgb(67, 82, 105); +} + +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar-track-piece { + background-color: rgb(80, 98, 124); +} + +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: rgb(51, 63, 80); +} + +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar-button:start { + display: none; + /* background-color: orange; */ + /* Top, Left 방향의 이동버튼 */ +} + +.popup .roomservice .order .winleft>.tbl_record ::-webkit-scrollbar-button:end { + display: none; + /* background-color: orange; */ + /* Bottom, Right 방향의 이동버튼 */ +} + + +.popup .roomservice .order .winleft>.summary{ + position: relative; + height: 65px; + width: 96%; + 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 .roomservice .order .winleft>.summary>#label{ + line-height: 65px; + width: 50%; + height: 100px; + font-size: 48px; + text-align: center; +} + +.popup .roomservice .order .winleft>.summary>#value{ + line-height: 65px; + width: 50%; + height: 100%; + font-size: 52px; + color: rgb(173, 255, 47); + text-align: center; +} + +/********************************************************************************/ +/* ROOMSERVICE STYLE [ END ] */ +/********************************************************************************/ + + /*********************** * MY PAGE Style *