0
\$\begingroup\$

I have written a code for my little little website to make it multilanguage. It is a simple "developer" page where you can select from four different languages. Hungarian, English, Deutch and Roman. Then i wanted to modify all the words each by each in a table like div on the page and then save it on my backend. So I did.

How code works on theory:

The words on my page coming from an object array from javascript first. If there is no saved file on the backend. After that if the user open the table up, the javascript generates a table element from that javascript object where all the words are. And if everything is okay ( usually is ) the user can modify the existing words on the page in a table. If the user clicks save, the words are going to my backend in a post request to be saved and if it is saved the backend immediately sends the words back and the js put it into the object array because it is modified and do the translate in the page as well from the object array.

The asking:

So I'm not very experienced programmer. I've written this little thing but it is bleeding from every possible line. I don't know how to work properly with objects and such things like that in javascript. So if somebody can review the code snippets and can give me some suggestions on how or where to improve it i would be very glad.

The HTML side:

<div class="column">
    <h2 class="lang" key="LANGUAGES">Languages</h2>
        <p class="btn-group">
            <button onclick="location.href='/magyar';"   class="translate Button_OK" key=HUN ID=HU><i class="icon-hu"></i>HU</button>
            <button onclick="location.href='/angol';"    class="translate Button_OK" key=ENG ID=EN><i class="icon-en"></i>EN</button>
            <button onclick="location.href='/nemet';"    class="translate Button_OK" key=DEU ID=DE><i class="icon-de"></i>DE</button>
            <button onclick="location.href='/roman';"    class="translate Button_OK" key=ROM ID=RO><i class="icon-ro"></i>RO</button>
        </p>
    <button id="LangDivBTN" class="Button_OK lang" key=SHWTAB>Szavak Módosítása</button>
</div>

The Javascript side:

