diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/interface.js (renamed from js/lfpe.js) | 121 |
1 files changed, 99 insertions, 22 deletions
diff --git a/js/lfpe.js b/js/interface.js index 152c668..77a94bb 100644 --- a/js/lfpe.js +++ b/js/interface.js @@ -1,4 +1,28 @@ /* + * (common) global vars + * + */ +var data, // global data object + ui_type; // 't' (text) or 'g' (graphical) + +/* + * cross-site request + * + */ +var create_cors_req = function (method, url) +{ + var xhr = new XMLHttpRequest(); + if ("withCredentials" in xhr) { + xhr.open(method, url, true); + xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8'); + } else { + xhr = null; + } + + return xhr; +} + +/* * Timer * */ @@ -8,22 +32,22 @@ var Timer = { pause_acc_t: 0, paused: false, - start: function() { + start: function () { this.start_t = Date.now(); this.pause_start_t = 0; this.pause_acc_t = 0; this.paused = false; }, - pause: function() { + pause: function () { this.paused = true; this.pause_start_t = Date.now(); }, - unpause: function() { + unpause: function () { this.paused = false; this.pause_acc_t += Date.now()-this.pause_start_t; this.pause_start_t = 0; }, - get: function() { + get: function () { return (Date.now()-this.start_t)-this.pause_acc_t; } } @@ -32,7 +56,7 @@ var Timer = { * pause/unpause timer * */ -function pause() +var pause = function () { var paused = document.getElementById("paused"); var button = document.getElementById("pause_button"); @@ -61,7 +85,7 @@ function pause() * no newline on return in textarea * */ -function catch_return(e) +var catch_return = function (e) { if (e.keyCode == 13) { e.preventDefault(); @@ -75,7 +99,7 @@ function catch_return(e) * working/not working * */ -function working() +var working = function () { // elements var button = document.getElementById("next"); @@ -139,10 +163,30 @@ function not_working(fadein=true) } /* + * polling the server + * + */ +var poll = function (url_prefix) +{ + setTimeout(function(){ + $.get(url_prefix+"/status").done(function(response){ + $("#status_detail").text(response); + if (response == "Ready") { + ready = true; + request_and_process_next(); + return; + } else { + poll(url_prefix); + } + }); + }, 1000); +} + +/* * next button * */ -function Next() +var next = function () { // elements var button = document.getElementById("next"); @@ -177,14 +221,14 @@ function Next() return; } send_data = JSON.parse(data_s); - post_edit = trim(send_data["target"].join(" ")); + post_edit = $.trim(send_data["target"].join(" ")); if (DE_target_done.length != DE_target_shapes.length) post_edit = ""; send_data["post_edit"] = encodeURIComponent(post_edit); send_data['type'] = 'g'; send_data["original_svg"] = document.getElementById("original_svg").value; } else { - post_edit = trim(target_textarea.value); + post_edit = $.trim(target_textarea.value); send_data["post_edit"] = post_edit; send_data['type'] = 't'; } @@ -210,8 +254,8 @@ function Next() var src = []; var tgt = []; for (var i=0; i<l; i++) { - src.push(encodeURIComponent(trim(document.getElementById("oov_src"+i).value))); - tgt.push(encodeURIComponent(trim(document.getElementById("oov_tgt"+i).value))); + src.push(encodeURIComponent($.trim(document.getElementById("oov_src"+i).value))); + tgt.push(encodeURIComponent($.trim(document.getElementById("oov_tgt"+i).value))); if (tgt[tgt.length-1] == "") { // empty correction alert("Please provide translations for all words."); not_working(); @@ -238,15 +282,48 @@ function Next() // confirm to server if (document.getElementById("init").value != "") { - var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm"); + var xhr_confirm = create_cors_req('get', base_url+":"+port+"/confirm"); xhr_confirm.send(); // FIXME handle errors } // build request - var xhr = CreateCORSRequest('post', next_url); + var xhr = create_cors_req('post', next_url); + if (!xhr) { + alert("Error: 2"); // FIXME do something reasonable + } + xhr.onerror = function (e) { alert("XHR ERRROR 1x " + e.target.status); } + xhr.send(JSON.stringify(send_data)); // send 'next' request + + poll(base_url+":"+port); +} + +var request_and_process_next = function () +{ + // elements + var button = document.getElementById("next"); + var pause_button = document.getElementById("pause_button"); + var target_textarea = document.getElementById("target_textarea") + var raw_source_textarea = document.getElementById("raw_source_textarea"); + var current_seg_id = document.getElementById("current_seg_id"); + var source = document.getElementById("source"); + var status = document.getElementById("status"); + var oov_correct = document.getElementById("oov_correct"); + var last_post_edit = document.getElementById("last_post_edit"); + + // get metadata stored in DOM + var base_url = "http://coltrane.cl.uni-heidelberg.de"; + var port = document.getElementById("port").value; + var key = document.getElementById("key").value; + + // url + next_url = base_url+":"+port+"/next"; + + var xhr = create_cors_req('get', base_url+":"+port+"/fetch"); if (!xhr) { alert("Error: 2"); // FIXME do something reasonable } + xhr.onerror = function (e) { alert("XHR ERRROR 1 " + e.target.status); } + xhr.send(); // send 'next' request // 'next' request's callbacks xhr.onload = function() { @@ -276,7 +353,7 @@ function Next() button.setAttribute("disabled", "disabled"); pause_button.setAttribute("disabled", "disabled"); if (current_seg_id.value) - removeClass(document.getElementById("seg_"+current_seg_id.value), "bold"); + $("#seg_"+current_seg_id.value).removeClass("bold"); return; @@ -289,7 +366,7 @@ function Next() } else { $("#derivation_editor").fadeTo(200,0.1); } - $("#oov_context").html(data["raw_source"].replace(/\*\*\*/g,"<strong>").replace(/###/g,"</strong>")); + $("#oov_context").html(data["raw_source"].replace(/\*\*\*/g,"<u>").replace(/###/g,"</u>")); for (var i=0; i<data["oovs"].length; i++) { var node_src = document.createElement("input"); var node_tgt = document.createElement("input"); @@ -346,7 +423,7 @@ function Next() document.getElementById("reset_button").removeAttribute("disabled"); document.getElementById("seg_"+id).className += " bold"; if (id > 0) { - removeClass(document.getElementById("seg_"+(id-1)), "bold"); + $("#seg_"+(id-1)).removeClass("bold"); } if (translation) target_textarea.rows = Math.round(translation.length/80+0.5); @@ -361,13 +438,13 @@ function Next() last_post_edit.value = translation; // confirm to server - var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm"); + var xhr_confirm = create_cors_req('get', base_url+":"+port+"/confirm"); xhr_confirm.send(); // FIXME handle errors // load data into graphical UI if (ui_type == "g") { DE_init(); - var x = trim(JSON.parse(DE_extract_data())["target"].join(" ")); + var x = $.trim(JSON.parse(DE_extract_data())["target"].join(" ")); last_post_edit.value = x; document.getElementById("original_svg").value = DE_get_raw_svg_data(); } @@ -377,8 +454,6 @@ function Next() } }; - xhr.send(JSON.stringify(send_data)); // send 'next' request - return; } @@ -386,7 +461,7 @@ function Next() * init text interface * */ -function init_text_editor() +var init_text_editor = function () { document.getElementById("target_textarea").value = ""; document.getElementById("target_textarea").setAttribute("disabled", "disabled"); @@ -416,10 +491,12 @@ window.onload = function () // graphical derivation editor if (ui_type == "g") { document.getElementById("derivation_editor").style.display = "block"; + // text based editor } else { init_text_editor(); document.getElementById("textboxes").style.display = "block"; } + }; |