From edfddfb130797fe39175f9a1c426dfc0d95a03cc Mon Sep 17 00:00:00 2001 From: Paul Kim Date: Tue, 30 Aug 2022 01:18:12 +0900 Subject: [PATCH] issue #2 Done for Amenity feature. --- procentric/application/app_hoteltv_full.html | 87 +- .../application/hoteltv.app.full.popup.css | 755 +++++++++++- .../application/lib/hoteltv.ui_appfull.js | 1055 +++++++++++++++-- 3 files changed, 1804 insertions(+), 93 deletions(-) diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index fb0f8e3..ecac9af 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -234,7 +234,92 @@
-
+
+
+
+
+
+ + + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/procentric/application/hoteltv.app.full.popup.css b/procentric/application/hoteltv.app.full.popup.css index eca875d..145115a 100755 --- a/procentric/application/hoteltv.app.full.popup.css +++ b/procentric/application/hoteltv.app.full.popup.css @@ -429,20 +429,761 @@ } -/* Amenity Style */ -.popup .amenity { +/*********************** + * Amenity Style * + ***********************/ + + .popup .amenity { position: absolute; top: 96px; left: -560px; - width: 496px; + width: 1302px; height: 700px; overflow: hidden; display: none; - background-color: rgba(67, 67, 67, 1); - border-style: solid; - border-color: rgb(96, 96, 96); - filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); + /* 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 .amenity .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 .amenity .menu>#title { + /* width: 466px; */ + height: 45px; + line-height: 36px; + overflow: hidden; + font-size: 38px; + text-align: left; + margin: 10px 20px 5px 20px; +} + +.popup .amenity .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 .amenity .menu>#items { + height: 282px; + overflow-y: hidden; + overflow-x: hidden; + margin: 5px 22px 5px 22px; +} + +.popup .amenity .menu>#items table { + width: 100%; + margin: 0px 10px 0 0px; + border-collapse: collapse; +} + +.popup .amenity .menu>#items>.tbl_header { + height: 34px; + max-height: 34px; + line-height: 32px; + font-size: 30px; + text-align: center; + margin: 5px 0 25px 0; +} + +.popup .amenity .menu>#items>.tbl_header tbody tr { + width: 100%; +} + +.popup .amenity .menu>#items>.tbl_header tbody tr>#type { + width: 70%; + float: left; +} + +.popup .amenity .menu>#items>.tbl_header tbody tr>#quantity { + width: 30%; + float: left; +} + +.popup .amenity .menu>#items>.tbl_record { + height: 210px; +} + +.popup .amenity .menu>#items>.tbl_record tbody { + height: 210px; + display: block; + overflow: hidden; +} + +.popup .amenity .menu>#items>.tbl_record tbody tr { + height: 70px; + max-height: 70px; + border: 1px solid rgb(67, 82, 105); +} + +.popup .amenity .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 .amenity .menu>#items>.tbl_record tbody tr>.products { + height: 70px; +} + +.popup .amenity .menu>#items>.tbl_record tbody tr>.products>#index { + font-size: 22px; + line-height: 24px; + width: 10%; + float: left; + text-align: center; +} + +.popup .amenity .menu>#items>.tbl_record tbody tr>.products>#title { + font-size: 22px; + line-height: 24px; + width: 90%; + float: left; +} + +.popup .amenity .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 .amenity .menu>#items>.tbl_record tbody tr>.products>#quantity { + font-size: 36px; + line-height: 36px; + width: 30%; + float: left; + text-align: center; +} + +.popup .amenity .menu>#summary { + height: 70px; + font-size: 38px; + line-height: 64px; + margin: 15px 22px 5px 22px; + border: 1px solid rgb(67, 82, 105); +} + +.popup .amenity .menu>#summary>#title { + width: 22%; + float: left; + text-align: center; + /* padding: 0% 5% 0 20%; */ +} + +.popup .amenity .menu>#summary>#value { + width: 48%; + float: left; + text-align: right; + color: rgb(255, 192, 0); + padding: 0px 55px 0px 0px; +} + +.popup .amenity .menu>#summary>#quantity { + width: 30%; + float: left; + text-align: center; + color: rgb(255, 192, 0); +} + +.popup .amenity .menu>div#buttons { + height: 145px; + font-size: 30px; + text-align: center; + color: rgba(255, 255, 255, 1.0); + margin: 15px 22px 5px 22px; +} + +.popup .amenity .menu>div#buttons div { + height: 38px; + border: 1px solid rgb(90, 90, 90); +} + +.popup .amenity .menu>div#buttons .active { + border: 1px solid rgb(255, 192, 0); + background-color: rgba(34, 42, 53, 1.0); +} + +.popup .amenity .menu>div#buttons #order { + width: 100%; + background-color: rgba(34, 42, 53, 1.0); + /* border-radius: 5px; */ +} + +.popup .amenity .menu>div#buttons #cancel { + width: 100%; + /* border-radius: 5px; */ +} + +.popup .amenity .menu>div#buttons #details { + width: 100%; + /* border-radius: 5px; */ +} + + +/* ROOM SERVICE -> ITEM Description */ + +.popup .amenity .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); +} + +.popup .amenity .description>#title { + width: 100%; + height: 64px; + line-height: 38px; + overflow: hidden; + font-size: 36px; + padding: 10px 10px 5px 10px; +} + +.popup .amenity .description>#comment { + width: 100%; + height: 89px; + line-height: 24px; + overflow: hidden; + font-size: 22px; + padding: 5px 10px 5px 15px; + white-space: pre-line; +} + +.popup .amenity .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 .amenity>.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 .amenity>.cart-list>#title { + height: 45px; + line-height: 36px; + overflow: hidden; + font-size: 38px; + text-align: left; + margin: 10px 20px 5px 20px; +} + +.popup .amenity>.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 .amenity .cart-list>#items { + /* height: 352px; */ + /* overflow-y: auto; */ + /* overflow-y: hidden; + overflow-x: hidden; */ + margin: 5px 22px 5px 22px; +} + +.popup .amenity .cart-list>#items table { + width: 100%; + margin: 0px 10px 0 0px; + border-collapse: collapse; +} + +.popup .amenity .cart-list>#items>.tbl_header { + line-height: 54px; + font-size: 30px; + text-align: center; + margin: 5px 0 15px 0; +} + +.popup .amenity .cart-list>#items>.tbl_header tbody tr { + height: 54px; + max-height: 54px; + background-color: rgb(51, 63, 80); + border: 1px solid rgb(67, 82, 105); +} + +.popup .amenity .cart-list>#items>.tbl_header tbody tr>#type { + width: 50%; + float: left; + text-align: left; + padding: 0 0px 0 80px; +} + +.popup .amenity .cart-list>#items>.tbl_header tbody tr>#quantity { + width: 20%; + float: left; +} + +.popup .amenity .cart-list>#items>.tbl_header tbody tr>#amount { + width: 30%; + float: left; + padding: 0px 30px 0 0px; +} + +.popup .amenity .cart-list>#items>.tbl_record { + /* height: 284px;*/ +} + +.popup .amenity .cart-list>#items>.tbl_record tbody { + height: 276px; + display: block; + /* overflow: hidden; */ + overflow-y: auto; +} + +.popup .amenity .cart-list>#items>.tbl_record tbody tr { + height: 52px; +} + +.popup .amenity .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 .amenity .cart-list>#items>.tbl_record tbody tr>.products { + height: 52px; + width: 754px; + font-size: 30px; + line-height: 54px; + border: 1px solid rgb(67, 82, 105); +} + +.popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#title { + width: 50%; + float: left; + padding: 0px 0px 0px 20px; +} + +.popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#quantity { + width: 20%; + float: left; + text-align: center; +} + +.popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#price { + width: 30%; + float: left; + text-align: right; + padding: 0px 30px 0 0px; +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar { + display: block; + width: 20px; + /* 세로축 스크롤바 길이 */ + height: 20px; + /* 가로축 스크롤바 길이 */ +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-track { + background-color: rgb(67, 82, 105); +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-track-piece { + background-color: rgb(80, 98, 124); +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: rgb(51, 63, 80); +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:start { + display: none; + /* background-color: orange; */ + /* Top, Left 방향의 이동버튼 */ +} + +.popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:end { + display: none; + /* background-color: orange; */ + /* Bottom, Right 방향의 이동버튼 */ +} + +.popup .amenity .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); +} + +.popup .amenity .cart-list>#summary>#title { + width: 30%; + float: left; + text-align: center; + /* padding: 0% 5% 0 20%;*/ +} + +.popup .amenity .cart-list>#summary>#quantity { + width: 40%; + float: left; + text-align: center; + padding: 0 0 0 142px; + color: rgb(255, 192, 0); +} + +.popup .amenity .cart-list>#summary>#amount { + width: 30%; + float: left; + text-align: right; + color: rgb(255, 192, 0); + padding: 0px 30px 0px 0px; +} + +.popup .amenity .cart-list>#notice { + font-size: 22px; + line-height: 24px; + margin: 10px 22px 5px 22px; + text-align: center; +} + +.popup .amenity .cart-list>div#buttons { + font-size: 38px; + text-align: center; + color: rgba(255, 255, 255, 1.0); + margin: 15px 22px 5px 22px; +} + +.popup .amenity .cart-list>div#buttons>div { + height: 38px; + float: left; + width: 50%; +} + +.popup .amenity .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 .amenity .cart-list>div#buttons .active { + border: 1px solid rgb(255, 192, 0); + background-color: rgba(34, 42, 53, 1.0); +} + +.popup .amenity .cart-list>div#buttons #confirm { + width: 50%; +} + +.popup .amenity .cart-list>div#buttons #cancel { + width: 50%; +} + + +/* ROOM SERVICE -> ORDER Details */ + +.popup .amenity .order-details { + position: absolute; + width: 100%; + height: 100%; + background-color: rgb(36, 44, 56); + /* display: block; */ + display: inline-block; + color: rgb(255, 255, 255); +} + +.popup .amenity .order-details>#title { + /* width: 466px; */ + height: 45px; + line-height: 36px; + overflow: hidden; + font-size: 38px; + text-align: left; + margin: 10px 20px 5px 30px; +} + +.popup .amenity .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 .amenity .order-details>#orders { + height: 470px; + overflow-y: hidden; + overflow-x: hidden; + margin: 5px 30px 5px 30px; +} + +.popup .amenity .order-details>#orders>table { + border-collapse: collapse; +} + +.popup .amenity .order-details>#orders>.order_list { + width: 100%; + height: 485px; +} + +.popup .amenity .order-details>#orders>.order_list>tbody { + height: 210px; +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr { + height: 70px; + max-height: 70px; + border: 1px solid rgb(67, 82, 105); +} + +.popup .amenity .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 .amenity .order-details>#orders>.order_list>tbody>tr>.ordering { + height: 44px; + max-height: 44px; + background-color: rgb(51, 63, 80); +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>div { + padding: 0px 0px 5px 0px; +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>#index { + font-size: 30px; + line-height: 32px; + width: 5%; + float: left; + text-align: center; + border-bottom: 1px solid; + margin: 5px 0px 0px 2%; +} + +.popup .amenity .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 .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>#orderId { + font-size: 28px; + line-height: 32px; + width: 53%; + float: left; + /* text-align: right; */ + margin: 5px 2% 0px 0%; +} + + +/* */ + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst { + width: 100%; + float: left; + background-color: rgb(51, 63, 80); + margin: 0px 0px 5px 0px; +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header { + width: 100%; + font-size: 36px; + line-height: 36px; + border-collapse: collapse; +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header>tbody { + /* */ +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header tr { + font-size: 30px; +} + +.popup .amenity .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 .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #quantity { + width: 10%; + font-size: 25px; +} + +.popup .amenity .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 .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal1 {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal2 { + color: rgb(255, 192, 0); +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal3 {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal4 { + color: rgb(255, 192, 0); +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal5 {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record { + width: 100%; + font-size: 36px; + line-height: 36px; + border-collapse: collapse; +} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record>tbody {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem {} + +.popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div { + float: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.popup .amenity .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 .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#quantity { + width: 10%; + text-align: center; +} + +.popup .amenity .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 .amenity .order-details>#summary { + height: 54px; + line-height: 50px; + overflow: hidden; + font-size: 38px; + text-align: left; + margin: 15px 20px 5px 30px; + background-color: rgb(51, 63, 80); +} + +.popup .amenity .order-details>#summary>div { + float: left; +} + +.popup .amenity .order-details>#summary>#title { + width: 40%; + padding: 0px 0px 0px 90px; + text-align: left; +} + +.popup .amenity .order-details>#summary>#quantity { + width: 10%; + text-align: center; + color: rgb(255, 192, 0); +} + +.popup .amenity .order-details>#summary>#amount { + width: 20%; + text-align: right; + padding: 0px 20px 0px 0px; + color: rgb(255, 192, 0); +} + + +/* ROOM SERVICE -> ALRET */ + +.popup .amenity .alert { + position: absolute; + top: 197px; + left: 340px; + width: 600px; + height: 325px; + color: rgb(255, 255, 255); +} + +.popup .amenity .alert>div#order-complete { + width: 100%; + height: 100%; + background-color: rgb(36, 44, 56); + border: 1px solid rgb(255, 255, 255); +} + +.popup .amenity .alert>div#order-complete>div#title { + float: left; + width: 100%; + height: 54px; + background-color: rgb(51, 63, 80); + margin: 42px 0px 0 0px; + font-size: 38px; + line-height: 52px; + text-align: center; +} + +.popup .amenity .alert>div#order-complete>div#message { + width: 95%; + float: left; + margin: 40px 20px 5px 20px; + font-size: 22px; + line-height: 24px; + text-align: center; + white-space: pre-wrap; } diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index 73952c3..9921d10 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -265,8 +265,850 @@ HotelTV.ui_appfull = (function() { } } + /** * HotelTV UI[AppFull] Wrapper Function::> build amenity + * @param {boolean} _show show/hide + */ + function __uifxn_AppFull_DrawAmenityOrderAlert(_show) { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _elAmPupRoot = $('.popup .amenity'); + let _elAmOderAlertRoot = _elAmPupRoot.children('.alert'); + let _elAmOderAlertOrderComplete = _elAmOderAlertRoot.children('#order-complete'); + + if (_show == false) { + if (_elAmOderAlertRoot.css('display') != "none") { + _elAmOderAlertOrderComplete.hide(0, function() { + _elAmOderAlertRoot.hide(); + }); + } + return; + } + + // Draw Titile and message + _elAmOderAlertOrderComplete.children("#title").text(_trTbl.ui.amenity.title.ordercomplete[_state.lang]); + _elAmOderAlertOrderComplete.children("#message").text(_trTbl.ui.amenity.usage.orderAlertComplete[_state.lang]); + + if (_elAmOderAlertOrderComplete.css('display') == "none") { + _elAmOderAlertOrderComplete.show(); + } + + if (_elAmOderAlertRoot.css('display') == "none") { + _elAmOderAlertRoot.fadeIn(300); + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> update amenity service order list + * @param {boolean} _show show/hide + * @param {string} _keyEvt key event + */ + async function __uifxn_AppFull_DrawAmenityOrderList(_show, _keyEvt) { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _RsOrder = null; + let _amenity = HotelTV.opening.amenity; + + let _elAmPupRoot = $('.popup .amenity'); + let _elAmOLstRoot = _elAmPupRoot.children('.order-details'); + let _elAmOLstItems = _elAmOLstRoot.children(`#orders`); + let _elAmOLstSummary = _elAmOLstRoot.children('#summary'); + + const __fxn_getRsItemValue = function(_object, _key, _itemID) { + for (__j = 1; __j <= _object.length; __j++) { + if (_object[__j].id == _itemID) { + return _object[__j][_key]; + } + } + } + + const __fxn_padZero = function(_num, _size) { + _num = _num.toString(); + while (_num.length < _size) _num = "0" + _num; + return _num; + } + + + + + if (_show == false) { + if (_elAmOLstRoot.css('display') != "none") { + _elAmOLstRoot.hide(); + } + return; + } + + + switch (_keyEvt) { + case "build": + { + let _total_quantity = 0; + + try { + HotelTV.orders.amenity = _RsOrder = await HotelTV.api.GetAmenityOrders(null); + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + return; + } + + _elAmOLstRoot.children(`#title`).text(_trTbl.ui.amenity.title.orderdetails[_state.lang]); + _elAmOLstRoot.children(`#usage`).text(_trTbl.ui.amenity.usage.details[_state.lang]); + + //Draw Amenity Order Items + try { + // Delete elements under amenity service item table + let _elAmOLstItemTblRec = _elAmOLstItems.children('.order_list').children('tbody'); + + // Delete elements under amenity service item table + if (_elAmOLstItemTblRec.children('tr').length) { + _elAmOLstItemTblRec.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 = `[${__fxn_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.amenity.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.amenity.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.amenity.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.amenity.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.amenity.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.amenity.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, ",")}${_amenity.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.amenity.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}] ` + __fxn_getRsItemValue(_amenity.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, ",") + _amenity.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); + } + + _elAmOLstItemTblRec.append(_eltr_ordering); + } + + // Draw Total Amount and Quantity + _elAmOLstSummary.children(`#title`).text(_trTbl.ui.amenity.title.sum[_state.lang]); + _elAmOLstSummary.children(`#quantity`).text(_total_quantity); + _elAmOLstSummary.children(`#amount`).text(_RsOrder.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _amenity.currency[_state.lang]); + + // Activate first order lists + _elAmOLstItemTblRec.children('tr').first().addClass('active'); + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + return; + } + + + if (_elAmOLstRoot.css('display') == "none") { + _elAmOLstRoot.fadeIn(400); + } + } + break; + case "up": + { + let _elAmOLstItemTblRec = _elAmOLstItems.children('.order_list').children('tbody'); + let selectedTblItem = _elAmOLstItemTblRec.children('tr.active').prev(".order_list tr"); + if (selectedTblItem.length) { + _elAmOLstItemTblRec.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.hotkey.mm[_amenity.button].status.orderdetails.idx = selectedTblItem.prop('rowIndex'); + + // 스크롤이 필요한 경우 스크롤링 하기 + let _scrollTopVal = _state.hotkey.mm[_amenity.button].status.orderdetails.scroll_TOfset; + _scrollTopVal -= selectedTblItem.prop('scrollHeight'); + _elAmOLstItems.animate({ scrollTop: _scrollTopVal }, 200); + _state.hotkey.mm[_amenity.button].status.orderdetails.scroll_TOfset = _scrollTopVal; + } + } + break; + case "down": + { + let _elAmOLstItemTblRec = _elAmOLstItems.children('.order_list').children('tbody'); + let selectedTblItem = _elAmOLstItemTblRec.children('tr.active').next(".order_list tr"); + if (selectedTblItem.length) { + _elAmOLstItemTblRec.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.hotkey.mm[_amenity.button].status.orderdetails.idx = selectedTblItem.prop('rowIndex'); + + // 스크롤이 필요한 경우 스크롤링 하기 + let _scrollTopVal = _state.hotkey.mm[_amenity.button].status.orderdetails.scroll_TOfset; + _scrollTopVal += selectedTblItem.prop('scrollHeight'); + _elAmOLstItems.animate({ scrollTop: _scrollTopVal }, 200); + _state.hotkey.mm[_amenity.button].status.orderdetails.scroll_TOfset = _scrollTopVal; + } + } + break; + case "back": + break; + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> update amenity service cart list for ordering + * @param {boolean} _show show/hide + * @param {string} _keyEvt key event + */ + function __uifxn_AppFull_DrawAmenityCartList(_show, _keyEvt) { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _amenity = HotelTV.opening.amenity; + let _rsCart = HotelTV.carts.amenity; + + let _elAmPupRoot = $('.popup .amenity'); + let _elAmCLstRoot = _elAmPupRoot.children('.cart-list'); + let _elAmCLstSummary = _elAmCLstRoot.children('#summary'); + let _elAmCLstButtons = _elAmCLstRoot.children('#buttons'); + + const __fxn_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 (_elAmCLstRoot.css('display') != "none") { + _elAmCLstButtons.find('#confirm').removeClass("active"); + _elAmCLstButtons.find('#cancel').removeClass("active"); + _elAmCLstRoot.hide(); + } + return; + } + + + if (!_rsCart || !_amenity) { + return; + } + + switch (_keyEvt) { + case "build": + let _total_quantity = 0; + + _elAmCLstRoot.children('#title').text(_trTbl.ui.amenity.title.cartslist[_state.lang]); + _elAmCLstRoot.children('#usage').text(_trTbl.ui.amenity.usage.orderConfirm[_state.lang]); + + //Draw Amenity Cart Items + try { + let _elAmCLstItems = _elAmCLstRoot.children(`#items`); + let _elAmCLstItemTblHdr = _elAmCLstItems.children('.tbl_header').children('tbody'); + let _elAmCLstItemTblRec = _elAmCLstItems.children('.tbl_record').children('tbody'); + // Drawing Item Table Headers + _elAmCLstItemTblHdr.children('tr').children('th#type').text(`${_trTbl.ui.amenity.title.item[_state.lang]}`); + _elAmCLstItemTblHdr.children('tr').children('th#quantity').text(_trTbl.ui.amenity.title.quantity[_state.lang]); + _elAmCLstItemTblHdr.children('tr').children('th#amount').text(_trTbl.ui.amenity.title.amount[_state.lang]); + + // Delete elements under amenity service item table + if (_elAmCLstItemTblRec.children('tr').length) { + _elAmCLstItemTblRec.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 = __fxn_getRsItemValue(_amenity.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, ",") + _amenity.currency[_state.lang]; + _eldiv_item_ctz.appendChild(_elDiv_price); + } + _eltr_item.appendChild(_eldiv_item_ctz); + _elAmCLstItemTblRec.append(_eltr_item); + } + } + // 첫번째 테이블 아애템에 active 클래스 추가 (플래그용으로 사용) + // _elAmCLstItemTblRec.children('tr').first().addClass('active'); + } catch (_error) { + console.log(_error.message); + } + + // Drawing Summary + _elAmCLstSummary.children('#title').text(_trTbl.ui.amenity.title.sum[_state.lang]); + _elAmCLstSummary.children('#quantity').text(_total_quantity); + _elAmCLstSummary.children('#amount').text(_rsCart.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _amenity.currency[_state.lang]); + + // Drawing Notice + _elAmCLstRoot.children('#notice').text(_trTbl.ui.amenity.usage.orderNoticeFinal[_state.lang]); + + // Drawing Buttons + _elAmCLstButtons.find('#confirm').text(_trTbl.ui.amenity.title.confirm[_state.lang]); + _elAmCLstButtons.find('#cancel').text(_trTbl.ui.amenity.title.back[_state.lang]); + + // Focus button + _elAmCLstButtons.find('#confirm').addClass("active"); + + if (_elAmCLstRoot.css('display') == "none") { + _elAmCLstRoot.fadeIn(300); + } + break; + case "left": + if (_state.hotkey.mm[_amenity.button].status.cartlist.idx == "confirm") { + _elAmCLstButtons.find('#confirm').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.cartlist.idx = "cancel"; + _elAmCLstButtons.find('#cancel').addClass("active"); + } else if (_state.hotkey.mm[_amenity.button].status.cartlist.idx == "cancel") { + _elAmCLstButtons.find('#cancel').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.cartlist.idx = "confirm"; + _elAmCLstButtons.find('#confirm').addClass("active"); + } + break; + case "right": + if (_state.hotkey.mm[_amenity.button].status.cartlist.idx == "confirm") { + _elAmCLstButtons.find('#confirm').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.cartlist.idx = "cancel"; + _elAmCLstButtons.find('#cancel').addClass("active"); + } else if (_state.hotkey.mm[_amenity.button].status.cartlist.idx == "cancel") { + _elAmCLstButtons.find('#cancel').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.cartlist.idx = "confirm"; + _elAmCLstButtons.find('#confirm').addClass("active"); + } + break; + case "back": + break; + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> update amenity service item description + * @param {boolean} _show show/hide + */ + function __uifxn_AppFull_DrawAmenityItemDescription(_show) { + let _state = HotelTV.state; + let _amenity = HotelTV.opening.amenity; + + let _elAmPupRoot = $('.popup .amenity'); + let _elAmMnRoot = _elAmPupRoot.children('.menu'); + let _elAmMnItmTbl = _elAmMnRoot.children('#items').find('.tbl_record').children('#record'); + let _elAmMnDesc = _elAmPupRoot.children('.description'); + + const __fxn_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 (_elAmMnDesc.css('display') != "none") { + _elAmMnDesc.hide(); + } + return; + } + + //선택된 테이블 레코드의 ID속성값 읽어오기 + let selectedTblItemID = _elAmMnItmTbl.children('tr.active').prop('id'); + + //Redraw Description + _elAmMnDesc.children('#title').text(__fxn_getRsItemValue(_amenity.children, "title", selectedTblItemID)[_state.lang]); + _elAmMnDesc.children('#comment').text(__fxn_getRsItemValue(_amenity.children, "description", selectedTblItemID)[_state.lang]); + _elAmMnDesc.children('#thumb').css('background-image', 'url(' + __fxn_getRsItemValue(_amenity.children, "thumbnail", selectedTblItemID).files[_state.lang].download + ')'); + + if (_elAmMnDesc.css('display') == "none") { + _elAmMnDesc.show(); + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> update amenity service item + * @param {boolean} _isUpdateDescrption show/hide item description + */ + async function __uifxn_AppFull_DrawAmenityItem(_isUpdateDescrption) { + let _state = HotelTV.state; + let _amenity = HotelTV.opening.amenity; + let _carts = null; + const __fxn_cartItemExist = function(_object, _itemID) { + for (__j = 1; __j <= _object.length; __j++) { + if (_object[__j].itemId == _itemID) { + return true; + } + } + return false; + } + + const __fxn_cartItemValue = function(_object, _key, _itemID) { + for (__j = 1; __j <= _object.length; __j++) { + if (_object[__j].itemId == _itemID) { + return _object[__j][_key]; + } + } + } + + try { + let _total_quantity = 0; + let _elAmMnItemTblRoot = $('.popup .amenity>.menu #items>table.tbl_record'); + HotelTV.carts.amenity = _carts = await HotelTV.api.GetAmenityCarts(); + for (let _idx = 1; _idx <= _amenity.children.length; _idx++) { + let _rsItem = _amenity.children[_idx]; + let _elAmItemRecRoot = _elAmMnItemTblRoot.find(`tr#${_rsItem.id}`).children('div.products'); + // Update Unit price + _elAmItemRecRoot.find('#price').text(_rsItem.price[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _amenity.currency[_state.lang]); + + // Update quantity + if (_carts.items.length && __fxn_cartItemExist(_carts.items, _rsItem.id) == true) { + let _cart_item_quantity = __fxn_cartItemValue(_carts.items, "quantity", _rsItem.id); + _total_quantity += _cart_item_quantity; + // Cart Quantity + _elAmItemRecRoot.find('#quantity').text(_cart_item_quantity); + } + } + + //Update Total amount as well as quantity + let _elAmMnSummary = $('.popup .amenity>.menu #summary'); + _elAmMnSummary.children('#value').text(_carts.amount[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _amenity.currency[_state.lang]); + _elAmMnSummary.children('#quantity').text(_total_quantity); + + //Refresh menu description + if (_isUpdateDescrption == true) { + __uifxn_AppFull_DrawAmenityItemDescription(true); + } + } catch (_error) { + console.log(_error.message); + } + } + + /** + * HotelTV UI[AppFull] Wrapper Function::> amenity service handling function + * @param {string} _evtKey event + * @param {boolean} _isFlushCart flag for flush cart + * @param {callback} _cbFxn post-processing callback + */ + async function __uifxn_AppFull_HandleAmenity(_evtKey, _isFlushCart, _isDoOrder, _cbFxn) { + let _state = HotelTV.state; + let _opening = HotelTV.opening; + let _amenity = null; + let _carts = HotelTV.carts.amenity; + let _scrollTopVal = 0; + let _elAmPupRoot = $('.popup .amenity'); + let _elAmMnRoot = _elAmPupRoot.children('.menu'); + let _elAmMnItmTbl = _elAmMnRoot.children('#items').find('.tbl_record').children('#record'); + let _elAmMnBtn = _elAmMnRoot.children('#buttons'); + let _elAmOdDetails = _elAmPupRoot.children('.order-details'); + + const __fxn_cartEmpty = function(_object) { + for (__j = 1; __j <= _object.length; __j++) { + if (_object[__j].id) { + return false; + } + } + return true; + } + + const __fxn_cartItemValue = function(_object, _key, _itemID) { + for (__j = 1; __j <= _object.length; __j++) { + if (_object[__j].id == _itemID) { + return _object[__j][_key]; + } + } + } + + const __fxn_close_AmPopup = function(_fxn_post_process) { + // 아이템 디스크립션(메뉴 오른쪽) 하이드 + __uifxn_AppFull_DrawAmenityItemDescription(false); + + _elAmPupRoot.animate({ top: 96, left: -560 }, 500, () => { + // 아이탬 테이블 스크롤 맨 위로 이동 + _elAmMnItmTbl.animate({ scrollTop: 0 }, 200); + + // CART LIST 제거 및 Off + __uifxn_AppFull_DrawAmenityCartList(false, "back"); + + // 매뉴 아이탬 및 버튼에서 active클래스 초기화 + _elAmMnItmTbl.children('tr.active').removeClass("active"); + _elAmMnItmTbl.children('tr').first().addClass('active'); + _elAmMnBtn.children('div').removeClass("active"); + + // state내의 Amenity 관련 HOTKEY정보를 초기화 + _state.hotkey.mm[_amenity.button] = { + 'type': "amenity", + "status": { + "focus": "menu", + "menu": { + "idx": 0, + "scroll_TOfset": 0 + }, + "button": { + "idx": null + }, + "cartlist": { + "idx": null, + "scroll_TOfset": 0 + }, + "orderdetails": { + "idx": null, + "scroll_TOfset": 0 + } + } + }; + + // Do post-processing + if (_fxn_post_process) { + _fxn_post_process(); + } + }); + } + + + + if (!_opening.amenity) { + return; + } + _amenity = _opening.amenity; + + switch (_evtKey) { + case "up": + switch (_state.hotkey.mm[_amenity.button].status.focus) { + case "menu": + // 선택한 아이탬 알아내기 + let selectedTblItem = _elAmMnItmTbl.children('tr.active').prev(".tbl_record tr"); + if (selectedTblItem.length) { + _elAmMnItmTbl.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.hotkey.mm[_amenity.button].status.menu.idx = selectedTblItem.prop('rowIndex'); + + // 스크롤이 필요한 경우 스크롤링 하기 + _scrollTopVal = selectedTblItem.prop('scrollHeight') * _state.hotkey.mm[_amenity.button].status.menu.idx; + _state.hotkey.mm[_amenity.button].status.menu.scroll_TOfset = _scrollTopVal; + _elAmMnItmTbl.animate({ scrollTop: _scrollTopVal }, 200); + + //Update Item Description Frame + __uifxn_AppFull_DrawAmenityItemDescription(true); + } + break; + case "button": + _elAmMnBtn.children('div').removeClass("active"); + if (_state.hotkey.mm[_amenity.button].status.button.idx == "cancel") { + _state.hotkey.mm[_amenity.button].status.button.idx = "details"; + _elAmMnBtn.children('div#details').addClass("active"); + } else if (_state.hotkey.mm[_amenity.button].status.button.idx == "details") { + if (__fxn_cartEmpty(_carts.items) == false) { + _state.hotkey.mm[_amenity.button].status.button.idx = "order"; + _elAmMnBtn.children('div#order').addClass("active"); + } else { + _state.hotkey.mm[_amenity.button].status.button.idx = null; + _state.hotkey.mm[_amenity.button].status.focus = "menu"; + _elAmMnItmTbl.children('tr').eq(_state.hotkey.mm[_amenity.button].status.menu.idx).addClass('active'); + __uifxn_AppFull_DrawAmenityItemDescription(true); + } + } else { + _state.hotkey.mm[_amenity.button].status.button.idx = null; + _state.hotkey.mm[_amenity.button].status.focus = "menu"; + _elAmMnItmTbl.children('tr').eq(_state.hotkey.mm[_amenity.button].status.menu.idx).addClass('active'); + // Shows up Menu Item description + __uifxn_AppFull_DrawAmenityItemDescription(true); + } + break; + case "orderdetails": + //Navigate order lists + __uifxn_AppFull_DrawAmenityOrderList(true, "up"); + break; + } + break; + case "down": + switch (_state.hotkey.mm[_amenity.button].status.focus) { + case "menu": + // 선택한 아이탬 알아내기 + let selectedTblItem = _elAmMnItmTbl.children('tr.active').next(".tbl_record tr"); + if (selectedTblItem.length) { + _elAmMnItmTbl.children('tr.active').removeClass("active"); + selectedTblItem.addClass('active'); + _state.hotkey.mm[_amenity.button].status.menu.idx = selectedTblItem.prop('rowIndex'); + + // 스크롤이 필요한 경우 스크롤링 하기 + _scrollTopVal = selectedTblItem.prop('scrollHeight') * _state.hotkey.mm[_amenity.button].status.menu.idx; + _state.hotkey.mm[_amenity.button].status.menu.scroll_TOfset = _scrollTopVal; + _elAmMnItmTbl.animate({ scrollTop: _scrollTopVal }, 200); + + //Update Item Description Frame + __uifxn_AppFull_DrawAmenityItemDescription(true); + } else { + _elAmMnItmTbl.children('tr.active').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.focus = "button"; + + //Hide Item Description Frame + __uifxn_AppFull_DrawAmenityItemDescription(false); + if (__fxn_cartEmpty(_carts.items) == false) { + _state.hotkey.mm[_amenity.button].status.button.idx = "order"; + _elAmMnBtn.children('div#order').addClass("active"); + } else { + _state.hotkey.mm[_amenity.button].status.button.idx = "details"; + _elAmMnBtn.children('div#details').addClass("active"); + } + } + break; + case "button": + if (_state.hotkey.mm[_amenity.button].status.button.idx == "order") { + _elAmMnBtn.children('div').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.button.idx = "details"; + _elAmMnBtn.children('div#details').addClass("active"); + } else if (_state.hotkey.mm[_amenity.button].status.button.idx == "details") { + _elAmMnBtn.children('div').removeClass("active"); + _state.hotkey.mm[_amenity.button].status.button.idx = "cancel"; + _elAmMnBtn.children('div#cancel').addClass("active"); + } + break; + case "orderdetails": + //Navigate order lists + __uifxn_AppFull_DrawAmenityOrderList(true, "down"); + break; + } + break; + case "right": + if (_state.hotkey.mm[_amenity.button].status.focus == "menu") { + let selectedTblItem = _elAmMnItmTbl.children('tr.active'); + let _sel_itemID = selectedTblItem.attr('id'); + try { + let _result = await HotelTV.api.PutAmenityCarts(_sel_itemID, 1); + if (_result) { + __uifxn_AppFull_DrawAmenityItem(false); + } + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + } + } else if (_state.hotkey.mm[_amenity.button].status.focus == "cartlist") { + __uifxn_AppFull_DrawAmenityCartList(true, "left"); + } + break; + case "left": + if (_state.hotkey.mm[_amenity.button].status.focus == "menu") { + let selectedTblItem = _elAmMnItmTbl.children('tr.active'); + let _sel_itemID = selectedTblItem.attr('id'); + try { + let _result = await HotelTV.api.PutAmenityCarts(_sel_itemID, -1); + if (_result) { + __uifxn_AppFull_DrawAmenityItem(false); + } + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + } + } else if (_state.hotkey.mm[_amenity.button].status.focus == "cartlist") { + __uifxn_AppFull_DrawAmenityCartList(true, "right"); + } + break; + case "enter": + if (_state.hotkey.mm[_amenity.button].status.focus == "button") { + switch (_state.hotkey.mm[_opening.amenity.button].status.button.idx) { + case "cancel": + __fxn_close_AmPopup(_cbFxn); + break; + case "order": + //Remove active class from menu buttons + _elAmMnBtn.children('div').removeClass("active"); + + // Build Cart List + _state.hotkey.mm[_amenity.button].status.focus = "cartlist"; + __uifxn_AppFull_DrawAmenityCartList(true, "build"); + _state.hotkey.mm[_opening.amenity.button].status.cartlist.idx = "confirm"; + break; + case "details": + // Hide Menu + _elAmMnRoot.hide(); + + // Build Order details + _state.hotkey.mm[_amenity.button].status.focus = "orderdetails"; + __uifxn_AppFull_DrawAmenityOrderList(true, "build"); + break; + } + } else if (_state.hotkey.mm[_amenity.button].status.focus == "cartlist") { + switch (_state.hotkey.mm[_opening.amenity.button].status.cartlist.idx) { + case "confirm": + _state.hotkey.mm[_amenity.button].status.focus = "orderalert"; + try { + let _result = await HotelTV.api.PutAmenityOrders(); + if (_result) { + console.log(`Success to order CARTID::>`); + __uifxn_AppFull_DrawAmenityItem(true); + + HotelTV.orders.amenity = await HotelTV.api.GetAmenityOrders(null); + } else { + console.log(`Fail to order CARTID::>`); + } + } catch (_error) { + console.log(`Fail to call API::> ${_error}`); + } + + //Show Order confirm alert + __uifxn_AppFull_DrawAmenityOrderAlert(true); + break; + case "cancel": + //Hide Cart List + __uifxn_AppFull_DrawAmenityCartList(false, "back"); + //Return to button + _state.hotkey.mm[_amenity.button].status.focus = "button"; + _elAmMnBtn.children('div#order').addClass("active"); + break; + } + } else if (_state.hotkey.mm[_amenity.button].status.focus == "orderalert") { + //Hide Cart List + __uifxn_AppFull_DrawAmenityCartList(false, "back"); + //Hide Order confirm alert + __uifxn_AppFull_DrawAmenityOrderAlert(false); + //Return to button + _state.hotkey.mm[_amenity.button].status.focus = "button"; + _elAmMnBtn.children('div#order').addClass("active"); + } + break; + case "back": + if (_state.hotkey.mm[_amenity.button].status.focus == "orderalert") { + //Hide Cart List + __uifxn_AppFull_DrawAmenityCartList(false, "back"); + //Hide Order confirm alert + __uifxn_AppFull_DrawAmenityOrderAlert(false); + //Return to button + _state.hotkey.mm[_amenity.button].status.focus = "button"; + _elAmMnBtn.children('div#order').addClass("active"); + } else if (_state.hotkey.mm[_amenity.button].status.focus == "orderdetails") { + //Hide Order Details + __uifxn_AppFull_DrawAmenityOrderList(false, null); + + //Return to button + _state.hotkey.mm[_amenity.button].status.focus = "button"; + + // Hide Menu + _elAmMnRoot.fadeIn(400); + } else { + __fxn_close_AmPopup(_cbFxn); + } + break; + } + } + + + /** + * HotelTV UI[AppFull] Wrapper Function::> build amenity service * @param {boolean} e event */ function __uifxn_AppFull_BuildAmenity() { @@ -275,21 +1117,122 @@ HotelTV.ui_appfull = (function() { let _opening = HotelTV.opening; let _order = HotelTV.orders.amenity; let _amenity = null; - let _elAmRoot = $(`.popup .amenity`); - let _elAmBtnRoot = $(`.popup .amenity>.buttons`); + let _elAmPupRoot = $('.popup .amenity'); + let _elAmMnRoot = _elAmPupRoot.children('.menu'); + let _elAmMnBtn = _elAmMnRoot.children('#buttons'); + let _elAmMnSummary = _elAmMnRoot.children('#summary'); if (!_opening.amenity) { return; } _amenity = _opening.amenity; - _elAmRoot.children('.title').text(_amenity.title[_state.lang]); - _elAmRoot.children('.usage').text(_trTbl.ui.amenity.usage.order[_state.lang]); + _elAmMnRoot.children('#title').text(_amenity.title[_state.lang]); + _elAmMnRoot.children('#usage').text(_trTbl.ui.amenity.usage.order[_state.lang]); + //Draw Amenity Cart Items - let _elAmItemsRoot = $(`.popup .amenity>.items`); + try { + let _elAmMnItems = _elAmMnRoot.children(`#items`); + let _elAmMnItemTblHdr = _elAmMnItems.children('.tbl_header').children('tbody'); + let _elAmMnItemTblRec = _elAmMnItems.children('.tbl_record').children('tbody'); + // Drawing Item Table Headers + _elAmMnItemTblHdr.children('tr').children('th#type').text(`${_trTbl.ui.amenity.title.item[_state.lang]} [${_amenity.children.length}]`); + _elAmMnItemTblHdr.children('tr').children('th#quantity').text(_trTbl.ui.amenity.title.quantity[_state.lang]); + + // Delete elements under amenity service item table + if (_elAmMnItemTblRec.children('tr').length) { + _elAmMnItemTblRec.children('tr').remove(); + } + + for (let _idx = 1; _idx <= _amenity.children.length; _idx++) { + let _rsItem = _amenity.children[_idx]; + + var _eltr_item = document.createElement('tr'); + _eltr_item.setAttribute("id", _amenity.children[_idx].id); + _eltr_item.setAttribute("index", _idx); { + //어메니티 아이탬 화면 드로잉 + var _eldiv_item_ctz = document.createElement('div'); + _eldiv_item_ctz.setAttribute("class", "products"); + + // 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); + + // 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); + _elAmMnItemTblRec.append(_eltr_item); + } + // 첫번째 테이블 아애템에 active 클래스 추가 (플래그용으로 사용) + _elAmMnItemTblRec.children('tr').first().addClass('active'); + } catch (_error) { + console.log(_error.message); + } + + // Drawing Amount(Cart) + _elAmMnSummary.children('#title').text(_trTbl.ui.amenity.title.sum[_state.lang]); + // _elAmMnSummary.children('#value').text("0"); + // _elAmMnSummary.children('#quantity').text("0"); + + // + __uifxn_AppFull_DrawAmenityCartList(false, null); + __uifxn_AppFull_DrawAmenityOrderList(false, null); + __uifxn_AppFull_DrawAmenityOrderAlert(false); + + // Draw Buttons + _elAmMnBtn.children('#order').text(_trTbl.ui.amenity.title.order[_state.lang]); + _elAmMnBtn.children('#details').text(_trTbl.ui.amenity.title.orderdetails[_state.lang]); + _elAmMnBtn.children('#cancel').text(_trTbl.ui.amenity.title.cancel[_state.lang]); + + + // HOTKEY정보를 state에 기록 + if (!(_amenity.button in _state.hotkey.mm)) { + _state.hotkey.mm[_amenity.button] = { + 'type': "amenity", + "status": { + "focus": "menu", + "menu": { + "idx": 0, + "scroll_TOfset": 0 + }, + "button": { + "idx": null + }, + "cartlist": { + "idx": null, + "scroll_TOfset": 0 + }, + "orderdetails": { + "idx": null, + "scroll_TOfset": 0 + } + } + }; + } + return; } + /** * HotelTV UI[AppFull] Wrapper Function::> build amenity * @param {boolean} _show show/hide @@ -875,7 +1818,7 @@ HotelTV.ui_appfull = (function() { _elRsMnItmTbl.children('tr').first().addClass('active'); _elRsMnBtn.children('div').removeClass("active"); - // state내의 Room serice관련 HOTKEY정보를 초기화 + // state내의 Room service관련 HOTKEY정보를 초기화 _state.hotkey.mm[_roomservice.button] = { 'type': "roomservice", "status": { @@ -3510,7 +4453,7 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_BuildBrochure(); //Build Amenity - //__uifxn_AppFull_BuildAmenity(); + __uifxn_AppFull_BuildAmenity(); //Build Room Service __uifxn_AppFull_BuildRoomService(); @@ -3617,6 +4560,7 @@ HotelTV.ui_appfull = (function() { $('.popup .amenity').show(0, function() { $('.popup .amenity').animate({ top: 96, left: 64 }, 500, () => { _state.menu.stage = "hotkey_mm_amenity"; + __uifxn_AppFull_DrawAmenityItem(true); __uifxn_AppFull_ShowMMHotKeyBtn(false); }); }); @@ -3645,6 +4589,7 @@ HotelTV.ui_appfull = (function() { $('.popup .amenity').show(0, function() { $('.popup .amenity').animate({ top: 96, left: 64 }, 500, () => { _state.menu.stage = "hotkey_mm_amenity"; + __uifxn_AppFull_DrawAmenityItem(true); __uifxn_AppFull_ShowMMHotKeyBtn(false); }); }); @@ -3673,6 +4618,7 @@ HotelTV.ui_appfull = (function() { $('.popup .amenity').show(0, function() { $('.popup .amenity').animate({ top: 96, left: 64 }, 500, () => { _state.menu.stage = "hotkey_mm_amenity"; + __uifxn_AppFull_DrawAmenityItem(true); __uifxn_AppFull_ShowMMHotKeyBtn(false); }); }); @@ -3701,6 +4647,7 @@ HotelTV.ui_appfull = (function() { $('.popup .amenity').show(0, function() { $('.popup .amenity').animate({ top: 96, left: 64 }, 500, () => { _state.menu.stage = "hotkey_mm_amenity"; + __uifxn_AppFull_DrawAmenityItem(true); __uifxn_AppFull_ShowMMHotKeyBtn(false); }); }); @@ -3722,6 +4669,7 @@ HotelTV.ui_appfull = (function() { $('.popup .amenity').show(0, function() { $('.popup .amenity').animate({ top: 96, left: 64 }, 500, () => { _state.menu.stage = "hotkey_mm_amenity"; + __uifxn_AppFull_DrawAmenityItem(true); __uifxn_AppFull_ShowMMHotKeyBtn(false); }); }); @@ -3832,90 +4780,27 @@ HotelTV.ui_appfull = (function() { } else if (_state.menu.stage == "hotkey_mm_amenity") { console.log("HOTKEY(MM:AMENITY: MENU) KEY EVENT::> " + _evt.keyCode); if (_evt.keyCode == 37) { - console.log("LEFT"); - __uifxn_AppFull_HandleAmenity("left", false, false); + console.log("AMENITY::>LEFT"); + __uifxn_AppFull_HandleAmenity("left", false, false, null); } else if (_evt.keyCode == 38) { - console.log("UP"); - __uifxn_AppFull_HandleAmenity("up", false, false); + console.log("AMENITY::>UP"); + __uifxn_AppFull_HandleAmenity("up", false, false, null); } else if (_evt.keyCode == 39) { - console.log("RIGHT"); - __uifxn_AppFull_HandleAmenity("right", false, false); + console.log("AMENITY::>RIGHT"); + __uifxn_AppFull_HandleAmenity("right", false, false, null); } else if (_evt.keyCode == 40) { - console.log("DOWN"); - __uifxn_AppFull_HandleAmenity("down", false, false); + console.log("AMENITY::>DOWN"); + __uifxn_AppFull_HandleAmenity("down", false, false, null); } else if (_evt.keyCode == 13) { - console.log("ENTER"); - if (_state.hotkey.mm[_opening.amenity.button].status.last_CartBtn_idx == "cancel") { - // Move to top of item list - $('.popup .amenity .items').animate({ scrollTop: 0 }, 0); - $('.popup .amenity').animate({ top: 96, left: -560 }, 500, () => { - $('.popup .amenity>.items').animate({ scrollTop: 0 }, 0, () => { - _state.menu.stage = "main"; - $('.popup .amenity').hide(0, 'linear', () => { - // HOTKEY STATUS 리셋 - __uifxn_AppFull_HandleAmenity("reset", true, false); - __uifxn_AppFull_ShowMMHotKeyBtn(true); - }); - }); - }); - } else if (_state.hotkey.mm[_opening.amenity.button].status.last_CartBtn_idx == "order") { - $('.popup .amenity').animate({ top: 96, left: -560 }, 500, () => { - // Move to top of item list - $('.popup .amenity>.items').animate({ scrollTop: 0 }, 0, () => { - _state.menu.stage = "main"; - $('.popup .amenity').hide(0, 'linear', () => { - // HOTKEY STATUS 리셋 - __uifxn_AppFull_HandleAmenity("reset", false, true); - __uifxn_AppFull_ShowMMHotKeyBtn(true); - }); - }); - }); - } else if (_state.hotkey.mm[_opening.amenity.button].status.last_CartBtn_idx == "details") { - $('.popup .amenity').animate({ scrollTop: $('.popup .amenity').prop('offsetHeight') }, 500, () => { - // scroll to show amenity order details - __uifxn_AppFull_HandleAmenity("enter", false, false); - _state.menu.stage = "hotkey_mm_amenity_order_details"; - __uifxn_AppFull_BuildAmenityOrderDetails(); - }); - } - } else if (_evt.keyCode == 461) { - $('.popup .amenity').animate({ top: 96, left: -560 }, 500, () => { - // Move to top of item list - $('.popup .amenity>.items').animate({ scrollTop: 0 }, 0, () => { - _state.menu.stage = "main"; - $('.popup .amenity').hide(0, 'linear', () => { - // HOTKEY STATUS 리셋 - __uifxn_AppFull_HandleAmenity("reset", true, false); - __uifxn_AppFull_ShowMMHotKeyBtn(true); - }); - }); + console.log("AMENITY::>ENTER"); + __uifxn_AppFull_HandleAmenity("enter", false, false, function() { + _state.menu.stage = "main"; + __uifxn_AppFull_ShowMMHotKeyBtn(true); }); - } - } else if (_state.menu.stage == "hotkey_mm_amenity_order_details") { - console.log("HOTKEY(MM:AMENITY:ORDER_DETAILS) KEY EVENT::> " + _evt.keyCode); - if (_evt.keyCode == 37) { - console.log("LEFT"); - } else if (_evt.keyCode == 38) { - console.log("UP"); - __uifxn_AppFull_HandleAmenity("up", false, false); - } else if (_evt.keyCode == 39) { - console.log("RIGHT"); - } else if (_evt.keyCode == 40) { - console.log("DOWN"); - __uifxn_AppFull_HandleAmenity("down", false, false); } else if (_evt.keyCode == 461) { - $('.popup .amenity').animate({ top: 96, left: -560 }, 500, () => { - $('.popup .amenity').animate({ scrollTop: 0 }, 0, () => { - // Move to top of item list - $('.popup .amenity>.items').animate({ scrollTop: 0 }, 0, () => { - _state.menu.stage = "main"; - $('.popup .amenity').hide(0, 'linear', () => { - // HOTKEY STATUS 리셋 - __uifxn_AppFull_HandleAmenity("reset", true, false); - __uifxn_AppFull_ShowMMHotKeyBtn(true); - }); - }); - }); + __uifxn_AppFull_HandleAmenity("back", true, false, function() { + _state.menu.stage = "main"; + __uifxn_AppFull_ShowMMHotKeyBtn(true); }); } } else if (_state.menu.stage == "hotkey_mm_roomservice") {