index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DialogFlow Utils</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://assets.dialogflow.com/common/favicon.png" type="image/png" rel="shortcut icon">
</head>
<body>
<nav class="navbar navbar-expand-lg ">
      <div class="collapse navbar-collapse">
        <span class="navbar-brand">DialogTools</span>
        <ul class="nav nav-pills mr-auto mt-2 mt-lg-0" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="pills-translate-tab" data-toggle="pill" href="#pills-translate" role="tab" aria-controls="pills-translate" aria-selected="true">Translate</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-convert1-tab" data-toggle="pill" href="#pills-convert1" role="tab" aria-controls="pills-convert1" aria-selected="false">Convert</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-convert2-tab" data-toggle="pill" href="#pills-convert2" role="tab" aria-controls="pills-convert2" aria-selected="false">Convert2</a>
            </li>
        </ul>
        <form class="input-group input-group-inline form-inline my-2 my-lg-0" id="fileForm">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="ufile" name="ufile">
                <label class="custom-file-label" id="fileLabel" for="ufile">Choose file</label>
            </div>
        </form>
    </div>
</nav>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-translate" role="tabpanel" aria-labelledby="pills-translate-tab">
        <form action="translate.php" method="post" enctype="multipart/form-data" name="form3" id="form3">
        <h2>Translate your Agent</h2>
        <h5>Use this to translate a full agent export from Settings in dialogflow.</h5>
        <label for="translateLanguage">Language:</label>
        <select name="translateLanguage" id="translateLanguage">
            <optgroup label="Assistant Supported">
                <option value="All" selected>All Supported</option>
                <option value='fr'>French</option>
                <option value='de'>German</option>
                <option value='hi'>Hindi</option>
                <option value='id'>Indonesian</option>
                <option value='it'>Italian</option>
                <option value='ja'>Japanese</option>
                <option value='ko'>Korean</option>
                <option value='pl'>Polish</option>
                <option value='pt'>Portuguese (Portugal, Brazil)</option>
                <option value='es'>Spanish</option>
            </optgroup>
            <optgroup label="Unsupported">
                <option value='af'>Afrikaans</option>
                <option value='sq'>Albanian</option>
                <option value='am'>Amharic</option>
                <option value='ar'>Arabic</option>
                <option value='hy'>Armenian</option>
                <option value='az'>Azeerbaijani</option>
                <option value='eu'>Basque</option>
                <option value='be'>Belarusian</option>
                <option value='bn'>Bengali</option>
                <option value='bs'>Bosnian</option>
                <option value='bg'>Bulgarian</option>
                <option value='ca'>Catalan</option>
                <option value='ceb'>Cebuano</option>
                <option value='zh-CN'>Chinese (Simplified)</option>
                <option value='zh-TW'>Chinese (Traditional)</option>
                <option value='co'>Corsican</option>
                <option value='hr'>Croatian</option>
                <option value='cs'>Czech</option>
                <option value='da'>Danish</option>
                <option value='nl'>Dutch</option>
                <option value='eo'>Esperanto</option>
                <option value='et'>Estonian</option>
                <option value='fi'>Finnish</option>
                <option value='fy'>Frisian</option>
                <option value='gl'>Galician</option>
                <option value='ka'>Georgian</option>
                <option value='el'>Greek</option>
                <option value='gu'>Gujarati</option>
                <option value='ht'>Haitian Creole</option>
                <option value='ha'>Hausa</option>
                <option value='haw'>Hawaiian</option>
                <option value='iw'>Hebrew</option>
                <option value='hmn'>Hmong</option>
                <option value='hu'>Hungarian</option>
                <option value='is'>Icelandic</option>
                <option value='ig'>Igbo</option>
                <option value='ga'>Irish</option>
                <option value='jw'>Javanese</option>
                <option value='kn'>Kannada</option>
                <option value='kk'>Kazakh</option>
                <option value='km'>Khmer</option>
                <option value='ku'>Kurdish</option>
                <option value='ky'>Kyrgyz</option>
                <option value='lo'>Lao</option>
                <option value='la'>Latin</option>
                <option value='lv'>Latvian</option>
                <option value='lt'>Lithuanian</option>
                <option value='lb'>Luxembourgish</option>
                <option value='mk'>Macedonian</option>
                <option value='mg'>Malagasy</option>
                <option value='ms'>Malay</option>
                <option value='ml'>Malayalam</option>
                <option value='mt'>Maltese</option>
                <option value='mi'>Maori</option>
                <option value='mr'>Marathi</option>
                <option value='mn'>Mongolian</option>
                <option value='my'>Myanmar (Burmese)</option>
                <option value='ne'>Nepali</option>
                <option value='no'>Norwegian</option>
                <option value='ny'>Nyanja (Chichewa)</option>
                <option value='ps'>Pashto</option>
                <option value='fa'>Persian</option>
                <option value='pa'>Punjabi</option>
                <option value='ro'>Romanian</option>
                <option value='ru'>Russian</option>
                <option value='sm'>Samoan</option>
                <option value='gd'>Scots Gaelic</option>
                <option value='sr'>Serbian</option>
                <option value='st'>Sesotho</option>
                <option value='sn'>Shona</option>
                <option value='sd'>Sindhi</option>
                <option value='si'>Sinhala (Sinhalese)</option>
                <option value='sk'>Slovak</option>
                <option value='sl'>Slovenian</option>
                <option value='so'>Somali</option>
                <option value='su'>Sundanese</option>
                <option value='sw'>Swahili</option>
                <option value='sv'>Swedish</option>
                <option value='tl'>Tagalog (Filipino)</option>
                <option value='tg'>Tajik</option>
                <option value='ta'>Tamil</option>
                <option value='te'>Telugu</option>
                <option value='th'>Thai</option>
                <option value='tr'>Turkish</option>
                <option value='uk'>Ukrainian</option>
                <option value='ur'>Urdu</option>
                <option value='uz'>Uzbek</option>
                <option value='vi'>Vietnamese</option>
                <option value='cy'>Welsh</option>
                <option value='xh'>Xhosa</option>
                <option value='yi'>Yiddish</option>
                <option value='yo'>Yoruba</option>
                <option value='zu'>Zulu</option>
            </optgroup>
        </select>
        <br><br>
        <input type="button" class="executeBtn" name="Submit" id="translate" value="Translate"/>
        </form>
    </div>
    <div class="tab-pane fade" id="pills-convert1" role="tabpanel" aria-labelledby="pills-convert1-tab">
        <form action="convert.php" method="post" enctype="multipart/form-data" name="form2" id="form2">
            <h2>Convert an Alexa "integrations" package.</h2>
            <h5>Use this to convert the output of Integrations->Alexa->"Export For Alexa"</h5>
            <label for="invocationName">Invocation Name:</label>
            <input name="invocationName" type="text" id="invocationName" required/>
            <br><br>
            <input type="button" class="executeBtn" name="Submit" id="convert" value="Convert"/>
        </form>
    </div>
    <div class="tab-pane fade" id="pills-convert2" role="tabpanel" aria-labelledby="pills-convert2-tab">
        <form action="convertV2.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
            <h2>Convert an exported agent.</h2>
            <h5>Use this to convert a full agent export from Settings in dialogflow. (Recommended)</h5>
            <label for="convertLanguage">Language:</label>
            <select name="language" id="convertLanguage">
                <option value="en-US" selected>English (US)</option>
                <option value="en-GB">English (UK)</option>
                <option value="en-AU">English (AU)</option>
                <option value="en-CA">English (CA)</option>
                <option value="en-IN">English (IN)</option>
                <option value="fr">French</option>
                <option value="de">German</option>
                <option value="ja">Japanese</option>
            </select>
            <br><br>
            <input type="button" class="executeBtn" name="Submit" id="convertV2" value="Convert"/>
        </form>
    </div>
