#113 refresh.js: timezone, language

tltneon · May 17, 2022 · 1db12eb · 1db12eb
1 parent 068db6e
commit 1db12eb
Showing 1 changed file with 65 additions and 47 deletions.
diff --git a/lgsl_files/scripts/refresh.js b/lgsl_files/scripts/refresh.js
@@ -1,63 +1,81 @@
-function cl(){
-  let vars = document.querySelectorAll(".details_info .details_info_srow .details_info_ceil:nth-child(2)");
-  if(vars){
+const language = 'english'    // sets your language
+const lng = {                 //
+  english: {
+    owp: 'ONLINE WITH PASSWORD',
+    onl: 'ONLINE',
+    off: 'OFFLINE',
+    lst: 'Last update',
+    que: 'Server last query',
+    err: 'HTTP Error',
+    loc: 'en-Gb',             // http://www.lingoes.net/en/translator/langcode.htm
+    zon: 'Europe/London'      // https://worldtimeapi.org/timezones
+  }
+}
+let a, el;
+
+function cl() {
+  const vars = document.querySelectorAll(".details_info .details_info_srow .details_info_ceil:nth-child(2)");
+  if (vars) {
     refreshData(vars[4].innerText, vars[1].innerText, vars[2].innerText, vars[3].innerText);
   }
 }
-async function refreshData(type = 'source', ip, c_port, q_port){
-  let response = await fetch('lgsl_files/lgsl_feed.php?type='+type+'&ip='+ip+'&c_port='+c_port+'&q_port='+q_port+'&request=s&format=3');
+async function refreshData(type = 'source', ip, c_port, q_port) {
+  const response = await fetch(`lgsl_files/lgsl_feed.php?type=${type}&ip=${ip}&c_port=${c_port}&q_port=${q_port}&request=s&format=3`);
   if (response.ok) {
     let status = await response.text();
     status = JSON.parse(atob(status.slice(4, -4)));
     let details = document.querySelectorAll(".details_info .details_info_srow .details_info_ceil:nth-child(2)");
     // reload main info
-    details[0].innerText = (status.b.status == "1"
-                          ? (status.s.password == "1"
-                              ? "ONLINE WITH PASSWORD"
-                              : "ONLINE")
-                          : "OFFLINE");
+    details[0].innerText = (status.b.status === "1"
+                          ? (status.s.password === "1"
+                              ? `${lng[language].owp}`
+                              : `${lng[language].onl}`)
+                          : `${lng[language].off}`);
     details[6].innerText = status.s.map;
-    details[7].innerText = status.s.players + " / " + status.s.playersmax;
+    details[7].innerText = `${status.s.players} / ${status.s.playersmax}`;
     document.querySelector('[id^=servername]').innerText = status.s.name;
-    document.querySelector(".details_info_row:last-child").innerText = "Last update: " + (new Date()).toUTCString() + "\nServer last query: " + (new Date(Number(status.s.cache_time + '000'))).toUTCString() + " ";
+    el.innerText = `${lng[language].lst}: ` + (new Date()).toLocaleString(lng[language].loc, { timeZone: lng[language].zon }) + `\n${lng[language].que}:` + (new Date(Number(status.s.cache_time + '000'))).toLocaleString(lng[language].loc, { timeZone: lng[language].zon }) + " ";
+    el.appendChild(a);
     // reload chart if it exists
-    if(document.querySelector('#chart'))
+    if (document.querySelector('#chart'))
       document.querySelector('#chart').src = document.querySelector('#chart').src;
-    a.appendChild(el);
-  }
-  else {
-    alert("HTTP Error: " + response.status);
+  } else {
+    alert(`${lng[language].err}: ${response.status}`);
   }
 }
 
-let a = document.querySelector(".details_info_row:last-child");
-let el = document.createElement("a");
-if(a) {
-  el.onclick = () => {
-    cl();
+function loadRefresh() {
+  el = document.querySelector(".details_info_row:last-child");
+  a = document.createElement("a");
+  if (el) {
+    a.onclick = () => {
+      cl();
+    }
+    el.appendChild(a);
+    a.innerText = "🔃";
+    let st = document.createElement("style");
+    st.innerText = `
+    .details_info_row:last-child a {
+      display: inline-block;
+      color: aliceblue;
+      transition-duration: 1s;
+      animation: loader 1.1s infinite linear;
+      font-size: 14px;
+    }
+    .details_info_row:last-child a:hover {
+      color: crimson;
+      cursor: pointer;
+    }
+    
+    @keyframes loader {
+      0%   {transform:rotate(45deg)}
+      25%  {transform:rotate(90deg)}
+      50%  {transform:rotate(135deg)}
+      75%  {transform:rotate(180deg)}
+      100% {transform:rotate(225deg)}
+    }`;
+    document.body.appendChild(st);
   }
-  a.appendChild(el);
-  el.innerText = "🔃";
-  let st = document.createElement("style");
-  st.innerText = `
-  .details_info_row:last-child a {
-    display: inline-block;
-    color: aliceblue;
-    transition-duration: 1s;
-    animation: loader 1.1s infinite linear;
-    font-size: 14px;
-  }
-  .details_info_row:last-child a:hover {
-    color: crimson;
-    cursor: pointer;
-  }
-  
-  @keyframes loader {
-    0%   {transform:rotate(45deg)}
-    25%  {transform:rotate(90deg)}
-    50%  {transform:rotate(135deg)}
-    75%  {transform:rotate(180deg)}
-    100% {transform:rotate(225deg)}
-  }`;
-  document.body.appendChild(st);
-}
+}
+
+document.addEventListener("DOMContentLoaded", loadRefresh);