<!DOCTYPE html>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
    <script type="text/javascript" src="scripts/common-0.0.1.js"></script>
    <script type="text/javascript" src="scripts/filesaver.js"></script>
    <style>
        .listItem {
            width: calc(100vh - 8);
            background-color: lightgray;
            border-radius: 5px;
            box-sizing: border-box;
            margin: 4px;
            padding: 6px;
            text-align: left;
            cursor: pointer;
        }
        
        .listItem:hover {
            background-color: darkgray;
        }

        .listItemSel {
            width: calc(100vh - 8);
            background-color: #CFC;
            border-radius: 5px;
            box-sizing: border-box;
            margin: 4px;
            padding: 6px;
            text-align: left;
        }
    </style>
</head>
<body style="overflow:hidden" onbeforeunload="return onBeforeUnload(event)">
    <div id=p11 class="noselect" style="overflow:hidden;position:relative">
        <div id="startTips" style="top:15px;right:15px;width:calc(50vh);position:absolute;background-color:gold;z-index:1000;padding:10px;border-radius:8px;box-shadow:3px 3px 10px gray">
            Welcome to the MeshCentral translator. You can use this to help translate MeshCentral into other languages. Start by selecting a language, translate a few strings and save the strings to your server. Then, hit "Translate Server" to apply your changes to your server's web pages.<br /><br />
            When ready, please mail the "meshcentral-data/translate.json" file to <a href="mailto:ylianst@gmail.com">ylianst@gmail.com</a> for inclusion in the MeshCentral official builds.<br /><br />
            <a onclick="closeStartTips()"><b>Close</b></a>
        </div>
        <div id=deskarea0>
            <div id="bigok" style="display:none;left:calc((100vh / 2))"><b>&checkmark;</b></div>
            <div id="bigfail" style="display:none;left:calc((100vh / 2))"><b>&#10007;</b></div>
            <div id=deskarea0 style="position:absolute;left:0;right:0;top:0;height:28px;background-color:#036;color:#c8c8c8">
                <input style="float:right;margin:3px" id="TransServerButton" type=button value="Translate Server" onclick="translateServer()">
                <div style="float:right;padding:2px" id="mainStatus"></div>
                <div style="font-size:20px;font-family:Arial;padding:3px"><b>MeshCentral Translator</b></div>
            </div>
            <div id=deskarea1 class="areaHead" style="margin-top:28px">
                <div class="toright2" style="margin-top:3px;margin-right:5px">
                    <span id="status"></span>
                </div>
                <div>
                    <input id="OpenFileButton" type=button value="Open File..." onclick="openfile()" style="display:none">
                    <input id="SaveServerButton" title="Ctrl-S" type=button value="Save to Server (F3)" onclick="saveServerTranslations()">
                    <input id="SaveFileButton" title="Ctrl-Shift-S" type=button value="Save to File (F4)" onclick="saveToFile()">
                    <select id="langSelector" onchange="langSelectorChange()">
                        <option value="ar">Arabic (ar)</option>
                        <option value="da">Danish (da)</option>
                        <option value="fi">Finnish (fi)</option>
                        <option value="fr">French (fr)</option>
                        <option value="cs">Czech (cs)</option>
                        <option value="de">German (de)</option>
                        <option value="el">Greek (el)</option>
                        <option value="he">Hebrew (he)</option>
                        <option value="hi">Hindi (hi)</option>
                        <option value="it">Italian (it)</option>
                        <option value="ja">Japanese (ja)</option>
                        <option value="ko">Korean (ko)</option>
                        <option value="nl">Dutch (nl)</option>
                        <option value="pl">Polish (pl)</option>
                        <option value="pt">Portuguese (pt)</option>
                        <option value="pt-br">Portuguese Brazil (pt-br)</option>
                        <option value="ru">Russian (ru)</option>
                        <option value="ro">Romanian (ro)</option>
                        <option value="zh-CHS">Simplified Chinese (zh-CHS)</option>
                        <option value="zh-CHT">Traditional Chinese (zh-CHT)</option>
                        <option value="es">Spanish (es)</option>
                        <option value="sv">Swedish (sv)</option>
                        <option value="tr">Turkish (tr)</option>
                    </select> 
                    <input id="searchInput" type="text" placeholder="Search" onchange="onSearchChanged()" onkeyup="onSearchChanged()">
                    <label><input id="showLocCheck" type="checkbox" onchange="onLocChanged()"> Show Location</label>
                    <label><input id="showNoTransOnlyCheck" type="checkbox" onchange="onSearchChanged(true)">Show No Translations Only</label>
            </div>
            </div>
            <div id=deskarea2 style="">
                <div class="areaProgress"><div id="progressbar" style="background-color:blue"></div></div>
            </div>
            <div id=deskarea3x style="max-height:calc(100vh - 82px);height:calc(100vh - 54px);background-color:gray">
                <div id="mainListArea" style="height:calc(33.33vh);overflow-y:scroll">
                    <div class="listItem"><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(20% - 10px)"></div></div>
                </div>
                <textarea id="defaultTextArea" autocomplete=off readonly style="height:calc(28.33vh);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE"></textarea>
                <textarea id="translatedTextArea" autocomplete=off style="height:calc(38.33vh - 96px);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE" onkeyup="onSourceChange()"></textarea>
            </div>
            <div id=deskarea4 class="areaFoot">
                <div class="toright2">
                    <input id="CopySource" type=button value="Copy English (F5)" onclick="copySource()">
                    <input id="PrevButton" type=button value="Prev (PgUp)" onclick="prev()">
                    <input id="NextButton" type=button value="Next (PgDn)" onclick="next()">
                </div>
                <div style="height:22px">
                    &nbsp;
                    <input id="SetButton" type=button value="Set (F1)" onclick="setTranslation()">
                    <input id="CancelButton" type=button value="Cancel (F2)" onclick="cancelTranslation()">
                </div>
            </div>
        </div>
        <div id=dialog class="noselect" style="display:none">
            <div id=dialogHeader>
                <div tabindex=0 id=id_dialogclose onclick=setDialogMode() onkeypress="if (event.key == 'Enter') setDialogMode()">&#x2716;</div>
                <div id=id_dialogtitle></div>
            </div>
            <div id=dialogBody>
                <div id=dialog1>
                    <div id=id_dialogMessage style=""></div>
                </div>
                <div id=dialog2 style="">
                    <div id=id_dialogOptions></div>
                </div>
            </div>
            <div id="idx_dlgButtonBar">
                <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)">
                <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)">
                <div><input id="idx_dlgDeleteButton" type="button" value="Delete" style="display:none" onclick="dialogclose(2)"></div>
            </div>
        </div>
    </div>
    <script>
        var translations = null;
        var selectedLanguage = Q('langSelector').value;
        var selectedItem = 0;
        var changes = false;

        function start() {
            window.onresize = deskAdjust;
            document.ondrop = ondrop;
            document.ondragover = ondragover;
            document.ondragleave = ondragleave;
            document.onkeypress = onkeypress;
            document.onkeydown = onkeydown;
            document.onkeyup = onkeyup;
            updateMainList();
            loadServerTranslations();
            QE('SaveServerButton', false);
        }

        function onBeforeUnload(e) {
            if (changes) { e.preventDefault(); e.resturnValue = ''; }
        }

        function closeStartTips() { QV('startTips', false); }

        function langSelectorChange() {
            selectedLanguage = Q('langSelector').value;
            updateMainList();
            onSearchChanged(true);
            select(0, true, false);
        }

        function cleanup() {
            translationFile = null;
            updateMainList();
            Q('searchInput').value = '';
            currentSearchFilter = '';
        }

        function ondrop(e) {
            haltEvent(e);
            QV('bigfail', false);
            QV('bigok', false);

            // Check if these are files we can upload, remove all folders.
            if (e.dataTransfer == null) return;
            var files = [];
            for (var i in e.dataTransfer.files) {
                if ((e.dataTransfer.files[i].type != null) && (e.dataTransfer.files[i].size != null) && (e.dataTransfer.files[i].size != 0) && (e.dataTransfer.files[i].name.endsWith('.json'))) {
                    files.push(e.dataTransfer.files[i]);
                }
            }
            if (files.length == 0) return;
            cleanup();
            readFile(files[0]);
        }

        var dragtimer = null;
        function ondragover(e) {
            haltEvent(e);
            if (dragtimer != null) { clearTimeout(dragtimer); dragtimer = null; }
            var ac = true;
            QV('bigok', ac);
            QV('bigfail', !ac);
        }

        function ondragleave(e) {
            haltEvent(e);
            dragtimer = setTimeout(function () { QV('bigfail', false); QV('bigok', false); dragtimer = null; }, 10);
        }

        function onkeypress(e) {
            if (xxdialogMode) return;
            //if (e.key == ' ') { togglePause(); haltEvent(e); }
        }

        function onkeydown(e) {
            if (xxdialogMode) return;
            if (e.key == 'F1') { setTranslation(); haltEvent(e); return false; } // Set translation
            if (e.key == 'F2') { cancelTranslation(); haltEvent(e); return false; } // Cancel translation
            if (e.key == 'F3') { saveServerTranslations(); haltEvent(e); return false; } // Save to server
            if (e.key == 'F4') { saveToFile(); haltEvent(e); return false; } // Save to file
            if (e.key == 'F5') { copySource(); haltEvent(e); return false; } // Copy source
        }

        function onkeyup(e) {
            if (xxdialogMode) return;
            if (e.key == 'PageUp') { setTranslation(); prev(); haltEvent(e); return false; } // Save and move to previous
            if (e.key == 'PageDown') { setTranslation(); next(); haltEvent(e); return false; } // Save and move to next
        }

        function deskAdjust() {

        }

        function openfile() {
            var x = '<input type=file name=files id=p2fileinput style=width:100% accept=".json" onchange="openfileChanged()" />';
            setDialogMode(2, "Open File...", 3, openfileEx, x);
            QE('idx_dlgOkButton', false);
        }

        function openfileEx() {
            var xfiles = Q('p2fileinput').files;
            if (xfiles != null) { var files = []; for (var i in xfiles) { if ((xfiles[i].type != null) && (xfiles[i].size != null) && (xfiles[i].size != 0) && (xfiles[i].name.endsWith('.json'))) { files.push(xfiles[i]); } } }
            if (files.length == 0) return;
            cleanup();
            readFile(files[0]);
            Q('OpenFileButton').blur();
        }

        function openfileChanged() {
            var xfiles = Q('p2fileinput').files;
            if (xfiles != null) { var files = []; for (var i in xfiles) { if ((xfiles[i].type != null) && (xfiles[i].size != null) && (xfiles[i].size != 0) && (xfiles[i].name.endsWith('.json'))) { files.push(xfiles[i]); } } }
            QE('idx_dlgOkButton', files.length == 1);
        }

        function readFile(translationFile) {
            var fr = new FileReader();
            fr.onload = function () {
                var file = null;
                try { file = JSON.parse(this.result); } catch (ex) { }
                if ((file != null) && (typeof file.strings == 'object') && (file.strings.length > 0)) {
                    translations = file.strings;
                    translations.sort(enSort);
                    Q('searchInput').value = '';
                    currentSearchFilter = '';
                    updateMainList();
                    select(0, true);
                }
            };
            fr.readAsText(translationFile);
        }

        function updateMainList() {
            var x = [];
            if (translations != null) {
                //console.log(translations);
                for (var i in translations) {
                    var source = EscapeHtml(translations[i].en);
                    var target = '';
                    if (translations[i][selectedLanguage] != null) { target = EscapeHtml(translations[i][selectedLanguage]); }
                    var comment = '';
                    // <span id=ns' + i + ' style=display:none>&#9654;&nbsp;</span>
                    x.push('<div class="listItem" id=nx' + i + ' onclick=select(' + i + ')><div id=ns' + i + ' style="display:inline-block;width:calc(40% - 10px)">' + source + '</div><div id=nt' + i + ' style="display:inline-block;width:calc(40% - 10px)">' + target + '</div><div id=nc' + i + ' style="display:inline-block;width:calc(20% - 10px)">' + comment + '</div></div>');
                }
            }
            QH('mainListArea', x.join(''));
            updateButtons();
            onSearchChanged(true);
        }

        function select(i, scroll, nofocus) {
            // Hold selection is a change was made but not commited.
            if ((scroll == null) && (isTargetChanged() == true)) { return; }

            Q('nx' + selectedItem).classList.remove('listItemSel');
            Q('nx' + selectedItem).classList.add('listItem');
            selectedItem = i;
            Q('nx' + selectedItem).classList.remove('listItem');
            Q('nx' + selectedItem).classList.add('listItemSel');
            if (scroll === true) {
                var x = (Q('mainListArea').clientHeight / 2) - (Q('nx' + selectedItem).clientHeight / 2);
                if (x < 0) { x = 0; }
                Q('mainListArea').scrollTop = Q('nx' + selectedItem).offsetTop - x;
            }
            onLocChanged();
            if (translations[i][selectedLanguage] != null) {
                Q('translatedTextArea').value = translations[selectedItem][selectedLanguage];
            } else {
                Q('translatedTextArea').value = '';
            }
            if (nofocus == true) { Q('translatedTextArea').focus(); }
            updateButtons();
        }

        function next() { if (selectedItem < (translations.length - 1)) { select(selectedItem + 1, true); } }
        function prev() { if (selectedItem > 0) { select(selectedItem - 1, true); } }
        function copySource() { Q('translatedTextArea').value = translations[selectedItem].en; Q('translatedTextArea').focus(); }

        function updateButtons() {
            QE('SaveFileButton', translations != null);
            QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1)));
            QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0));
            QE('CopySource', translations != null);
            if (translations == null) {
                QH('status', '');
                QS('progressbar').width = '0%';
            } else {
                QH('status', (selectedItem + 1) + ' / ' + translations.length);
                QS('progressbar').width = Math.floor(100 * ((selectedItem + 1) / translations.length)) + '%';
            }
            onSourceChange();
        }

        function enSort(a, b) { if (a.en.toLowerCase() > b.en.toLowerCase()) return 1; if (a.en.toLowerCase() < b.en.toLowerCase()) return -1; return 0; }

        var currentSearchFilter = '';
        function onSearchChanged(force) {
            var showNoTranslationOnly = Q('showNoTransOnlyCheck').checked;
            if ((force != true) && (currentSearchFilter == Q('searchInput').value)) return;
            currentSearchFilter = Q('searchInput').value;
            var currentSearchFilterLower = currentSearchFilter.toLowerCase();
            if (translations != null) {
                for (var i in translations) {
                    var show = (!showNoTranslationOnly) || (translations[i][selectedLanguage] == null) || (translations[i][selectedLanguage] == '');
                    if (currentSearchFilter == '') {
                        QV('nx' + i, show);
                    } else {
                        QV('nx' + i, show && (((translations[i][selectedLanguage] != null) && (translations[i][selectedLanguage].toLowerCase().indexOf(currentSearchFilterLower) >= 0)) || (translations[i]['en'].toLowerCase().indexOf(currentSearchFilterLower) >= 0)));
                    }
                }
            }
        }

        function onLocChanged() {
            if (Q('showLocCheck').checked) {
                if ((translations[selectedItem].xloc != null) && (translations[selectedItem].xloc.length > 0)) {
                    if (translations[selectedItem].xloc.length == 1) {
                        QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocation:\r\n' + translations[selectedItem].xloc.join('\r\n'));
                    } else {
                        QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocations:\r\n' + translations[selectedItem].xloc.join('\r\n'));
                    }
                } else {
                    QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nNo locations.');
                }
            } else {
                QH('defaultTextArea', translations[selectedItem]['en']);
            }
        }

        // Poll the server, if it responds, refresh the page.
        function loadServerTranslations() {
            var xdr = null;
            try { xdr = new XDomainRequest(); } catch (e) { }
            if (!xdr) xdr = new XMLHttpRequest();
            xdr.open('POST', window.location.origin + '/translations');
            xdr.timeout = 30000;
            xdr.onload = function () {
                var x = null;
                try { x = JSON.parse(this.responseText); } catch (ex) { }
                if ((x == null) || (typeof x.strings != 'object')) { messagebox('Translations', 'ERROR: Unable to parse translations from the server.'); return; }
                translations = x.strings;
                translations.sort(enSort);
                Q('searchInput').value = '';
                currentSearchFilter = '';
                updateMainList();
                select(0, true);
            };
            xdr.onerror = function () {
                messagebox('Translations', 'ERROR: Unable to load translations from the server.');
            };
            xdr.send('{ "action":"getTranslations" }');
        }

        // Save to server
        function saveServerTranslations() {
            var xdr = null;
            try { xdr = new XDomainRequest(); } catch (e) { }
            if (!xdr) xdr = new XMLHttpRequest();
            xdr.open('POST', window.location.origin + '/translations');
            xdr.timeout = 30000;
            xdr.onload = function () {
                var x = null;
                try { x = JSON.parse(this.responseText); } catch (ex) { }
                if ((x == null) || (x.response == null)) { messagebox('Translations', 'ERROR: Unable to parse server response.'); return; }
                if (x.response == 'ok') {
                    changes = false;
                    QE('SaveServerButton', false);
                    QS('SaveServerButton')['background-color'] = null;
                } else {
                    messagebox('Translations', 'ERROR: ' + x.response);
                }
            };
            xdr.onerror = function () { messagebox('Translations', 'ERROR: Unable to save translations to server.'); };
            xdr.send(JSON.stringify({ 'action': 'setTranslations', strings: translations }));
        }

        // Convert the translations to a standardized JSON we can use in GitHub
        // Strings are sorder by english source and object keys are sorted
        function translationsToJson(t) {
            var arr2 = [], arr = t.strings;
            for (var i in arr) {
                var names = []; el = arr[i], el2 = {};
                for (var j in el) { names.push(j); }
                names.sort();
                for (var j in names) { el2[names[j]] = el[names[j]]; }
                if (el2.xloc != null) { el2.xloc.sort(); }
                arr2.push(el2);
            }
            arr2.sort(function (a, b) { if (a.en > b.en) return 1; if (a.en < b.en) return -1; return 0; });
            return JSON.stringify({ strings: arr2 }, null, '  ');
        }

        function saveToFile() {
            saveAs(utf2blob(translationsToJson({ strings: translations })), 'translate.json');
        }

        function setTranslation() {
            if (Q('translatedTextArea').value == '') {
                delete translations[selectedItem][selectedLanguage];
                QH('nt' + selectedItem, '');
            } else {
                translations[selectedItem][selectedLanguage] = Q('translatedTextArea').value;
                QH('nt' + selectedItem, translations[selectedItem][selectedLanguage]);
            }
            onSourceChange();
            changes = true;
            QE('SaveServerButton', true);
            QS('SaveServerButton')['background-color'] = '#F93';
        }

        function cancelTranslation() {
            Q('translatedTextArea').value = translations[selectedItem][selectedLanguage];
        }

        function isTargetChanged() {
            if (translations == null) { return false; }
            var source = '';
            if (translations[selectedItem][selectedLanguage] != null) { source = translations[selectedItem][selectedLanguage]; }
            return (source != Q('translatedTextArea').value);
        }

        function onSourceChange() {
            var x = isTargetChanged();
            QE('SetButton', x);
            QE('CancelButton', x);
            QE('NextButton', (isTargetChanged() == false) && (translations != null) && (selectedItem < (translations.length - 1)));
            QE('PrevButton', (isTargetChanged() == false) && (translations != null) && (selectedItem > 0));
            QS('translatedTextArea')['background-color'] = ((x == true) ? 'white' : '#EFE');
            QE('SaveFileButton', !x);
            QE('searchInput', !x);
            QE('showLocCheck', !x);
            QE('langSelector', !x);
            QE('TransServerButton', !x);
            QE('SaveServerButton', changes && !x);
        }

        function translateServer() {
            var x = "Perform server translation? The MeshCentral server will reset for 10 to 30 seconds to perform this operation.";
            setDialogMode(2, "Translate Server", 3, translateServerEx, x);
        }

        function translateServerEx() {
            QE('TransServerButton', false);
            setTimeout(function () { QE('TransServerButton', true); }, 5000);
            var xdr = null;
            try { xdr = new XDomainRequest(); } catch (e) { }
            if (!xdr) xdr = new XMLHttpRequest();
            xdr.open('POST', window.location.origin + '/translations');
            xdr.timeout = 30000;
            xdr.onload = function () {
                var x = null;
                try { x = JSON.parse(this.responseText); } catch (ex) { }
                if ((x == null) || (x.response == null)) { messagebox("Server Translation", "ERROR: Unable to parse server response."); return; }
                if (x.response == 'ok') {
                    messagebox("Server Translation", "Server translation initiated, this will take a minute or two. Once done, you can refresh the MeshCentral web pages to see the changes.<br /><br />When ready, please mail the file \"meshcentral-data/translate.json\" to <a href=\"mailto:ylianst@gmail.com\">ylianst@gmail.com</a> for inclusion on the official build.");
                } else {
                    messagebox("Server Translation", "ERROR: " + x.response);
                }
            };
            xdr.onerror = function () { messagebox("Translations", "ERROR: Unable to save translations to server."); };
            xdr.send(JSON.stringify({ 'action': 'translateServer', strings: translations }));
        }

        //
        // POPUP DIALOG
        //

        // null = Hidden, 1 = Generic Message
        var xxdialogMode;
        var xxdialogFunc;
        var xxdialogButtons;
        var xxdialogTag;
        var xxcurrentView = -1;

        // Display a dialog box
        // Parameters: Dialog Mode (0 = none), Dialog Title, Buttons (1 = OK, 2 = Cancel, 3 = OK & Cancel), Call back function(0 = Cancel, 1 = OK), Dialog Content (Mode 2 only)
        function setDialogMode(x, y, b, f, c, tag) {
            xxdialogMode = x;
            xxdialogFunc = f;
            xxdialogButtons = b;
            xxdialogTag = tag;
            QE('idx_dlgOkButton', true);
            QV('idx_dlgOkButton', b & 1);
            QV('idx_dlgCancelButton', b & 2);
            QV('id_dialogclose', (b & 2) || (b & 8));
            QV('idx_dlgDeleteButton', b & 4);
            QV('idx_dlgButtonBar', b & 7);
            if (y) QH('id_dialogtitle', y);
            for (var i = 1; i < 3; i++) { QV('dialog' + i, i == x); } // Edit this line when more dialogs are added
            QV('dialog', x);
            if (c) { if (x == 2) { QH('id_dialogOptions', c); } else { QH('id_dialogMessage', c); } }
        }

        function dialogclose(x) {
            var f = xxdialogFunc, b = xxdialogButtons, t = xxdialogTag;
            setDialogMode();
            if (((b & 8) || x) && f) f(x, t);
        }

        function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
        function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
        function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
        function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); }
        function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); };

        start();
    </script>
</body>
</html>