From c724cad519801c11b7d5ddd57312f3d921727b06 Mon Sep 17 00:00:00 2001 From: Patrick Simianer Date: Fri, 29 Jan 2016 18:21:39 +0100 Subject: refactoring, support for polling --- js/interface.js | 502 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/lfpe.js | 425 ----------------------------------------------- 2 files changed, 502 insertions(+), 425 deletions(-) create mode 100644 js/interface.js delete mode 100644 js/lfpe.js (limited to 'js') diff --git a/js/interface.js b/js/interface.js new file mode 100644 index 0000000..77a94bb --- /dev/null +++ b/js/interface.js @@ -0,0 +1,502 @@ +/* + * (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 + * + */ +var Timer = { + start_t: 0, + pause_start_t: 0, + pause_acc_t: 0, + paused: false, + + start: function () { + this.start_t = Date.now(); + this.pause_start_t = 0; + this.pause_acc_t = 0; + this.paused = false; + }, + pause: function () { + this.paused = true; + this.pause_start_t = Date.now(); + }, + unpause: function () { + this.paused = false; + this.pause_acc_t += Date.now()-this.pause_start_t; + this.pause_start_t = 0; + }, + get: function () { + return (Date.now()-this.start_t)-this.pause_acc_t; + } +} + +/* + * pause/unpause timer + * + */ +var pause = function () +{ + var paused = document.getElementById("paused"); + var button = document.getElementById("pause_button"); + var next_button = document.getElementById("next"); + var target_textarea = document.getElementById("target_textarea") + var initialized = document.getElementById("init"); + + if (paused.value == 0) { + button.innerHTML = "Unpause"; + paused.value = 1; + next.setAttribute("disabled", "disabled"); + target_textarea.setAttribute("disabled", "disabled"); + Timer.pause(); + } else { + button.innerHTML = "Pause"; + paused.value = 0; + next.removeAttribute("disabled"); + if (initialized.value != "") { + target_textarea.removeAttribute("disabled"); + } + Timer.unpause(); + } +} + +/* + * no newline on return in textarea + * + */ +var catch_return = function (e) +{ + if (e.keyCode == 13) { + e.preventDefault(); + Next(); + } + + return false; +} + +/* + * working/not working + * + */ +var working = 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"); + + if ($("#ui_type").val() == "t") { + $("#textboxes").fadeTo(200,0.1); + } else { + $("#derivation_editor").fadeTo(200,0.1); + } + + // show 'working' message + $("#status").fadeToggle(); + + // disable button and textarea + button.setAttribute("disabled", "disabled"); + pause_button.setAttribute("disabled", "disabled"); + target_textarea.setAttribute("disabled", "disabled"); + document.getElementById("reset_button").setAttribute("disabled", "disabled"); + + DE_locked = true; +} +function not_working(fadein=true) +{ + document.getElementById("reset_button").removeAttribute("disabled"); + // 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"); + + if (fadein) { + if ($("#ui_type").val() == "t") { + $("#textboxes").fadeTo(200,1); + } else { + $("#derivation_editor").fadeTo(200,1); + } + } + + // hide 'working' message + $("#status").fadeToggle(); + + // enable buttons + document.getElementById("next").removeAttribute("disabled"); + document.getElementById("pause_button").removeAttribute("disabled"); + document.getElementById("reset_button").removeAttribute("disabled"); + + DE_locked = false; +} + +/* + * 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 + * + */ +var 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"); + + working(); + + // 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"; + + // post edit + var post_edit = ''; + var send_data = new Object(); + + // extract data from interfaces + if (ui_type == 'g') { + data_s = DE_extract_data(); + if (!data_s) { + not_working(); + return; + } + send_data = JSON.parse(data_s); + 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); + send_data["post_edit"] = post_edit; + send_data['type'] = 't'; + } + + send_data["key"] = key; + + // send data + if (oov_correct.value=="false" && post_edit != "") { + send_data["EDIT"] = true; + send_data["duration"] = Timer.get(); + send_data["source_value"] = encodeURIComponent(source.value); + // compose request + // no change? + if (post_edit == last_post_edit.value) { + send_data["nochange"] = true; + } + // update document overview + document.getElementById("seg_"+(current_seg_id.value)+"_t").innerHTML=decodeURIComponent(post_edit); + // OOV correction mode + } else if (oov_correct.value=="true") { + send_data["OOV"] = true; + var l = document.getElementById("oov_num_items").value; + var src = []; + var tgt = []; + for (var i=0; i").replace(/###/g,"")); + for (var i=0; i 0) { + $("#seg_"+(id-1)).removeClass("bold"); + } + if (translation) + target_textarea.rows = Math.round(translation.length/80+0.5); + //raw_source_textarea.rows = Math.round(raw_source.length/80+0.5); + target_textarea.focus(); + target_textarea.selectionStart = 0; + target_textarea.selectionEnd = 0; + + // remember aux data in DOM + current_seg_id.value = id; + source.value = src; + last_post_edit.value = translation; + + // confirm to server + 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(" ")); + last_post_edit.value = x; + document.getElementById("original_svg").value = DE_get_raw_svg_data(); + } + + // start timer + Timer.start(); + } + }; + + return; +} + +/* + * init text interface + * + */ +var init_text_editor = function () +{ + document.getElementById("target_textarea").value = ""; + document.getElementById("target_textarea").setAttribute("disabled", "disabled"); + + return false; +} + +/* + * init site + * + */ +window.onload = function () +{ + // reset vars + document.getElementById("source").value = ""; + document.getElementById("current_seg_id").value = ""; + document.getElementById("paused").value = ""; + document.getElementById("oov_correct").value = false; + document.getElementById("displayed_oov_hint").value = false; + document.getElementById("init").value = ""; + document.getElementById("reset_button").setAttribute("disabled", "disabled"); + + not_working(); + + ui_type = document.getElementById("ui_type").value; + + // 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"; + } + +}; + diff --git a/js/lfpe.js b/js/lfpe.js deleted file mode 100644 index 152c668..0000000 --- a/js/lfpe.js +++ /dev/null @@ -1,425 +0,0 @@ -/* - * Timer - * - */ -var Timer = { - start_t: 0, - pause_start_t: 0, - pause_acc_t: 0, - paused: false, - - start: function() { - this.start_t = Date.now(); - this.pause_start_t = 0; - this.pause_acc_t = 0; - this.paused = false; - }, - pause: function() { - this.paused = true; - this.pause_start_t = Date.now(); - }, - unpause: function() { - this.paused = false; - this.pause_acc_t += Date.now()-this.pause_start_t; - this.pause_start_t = 0; - }, - get: function() { - return (Date.now()-this.start_t)-this.pause_acc_t; - } -} - -/* - * pause/unpause timer - * - */ -function pause() -{ - var paused = document.getElementById("paused"); - var button = document.getElementById("pause_button"); - var next_button = document.getElementById("next"); - var target_textarea = document.getElementById("target_textarea") - var initialized = document.getElementById("init"); - - if (paused.value == 0) { - button.innerHTML = "Unpause"; - paused.value = 1; - next.setAttribute("disabled", "disabled"); - target_textarea.setAttribute("disabled", "disabled"); - Timer.pause(); - } else { - button.innerHTML = "Pause"; - paused.value = 0; - next.removeAttribute("disabled"); - if (initialized.value != "") { - target_textarea.removeAttribute("disabled"); - } - Timer.unpause(); - } -} - -/* - * no newline on return in textarea - * - */ -function catch_return(e) -{ - if (e.keyCode == 13) { - e.preventDefault(); - Next(); - } - - return false; -} - -/* - * working/not working - * - */ -function working() -{ - // 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"); - - if ($("#ui_type").val() == "t") { - $("#textboxes").fadeTo(200,0.1); - } else { - $("#derivation_editor").fadeTo(200,0.1); - } - - // show 'working' message - $("#status").fadeToggle(); - - // disable button and textarea - button.setAttribute("disabled", "disabled"); - pause_button.setAttribute("disabled", "disabled"); - target_textarea.setAttribute("disabled", "disabled"); - document.getElementById("reset_button").setAttribute("disabled", "disabled"); - - DE_locked = true; -} -function not_working(fadein=true) -{ - document.getElementById("reset_button").removeAttribute("disabled"); - // 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"); - - if (fadein) { - if ($("#ui_type").val() == "t") { - $("#textboxes").fadeTo(200,1); - } else { - $("#derivation_editor").fadeTo(200,1); - } - } - - // hide 'working' message - $("#status").fadeToggle(); - - // enable buttons - document.getElementById("next").removeAttribute("disabled"); - document.getElementById("pause_button").removeAttribute("disabled"); - document.getElementById("reset_button").removeAttribute("disabled"); - - DE_locked = false; -} - -/* - * next button - * - */ -function Next() -{ - // 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"); - - working(); - - // 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"; - - // post edit - var post_edit = ''; - var send_data = new Object(); - - // extract data from interfaces - if (ui_type == 'g') { - data_s = DE_extract_data(); - if (!data_s) { - not_working(); - return; - } - send_data = JSON.parse(data_s); - 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); - send_data["post_edit"] = post_edit; - send_data['type'] = 't'; - } - - send_data["key"] = key; - - // send data - if (oov_correct.value=="false" && post_edit != "") { - send_data["EDIT"] = true; - send_data["duration"] = Timer.get(); - send_data["source_value"] = encodeURIComponent(source.value); - // compose request - // no change? - if (post_edit == last_post_edit.value) { - send_data["nochange"] = true; - } - // update document overview - document.getElementById("seg_"+(current_seg_id.value)+"_t").innerHTML=decodeURIComponent(post_edit); - // OOV correction mode - } else if (oov_correct.value=="true") { - send_data["OOV"] = true; - var l = document.getElementById("oov_num_items").value; - var src = []; - var tgt = []; - for (var i=0; i").replace(/###/g,"")); - for (var i=0; i 0) { - removeClass(document.getElementById("seg_"+(id-1)), "bold"); - } - if (translation) - target_textarea.rows = Math.round(translation.length/80+0.5); - //raw_source_textarea.rows = Math.round(raw_source.length/80+0.5); - target_textarea.focus(); - target_textarea.selectionStart = 0; - target_textarea.selectionEnd = 0; - - // remember aux data in DOM - current_seg_id.value = id; - source.value = src; - last_post_edit.value = translation; - - // confirm to server - var xhr_confirm = CreateCORSRequest('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(" ")); - last_post_edit.value = x; - document.getElementById("original_svg").value = DE_get_raw_svg_data(); - } - - // start timer - Timer.start(); - } - }; - - xhr.send(JSON.stringify(send_data)); // send 'next' request - - return; -} - -/* - * init text interface - * - */ -function init_text_editor() -{ - document.getElementById("target_textarea").value = ""; - document.getElementById("target_textarea").setAttribute("disabled", "disabled"); - - return false; -} - -/* - * init site - * - */ -window.onload = function () -{ - // reset vars - document.getElementById("source").value = ""; - document.getElementById("current_seg_id").value = ""; - document.getElementById("paused").value = ""; - document.getElementById("oov_correct").value = false; - document.getElementById("displayed_oov_hint").value = false; - document.getElementById("init").value = ""; - document.getElementById("reset_button").setAttribute("disabled", "disabled"); - - not_working(); - - ui_type = document.getElementById("ui_type").value; - - // 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"; - } -}; - -- cgit v1.2.3