From 02ad6a7055a27ae9c4935b9fb889fc556d8bfac9 Mon Sep 17 00:00:00 2001 From: Paul Kim Date: Mon, 18 Mar 2024 09:50:07 +0900 Subject: [PATCH] issue #11 Done amenity feature renewal at 1st step. --- procentric/application/app_hoteltv_full.html | 4 +- .../application/lib/hoteltv.ui_appfull.js | 168 ++++++++++++- .../theme/HJS00001/hoteltv.app.full.popup.css | 230 ++++++++++++++++-- 3 files changed, 379 insertions(+), 23 deletions(-) diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index 90eb019..b52f6ff 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -223,7 +223,9 @@ -
+
+
+
diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index ea104ef..44acd7b 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -527,6 +527,11 @@ HotelTV.ui_appfull = (function() { } }; } + + let _elAmPupOoderRoot = $('.popup .amenity').children('.order'); + if ( _elAmPupOoderRoot.css('display')!="none" ){ + _elAmPupOoderRoot.hide(); + } return; } @@ -577,7 +582,8 @@ HotelTV.ui_appfull = (function() { } /** - * HotelTV UI[AppFull] Wrapper Function::> Draw amenity feature + * HotelTV UI[AppFull] Wrapper Function::> Draw amenity feature user's guide + * @param {string} _action */ function __uifxn_AppFull_DrawAmUserGuide(_action) { let _state = HotelTV.state; @@ -637,9 +643,138 @@ HotelTV.ui_appfull = (function() { } } + /** + * HotelTV UI[AppFull] Wrapper Function::> Draw amenity order history + * @param {string} _action + */ + function __uifxn_AppFull_DrawAmOrderList(_action) { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _opening = HotelTV.opening; + let _order = HotelTV.orders.amenity; + let _aminfo_top = _opening.amenity; + let _aminfo_ctgy = _aminfo_top.menu; + let _elAmPupRoot = $('.popup .amenity'); + let _elAmOrderRoot = _elAmPupRoot.children('.order'); + let _elAmOrderWinleft = _elAmOrderRoot.children('.winleft'); + let __status_am_specific = null; + + const __ifxn_removeOrderElements = function(){ + if ( _elAmOrderWinleft.children().length>0 ){ + _elAmOrderWinleft.children().remove(); + } + } + try{ + // 어메니티 정보 오브젝트 + _aminfo_top = _opening.amenity; + _aminfo_ctgy = _aminfo_top.menu; + __status_am_specific = _state.hotkey.mm[_aminfo_top.button].status; + let __amctgyIdx = __status_am_specific.category_sel.cur; + let __amctgyItemStatus = __status_am_specific.items[_aminfo_ctgy[__amctgyIdx].name]; + switch(_action) + { + case 'hide': { + if ( _elAmOrderRoot.css('display')!="none" ){ + _elAmOrderRoot.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.amenity.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.amenity.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.amenity.title.orderdate[_state.lang].toUpperCase(); + _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status); + + _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr); + } + _elTbl_ItemsHdr.appendChild(_elTBody_ItmesHdr); + _elAmOrderWinleft.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 = "amOrderedItem"; + 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, ",") + _aminfo_top.currency[_state.lang]; + _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecAmount); + + + 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); + } + _elAmOrderWinleft.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.amenity.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, ",") + _aminfo_top.currency[_state.lang]; + _elDiv_Summary.appendChild(_elDiv_Value); + _elAmOrderWinleft.append(_elDiv_Summary); + + if ( _elAmOrderRoot.css('display')=="none" ){ + _elAmOrderRoot.fadeIn(100); + } + } break; + + case "destroy": { + __ifxn_removeOrderElements(); + } break; + } + }catch(_err){ + console.log(`Fail to draw::> ${_err}`); + } + } /** * HotelTV UI[AppFull] Wrapper Function::> Draw amenity item selection cart ui @@ -876,9 +1011,9 @@ HotelTV.ui_appfull = (function() { _elDiv_QuntCtrlFrm.innerHTML = `
`; var _elDiv_QuntCtrlFrmQuantity = document.createElement('div'); _elDiv_QuntCtrlFrmQuantity.className = "quantity"; - _elDiv_QuntCtrlFrmQuantity.innerHTML = `
${_trTbl.ui.amenity.title.quantity[_state.lang].toUpperCase()}
`; + _elDiv_QuntCtrlFrmQuantity.innerHTML = `
${_trTbl.ui.amenity.title.quantity[_state.lang].toUpperCase()}
`; _elDiv_QuntCtrlFrmQuantity.innerHTML += `
`; - _elDiv_QuntCtrlFrmQuantity.innerHTML += `
${_trTbl.ui.amenity.title.amount[_state.lang].toUpperCase()}
`; + _elDiv_QuntCtrlFrmQuantity.innerHTML += `
${_trTbl.ui.amenity.title.amount[_state.lang].toUpperCase()}
`; _elDiv_QuntCtrlFrmQuantity.innerHTML += `
`; _elDiv_QuntCtrlFrm.append(_elDiv_QuntCtrlFrmQuantity); _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntCtrlFrm); @@ -955,7 +1090,7 @@ HotelTV.ui_appfull = (function() { //// Quantity Window Title let _elDiv_CartWinSummary = document.createElement('div'); _elDiv_CartWinSummary.className = "summary"; - _elDiv_CartWinSummary.innerHTML = `
${_trTbl.ui.amenity.title.sum[_state.lang].toUpperCase()}
`; + _elDiv_CartWinSummary.innerHTML = `
${_trTbl.ui.amenity.title.sum[_state.lang].toUpperCase()}
`; _elDiv_CartWinSummary.innerHTML += `
${_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang]}
`; _elAmCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinSummary); } @@ -1160,8 +1295,10 @@ HotelTV.ui_appfull = (function() { _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus'); } else if ( _str_curBtnID=='btn_addtocart' ){ - _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); - _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); + if ( _elAmCtgyBgMenuItemCartWinRight.find('.tbl_record').children().length>0 ){ + _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus'); + _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus'); + } } } break; @@ -1557,6 +1694,7 @@ HotelTV.ui_appfull = (function() { if ( ["ORDER", "CARTS"].includes(_aminfo_ctgy[_idx].name)==true ) { _elDiv_ItemWinLeft.classList.add(_aminfo_ctgy[_idx].name.toLowerCase()); + _elDiv_ItemWinLeft.style.display = 'none'; } else { @@ -1783,6 +1921,12 @@ HotelTV.ui_appfull = (function() { }); }, 500); } + } else if (_state.menu.stage.cur == "amenity_ctgy_orderlists") { + if (event.keyCode == gRmtKey.left) { + _elAmCtgySel.trigger('prev.owl', [700]); + } else if (event.keyCode == gRmtKey.right) { + _elAmCtgySel.trigger('next.owl', [700]); + } } else if (_state.menu.stage.cur == "amenity_ctgy_item_sel") { if (event.keyCode == gRmtKey.left) { __uifxn_AppFull_DrawAmItemSeletion("plus"); @@ -1878,6 +2022,14 @@ HotelTV.ui_appfull = (function() { console.log("TODO::> Draw Carts"); }else if ( _aminfo_ctgy[__status_am_specific.category_sel.cur].name == "ORDER" ){ console.log("TODO::> Draw Order"); + __uifxn_AppFull_DrawAmOrderList('build'); + _state.menu.stage.prev = _state.menu.stage.cur; + _state.menu.stage.cur = "amenity_ctgy_orderlists"; + }else{ + __uifxn_AppFull_DrawAmOrderList('hide'); + if ( _state.menu.stage.prev!=null ){ + _state.menu.stage.cur = _state.menu.stage.prev; + } } } _elAmCtgyBg.trigger("to.owl.carousel", [event.page.index, 1000]); @@ -1921,8 +2073,8 @@ HotelTV.ui_appfull = (function() { } // Draw Titile and message - _elRsOderAlertOrderComplete.children("#title").text(_trTbl.ui.amenity.title.ordercomplete[_state.lang]); - _elRsOderAlertOrderComplete.children("#message").text(_trTbl.ui.amenity.usage.orderAlertComplete[_state.lang]); + _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(); diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index 7c8375c..bb30be7 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -503,6 +503,7 @@ display: flex; } +/*[AM1-1-1-3-1. Amenity bg: owl: amenity item sel window : winleft ] */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winleft { position: relative; width: 902px; @@ -516,7 +517,7 @@ border-bottom: 2px solid rgba(121,121,121,1); } -/**** Amenity Category item ::> Table Header */ +/*[AM1-1-1-3-1-1. Amenity bg: owl: amenity item sel window : winleft: item table] */ .popup .amenity .bg .am_item_sel_win .winleft>.tbl_header { width:100%; line-height: 54px; @@ -661,6 +662,7 @@ } +/*[AM1-1-1-3-2. Amenity bg: owl: amenity item sel window : winright ] */ /**** Amenity Item Description ::> */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright { position: relative; @@ -686,7 +688,7 @@ margin: 10px 25px 10px 25px; } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailable:before { +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailabel:before { /* content: 'Not available'; width: 100%; height: 100%; @@ -702,7 +704,7 @@ line-height: 479px; text-align: center; */ } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailable:after { +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescThumb.unavailabel:after { /* content: ''; width: 100%; height: 100%; @@ -754,6 +756,7 @@ display: flex; } +/*[AM1-1-1-4-1. Amenity bg: owl: amenity item sel cart window : winleft ] */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft { position: relative; width: 902px; @@ -811,7 +814,7 @@ overflow: hidden; } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_quantity{ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #label_quantity{ line-height: 137px; width: 50%; height: 60%; @@ -832,7 +835,7 @@ background-position: center; } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_amount{ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #label_amount{ line-height: 91px; width: 50%; height: 40%; @@ -921,8 +924,7 @@ margin: 0px 0px 0px 20px; } - - +/*[AM1-1-1-4-2. Amenity bg: owl: amenity item sel cart window : winright ] */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright { position: relative; width: 902px; @@ -960,10 +962,6 @@ padding: 20px 2% 20px 2%; } - - - - /**** Amenity Category item ::> Table Header */ .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header { width:100%; @@ -1117,7 +1115,7 @@ } -.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary>#lable{ +.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary>#label{ line-height: 65px; width: 50%; height: 100px; @@ -1280,7 +1278,7 @@ transform: scale(1.1); } */ -/*[AMx. Amenity Use guide style ] */ +/*[AM3. Amenity Use guide style ] */ .popup .amenity>div.use_guide { position: absolute; top: 948px; @@ -1299,7 +1297,7 @@ -/*[AMx. Amenity cart style ] */ +/*[AM4. Amenity cart style ] */ .popup .amenity>div.cart { position: absolute; top: 0px; @@ -1358,7 +1356,211 @@ } +/*[AM5 Amenity order style ] */ +.popup .amenity .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; +} +/*[AM5-1. Amenity order: winleft ] */ +.popup .amenity .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); */ +} + +/*[AM1-1-1-3-1-1. Amenity bg: owl: amenity item sel window : winleft: item table] */ +.popup .amenity .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 .amenity .order .winleft>.tbl_header tbody tr { + height: 54px; + max-height: 54px; + background-color: rgba(21, 27, 34, 1); +} + +.popup .amenity .order .winleft>.tbl_header tbody tr>#orderid { + width: 45%; + float: left; + /* text-align: left; */ + padding: 0 0px 0 20px; +} + +.popup .amenity .order .winleft>.tbl_header tbody tr>#amount { + width: 20%; + float: left; +} + +.popup .amenity .order .winleft>.tbl_header tbody tr>#date { + width: 35%; + float: left; + padding: 0px 30px 0 0px; +} + + +/**** Amenity Category item ::> Table Recored */ +.popup .amenity .order .winleft>.tbl_record { + width:100%; + line-height: 54px; + font-size: 30px; + text-align: center; + /* margin: 5px 0 15px 0; */ +} + +.popup .amenity .order .winleft>.tbl_record tbody { + height: 572px; + overflow-y: auto; + display: block; +} + +.popup .amenity .order .winleft>.tbl_record tbody tr { + /* height: 52px; */ + display: block; + background-color: rgba(36, 45, 57, 1); +} + + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem { + height: 52px; + width: 100%; + font-size: 30px; + line-height: 52px; + border-bottom: 2px solid rgb(21, 27, 34); +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem.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 .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem.unavailable { + /* border-bottom: 2px solid rgb(255, 192, 0); */ + background: rgba(21,27,34,1.0); + color: rgb(121, 121, 121); +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem.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 .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem.focus.unavailable:before { + +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem.focus.unavailable:after { + +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem>#orderid { + width: 45%; + float: left; + padding: 0px 0px 0px 20px; +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem>#amount { + width: 20%; + float: left; + text-align: center; +} + +.popup .amenity .order .winleft>.tbl_record tbody tr>.amOrderedItem>#date { + width: 35%; + float: left; + /* text-align: right; */ + padding: 0px 30px 0 0px; +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar { + display: block; + width: 20px; + /* 세로축 스크롤바 길이 */ + height: 20px; + /* 가로축 스크롤바 길이 */ +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar-track { + background-color: rgb(67, 82, 105); +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar-track-piece { + background-color: rgb(80, 98, 124); +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: rgb(51, 63, 80); +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar-button:start { + display: none; + /* background-color: orange; */ + /* Top, Left 방향의 이동버튼 */ +} + +.popup .amenity .order .winleft>.tbl_record ::-webkit-scrollbar-button:end { + display: none; + /* background-color: orange; */ + /* Bottom, Right 방향의 이동버튼 */ +} + + +.popup .amenity .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 .amenity .order .winleft>.summary>#label{ + line-height: 65px; + width: 50%; + height: 100px; + font-size: 48px; + text-align: center; +} + +.popup .amenity .order .winleft>.summary>#value{ + line-height: 65px; + width: 50%; + height: 100%; + font-size: 52px; + color: rgb(173, 255, 47); + text-align: center; +} /********************************************************************************/ /* AMENITY STYLE [ END ] */