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