</div>

<div class="msgWrap" id="msgWrap">
    <h2 id="ResultLabel">Results:</h2>
    <div class="msgBox card" id="msgBox">
        <ul class="list-group" id="msgList">

        </ul>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<script type="text/javascript">
    var fileData=getCookie('fileData');
    var SID = "";
    var url="translate.php";
    var dots = "";
    var jobStatus = "IDLE";
    $(function(){
        if (fileData !== "") {
            console.log("Updating file label.");
            $("#fileLabel").text("Using cookie value.");
            checkJob();
        }
        $("input[type=file]").on('change',function(){
            fileData = "";
            setCookie("fileData",null,0);
            $("#fileLabel").text(this.files[0].name);
        });

        $(".executeBtn").on('click',function() {
            if (fileData !== "") {
                console.log("We already have a file path for the server, use that: ", fileData);
            }
            $('#msgList').html("");
            var page = $(this).attr('id');
            url = page + ".php";
            console.log("URL: " + url);
            var invocationName = "";
            var lang = "";

            if (page === 'convert') {
                invocationName=($("#invocationName").val());
            }

            if (page === 'translate') lang = $("#translateLanguage").val();
            if (page === 'convertV2') lang = $("#translateLanguage").val();

            if (fileData !== "") {
                console.log("Sending re-request as a GET.");
                var query = url + "?jobDir=" + encodeURIComponent(fileData);
                if (invocationName !== "") query += "&invocationName=" + encodeURIComponent(invocationName);
                if (lang !== "") query += "&language=" + lang;
                if (SID !== "") query += "&SID=" + SID;
                $.get(query, function(data) {
                    console.log("DATA: ", data);
                    if (data.hasOwnProperty('STATUS')) {
                        if (data['STATUS'] === "RUNNING") {
                            if (data.hasOwnProperty('DIR')) {
                                console.log("Job is running, starting to poll...");
                                fileData = data['DIR'];
                                setCookie('fileData',fileData,1);
                                setTimeout(function () {
                                    checkJob();
                                }, 1000);
                            } else {
                                console.log("No dir.");
                            }
                        } else {
                            console.log("Error status: ", data['STATUS']);
                        }
                    } else {
                        console.log("No status");
                    }
                },'json');

            } else {
                console.log("Sending request as POST.");
                var formData = new FormData();
                var fileInput = document.getElementById('ufile');
                var file = fileInput.files[0];
                formData.append('ufile', file);
                if (invocationName !== "") formData.append('invocationName', invocationName);
                if (lang !== "") formData.append('language', lang);


                $.ajax({
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (data) {
                        console.log("DATA: ", data);
                        if (data.hasOwnProperty('STATUS')) {
                            if (data['STATUS'] === "RUNNING") {
                                if (data.hasOwnProperty('DIR')) {
                                    console.log("Job is running, starting to poll...");
                                    fileData = data['DIR'];
                                    SID = data['SID'];
                                    setTimeout(function () {
                                        checkJob();
                                    }, 1000);
                                } else {
                                    console.log("No dir.");
                                }
                            } else {
                                console.log("Error status: ", data['STATUS']);
                            }
                        } else {
                            console.log("No status");
                        }

                    }, dataType: 'json'
                });
            }

        })
    });

    function checkJob() {
        var checkUrl = url + "?checkFile=" + encodeURIComponent(fileData) + "&SID=" + SID;
        $.get(checkUrl, function(data) {
            var msgList = $('#msgList');
           console.log("Check Data: ", data);
           var complete = false;
           if (data.hasOwnProperty('STATUS')) {
               var string = "";
               switch(data['STATUS']) {
                   case 'RUNNING':
                       if (data.hasOwnProperty('totalSize')) {
                           switch (dots) {
                               case "":
                                   dots = ".";
                                   break;
                               case ".":
                                   dots = "..";
                                   break;
                               case "..":
                                   dots = "...";
                                   break;
                               case "...":
                                   dots = ".";
                                   break;
                           }
                           var totalSize = data['totalSize'];
                           var currentSize = data['processedData'];
                           var totalFiles = data['totalFiles'];
                           var processedFiles = data['processedFiles'];

                           var percentDone = (currentSize < totalSize) ? Math.round(currentSize/totalSize * 100) : 100;
                           var status = "Processed " + processedFiles + "/" + totalFiles + " files. Appx. " + percentDone + "% complete" + dots;
                           console.log("Statusmsg: " + status);
                           var statusLi = $("#statusLi");
                           console.log("StatusLi: ",statusLi);
                           if (statusLi.length === 0) {
                               console.log("Prepending");
                               $(".normal").removeClass('active');
                               msgList.prepend('<li class="list-group-item active" id="statusLi">' + status + '</li>');
                           } else {
                               console.log("Updating");
                               $(".normal").removeClass('active');

                               statusLi.html(status);
                           }

                       } else {
                           string = "Initializing...";
                       }
                       setTimeout(function(){checkJob();},1000);
                       break;
                   case 'ARCHIVING':
                       string = "Job is currently " + data['STATUS'] + "...";
                       console.log("Job is " + data['STATUS']);
                       setTimeout(function(){checkJob();},1000);
                       break;
                   case 'ERROR':
                   case 'NO FILE':
                       string = "A file error has occurred.";
                       console.log("An error occurred.");
                       break;
                   case 'COMPLETE':
                   case 'null':
                       var folder = fileData.split("/");
                       string = "<a href='" + folder[folder.length - 1] + "/output.zip'>Download Output File Now!";
                       complete = true;
                       break;
               }
               if ((string !== "") && (data['STATUS'] !== jobStatus)) {
                   var li = '<li class="list-group-item normal active">' + string + '</li>';
                   $(".list-group-item.active").removeClass('active');
                   $('#msgList').prepend(li);
                   if (complete) $(".list-group-item.active").removeClass('active');
               }
               if (data['STATUS'] !== jobStatus) jobStatus = data['STATUS'];
           }
           if (data.hasOwnProperty['MSG']) {
               var messages = data['MSG'];
               for (var message in messages) {
                   $('#msgBox').append(message + "<BR>");
               }
           }
        });

    }

    function setCookie(cname, cvalue, exdays) {
        console.log("ME LOVE COOKIE!!");
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) === 0) {
                var cData = c.substring(name.length, c.length);
                console.log("ME GOT COOKIE: ",cData);
                return cData;
            }
        }
        console.log("NO COOKIE FOR YOU!");
        return "";
    }
</script>
</body>
</html>