issue #11 Done amenity quantity control pop ui.

procentric/application/app_hoteltv_full.html

@@ -187,6 +187,43 @@
             <div class="slider">
                 <div class="owl-carousel owl-theme" id="lst_ctgsel"></div>
             </div>
+            <div class="cart">
+                <div>
+                    <div class="menu">
+                        <div>
+                            <div id="title"></div>
+                            <div id="control">
+                                <div id="thumb"></div>
+                                <div>
+                                    <div id="quantity"></div>
+                                    <div>
+                                        <div id="icon_up"></div>
+                                        <div id="number"></div>
+                                        <div id="icon_down"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div id="amount"></div>
+                                    <div id="total"></div>
+                                </div>
+                            </div>
+                            <div id="description">
+                                <div id="name"></div>
+                                <div id="details"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="items">
+                        <div id="title"></div>
+                        <div id="table"></div>
+                        <div id="amount">
+                            <div id="total"></div>
+                            <div id="value"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="order"></div>
             <div class="use_guide"></div>
         </div>
         <div class="roomservice">

procentric/application/lib/hoteltv.api.js

@@ -82,13 +82,12 @@ HotelTV.api = (function() {
      */
     function __apifxn_get_api_url(api_type) {
         var dic_api_url = {
+            /* Setting & Contents */
             "get_translation": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/translation",
             "get_device_settings": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/setting",
             "get_site_info": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/info",
             "get_guest_info": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/guest",
             "get_opening_ctz": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/opening",
-            "get_amenity_ctz": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amentity",
-            "get_roomservice_ctz": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService",
             "get_widget_ctz": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/widget",
             "get_program_ctz": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/program",
             "get_epg_info": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/epg",
@@ -97,13 +96,18 @@ HotelTV.api = (function() {
             "get_services": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/services",
             "get_news": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/news",
             "get_message": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/messages",
-            /* Requests */
+            /* Amenity&Room Service: get/request/sotck */
+            "get_ctz_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amentity",
+            "get_stock_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/stock",
             "get_carts_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/carts",
             "put_carts_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/carts",
             "update_carts_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/carts",
             "delete_carts_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/carts",
             "get_order_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/orders",
             "put_order_amenity": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/amenity/orders",
+
+            "get_ctz_roomservice": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService",
+            "get_stock_roomservice": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService/stock",
             "get_carts_roomservice": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService/carts",
             "put_carts_roomservice": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService/carts",
             "update_carts_roomservice": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/requests/roomService/carts",
@@ -117,7 +121,6 @@ HotelTV.api = (function() {
             /*
             "get_emergency": __apifxn_get_base_url() + "/api/" + _api_ver + "/settops/" + _serial_num + "/emergency",
             "set_message_status": __apifxn_get_base_url() + "/api/" + _api_ver + "/settops/" + _serial_num + "/messages",
-
             "set_device_opmode": __apifxn_get_base_url() + "/api/" + _api_ver + "/settops/" + _serial_num + "/bbdoors/opmode",
             */
         }
@@ -334,7 +337,7 @@ HotelTV.api = (function() {
 
         GetAmenityCtz: function() {
             return new Promise((resolve, reject) => {
-                let sz_api_url = __apifxn_get_api_url("get_amenity_ctz");
+                let sz_api_url = __apifxn_get_api_url("get_ctz_amenity");
                 __apifxn_CallCmsApi("GET", sz_api_url, "GetAmenityCtz", null).then(_result => {
                     //console.log(`Success::>${_result.data}`);
                     resolve(JSON.parse(_result.data));
@@ -347,7 +350,7 @@ HotelTV.api = (function() {
 
         GetRoomServiceCtz: function() {
             return new Promise((resolve, reject) => {
-                let sz_api_url = __apifxn_get_api_url("get_roomservice_ctz");
+                let sz_api_url = __apifxn_get_api_url("get_ctz_roomservice");
                 __apifxn_CallCmsApi("GET", sz_api_url, "GetRoomServiceCtz", null).then(_result => {
                     //console.log(`Success::>${_result.data}`);
                     resolve(JSON.parse(_result.data));
@@ -466,9 +469,33 @@ HotelTV.api = (function() {
             });
         },
 
+        /**
+         * HotelTV API ::> get amenity stock info
+         * @param {string} _item_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
+         */
+        GetAmenityStocks: function(_item_id, _quantity) {
+            return new Promise((resolve, reject) => {
+                let sz_api_url = __apifxn_get_api_url("get_stock_amenity")+ "/" + _item_id + "?quantity=" + _quantity;
+                __apifxn_CallCmsApi("GET", sz_api_url, "GetAmenityStocks", null).then(_result => {
+                    //console.log(`Success::>${_result.data}`);
+                    resolve(JSON.parse(_result.data));
+                }).catch(_error => {
+                    console.error(`Failure::>${_error.reason}`);
+                    reject(_error.reason);
+                });
+            });
+        },
+
         /**
          * HotelTV API ::> get amenity carts info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         GetAmenityCarts: function(_item_id) {
             return new Promise((resolve, reject) => {
@@ -485,7 +512,11 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> put amenity carts info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         PutAmenityCarts: function(_item_id, _quantity) {
             return new Promise((resolve, reject) => {
@@ -502,7 +533,11 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> update amenity carts info
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         UpdateAmenityCarts: function(_cart_id, _quantity) {
             return new Promise((resolve, reject) => {
@@ -519,7 +554,10 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> delete amenity carts info
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         DeleteAmenityCarts: function(_cart_id) {
             return new Promise((resolve, reject) => {
@@ -536,7 +574,10 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> get amenity order info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         GetAmenityOrders: function(_item_id) {
             return new Promise((resolve, reject) => {
@@ -552,12 +593,36 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> order amenity
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @returns
+         * null: if _cart_id isn't null it will return specified info with _cart_id
+         * {dictionary}
          */
-        PutAmenityOrders: function(_cart_item) {
+        PutAmenityOrders: function(_cart_id) {
             return new Promise((resolve, reject) => {
                 let sz_api_url = __apifxn_get_api_url("put_order_amenity");
-                __apifxn_CallCmsApi("POST", `${sz_api_url}`, "PutAmenityOrders", _cart_item).then(_result => {
+                __apifxn_CallCmsApi("POST", `${sz_api_url}`, "PutAmenityOrders", _cart_id).then(_result => {
+                    //console.log(`Success::>${_result.data}`);
+                    resolve(JSON.parse(_result.data));
+                }).catch(_error => {
+                    console.error(`Failure::>${_error.reason}`);
+                    reject(_error.reason);
+                });
+            });
+        },
+
+        /**
+         * HotelTV API ::> get roomservice stock info
+         * @param {string} _item_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
+         */
+        GetRoomserviceStocks: function(_item_id, _quantity) {
+            return new Promise((resolve, reject) => {
+                let sz_api_url = __apifxn_get_api_url("get_stock_roomservice")+ "/" + _item_id + "?quantity=" + _quantity;
+                __apifxn_CallCmsApi("GET", sz_api_url, "GetRoomserviceStocks", null).then(_result => {
                     //console.log(`Success::>${_result.data}`);
                     resolve(JSON.parse(_result.data));
                 }).catch(_error => {
@@ -569,7 +634,10 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> get room service carts info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         GetRoomserviceCarts: function(_item_id) {
             return new Promise((resolve, reject) => {
@@ -586,7 +654,11 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> put room service carts info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         PutRoomserviceCarts: function(_item_id, _quantity) {
             return new Promise((resolve, reject) => {
@@ -603,7 +675,11 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> update room service carts info
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @param {number} _quantity
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         UpdateRoomserviceCarts: function(_cart_id, _quantity) {
             return new Promise((resolve, reject) => {
@@ -620,7 +696,10 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> delete room service carts info
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @returns
+         * null: if _cart_id isn't null it will return specified info with _cart_id
+         * {dictionary}
          */
         DeleteRoomserviceCarts: function(_cart_id) {
             return new Promise((resolve, reject) => {
@@ -637,7 +716,10 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> get room service order info
-         * @param {dictionary} _item_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _item_id
+         * @returns
+         * null: if _item_id isn't null it will return specified info with _item_id
+         * {dictionary}
          */
         GetRoomserviceOrders: function(_item_id) {
             return new Promise((resolve, reject) => {
@@ -653,12 +735,15 @@ HotelTV.api = (function() {
 
         /**
          * HotelTV API ::> order room service
-         * @param {dictionary} _cart_id if _item_id isn't null it will return specified info with _item_id
+         * @param {string} _cart_id
+         * @returns
+         * null: if _cart_id isn't null it will return specified info with _cart_id
+         * {dictionary}
          */
-        PutRoomserviceOrders: function(_cart_item) {
+        PutRoomserviceOrders: function(_cart_id) {
             return new Promise((resolve, reject) => {
                 let sz_api_url = __apifxn_get_api_url("put_order_roomservice");
-                __apifxn_CallCmsApi("POST", `${sz_api_url}`, "PutRoomserviceOrders", _cart_item).then(_result => {
+                __apifxn_CallCmsApi("POST", `${sz_api_url}`, "PutRoomserviceOrders", _cart_id).then(_result => {
                     //console.log(`Success::>${_result.data}`);
                     resolve(JSON.parse(_result.data));
                 }).catch(_error => {
@@ -668,7 +753,7 @@ HotelTV.api = (function() {
             });
         },
 
-        ReportEvent: function(_arrary_event) {
+        ReportEvent: function(_arrary_event, _type=null) {
             let _json_event = {
                 "events": [],
             };
@@ -677,6 +762,7 @@ HotelTV.api = (function() {
                 _json_event.events.push({
                     "power": _arrary_event[_evtidx].power,
                     "location": _arrary_event[_evtidx].location,
+                    'type': _type,
                     "timestamp": Date.now()
                 })
             }

procentric/application/lib/hoteltv.ui_appfull.js

@@ -522,6 +522,7 @@ HotelTV.ui_appfull = (function() {
                         'prev': 1,
                     },
                     "items": {},
+                    "stock": {},
                 }
             };
         }
@@ -574,23 +575,431 @@ HotelTV.ui_appfull = (function() {
         }
     }
 
+    /**
+     * HotelTV UI[AppFull] Wrapper Function::> Draw amenity feature
+     */
+    function __uifxn_AppFull_DrawAmUserGuide(_action) {
+        let _state = HotelTV.state;
+        let _trTbl = HotelTV.translation;
+        let _opening = HotelTV.opening;
+        let _aminfo_top = _opening.amenity;
+        let _aminfo_ctgy = _aminfo_top.menu;
+        let _elAmPupRoot = $('.popup .amenity');
+        let _elAmUGRoot = _elAmPupRoot.children('.use_guide');
+        let __status_am_specific = null;
+
+
+        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];
+
+
+            if ( _action=="destroy" ){
+                if ( _elAmUGRoot.children().length ){
+                    _elAmUGRoot.children().remove();
+                }
+                return;
+            }
+
+            switch(_state.menu.stage.cur)
+            {
+                case "amenity_ctgy_sel": {
+
+                }break;
+            }
+
+            switch ( _action )
+            {
+                case "enter": {
+                } break;
+            }
+        }catch(_err){
+            console.log(`Fail to draw::> ${_err}`);
+        }
+    }
+
+    /**
+     * HotelTV UI[AppFull] Wrapper Function::> Draw amenity item selection cart ui
+     */
+    function __uifxn_AppFull_DrawAmItemSeletionCart(_action) {
+        let _state = HotelTV.state;
+        let _trTbl = HotelTV.translation;
+        let _opening = HotelTV.opening;
+        let _carts = HotelTV.carts.amenity;
+        let _order = HotelTV.orders.amenity;
+        let _aminfo_top = _opening.amenity;
+        let _aminfo_ctgy = _aminfo_top.menu;
+        let _elAmPupRoot = $('.popup .amenity');
+        let _elAmCtgyBg = _elAmPupRoot.children('.bg').find('#lst_ctgbg');
+        let _elAmCtgyBgFocus = _elAmCtgyBg.find('.owl-item.active.center');
+        let _elAmCtgyBgMenuItemWin = _elAmCtgyBgFocus.find('.am_item_sel_win');
+        let _elAmCtgyBgMenuItemCartWin = _elAmCtgyBgFocus.find('.am_item_sel_cart_win');
+        let _elAmCtgyBgMenuItemCartWinLeft = _elAmCtgyBgMenuItemCartWin.children('.winleft');
+        let _elAmCtgyBgMenuItemCartWinRight = _elAmCtgyBgMenuItemCartWin.children('.winright');
+        let __status_am_specific = null;
+
+
+        const __ifxn_estimateAmCartAmount = function(_item_idx) {
+
+
+        }
+
+
+        const __ifxn_removeAmSelectedItemCartWinElement = function() {
+            // Remove All element under winright div
+            if ( _elAmCtgyBgMenuItemCartWinLeft.children().length ){
+                _elAmCtgyBgMenuItemCartWinLeft.children().remove();
+            }
+
+            if ( _elAmCtgyBgMenuItemCartWinRight.children().length ){
+                _elAmCtgyBgMenuItemCartWinRight.children().remove();
+            }
+        }
+
+        const __ifxn_updateAmCartRecTable = function() {
+            try{
+                let _elAmCtgyBgMenuItemCartLstRecTbl = _elAmCtgyBgMenuItemCartWinRight.children('.cart_table').find('.tbl_record');
+
+                if ( _elAmCtgyBgMenuItemCartLstRecTbl.length )
+                {
+                    // Remove all record under tbl_record
+                    _elAmCtgyBgMenuItemCartLstRecTbl.children().remove();
+
+                    // {
+                    //     let _elTBody_ItmesRec = document.createElement('tbody');
+                    //     _elTBody_ItmesRec.setAttribute("id", "record");
+                    //     for (let _j = 1; _j <= _objAm_ctgyItem.length; _j++) {
+                    //         let _objChkAvail=null;
+                    //         let _objItem = _objAm_ctgyItem[_j];
+
+                    //         var _elTr_ItmesRec = document.createElement('tr');
+                    //         var _elDiv_ItmesRec = document.createElement('div');
+                    //         _elDiv_ItmesRec.className = "cartItem";
+                    //         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", "quantity");
+                    //         _elDiv_ItmesRecPrice.textContent = _objItem.quantity[_state.lang].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + _aminfo_top.currency[_state.lang];
+                    //         _elDiv_ItmesRec.appendChild(_elDiv_ItmesRecPrice);
+
+
+                    //         var _elDiv_ItmesRecStatus = document.createElement('div');
+                    //         _elDiv_ItmesRecStatus.setAttribute("id", "amount");
+
+                    //         _objChkAvail = __uifxn_Utils_CheckAmItemAvailable(_objItem.schedule);
+                    //         if(_objChkAvail.result==true){
+                    //             _elDiv_ItmesRecStatus.textContent = _trTbl.ui.amenity.title.orderable[_state.lang];
+                    //         }else{
+                    //             _elDiv_ItmesRec.classList.add("unavailable");
+                    //             if ( _objChkAvail.avail_dtime=="unorderable" ){
+                    //                 _elDiv_ItmesRecStatus.textContent = _trTbl.ui.amenity.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);
+                    //     }
+                    //     _elAmCtgyBgMenuItemCartLstRecTbl.appendChild(_elTBody_ItmesRec);
+                    // }
+                }
+
+            } catch ( _err ){
+                console.log(`Fail to update::> ${_err}`);
+            }
+        }
+
+        /**
+         * 주어진 _item_idx 아이탬의 수량 및 금액을 갱신
+         * @param {string} _item_idx
+         * @param {string} _action
+         */
+        const __ifxn_updateAmSelectedItemCartWin = async function(_item_idx, _action) {
+            let __api_resp_stock = null;
+            let __selected_item_amount_quantity = 0;
+            let __selected_item_amount_subTotal = 0;
+            let __item_info = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[_item_idx+1];
+
+            let _elDiv_QuntCtrlFrmQuantityValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_quantity');
+            let _elDiv_QuntCtrlFrmAmountValue = _elAmCtgyBgMenuItemCartWinLeft.children('.control').children('.quantity').find('#value_amount');
+
+            const ___ifxn_checkCartItemExist = function(_object, _itemID) {
+                for (__j = 1; __j <= _object.length; __j++) {
+                    if (_object[__j].itemId == _itemID) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+
+            /**
+             * cart 오브젝트에서 해당 item id에 해당하는 수량을 반환.
+             * 찾지 못하면 1개(디퐅트)를 반환
+             * @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.GetAmenityStocks(_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, ",") + _aminfo_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, __item_info.id);
+                __status_am_specific.stock[__item_info.id] = {"req_quantity": __selected_item_amount_quantity};
+                ___ifxn_updateSubTotalAmount(__item_info.id, __selected_item_amount_quantity);
+            } else if ( _action=="plus" ){
+                __status_am_specific.stock[__item_info.id].req_quantity += 1;
+                ___ifxn_updateSubTotalAmount(__item_info.id, __status_am_specific.stock[__item_info.id].req_quantity);
+            } else if ( _action=="minus" ){
+                if ( __status_am_specific.stock[__item_info.id].req_quantity>1 ){
+                    __status_am_specific.stock[__item_info.id].req_quantity -= 1;
+                    ___ifxn_updateSubTotalAmount(__item_info.id, __status_am_specific.stock[__item_info.id].req_quantity);
+                }
+            }
+
+            // 개수 및 금액 출력
+            if ( _elDiv_QuntCtrlFrmQuantityValue.length ){
+                _elDiv_QuntCtrlFrmQuantityValue.text(__status_am_specific.stock[__item_info.id].req_quantity);
+            }
+        }
+
+        const __ifxn_buildAmSelectedItemCartWin = function(_item_idx) {
+            let _sz_styleOpt = null;
+            let __item_info = _aminfo_ctgy[__status_am_specific.category_sel.cur].items[_item_idx+1];
+
+            const __iCbfxn_buildAmSelectedItemWin = function() {
+                // 상품 상세 설명페이지 구성
+                __ifxn_removeAmSelectedItemCartWinElement();
+
+                // Quantity Window
+                {
+                    //// Quantity Window Title
+                    let _elDiv_QuntWinTitle = document.createElement('div');
+                    _elDiv_QuntWinTitle.className = "title";
+                    _elDiv_QuntWinTitle.textContent = _trTbl.ui.amenity.title.selected_menu_quantity[_state.lang].toUpperCase();
+                    _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntWinTitle);
+
+                    //// Quantity control Frame
+                    var _elDiv_QuntCtrlFrm = document.createElement('div');
+                    _elDiv_QuntCtrlFrm.className = "control";
+                    _elDiv_QuntCtrlFrm.innerHTML = `<div id="img_thumbnail" style="background-image: url(${__item_info.thumbnail.files[_state.lang].download});"></div>`;
+                    var _elDiv_QuntCtrlFrmQuantity = document.createElement('div');
+                    _elDiv_QuntCtrlFrmQuantity.className = "quantity";
+                    _elDiv_QuntCtrlFrmQuantity.innerHTML = `<div id="lable_quantity">${_trTbl.ui.amenity.title.quantity[_state.lang].toUpperCase()}</div>`;
+                    _elDiv_QuntCtrlFrmQuantity.innerHTML += `<div id="value_quantity"></div>`;
+                    _elDiv_QuntCtrlFrmQuantity.innerHTML += `<div id="lable_amount">${_trTbl.ui.amenity.title.amount[_state.lang].toUpperCase()}</div>`;
+                    _elDiv_QuntCtrlFrmQuantity.innerHTML += `<div id="value_amount"></div>`;
+                    _elDiv_QuntCtrlFrm.append(_elDiv_QuntCtrlFrmQuantity);
+                    _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntCtrlFrm);
+
+                    //// Item description
+                    var _elDiv_QuntItemDesc = document.createElement('div');
+                    _elDiv_QuntItemDesc.className = "description";
+                    _elDiv_QuntItemDesc.innerHTML = `<div id="title">${__item_info.title[_state.lang]}</div><div id="details">${__item_info.description[_state.lang]}</div>`;
+                    _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntItemDesc);
+
+                    //// Buttons
+                    var _elDiv_QuntBtnFrm = document.createElement('div');
+                    _elDiv_QuntBtnFrm.className = "buttons";
+                    _elDiv_QuntBtnFrm.innerHTML = `<div id="btn_addtocart">${_trTbl.ui.amenity.title.add_to_cart[_state.lang].toUpperCase()}</div>`;
+                    _elDiv_QuntBtnFrm.innerHTML += `<div id="btn_ordernow">${_trTbl.ui.amenity.title.order_now[_state.lang].toUpperCase()}</div>`;
+                    _elDiv_QuntBtnFrm.innerHTML += `<div id="btn_back">${_trTbl.ui.amenity.title.back[_state.lang].toUpperCase()}</div>`;
+                    _elAmCtgyBgMenuItemCartWinLeft.append(_elDiv_QuntBtnFrm);
+                }
+
+                // CART Window
+                {
+                    //// Cart Window Title
+                    let _elDiv_CartWinTitle = document.createElement('div');
+                    _elDiv_CartWinTitle.className = "title";
+                    _elDiv_CartWinTitle.textContent = _trTbl.ui.amenity.title.cartslist[_state.lang].toUpperCase();
+                    _elAmCtgyBgMenuItemCartWinRight.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.amenity.title.item[_state.lang];
+                            _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.amenity.title.quantity[_state.lang];
+                            _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.amenity.title.amount[_state.lang];
+                            _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);
+
+                        //////// update cart table record
+                        __ifxn_updateAmCartRecTable();
+                    }
+                    _elAmCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinTable);
+
+
+
+                    //// Quantity Window Title
+                    let _elDiv_CartWinSummary = document.createElement('div');
+                    _elDiv_CartWinSummary.className = "summary";
+                    //_elDiv_CartWinSummary.textContent = _trTbl.ui.amenity.title.sum[_state.lang];
+                    _elAmCtgyBgMenuItemCartWinRight.append(_elDiv_CartWinSummary);
+                }
+            }
+
+            _elAmCtgyBgMenuItemWin.fadeOut(200, function() {
+                __iCbfxn_buildAmSelectedItemWin();
+                _elAmCtgyBgMenuItemCartWin.fadeIn(500, function() {
+                    _elAmCtgyBgMenuItemCartWinLeft.find('#btn_back').addClass('focus');
+                    __ifxn_updateAmSelectedItemCartWin(_item_idx, "build");
+                    HotelTV.api.ReportEvent([
+                        {
+                            'power': true,
+                            'location':{
+                                // TODO: 통계 데이터 파라미터 확인해
+                                'conId':__item_info.id
+                            }
+                        }], "indirect");
+                });
+            });
+        }
+
+        const __ifxn_removeAmSelectedItemCartWin = function(_item_idx) {
+            // Remove All element under winleft&winright div
+            _elAmCtgyBgMenuItemCartWin.fadeOut(200, function() {
+                __ifxn_removeAmSelectedItemCartWinElement();
+
+                if ( _elAmCtgyBgMenuItemWin.css('display') == "none")  {
+                    _elAmCtgyBgMenuItemWin.fadeIn(500, function() {
+                    });
+                }
+            });
+        }
+
+
+        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 "cart": {
+                    __ifxn_buildAmSelectedItemCartWin(__amctgyItemStatus.idx);
+                } break;
+
+                case "left": {
+                    let _str_curBtnID = _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id');
+                    if ( _str_curBtnID=='btn_back' ){
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus');
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus');
+                    } else if ( _str_curBtnID=='btn_ordernow' ){
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus');
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_addtocart').addClass('focus');
+                    }
+                } break;
+
+                case "right": {
+                    let _str_curBtnID = _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').attr('id');
+                    if ( _str_curBtnID=='btn_addtocart' ){
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus');
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_ordernow').addClass('focus');
+                    } else if ( _str_curBtnID=='btn_ordernow' ){
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('.focus').removeClass('focus');
+                        _elAmCtgyBgMenuItemCartWinLeft.find('.buttons').find('#btn_back').addClass('focus');
+                    }
+                } break;
+
+                case "quantity_plus": {
+                    __ifxn_updateAmSelectedItemCartWin(__amctgyItemStatus.idx, "plus");
+                } break;
+
+                case "quantity_minus": {
+                    __ifxn_updateAmSelectedItemCartWin(__amctgyItemStatus.idx, "minus");
+                } break;
+
+                case "return": {
+                    __ifxn_removeAmSelectedItemCartWin();
+                } break;
+            }
+
+        }catch(_err){
+            console.log(`Fail to draw::> ${_err}`);
+        }
+    }
+
     /**
      * HotelTV UI[AppFull] Wrapper Function::> Draw amenity item selection ui
      */
     function __uifxn_AppFull_DrawAmItemSeletion(_action) {
         let _state = HotelTV.state;
-        let __status_am_specific = null;
         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 _elMainRoot = $('.main');
-        // let _elMainMenu = _elMainRoot.children('.mm');
         let _elAmPupRoot = $('.popup .amenity');
         let _elAmCtgyBg = _elAmPupRoot.children('.bg').find('#lst_ctgbg');
         let _elAmCtgyBgFocus = _elAmCtgyBg.find('.owl-item.active.center');
-        let _elAmCtgyBgMenuItemWin = _elAmCtgyBgFocus.find('.am_item_sel_win')
+        let _elAmCtgyBgMenuItemWin = _elAmCtgyBgFocus.find('.am_item_sel_win');
+        let __status_am_specific = null;
 
 
         const __ifxn_updateAmItemDesc = function(_item_idx) {
@@ -599,50 +1008,7 @@ HotelTV.ui_appfull = (function() {
             // Remove All element under winright div
             let _elDivWinRight = _elAmCtgyBgMenuItemWin.find('.winright');
 
-            if ( _elDivWinRight.css('display') != "none")  {
+            const __iCbfxn_updateAmItemDesc = function() {
-                _elDivWinRight.fadeOut(200, function() {
-                    if ( _elDivWinRight.children().length ){
-                        _elDivWinRight.children().remove();
-                    }
-
-                    //상품 상세 설명페이지 구성
-                    ////썸네일
-                    let _elDiv_ItmesThumb = document.createElement('div');
-                    _elDiv_ItmesThumb.className = "amItemDescThumb";
-                    //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 = "amItemDescDetails";
-
-                    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, '<br>');
-
-                    _elDiv_ItmesDetails.appendChild(_elDiv_ItmesTitle);
-                    _elDiv_ItmesDetails.appendChild(_elDiv_ItmesDescription);
-
-                    //winright에 썸네일과 상세설명 추가
-                    _elDivWinRight.append(_elDiv_ItmesThumb);
-                    _elDivWinRight.append(_elDiv_ItmesDetails);
-
-
-                    _elDivWinRight.fadeIn(500, function() {
-                    });
-                });
-            }else{
-                if ( _elDivWinRight.children().length ){
-                    _elDivWinRight.children().remove();
-                }
-
                 //상품 상세 설명페이지 구성
                 ////썸네일
                 let _elDiv_ItmesThumb = document.createElement('div');
@@ -671,13 +1037,26 @@ HotelTV.ui_appfull = (function() {
                 //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_updateAmItemDesc();
+                    _elDivWinRight.fadeIn(500, function() {
+                    });
+                });
+            }else{
+                if ( _elDivWinRight.children().length ){
+                    _elDivWinRight.children().remove();
+                }
+                __iCbfxn_updateAmItemDesc();
 
                 _elDivWinRight.fadeIn(500, function() {
                 });
             }
-
-
         }
 
         const __ifxn_removeAmItemDesc = function(_item_idx) {
@@ -697,9 +1076,7 @@ HotelTV.ui_appfull = (function() {
             // 어메니티 정보 오브젝트
             _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];
 
@@ -876,10 +1253,11 @@ HotelTV.ui_appfull = (function() {
             _elDiv_Ctgy.appendChild(_elDiv_CtgyGradientBottom);
 
             // ITEM LIST TOP-LEVEL ELEMENTS
-            let _elDiv_ItemWin = document.createElement('div');
+            //// ITEM SELECTION WINDOW
-            _elDiv_ItemWin.className = 'am_item_sel_win';
+            let _elDiv_ItemSelWin = document.createElement('div');
+            _elDiv_ItemSelWin.className = 'am_item_sel_win';
             {
-                //Window Left side
+                ////// Window Left side
                 let _elDiv_ItemWinLeft = document.createElement('div');
                 _elDiv_ItemWinLeft.className = 'winleft';
 
@@ -889,7 +1267,7 @@ HotelTV.ui_appfull = (function() {
                 }
                 else
                 {
-                    //ADD Table
+                    ////// ADD Table Header
                     var _elTbl_ItemsHdr = document.createElement('table');
                     _elTbl_ItemsHdr.className = "tbl_header";
 
@@ -900,17 +1278,17 @@ HotelTV.ui_appfull = (function() {
                         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];
+                        _elTh_ItmesHdr_Title.textContent = _trTbl.ui.amenity.title.item[_state.lang];
                         _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];
+                        _elTh_ItmesHdr_Amount.textContent = _trTbl.ui.amenity.title.amount[_state.lang];
                         _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];
+                        _elTh_ItmesHdr_Status.textContent = _trTbl.ui.amenity.title.orderability[_state.lang];
                         _elTr_ItmesHdr.appendChild(_elTh_ItmesHdr_Status);
 
                         _elTBody_ItmesHdr.appendChild(_elTr_ItmesHdr);
@@ -918,7 +1296,7 @@ HotelTV.ui_appfull = (function() {
                     _elTbl_ItemsHdr.appendChild(_elTBody_ItmesHdr);
                     _elDiv_ItemWinLeft.appendChild(_elTbl_ItemsHdr);
 
-                    // Append item list record
+                    ////// Append item list record
                     var _elTbl_ItemsRec = document.createElement('table');
                     _elTbl_ItemsRec.className = "tbl_record";
 
@@ -965,19 +1343,38 @@ HotelTV.ui_appfull = (function() {
                     }
                     _elDiv_ItemWinLeft.appendChild(_elTbl_ItemsRec);
                 }
-                _elDiv_ItemWin.appendChild(_elDiv_ItemWinLeft);
+                _elDiv_ItemSelWin.appendChild(_elDiv_ItemWinLeft);
 
-
+                ////// Window Right side
-
-
-
-                //Window Right side
                 let _elDiv_ItemWinRight = document.createElement('div');
                 _elDiv_ItemWinRight.className = 'winright';
 
-                _elDiv_ItemWin.appendChild(_elDiv_ItemWinRight);
+                _elDiv_ItemSelWin.appendChild(_elDiv_ItemWinRight);
             }
-            _elDiv_Ctgy.appendChild(_elDiv_ItemWin);
+            // _elDiv_Ctgy에 추가
+            _elDiv_Ctgy.appendChild(_elDiv_ItemSelWin);
+
+            // Selected Item Cart Window
+            let _elDiv_SelectedItemWin = document.createElement('div');
+            _elDiv_SelectedItemWin.className = 'am_item_sel_cart_win';
+            _elDiv_SelectedItemWin.style.display = 'none';
+            {
+                if ( ["ORDER", "CARTS"].includes(_aminfo_ctgy[_idx].name)==false )
+                {
+                    ////// Window Left side
+                    let _elDiv_ItemWinCartLeft = document.createElement('div');
+                    _elDiv_ItemWinCartLeft.className = 'winleft';
+                    _elDiv_SelectedItemWin.appendChild(_elDiv_ItemWinCartLeft);
+
+                    ////// Window Right side
+                    let _elDiv_ItemWinCartRight = document.createElement('div');
+                    _elDiv_ItemWinCartRight.className = 'winright';
+
+                    _elDiv_SelectedItemWin.appendChild(_elDiv_ItemWinCartRight);
+                }
+            }
+            // _elDiv_Ctgy에 추가
+            _elDiv_Ctgy.appendChild(_elDiv_SelectedItemWin);
 
             // _elAmCtgyBg에 추가
             _elAmCtgyBg.append(_elDiv_Ctgy);
@@ -1045,7 +1442,7 @@ HotelTV.ui_appfull = (function() {
                                 // 카테고리 화면 빌드 및 화면 전환
                                 _state.menu.stage.cur = "amenity_ctgy_item_sel";
                                 __uifxn_AppFull_DrawAmItemSeletion("enter");
-
+                                __uifxn_AppFull_DrawAmUserGuide();
                             } else if (event.keyCode == gRmtKey.back) {
                                 // 카테고리 폼의 썸네일 에니메이션용 타이머 제거
                                 if (_hndl_tmrAmenityThumbAni != null) {
@@ -1092,9 +1489,27 @@ HotelTV.ui_appfull = (function() {
                             } else if (event.keyCode == gRmtKey.down) {
                                 __uifxn_AppFull_DrawAmItemSeletion("down");
                             } else if (event.keyCode == gRmtKey.back) {
-                                console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode);
                                 __uifxn_AppFull_DrawAmItemSeletion("exit");
                                 _state.menu.stage.cur = "amenity_ctgy_sel";
+                            } else if (event.keyCode == gRmtKey.enter) {
+                                console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode);
+                                __uifxn_AppFull_DrawAmItemSeletionCart("cart");
+                                _state.menu.stage.cur = "amenity_ctgy_item_cart";
+                            }
+                        } else if (_state.menu.stage.cur == "amenity_ctgy_item_cart") {
+                            if (event.keyCode == gRmtKey.left) {
+                                __uifxn_AppFull_DrawAmItemSeletionCart("left");
+                            } else if (event.keyCode == gRmtKey.right) {
+                                __uifxn_AppFull_DrawAmItemSeletionCart("right");
+                            } else if (event.keyCode == gRmtKey.up) {
+                                __uifxn_AppFull_DrawAmItemSeletionCart("quantity_plus");
+                            } else if (event.keyCode == gRmtKey.down) {
+                                __uifxn_AppFull_DrawAmItemSeletionCart("quantity_minus");
+                            } else if (event.keyCode == gRmtKey.back) {
+                                __uifxn_AppFull_DrawAmItemSeletionCart("return");
+                                _state.menu.stage.cur = "amenity_ctgy_item_sel";
+                            } else if (event.keyCode == gRmtKey.enter) {
+                                console.log('AMENITY CATEGORY ITEM SEL: KEY::> ' + event.keyCode);
                             }
                         } else {
                             console.log("AMENITY SLIDER KEYEVT: Skip events");
@@ -1102,6 +1517,7 @@ HotelTV.ui_appfull = (function() {
                     });
                     //어메니티 카테고리 선택 모드(생성시, 메뉴모드)
                     _state.menu.stage.cur = "amenity_ctgy_sel";
+                    __uifxn_AppFull_DrawAmUserGuide();
                 });
             })
         });
@@ -1168,8 +1584,8 @@ HotelTV.ui_appfull = (function() {
         }
 
         // Draw Titile and message
-        _elRsOderAlertOrderComplete.children("#title").text(_trTbl.ui.roomservice.title.ordercomplete[_state.lang]);
+        _elRsOderAlertOrderComplete.children("#title").text(_trTbl.ui.amenity.title.ordercomplete[_state.lang]);
-        _elRsOderAlertOrderComplete.children("#message").text(_trTbl.ui.roomservice.usage.orderAlertComplete[_state.lang]);
+        _elRsOderAlertOrderComplete.children("#message").text(_trTbl.ui.amenity.usage.orderAlertComplete[_state.lang]);
 
         if (_elRsOderAlertOrderComplete.css('display') == "none") {
             _elRsOderAlertOrderComplete.show();

procentric/application/theme/HJS00001/hoteltv.app.full.popup.css

@@ -432,7 +432,7 @@
 /********************************************************************************
  * AMENITY STYLE                                                  [ START HERE] *
  ********************************************************************************/
-/*[AM1. Amenity bg style                                                      ] */
+/*[AM1. Amenity style                                                         ] */
 .popup .amenity {
     top: 0px;
     left: 0px;
@@ -447,6 +447,7 @@
     padding: 0;
 }
 
+/*[AM1-1. Amenity bg style                                                    ] */
 .popup .amenity .bg {
     position: absolute;
     top: 0px;
@@ -465,11 +466,12 @@
     padding: 0;
 }
 
-
+/*[AM1-1-1. Amenity bg: owl style                                             ] */
 .popup .amenity .bg .owl-carousel .owl-stage .owl-item {
     width: 100%;
 }
 
+/*[AM1-1-1-1. Amenity bg: owl: top gradient style                             ] */
 .popup .amenity .bg .owl-carousel .owl-stage .top_gradient{
     top: 0;
     left: 0;
@@ -478,6 +480,7 @@
     background: linear-gradient(0deg, rgba(7,8,11,0) 0%, rgba(7,8,11,0.5) 45%, rgba(7,8,11,0.9) 100%);
 }
 
+/*[AM1-1-1-2. Amenity bg: owl: bottom gradient style                          ] */
 .popup .amenity .bg .owl-carousel .owl-stage .bottom_gradient{
     position: absolute;
     left: 0;
@@ -487,7 +490,7 @@
     background: linear-gradient(0deg, rgba(7,8,11,0.9) 0%, rgba(7,8,11,0.5) 65%, rgba(7,8,11,0) 100%);
 }
 
-
+/*[AM1-1-1-3. Amenity bg: owl: amenity item sel window                        ] */
 .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win {
     position: absolute;
     left: 21px;
@@ -501,6 +504,7 @@
 }
 
 .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winleft {
+    position: relative;
     width: 902px;
     height: 100%;
     margin: 0;
@@ -652,6 +656,7 @@
 
 /**** Amenity Item Description ::>  */
 .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright {
+    position: relative;
     width: 902px;
     height: 740px;
     margin: 0;
@@ -693,6 +698,7 @@
 }
 
 .popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_win .winright .amItemDescDetails div#description{
+    height:174px;
     line-height: 30px;
     font-size: 30px;
     white-space: pre-wrap;
@@ -701,10 +707,382 @@
     padding: 14px 0px 0px 0px;
 }
 
+/*[AM1-1-1-4. Amenity bg: owl: selected item cart style window                ] */
+.popup .amenity .bg .owl-carousel .owl-stage .am_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;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control{
+    position: relative;
+    height: 254px;
+    width: 96%;
+    padding: 20px 2% 20px 2%;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #img_thumbnail{
+    width: 42%;
+    height: 228px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    float: left;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_quantity{
+    line-height: 137px;
+    width: 50%;
+    height: 60%;
+    font-size: 38px;
+    text-align: center;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.control #lable_amount{
+    line-height: 91px;
+    width: 50%;
+    height: 40%;
+    font-size: 38px;
+    text-align: center;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.description{
+    height: 316px;
+    width: 100%;
+    padding: 20px 2% 20px 2%;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.description>#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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons>div{
+    border-radius: 14px;
+    background-color: rgba(255,255,255,1.0);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_addtocart{
+    /* border-radius: 14px; */
+    /* background-color: rgba(255,255,255,1.0); */
+    margin: 0px 20px 0px 0px;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_ordernow{
+    /* border-radius: 14px; */
+    /* background-color: rgba(255,255,255,1.0); */
+    margin: 0px 20px 0px 20px;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winleft>.buttons #btn_back{
+    /* border-radius: 14px; */
+    /* background-color: rgba(255,255,255,1.0); */
+    margin: 0px 0px 0px 20px;
+}
 
 
 
-/** Amenity slider style */
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table{
+    position: relative;
+    height: 550px;
+    width: 100%;
+    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%;
+    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 .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr {
+    height: 54px;
+    max-height: 54px;
+    background-color: rgba(21, 27, 34, 1);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#title {
+    width: 50%;
+    float: left;
+    /* text-align: left; */
+    padding: 0 0px 0 80px;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#quantity {
+    width: 25%;
+    float: left;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_header tbody tr>#amount {
+    width: 25%;
+    float: left;
+    padding: 0px 30px 0 0px;
+}
+
+
+/**** Amenity Category item ::> Table Recored */
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record {
+    /* height: 284px;*/
+    width:100%;
+    line-height: 54px;
+    font-size: 30px;
+    text-align: center;
+    /* margin: 5px 0 15px 0; */
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody {
+    /* height: 285px; */
+    overflow-y: auto;
+    display: block;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr {
+    /* height: 52px; */
+    display: block;
+    background-color: rgba(36, 45, 57, 1);
+}
+
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem {
+    height: 52px;
+    width: 100%;
+    font-size: 30px;
+    /* line-height: 54px; */
+    border-bottom: 2px solid rgb(21, 27, 34);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_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 .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#title {
+    width: 50%;
+    float: left;
+    padding: 0px 0px 0px 20px;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#quantity {
+    width: 20%;
+    float: left;
+    text-align: center;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record tbody tr>.cartItem>#amount {
+    width: 30%;
+    float: left;
+    /* text-align: right; */
+    padding: 0px 30px 0 0px;
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar {
+    display: block;
+    width: 20px;
+    /* 세로축 스크롤바 길이 */
+    height: 20px;
+    /* 가로축 스크롤바 길이 */
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track {
+    background-color: rgb(67, 82, 105);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-track-piece {
+    background-color: rgb(80, 98, 124);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: rgb(51, 63, 80);
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:start {
+    display: none;
+    /* background-color: orange; */
+    /* Top, Left 방향의 이동버튼 */
+}
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.cart_table>.tbl_record ::-webkit-scrollbar-button:end {
+    display: none;
+    /* background-color: orange; */
+    /* Bottom, Right 방향의 이동버튼 */
+}
+
+
+
+
+
+
+
+.popup .amenity .bg .owl-carousel .owl-stage .am_item_sel_cart_win .winright>.summary{
+    position: relative;
+    height: 65px;
+    width: 96%;
+    padding: 20px 2% 20px 2%;
+    /* background: blue; */
+}
+
+/********************************************************************************/
+/*[AM2. Amenity slider style                                                  ] */
 .popup .amenity .slider {
     position: absolute;
     top: 60px;
@@ -821,6 +1199,69 @@
     padding: 0;
 }
 
+
+
+/*[AMx. Amenity cart style                                                    ] */
+.popup .amenity>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 .amenity>div.cart>div {
+    top: 60px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    /* background: rgba(1,1,1,1.0); */
+}
+
+.popup .amenity>div.cart .menu {
+    width: 902px;
+    height: 876px;
+    margin: 0px 37px 0px 21px;
+    display: block;
+    /* background: rgba(100,1,1,1.0); */
+}
+
+.popup .amenity>div.cart .items {
+    width: 902px;
+    height: 876px;
+    margin: 0px 37px 0px 21px;
+    display: block;
+    /* background: rgba(100,1,1,1.0); */
+}
+
+.popup .amenity>div.cart .menu div#title {
+
+}
+
+.popup .amenity>div.cart .menu div#control {
+
+}
+
+.popup .amenity>div.cart .menu div#control #thumb {
+
+}
+
+.popup .amenity>div.cart .menu div#control #quantity {
+
+}
+
+.popup .amenity>div.cart .menu div#description {
+
+}
+
+
+
 /********************************************************************************/
 /* AMENITY STYLE                                                        [ END ] */
 /********************************************************************************/