issue #10 #11 Add language selection feature.

This commit is contained in:
paul kim
2024-06-02 15:31:53 +09:00
parent bc7ea606f8
commit a069902c86
8 changed files with 471 additions and 2 deletions

View File

@@ -284,6 +284,13 @@
<span id="btn_back"></span>
</div>
</div>
<div class="lang_selection">
<div class="selector">
<div class="title"></div>
<div class="usage"></div>
<div class="buttons"></div>
</div>
</div>
<div class="notification">
<div class="balloon right"><span id="message"></span></div>
</div>

View File

@@ -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",

View File

@@ -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() {

View File

@@ -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);
});
}
}
});

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {