<html>
<head>
<title>Apertium APY Pipe Debug Viewer</title>
<script>
function loadPairs(){
var port = document.form1.port.value;
if (port){
var getPairs = new XMLHttpRequest();
getPairs.onreadystatechange = function(){
if(getPairs.readyState == 4 && getPairs.status == 200){
pairs = JSON.parse(getPairs.responseText);
pairs = pairs.responseData;
console.log(pairs);
document.form1.langpair.innerHTML = '';
for (var i=0; i<pairs.length; i++){
document.form1.langpair.innerHTML = document.form1.langpair.innerHTML + '<option value="' + pairs[i].sourceLanguage + '|' + pairs[i].targetLanguage +'">' + pairs[i].sourceLanguage + '-' + pairs[i].targetLanguage + '</option>';
}
}
}
sendTo = "http://localhost:" + port + "/listPairs";
getPairs.open("GET", sendTo , true);
getPairs.send();
}
}
function sendRequest(){
var pair = encodeURIComponent(document.form1.langpair.value);
var q = encodeURIComponent(document.form1.q.value);
var port = document.form1.port.value;
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:"+port+"/pipedebug?langpair="+pair+"&q=" + q; //"http://localhost:"+port+"/pipedebug?pair="+pair+"&q=" + q;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
response = JSON.parse(response).responseData;
var forhtml = '<div class="inside"><p>' + htmlEscape(response.output[0]) + '</p></div>';
for(var i=0; i<response.pipeline.length; i++){
forhtml = forhtml + '<div class="inside"><h4>' + response.pipeline[i] + '</h4><p>' + htmlEscape(response.output[i+1]) + '</p></div>';
}
document.getElementById("responsediv").innerHTML = forhtml;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
</script>
<style>
body{
background: #F4A460;
padding: 5%
}
.block{
display: block
}
.inside{
background: #DEB887;
padding: 1%;
padding-top: 1px;
padding-bottom: 1px;
margin: 5px
}
</style>
</head>
<body>
<h1>Apertium APY Pipe Debug Viewer</h1>
<form name="form1">
<label>Enter port:</label>
<input type='text' name='port' onblur='loadPairs()'>
<br>
<label>Select a language pair from the list.</label>
<select name="langpair">
</select>
<br>
<input type="checkbox" id="instant"> Instant translation
<br>
<label>Type text here.</label>
<textarea name='q' id='q' class='block'></textarea>
<br>
<input type="button" value="Submit" onClick="sendRequest()">
</form>
<div id="responsediv">
</div>
<script>
var timer, lastPunct = false, punct = [46, 33, 58, 63, 47, 45, 190, 171, 49], timeoutPunct = 500, timeoutOther = 1000;
var q = document.getElementById("q");
function timeout (event) {
if(lastPunct && event.keyCode === 32 || event.keyCode === 13) {
// Don't override the short timeout for simple space-after-punctuation
return;
}
if(timer && document.getElementById("instant").checked) {
clearTimeout(timer);
}
var timeout;
if (punct.indexOf(event.keyCode) !== -1) {
timeout = timeoutPunct;
lastPunct = true;
}
else {
timeout = timeoutOther;
lastPunct = false;
}
timer = setTimeout(function () {
if(document.getElementById("instant").checked) {
sendRequest();
}
}, timeout);
}
var query = document.getElementById("q");
q.addEventListener("keyup", timeout);
q.addEventListener("paste", timeout);
</script>
</body>
</html>