The BASIC multilanguage JavaScript ( I'am using jquery and the html elements contains the ".lang" class and an ID for that word. the Set_Actual_Language function is running onload() )

/** LANGUAGE SETTINGS  **/
var arrLang={
    /*********************************************** MAGYAR ***********************************************/
        HU:{
        /****************** Tag Panel ******************/
            "RFID"      :   "Beléptető Rendszer",
            "RECRUIT"   :   "Tag Felvétel",
            "DELETE"    :   "Tag Törlése",
        /****************** Tag Panel ******************/
        /****************** Dev Panel ******************/
            "DEVPAGE"   :   "Fejlesztői Lap",
            "DEBUG"     :   "Debug Ablak",
            "GFUP"      :   "Általános File Feltöltés",
            "FFUP"      :   "Firmware/SPIFFS Feltöltés(SPIFFS formázással)",
            "FDOWNLOAD" :   "File Letöltések",
            "CUSFDOWN"  :   "Egyéni File Letöltés",
        /****************** Dev Panel ******************/
        /****************** Set Panel ******************/
            "SETTING"   :   "Beállítások",
            "LANGUAGES" :   "Nyelvek",
            "RTCTIME"   :   "RTC Idő",
            "APMANAGE"  :   "Access Point Kezelés",
            "ETHMANAGE" :   "Ethernet Kezelés",
            "WRDSMANG"  :   "Szavak Kezelése",
            "FDEL"      :   "Egyéni File Törlés",
        /****************** Set Panel ******************/
        /****************** Inf Panel ******************/
            "INFORM"    :   "Információk",
            "ACCESS"    :   "Elérhetőség",
            "ETHINFORM" :   "Jelenlegi Ethernet Információk",
            "APINFORM"  :   "Jelenlegi Access Point Információk",
            "LICENSE"   :   "Licensz",
        /****************** Inf Panel ******************/

        /******************  Buttons  ******************/
            "DELBTN"    :   "Törlés",
            "SETBTN"    :   "Beállít",
            "DEFBTN"    :   "Alapértelmezett",
            "CLR"       :   "Tisztítás",
            "TEMP"      :   "Hőmérséklet",
            "ALLF"      :   "Minden File",
            "LOGF"      :   "Log Fileok",
            "REQBTN"    :   "Lekérés",
            "RECRBTN"   :   "Felvétel",
            "SAVEBTN"   :   "Mentés",
        /******************  Buttons  ******************/
            },
    /*********************************************** ANGOL ***********************************************/
        EN:{

        /****************** Tag Panel ******************/
            "RFID"      :   "Access Control System",
            "RECRUIT"   :   "Tag Recruit",
            "DELETE"    :   "Tag Delete",
        /****************** Tag Panel ******************/
        /****************** Dev Panel ******************/
            "DEVPAGE"   :   "Development Page",
            "DEBUG"     :   "Debug Window",
            "GFUP"      :   "General File Upload",
            "FFUP"      :   "Firmware/SPIFFS Upload(With SPIFFS Erase)",
            "FDOWNLOAD" :   "File Downloads",
            "CUSFDOWN"  :   "Custom File Download",
        /****************** Dev Panel ******************/
        /****************** Set Panel ******************/
            "SETTING"   :   "Settings",
            "LANGUAGES" :   "Languages",
            "RTCTIME"   :   "RTC Time",
            "APMANAGE"  :   "Access Point Manage",
            "ETHMANAGE" :   "Ethernet Manage",
            "WRDSMANG"  :   "Manage Words",
            "FDEL"      :   "Custom File Delete",
        /****************** Set Panel ******************/
        /****************** Inf Panel ******************/
            "INFORM"    :   "Information",
            "ACCESS"    :   "Accessibility",
            "ETHINFORM" :   "Current Ethernet Information",
            "APINFORM"  :   "Current Access Point Information",
            "LICENSE"   :   "License",
        /****************** Inf Panel ******************/
        /******************  Buttons  ******************/
            "DELBTN"    :   "Delete",
            "SETBTN"    :   "Set",
            "DEFBTN"    :   "Default",
            "CLR"       :   "Clear",
            "TEMP"      :   "Temperature",
            "ALLF"      :   "All Files",
            "LOGF"      :   "Log Files",
            "REQBTN"    :   "Request",
            "RECRBTN"   :   "Recruit",
            "SAVEBTN"   :   "Save",
        /******************  Buttons  ******************/
            },
    /*********************************************** NÉMET ***********************************************/

        DE:{
        /****************** Tag Panel ******************/
            "RFID"      :   "Zugriffskontroll",
            "RECRUIT"   :   "Tag Rekrutieren",
            "DELETE"    :   "Tag Löschen",
        /****************** Tag Panel ******************/
        /****************** Dev Panel ******************/
            "DEVPAGE"   :   "Entwicklungsseite",
            "DEBUG"     :   "Debug Fenster",
            "GFUP"      :   "Allgemeines Hochladen von Dateien",
            "FFUP"      :   "Firmware/SPIFFS hochladen(SPIFFS Formatierung)",
            "FDOWNLOAD" :   "File Downloads",
            "CUSFDOWN"  :   "Brauch File Download",
        /****************** Dev Panel ******************/
        /****************** Set Panel ******************/
            "SETTING"   :   "die Einstellungen",
            "LANGUAGES" :   "Sprachen",
            "RTCTIME"   :   "RTC Zeit",
            "APMANAGE"  :   "Access Point verwalten",
            "ETHMANAGE" :   "Ethernet verwalten",
            "WRDSMANG"  :   "Szavak Kezelése",
            "FDEL"      :   "Custom File Delete",
        /****************** Set Panel ******************/
        /****************** Inf Panel ******************/
            "INFORM"    :   "Information",
            "ACCESS"    :   "Zugänglichkeit",
            "ETHINFORM" :   "Aktuell Ethernet Information",
            "APINFORM"  :   "Aktuell Access Point Information",
            "LICENSE"   :   "Lizenz",
        /****************** Inf Panel ******************/
        /******************  Buttons  ******************/
            "DELBTN"    :   "löschen",
            "SETBTN"    :   "einstellen",
            "DEFBTN"    :   "Standard",
            "CLR"       :   "klar",
            "TEMP"      :   "Temperatur",
            "ALLF"      :   "Alle Dateien",
            "LOGF"      :   "Log Files",
            "REQBTN"    :   "anfordern",
            "RECRBTN"   :   "rekrutieren",
            "SAVEBTN"   :   "Save",
        /******************  Buttons  ******************/
            },
    /*********************************************** ROMÁN ***********************************************/

    RO:{
    /****************** Tag Panel ******************/
        "RFID"      :   "Sistem de control al accesului",
        "RECRUIT"   :   "Înregistrare de etichete",
        "DELETE"    :   "Membru Șterge",
    /****************** Tag Panel ******************/
    /****************** Dev Panel ******************/
        "DEVPAGE"   :   "Pagina dezvoltatorului",
        "DEBUG"     :   "Fereastra de depanare",
        "GFUP"      :   "Încărcare generală de fișiere",
        "FFUP"      :   "Firmware/SPIFFS umplere(SPIFFS formatare)",
        "FDOWNLOAD" :   "Descărcări de fișiere",
        "CUSFDOWN"  :   "Descărcare personalizată de fișiere",
    /****************** Dev Panel ******************/
    /****************** Set Panel ******************/
        "SETTING"   :   "setări",
        "LANGUAGES" :   "limbi",
        "RTCTIME"   :   "RTC timp",
        "APMANAGE"  :   "Access Point administrare",
        "ETHMANAGE" :   "Ethernet administrare",
        "WRDSMANG"  :   "Managementul cuvintelor",
        "FDEL"      :   "Ștergere fișier personalizate",
    /****************** Set Panel ******************/
    /****************** Inf Panel ******************/
        "INFORM"    :   "informații",
        "ACCESS"    :   "disponibilitate",
        "ETHINFORM" :   "Informații Ethernet curente",
        "APINFORM"  :   "Informații curente despre punctul de acces",
        "LICENSE"   :   "licențiere",
    /****************** Inf Panel ******************/
    /******************  Buttons  ******************/
        "DELBTN"    :   "anulare",
        "SETBTN"    :   "regla",
        "DEFBTN"    :   "lipsă",
        "CLR"       :   "curățenie",
        "TEMP"      :   "temperatură",
        "ALLF"      :   "Toate fișierele",
        "LOGF"      :   "Fișiere jurnal",
        "REQBTN"    :   "Cerere",
        "RECRBTN"   :   "Recruta",
        "SAVEBTN"   :   "salva",
    /******************  Buttons  ******************/
}
        };
    // The default language is Hungarian
function Set_Actual_Language(){
    var lang = "HU";
    // Check for localStorage support
    if('localStorage' in window){
       var usrLang = localStorage.getItem('uiLang');
       if(usrLang) {
           lang = usrLang
       }
    }
    console.log(lang);
            $(document).ready(function() {
              $(".lang").each(function(index, element) {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });
            $(".translate").click(function() {
              var lang = $(this).attr("id");
              if('localStorage' in window){
                   localStorage.setItem('uiLang', lang);
                    BejelFordit = localStorage.getItem('uiLang');
              }
              $(".lang").each(function(index, element) {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });
}
/** LANGUAGE SETTINGS END  **/

When the user click on the Modify Words button on the HTML side this function is called to create the table: ( Because the div is display="none" at first )

I don't know how else would i determine the ID-s inside the object so i created an array with the ID-s and do a loop with its help to determine where and what ID is it. It is really not efficient because i have to modify this array with the object array too if i want new words in the site. And a couple of more reasons.

function Create_Table(){
var tbody = document.getElementById('tbody');
var TAGS = ["RFID","RECRUIT","DELETE","DEVPAGE","DEBUG","GFUP","FFUP","FDOWNLOAD","CUSFDOWN","SETTING","LANGUAGES","RTCTIME","APMANAGE","ETHMANAGE","WRDSMANG","FDEL","INFORM","ACCESS","ETHINFORM","APINFORM","LICENSE","DELBTN","SETBTN","DEFBTN","CLR","TEMP","ALLF","LOGF","REQBTN","RECRBTN","SAVEBTN"];
var Table_Lang = "<tr> <th>HU</th> <th>EN</th> <th>DE</th> <th>RO</th></tr>";
    for(var i = 0; i < TAGS.length;i++){
        Table_Lang += "<tr>";
        Table_Lang += "<td style='text-shadow: none' contenteditable='true'>" + arrLang.HU[TAGS[i]] + "</td>";
        Table_Lang += "<td style='text-shadow: none' contenteditable='true'>" + arrLang.EN[TAGS[i]] + "</td>";
        Table_Lang += "<td style='text-shadow: none' contenteditable='true'>" + arrLang.DE[TAGS[i]] + "</td>";
        Table_Lang += "<td style='text-shadow: none' contenteditable='true'>" + arrLang.RO[TAGS[i]] + "</td>";
        Table_Lang += "</tr>";
    }
    tbody.innerHTML = Table_Lang;
}

So the table gets created and you can see the words inside it from the object array.

Here is a picture from the table

And you can modify the words like in this picture

After all that if the user modifying any words and hits save button, this function is called: ( This function gets the rows and cells from the table and put it in different arrays. This is required for me on my backend because i want to arrange the words on the array in columns. like "HU","WORDS" etc... "DE","WORDS" etc... Not in rows. I want to save my backend from any heavy load like this.

function Save_Table(){
    var Element_Lang_Names = [];

    var HU_Elems = [];
    var EN_Elems = [];
    var DE_Elems = [];
    var RO_Elems = [];

    var oTable = document.getElementById('tbody');
    var rowLength = oTable.rows.length;
    var ElementCounter = 0;
    for (i = 0; i < rowLength; i++){
       var oCells = oTable.rows.item(i).cells;
       var cellLength = oCells.length;
       for(var j = 0; j < cellLength; j++){
           if(j == 0){
            HU_Elems[ElementCounter] = oCells.item(j).innerHTML;
           }else if(j == 1){
            EN_Elems[ElementCounter] = oCells.item(j).innerHTML;
           }else if(j == 2){
            DE_Elems[ElementCounter] = oCells.item(j).innerHTML;
           }else if(j == 3){
            RO_Elems[ElementCounter] = oCells.item(j).innerHTML;
           }
            ElementCounter++;
           }
    }

    var multipleArrays = [HU_Elems,EN_Elems,DE_Elems,RO_Elems];
    var Element_Lang_Names = [].concat.apply([], multipleArrays); 
    Post_Lang(Element_Lang_Names);
}

function Post_Lang(Elements){
    //console.log(Elements);
    $.post("Save_Lang_Data",{Elements},
    function(data,status){console.log("Data: " + data + "Status: "+ status);});
}

Okay , if the data saved the backend almost imidiatelly respond back to me not in the post request but in a websocket call on other part of the script. This is not meaningful here. After that the backend puts back the saved data and this function is called:

This is one of the ugliest thing i or anyone done. On the save function the data gets corrupted. There are empty variables on the array and all the data gets saved like this. So when i read it back from the backend i have to split it to different arrays to clean them up a little bit.

function Get_Language_Object(Lang_Array){
    var Lang_Array1 = Lang_Array.split(",");
    var HU_Langs = [];
    var EN_Langs = [];
    var DE_Langs = [];
    var RO_Langs = [];
    for(var i = 0; i < Lang_Array1.length;i++){
        if(Lang_Array1[i] != "EN"){
            if(Lang_Array1[i] != ""){
                HU_Langs[i] = Lang_Array1[i];
            }
        }else{
            for(i;i < Lang_Array1.length;i++){
                if(Lang_Array1[i] != "DE"){
                    if(Lang_Array1[i] != ""){
                        EN_Langs[i] = Lang_Array1[i];
                    }
                }else{
                    for(i;i < Lang_Array1.length;i++){
                        if(Lang_Array1[i] != "RO"){
                            if(Lang_Array1[i] != ""){
                                DE_Langs[i] = Lang_Array1[i];
                            }
                        }else{
                            for(i;i < Lang_Array1.length;i++){
                                    if(Lang_Array1[i] != ""){
                                        RO_Langs[i] = Lang_Array1[i];
                                    }       
                                }
                            break;
                        }
                    }
                    break;
                }
            }
            break;
        }
    }
var TAGS = ["RFID","RECRUIT","DELETE","DEVPAGE","DEBUG","GFUP","FFUP","FDOWNLOAD","CUSFDOWN","SETTING","LANGUAGES","RTCTIME","APMANAGE","ETHMANAGE","WRDSMANG","FDEL","INFORM","ACCESS","ETHINFORM","APINFORM","LICENSE","DELBTN","SETBTN","DEFBTN","CLR","TEMP","ALLF","LOGF","REQBTN","RECRBTN","SAVEBTN"];
    var New_HU_Langs = HU_Langs.filter(function () { return true });
    var New_EN_Langs = EN_Langs.filter(function () { return true });
    var New_DE_Langs = DE_Langs.filter(function () { return true });
    var New_RO_Langs = RO_Langs.filter(function () { return true });

    New_HU_Langs.shift();
    New_EN_Langs.shift();
    New_DE_Langs.shift();
    New_RO_Langs.shift();

    for(var i = 0; i < TAGS.length;i++){
        arrLang.HU[TAGS[i]] = New_HU_Langs[i];
        arrLang.EN[TAGS[i]] = New_EN_Langs[i];
        arrLang.DE[TAGS[i]] = New_DE_Langs[i];
        arrLang.RO[TAGS[i]] = New_RO_Langs[i];
    }
    //console.log(arrLang);
    Set_Actual_Language();
    Notify("Lang_Set!","Success","Settings");
}
\$\endgroup\$
  • 2
    \$\begingroup\$ Welcome to Code Review! The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. \$\endgroup\$ – Heslacher Dec 11 '19 at 9:48
  • \$\begingroup\$ The picture of the table is not readable on my machine (on 27", so that's not the problem). To clarify, this currently works as intended (produces the correct results) and you're looking for a cleaner solution, correct? \$\endgroup\$ – Mast Dec 11 '19 at 10:16
  • \$\begingroup\$ Yes Mast you are correct. There is just one question or asking. I don't know where Heslacher sees more questions. This is one code and one goal only. Just in pieces. I need some cleaner solutions for the nested for loops for example. Or to the whole approach. ^^ \$\endgroup\$ – Dr.Random Dec 11 '19 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.