From a069902c8632e81d83c4122bc6471abcaa3b430c Mon Sep 17 00:00:00 2001 From: paul kim Date: Sun, 2 Jun 2024 15:31:53 +0900 Subject: [PATCH] issue #10 #11 Add language selection feature. --- procentric/application/app_hoteltv_full.html | 7 + procentric/application/lib/hoteltv.api.js | 41 +++++ procentric/application/lib/hoteltv.js | 9 ++ .../application/lib/hoteltv.ui_appfull.js | 152 +++++++++++++++++- .../theme/HIM00001/hoteltv.app.full.popup.css | 66 ++++++++ .../theme/HIN00001/hoteltv.app.full.popup.css | 66 ++++++++ .../theme/HJS00001/hoteltv.app.full.popup.css | 66 ++++++++ .../theme/HTL00001/hoteltv.app.full.popup.css | 66 ++++++++ 8 files changed, 471 insertions(+), 2 deletions(-) diff --git a/procentric/application/app_hoteltv_full.html b/procentric/application/app_hoteltv_full.html index 65df808..1942413 100755 --- a/procentric/application/app_hoteltv_full.html +++ b/procentric/application/app_hoteltv_full.html @@ -284,6 +284,13 @@ +
+
+
+
+
+
+
diff --git a/procentric/application/lib/hoteltv.api.js b/procentric/application/lib/hoteltv.api.js index d8219e1..1adff7f 100755 --- a/procentric/application/lib/hoteltv.api.js +++ b/procentric/application/lib/hoteltv.api.js @@ -118,6 +118,8 @@ HotelTV.api = (function() { "update_event": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/event", /* Status */ "set_device_status": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/state", + /* Dataset */ + "dataset": __apifxn_get_base_url() + "/api/" + _api_ver + "/assets/" + _dev_familly + "/" + _serial_num + "/dataset", /* "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", @@ -176,6 +178,13 @@ HotelTV.api = (function() { xhr.setRequestHeader("Authorization", "Bearer " + __apifxn_get_token()); xhr.send(null); break; + case "PUT": + xhr.open('PUT', sz_url); + xhr.setRequestHeader("Accept", "application/json"); + xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); + xhr.setRequestHeader("Authorization", "Bearer " + __apifxn_get_token()); + xhr.send(JSON.stringify(dic_param)); // 폼 데이터 객체 전송 + break; case "POST": xhr.open('POST', sz_url); xhr.setRequestHeader("Accept", "application/json"); @@ -753,6 +762,32 @@ HotelTV.api = (function() { }); }, + GetUsrDataset: function() { + return new Promise((resolve, reject) => { + let sz_api_url = __apifxn_get_api_url("dataset"); + __apifxn_CallCmsApi("GET", `${sz_api_url}`, "dataset", null).then(_result => { + //console.log(`Success::>${_result.data}`); + resolve(JSON.parse(_result.data)); + }).catch(_error => { + console.error(`Failure::>${_error.reason}`); + reject(_error.reason); + }); + }); + }, + + SetUsrDataset: function(_item_json) { + return new Promise((resolve, reject) => { + let sz_api_url = __apifxn_get_api_url("dataset"); + __apifxn_CallCmsApi("PUT", `${sz_api_url}`, "dataset", _item_json).then(_result => { + //console.log(`Success::>${_result.data}`); + resolve(JSON.parse(_result.data)); + }).catch(_error => { + console.error(`Failure::>${_error.reason}`); + reject(_error.reason); + }); + }); + }, + /** * 통계데이터 발송 API * @param {array} _arrary_event @@ -780,6 +815,12 @@ HotelTV.api = (function() { }); }, + /** + * 다비이스 상태 리포트 API + * @param {array} _dev_inf + * @param {array} _gst_info + * @param {array} _usage_inf + */ ReportBrief: function(_dev_inf, _gst_info, _usage_inf) { let _json_report = { "updated": "YYYY-MM-DD HH:MM:SS", diff --git a/procentric/application/lib/hoteltv.js b/procentric/application/lib/hoteltv.js index b657f75..e4744fa 100755 --- a/procentric/application/lib/hoteltv.js +++ b/procentric/application/lib/hoteltv.js @@ -748,6 +748,15 @@ HotelTV.LoadAppFull = async function() { } //HotelTV.translation = await JSON.parse(sessionStorage.getItem("translation")); + //Override Lang if needed + try { + let Usr_Dataset = await HotelTV.api.GetUsrDataset(); + if ( 'next_lang' in Usr_Dataset ){ + HotelTV.state.lang = Usr_Dataset.next_lang; + } + } catch (_error) { + console.error("Fail to get user data set"); + } //STEP#03: INIT HCAP for HotelTV FullAPP let tmrAppAuth = setInterval(async function() { diff --git a/procentric/application/lib/hoteltv.ui_appfull.js b/procentric/application/lib/hoteltv.ui_appfull.js index cf194fa..f008605 100755 --- a/procentric/application/lib/hoteltv.ui_appfull.js +++ b/procentric/application/lib/hoteltv.ui_appfull.js @@ -473,7 +473,8 @@ HotelTV.ui_appfull = (function() { if ( _state.menu.stage.cur=="tvCtgShow" || _state.menu.stage.cur=="tvCtgHide" || _state.menu.stage.cur=="tvShortcut" || - _state.menu.stage.cur=="tvPreparing" ) + _state.menu.stage.cur=="tvPreparing" || + _state.menu.stage.cur=="language_selection" ) { console.warn("HDMI input doesn't work tv mode"); //HDMI사용불가 말풍선 출력 @@ -4631,7 +4632,7 @@ HotelTV.ui_appfull = (function() { { 'conId': _mpinfo[_state.menu.main[_mmIdx].cur].id } - }]) + }]); } $('.main .mypage .slider .owl-item.focus').removeClass('focus'); @@ -5933,6 +5934,125 @@ HotelTV.ui_appfull = (function() { }); } + function __uifxn_AppFull_Build_LangSel() { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _langInf = HotelTV.opening.languages; + let _elLangSelDiv = $('.popup>.lang_selection'); + let _elLangSelCtrlDiv = $('.popup>.lang_selection .selector'); + let _elLangSelTitleDiv = _elLangSelCtrlDiv.children('.title'); + let _elLangSelUsageDiv = _elLangSelCtrlDiv.children('.usage'); + let _elLangSelButtonsDiv = _elLangSelCtrlDiv.children('.buttons'); + + // 초기 메인 메뉴 KEY설정 + _state.menu.stage.cur = "language_selection"; + + // Reset language total count as 1 + _state["langTotalCnt"] = 1; + // Remove all items unter _elLangSelButtonsDiv + _elLangSelButtonsDiv.children().remove(); + + const ___ifxn_drawLangButtons = function() { + for (let __lang in _langInf) { + console.log("Lang==>" + __lang); + let _elDiv_LangBtn = document.createElement('div'); + if ( __lang===_state.lang ){ + _elDiv_LangBtn.className = 'langBtn focus'; + } else { + _elDiv_LangBtn.className = 'langBtn'; + } + _elDiv_LangBtn.id = __lang; + _elDiv_LangBtn.setAttribute("lang_idx", _state["langTotalCnt"]); + _elDiv_LangBtn.innerHTML = _langInf[__lang].name; + _state["langTotalCnt"] += 1; + _elLangSelButtonsDiv.append(_elDiv_LangBtn); + } + } + + // Title + _elLangSelTitleDiv.text(_trTbl.system.szsellanguage[_state.lang]); + + // Usages + _elLangSelUsageDiv.html(_trTbl.system.lang_sel_usage[_state.lang]); + + // Draw Lang Buttons + ___ifxn_drawLangButtons(); + + // Language selection 프레임 활성화 + if ( _elLangSelDiv.css('display') == "none") { + _elLangSelDiv.fadeIn(1000); + } + } + + function __uifxn_AppFull_HandleLangSelect(_action, _cbFxn=null) { + let _state = HotelTV.state; + let _trTbl = HotelTV.translation; + let _langInf = HotelTV.opening.languages; + let _elLangSelDiv = $('.popup>.lang_selection'); + let _elLangSelCtrlDiv = $('.popup>.lang_selection .selector'); + let _elLangSelTitleDiv = _elLangSelCtrlDiv.children('.title'); + let _elLangSelUsageDiv = _elLangSelCtrlDiv.children('.usage'); + let _elLangSelButtonsDiv = _elLangSelCtrlDiv.children('.buttons'); + + + const ___ifxn_moveLangButton = function(_direction) { + let selectedBtnItemCur = _elLangSelButtonsDiv.find('.focus'); + let selectedBtnItemNext = null; + + if ( _direction=="down" ){ + selectedBtnItemNext = selectedBtnItemCur.next(".langBtn"); + } else if ( _direction=="up" ) { + selectedBtnItemNext = selectedBtnItemCur.prev(".langBtn"); + } + + selectedBtnItemCur.removeClass("focus"); + + if (selectedBtnItemNext.length) { + selectedBtnItemNext.addClass('focus'); + }else{ + if ( _direction=="down" ){ + _elLangSelButtonsDiv.find('.langBtn').first().addClass("focus"); + } else if ( _direction=="up" ) { + _elLangSelButtonsDiv.find('.langBtn').last().addClass("focus"); + } + } + } + + const __ifxn_sendNextLangUsrData = async function(_nextLang, __cbFxnFailure=null, __cbFxn_Success=null) { + try { + let _usrDataJson = { + 'next_lang': _nextLang, + }; + _result = await HotelTV.api.SetUsrDataset(_usrDataJson); + console.log("The app main page will be reloaded"); + window.location.replace('./app_hoteltv_full.html'); + } catch ( __err ){ + console.log("CALL API::>" + __err); + _elLangSelDiv.fadeOut(1000, function() { + if ( __cbFxnFailure ){ __cbFxnFailure(); } + }); + } + } + + + if ( _action=="up" ) { + ___ifxn_moveLangButton(_action); + } else if ( _action=="down" ) { + ___ifxn_moveLangButton(_action); + } else if ( _action=="back") { + _elLangSelDiv.fadeOut(1000, function() { + if ( _cbFxn ){ _cbFxn(); } + }); + } else if ( _action=="enter") { + if ( _elLangSelButtonsDiv.find('.focus').length ) { + __ifxn_sendNextLangUsrData(_elLangSelButtonsDiv.find('.focus').attr('id'), _cbFxn); + } else { + __ifxn_sendNextLangUsrData("en-US", _cbFxn); + } + } + + } + /** * HotelTV UI[AppFull] Wrapper Function::> Bottom Guide Bar UI mngr */ @@ -6767,6 +6887,9 @@ HotelTV.ui_appfull = (function() { } else if (_program[Number(_state.menu.main.cur)].service == "screenmirroring") { HotelTV.hcap.LaunchPreApp(_program[Number(_state.menu.main.cur)].service, null); } + } else if (_program[Number(_state.menu.main.cur)].type.toLowerCase() == "language") { + console.log("Preparing language select sub menu..."); + __uifxn_AppFull_Build_LangSel(); } else { console.log(`Type:${_program[Number(_state.menu.main.cur)].type} doen's have sub menu...`); } @@ -6996,6 +7119,31 @@ HotelTV.ui_appfull = (function() { __uifxn_AppFull_HotKey_ShowBtnOnMM(true); }); } + } else if ( _state.menu.stage.cur == "language_selection" ) { + console.log("HOTKEY(MM:LANGUAGE SELECTION: MENU) KEY EVENT::> " + _evt.keyCode); + if (_evt.keyCode == gRmtKey.left) { + console.log("LANGUAGE SELECTION::>LEFT"); + } else if (_evt.keyCode == gRmtKey.up) { + console.log("LANGUAGE SELECTION::>UP"); + __uifxn_AppFull_HandleLangSelect("up"); + } else if (_evt.keyCode == gRmtKey.right) { + console.log("LANGUAGE SELECTION::>RIGHT"); + } else if (_evt.keyCode == gRmtKey.down) { + console.log("LANGUAGE SELECTION::>DOWN"); + __uifxn_AppFull_HandleLangSelect("down"); + } else if (_evt.keyCode == gRmtKey.enter) { + console.log("LANGUAGE SELECTION::>ENTER"); + __uifxn_AppFull_HandleLangSelect("enter", function() { + _state.menu.stage.cur = "main"; + __uifxn_AppFull_HotKey_ShowBtnOnMM(true); + }); + } else if (_evt.keyCode == gRmtKey.back) { + console.log("LANGUAGE SELECTION::>BACK"); + __uifxn_AppFull_HandleLangSelect("back", function() { + _state.menu.stage.cur = "main"; + __uifxn_AppFull_HotKey_ShowBtnOnMM(true); + }); + } } }); diff --git a/procentric/application/theme/HIM00001/hoteltv.app.full.popup.css b/procentric/application/theme/HIM00001/hoteltv.app.full.popup.css index 00eea29..b155ba3 100755 --- a/procentric/application/theme/HIM00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HIM00001/hoteltv.app.full.popup.css @@ -2829,6 +2829,72 @@ } +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ START ] */ +/********************************************************************************/ +.popup>.lang_selection { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); + display: none; + z-index: 3; +} + +.popup>.lang_selection .selector { + position: absolute; + top: 23%; + left: 36%; + width: 26%; + height: 52%; + display: block; + background-color: rgba(51,61,67,1); + padding: 20px 20px 20px 20px; +} + + +.popup>.lang_selection .selector .title { + width: 100%; + line-height: 50px; + font-size: 40px; + color: rgb(244,244,244); + border-bottom: 2px solid rgba(121,121,121,1); + padding: 0px 0px 10px 0px; +} +.popup>.lang_selection .selector .usage { + width: 100%; + line-height: 24px; + font-size: 20px; + color: rgb(135,139,147); + padding: 20px 0px 10px 0px; +} + +.popup>.lang_selection .selector .buttons { + width: 100%; +} + +.popup>.lang_selection .selector .buttons .langBtn { + width: 100%; + line-height: 44px; + font-size: 32px; + text-align: center; + margin: 15px 0px 15px 0px; + color: rgb(245,245,245); + background-color: rgb(31,34,40); + border-radius: 10px; + border: 2px solid rgba(121,121,121,1); +} + +.popup>.lang_selection .selector .buttons .langBtn.focus { + border: 2px solid rgb(173, 255, 47);; +} + +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ END ] */ +/********************************************************************************/ + /* Notification Style */ .popup>.notification { diff --git a/procentric/application/theme/HIN00001/hoteltv.app.full.popup.css b/procentric/application/theme/HIN00001/hoteltv.app.full.popup.css index 00eea29..b155ba3 100755 --- a/procentric/application/theme/HIN00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HIN00001/hoteltv.app.full.popup.css @@ -2829,6 +2829,72 @@ } +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ START ] */ +/********************************************************************************/ +.popup>.lang_selection { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); + display: none; + z-index: 3; +} + +.popup>.lang_selection .selector { + position: absolute; + top: 23%; + left: 36%; + width: 26%; + height: 52%; + display: block; + background-color: rgba(51,61,67,1); + padding: 20px 20px 20px 20px; +} + + +.popup>.lang_selection .selector .title { + width: 100%; + line-height: 50px; + font-size: 40px; + color: rgb(244,244,244); + border-bottom: 2px solid rgba(121,121,121,1); + padding: 0px 0px 10px 0px; +} +.popup>.lang_selection .selector .usage { + width: 100%; + line-height: 24px; + font-size: 20px; + color: rgb(135,139,147); + padding: 20px 0px 10px 0px; +} + +.popup>.lang_selection .selector .buttons { + width: 100%; +} + +.popup>.lang_selection .selector .buttons .langBtn { + width: 100%; + line-height: 44px; + font-size: 32px; + text-align: center; + margin: 15px 0px 15px 0px; + color: rgb(245,245,245); + background-color: rgb(31,34,40); + border-radius: 10px; + border: 2px solid rgba(121,121,121,1); +} + +.popup>.lang_selection .selector .buttons .langBtn.focus { + border: 2px solid rgb(173, 255, 47);; +} + +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ END ] */ +/********************************************************************************/ + /* Notification Style */ .popup>.notification { diff --git a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css index 00eea29..b155ba3 100755 --- a/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HJS00001/hoteltv.app.full.popup.css @@ -2829,6 +2829,72 @@ } +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ START ] */ +/********************************************************************************/ +.popup>.lang_selection { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); + display: none; + z-index: 3; +} + +.popup>.lang_selection .selector { + position: absolute; + top: 23%; + left: 36%; + width: 26%; + height: 52%; + display: block; + background-color: rgba(51,61,67,1); + padding: 20px 20px 20px 20px; +} + + +.popup>.lang_selection .selector .title { + width: 100%; + line-height: 50px; + font-size: 40px; + color: rgb(244,244,244); + border-bottom: 2px solid rgba(121,121,121,1); + padding: 0px 0px 10px 0px; +} +.popup>.lang_selection .selector .usage { + width: 100%; + line-height: 24px; + font-size: 20px; + color: rgb(135,139,147); + padding: 20px 0px 10px 0px; +} + +.popup>.lang_selection .selector .buttons { + width: 100%; +} + +.popup>.lang_selection .selector .buttons .langBtn { + width: 100%; + line-height: 44px; + font-size: 32px; + text-align: center; + margin: 15px 0px 15px 0px; + color: rgb(245,245,245); + background-color: rgb(31,34,40); + border-radius: 10px; + border: 2px solid rgba(121,121,121,1); +} + +.popup>.lang_selection .selector .buttons .langBtn.focus { + border: 2px solid rgb(173, 255, 47);; +} + +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ END ] */ +/********************************************************************************/ + /* Notification Style */ .popup>.notification { diff --git a/procentric/application/theme/HTL00001/hoteltv.app.full.popup.css b/procentric/application/theme/HTL00001/hoteltv.app.full.popup.css index 00eea29..b155ba3 100755 --- a/procentric/application/theme/HTL00001/hoteltv.app.full.popup.css +++ b/procentric/application/theme/HTL00001/hoteltv.app.full.popup.css @@ -2829,6 +2829,72 @@ } +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ START ] */ +/********************************************************************************/ +.popup>.lang_selection { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); + display: none; + z-index: 3; +} + +.popup>.lang_selection .selector { + position: absolute; + top: 23%; + left: 36%; + width: 26%; + height: 52%; + display: block; + background-color: rgba(51,61,67,1); + padding: 20px 20px 20px 20px; +} + + +.popup>.lang_selection .selector .title { + width: 100%; + line-height: 50px; + font-size: 40px; + color: rgb(244,244,244); + border-bottom: 2px solid rgba(121,121,121,1); + padding: 0px 0px 10px 0px; +} +.popup>.lang_selection .selector .usage { + width: 100%; + line-height: 24px; + font-size: 20px; + color: rgb(135,139,147); + padding: 20px 0px 10px 0px; +} + +.popup>.lang_selection .selector .buttons { + width: 100%; +} + +.popup>.lang_selection .selector .buttons .langBtn { + width: 100%; + line-height: 44px; + font-size: 32px; + text-align: center; + margin: 15px 0px 15px 0px; + color: rgb(245,245,245); + background-color: rgb(31,34,40); + border-radius: 10px; + border: 2px solid rgba(121,121,121,1); +} + +.popup>.lang_selection .selector .buttons .langBtn.focus { + border: 2px solid rgb(173, 255, 47);; +} + +/********************************************************************************/ +/* LANGUAGE SELECTION STYLE [ END ] */ +/********************************************************************************/ + /* Notification Style */ .popup>.notification {