feat(web_interface): js refactor

This commit is contained in:
Jan Rochalski
2019-11-12 13:59:23 +01:00
parent fda01a6486
commit 942f62bc53
5 changed files with 247 additions and 234 deletions

View File

@@ -1,118 +1,113 @@
var langJson = {};
let langJson = {};
function getE(name){
return document.getElementById(name);
}
const getE = (name) => document.getElementById(name);
function esc(str) {
if(str){
const esc = str => {
if (str) {
return str.toString()
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\"/g, '&quot;')
.replace(/\'/g, '&#39;')
.replace(/\//g, '&#x2F;');
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/\"/g, "&quot;")
.replace(/\'/g, "&#39;")
.replace(/\//g, "&#x2F;");
}
return "";
}
function convertLineBreaks(str){
if(str){
const convertLineBreaks = str => {
if (str) {
str = str.toString();
str = str.replace(/(?:\r\n|\r|\n)/g,'<br>');
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
return str;
}
return "";
}
function showMessage(msg, closeAfter){
var elmt = getE("error");
elmt.innerHTML = esc(msg)+"<a onclick='closeMessage()' id='closeError'>x</a>";
elmt.classList.remove('hide');
elmt.classList.add('show');
const showMessage = (msg, closeAfter) => {
const elmt = getE("error");
elmt.innerHTML = `${esc(msg)}<a onclick='closeMessage()' id='closeError'>x</a>`;
elmt.classList.remove("hide");
elmt.classList.add("show");
if(closeAfter !== undefined){
setTimeout(closeMessage(),closeAfter);
setTimeout(closeMessage, closeAfter);
}
}
function closeMessage(){
var elmt = getE("error");
const closeMessage = () => {
const elmt = getE("error");
elmt.innerHTML = "";
elmt.classList.remove('show');
elmt.classList.add('hide');
elmt.classList.remove("show");
elmt.classList.add("hide");
}
function getFile(adr, callback, timeout, method, onTimeout, onError){
const getFile = (
adr,
callback = () => undefined,
timeout = 8000,
method = "GET",
onTimeout = showMessage(`ERROR: timeout loading file ${adr}`),
onError = showMessage(`ERROR: loading file: ${adr}`)
) => {
/* fallback stuff */
if(adr === undefined) return;
if(callback === undefined) callback = function(){};
if(timeout === undefined) timeout = 8000;
if(method === undefined) method = "GET";
if(onTimeout === undefined) {
onTimeout = function(){
showMessage("ERROR: timeout loading file "+adr);
};
}
if(onError === undefined){
onError = function(){
showMessage("ERROR: loading file: "+adr);
};
}
/* create request */
var request = new XMLHttpRequest();
const request = new XMLHttpRequest();
/* set parameter for request */
request.open(method, encodeURI(adr), true);
request.timeout = timeout;
request.ontimeout = onTimeout;
request.onerror = onError;
request.onerror = onError;
request.overrideMimeType("application/json");
request.onreadystatechange = function() {
if(this.readyState == 4){
if(this.status == 200){
callback(this.responseText);
}
request.onreadystatechange = () => {
if (this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
};
/* send request */
request.send();
console.log(adr);
}
function lang(key){
return convertLineBreaks(esc(langJson[key]));
}
const lang = key => convertLineBreaks(esc(langJson[key]));
function parseLang(fileStr){
const parseLang = fileStr => {
langJson = JSON.parse(fileStr);
if(langJson["lang"] != "en"){// no need to update the HTML
var elements = document.querySelectorAll("[data-translate]");
for (i = 0; i < elements.length; i++) {
var element = elements[i];
element.innerHTML = lang(element.getAttribute("data-translate"));
}
if (langJson["lang"] !== "en") {
// no need to update the HTML
const elements = document.querySelectorAll("[data-translate]");
[...elements].forEach(item => {
item.innerHTML = lang(element.getAttribute("data-translate"));
})
}
document.querySelector('html').setAttribute("lang", langJson["lang"] );
document.querySelector('html').setAttribute("lang", langJson["lang"]);
if(typeof load !== 'undefined') load();
}
function loadLang(){
var language = "default"; //navigator.language.slice(0, 2);
getFile("lang/" + language + ".lang",
parseLang,
const loadLang = () => {
const language = "default"; //navigator.language.slice(0, 2);
const langFunc = () => getFile("lang/en.lang", parseLang);
getFile(
`lang/${language}.lang`,
parseLang,
2000,
"GET",
function(){
getFile("lang/en.lang", parseLang);
}, function(){
getFile("lang/en.lang", parseLang);
}
langFunc,
langFunc
);
}