interface

author: Patrick Simianer <p@simianer.de> 2015-06-26 15:20:55 +0200
committer: Patrick Simianer <p@simianer.de> 2015-06-26 15:20:55 +0200
commit: a29b90cba17c4ef5b03b505195410c6287cab774 (patch)
tree: 64df7d2ef761b642898da1186ab7ea934e1cd683
parent: 135d703cf532035048808c2b865344e6a7c20264 (diff)
6 files changed, 135 insertions, 82 deletions
diff --git a/footer.php b/footer.php
new file mode 100644
index 0000000..32fd415
--- /dev/null
+++ b/footer.php
@@ -0,0 +1,9 @@
+<!-- Footer -->
+<p id="footer">
+  &copy;2015 Heidelberg University/Institute for Computational Linguistics
+</p>
+<!-- /Footer -->
+
+</div>
+<!-- /Wrapper -->
+
diff --git a/header.php b/header.php
new file mode 100644
index 0000000..d7b84eb
--- /dev/null
+++ b/header.php
@@ -0,0 +1,10 @@
+<!-- Wrapper -->
+<div id="wrapper">
+
+<!-- Header -->
+<div id="header">
+  <img id="uni" src="img/logo_neu_204x107.jpg" />
+  <img id="cl"  src="img/institut_cl.png" />
+</div>
+<!-- /Header -->
+
diff --git a/index.php b/index.php
index 3505eda..96478dd 100644
--- a/index.php
+++ b/index.php
@@ -1,88 +1,22 @@
 <html>
 <head>
   <meta charset="utf-8" />
-  <title>Post-editing application (key: <?php echo $_GET["key"]; ?></title>
+  <title>Post-editing application</title>
   <script src="lfpe.js"></script>
   <link rel="stylesheet" type="text/css" href="lfpe.css" />
 </head>
 
-<body onload="init()">
+<body onload="">
 
-<!-- Wrapper -->
-<div id="wrapper">
+<?php include("header.php"); ?>
 
-<!-- Header -->
-<div id="header">
-  <img id="uni" src="img/logo_neu_204x107.jpg" />
-  <img id="cl"  src="img/institut_cl.png" />
-</div>
-<!-- /Header -->
+<form method="get" action="interface.php">
+  Please enter your session key: <input type="text" name="key" />
+<input type="submit" value="Submit" />
+</form>
 
-<!-- Source and target -->
-<table>
-<tr>
-  <td align="right">Source:</td>
-  <td><textarea id="raw_source_textarea" name="source" cols="80" rows="1" disabled></textarea></td>
-</tr>
-<tr>
-  <td align="right">Target:</td>
-  <td><textarea id="target_textarea" name="target" cols="80" rows="1" onkeypress="catch_return(event)"></textarea></td>
-</tr>
-</table>
-<!-- /Source and target -->
+<?php include("footer.php"); ?>
 
-<!-- Next button -->
-<div>
-  <button id="pause_button" type="button" onclick="pause()">Pause</button>
-  <button id="next" type="button" onclick="Next()">Start/Continue</button>
-  <span id="status"><strong>Working</strong> <img src="img/ajax-loader-large.gif" width="20px" /></span>
-</div>
-<!-- /Next button -->
-
-<!-- Document overview -->
-<div>
-<strong>Document overview</strong>
-<table id="overview">
-<?php
-$j = file_get_contents($_GET["dir"]."/".$_GET["key"].".json"); # FIXME: get overview/state from database
-$a = json_decode($j);
-$i = 0;
-foreach($a->raw_source_segments as $s) {
-  if ($i <= $a->progress) {
-    echo "<tr id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$a->post_edits_raw[$i]."</td></tr>";
-  } else {
-    echo "<tr id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'></td></tr>";
-  }
-  $i += 1;
-}
-?>
-</table>
-</div>
-<!-- /Document overview -->
-
-<!-- Help -->
-<p id="help">
-<strong>Help</strong><br />
-Press the 'Next' to submit your post-edit and to request the next segment to translate
-(or just press enter when the 'Target' textarea is in focus).
-</p>
-<!-- /Help -->
-
-<!-- Footer -->
-<p id="footer">
-  &copy;2015 Heidelberg University/Institute for Computational Linguistics
-</p>
-<!-- /Footer -->
-
-</div>
-<!-- /Wrapper -->
-
-<!-- Data -->
-<textarea style="display:none" id="key"><?php echo $_GET['key']; ?></textarea>
-<textarea style="display:none" id="source"></textarea>
-<textarea style="display:none" id="current_seg_id">0</textarea>
-<textarea style="display:none" id="paused">0</textarea>
-<!-- /Data -->
 
 </body>
 </html>
diff --git a/interface.php b/interface.php
new file mode 100644
index 0000000..3505eda
--- /dev/null
+++ b/interface.php
@@ -0,0 +1,89 @@
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Post-editing application (key: <?php echo $_GET["key"]; ?></title>
+  <script src="lfpe.js"></script>
+  <link rel="stylesheet" type="text/css" href="lfpe.css" />
+</head>
+
+<body onload="init()">
+
+<!-- Wrapper -->
+<div id="wrapper">
+
+<!-- Header -->
+<div id="header">
+  <img id="uni" src="img/logo_neu_204x107.jpg" />
+  <img id="cl"  src="img/institut_cl.png" />
+</div>
+<!-- /Header -->
+
+<!-- Source and target -->
+<table>
+<tr>
+  <td align="right">Source:</td>
+  <td><textarea id="raw_source_textarea" name="source" cols="80" rows="1" disabled></textarea></td>
+</tr>
+<tr>
+  <td align="right">Target:</td>
+  <td><textarea id="target_textarea" name="target" cols="80" rows="1" onkeypress="catch_return(event)"></textarea></td>
+</tr>
+</table>
+<!-- /Source and target -->
+
+<!-- Next button -->
+<div>
+  <button id="pause_button" type="button" onclick="pause()">Pause</button>
+  <button id="next" type="button" onclick="Next()">Start/Continue</button>
+  <span id="status"><strong>Working</strong> <img src="img/ajax-loader-large.gif" width="20px" /></span>
+</div>
+<!-- /Next button -->
+
+<!-- Document overview -->
+<div>
+<strong>Document overview</strong>
+<table id="overview">
+<?php
+$j = file_get_contents($_GET["dir"]."/".$_GET["key"].".json"); # FIXME: get overview/state from database
+$a = json_decode($j);
+$i = 0;
+foreach($a->raw_source_segments as $s) {
+  if ($i <= $a->progress) {
+    echo "<tr id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$a->post_edits_raw[$i]."</td></tr>";
+  } else {
+    echo "<tr id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'></td></tr>";
+  }
+  $i += 1;
+}
+?>
+</table>
+</div>
+<!-- /Document overview -->
+
+<!-- Help -->
+<p id="help">
+<strong>Help</strong><br />
+Press the 'Next' to submit your post-edit and to request the next segment to translate
+(or just press enter when the 'Target' textarea is in focus).
+</p>
+<!-- /Help -->
+
+<!-- Footer -->
+<p id="footer">
+  &copy;2015 Heidelberg University/Institute for Computational Linguistics
+</p>
+<!-- /Footer -->
+
+</div>
+<!-- /Wrapper -->
+
+<!-- Data -->
+<textarea style="display:none" id="key"><?php echo $_GET['key']; ?></textarea>
+<textarea style="display:none" id="source"></textarea>
+<textarea style="display:none" id="current_seg_id">0</textarea>
+<textarea style="display:none" id="paused">0</textarea>
+<!-- /Data -->
+
+</body>
+</html>
+
diff --git a/lfpe.css b/lfpe.css
index 2f9b4c3..5c29042 100644
--- a/lfpe.css
+++ b/lfpe.css
@@ -4,8 +4,8 @@ html {
 }
 
 textarea {
-  font-size: 20px;
-  width: 100%
+  font-size: 2em;
+  width:     100%
 }
 
 button {
@@ -16,6 +16,8 @@ button {
 }
 
 .bold { font-weight:bold }
+.small { font-size:.8em }
+.xtrasmall { font-size:.6em }
 
 div#wrapper {
   margin:  2em;
@@ -29,7 +31,8 @@ span#status {
 }
 
 /* Document overview */
-table#overview { font-size:80% }
+div#overview_wrapper { margin-top:1em }
+table#overview { font-size:.8em }
 table#overview td.seg_text { width: 45% }
 table#overview td { border-bottom: 1px solid #000 }
 /* /Document overview */
@@ -44,7 +47,10 @@ p#footer {
 }
 
 /* Header */
-div#header { margin-bottom: 2em }
+div#header {
+  margin-bottom: 2em;
+  text-align:right
+}
 img#uni {}
 img#cl {
   margin-bottom:20px;
@@ -54,12 +60,15 @@ img#cl {
 /* /Header */
 
 /* Help */
-p#help {
+div#help {
+  margin-top: 2em;
   font-size:  .8em;
   width:      40%;
   color:      #ccc;
   text-align: justify
 }
-p#help:hover { color: #000 }
+div#help a { color:#ccc }
+div#help:hover { color: #000 }
+div#help:hover a { color: #000 }
 /* /Help */
 
diff --git a/lfpe.js b/lfpe.js
index 83257c1..49db94d 100644
--- a/lfpe.js
+++ b/lfpe.js
@@ -5,6 +5,7 @@ function init()
   document.getElementById("source").value = "";
   document.getElementById("current_seg_id").value = "";
   document.getElementById("paused").value = "";
+  document.getElementById("next").removeAttribute("disabled");
 
   return false;
 }
@@ -61,7 +62,8 @@ function Next()
   button.setAttribute("disabled", "disabled");
   target_textarea.setAttribute("disabled", "disabled");
 
-  var base_url = "http://coltrane.cl.uni-heidelberg.de:60666"; // FIXME: variable
+  var port = document.getElementById("port").value;
+  var base_url = "http://coltrane.cl.uni-heidelberg.de:"+port;
 
   var key = document.getElementById("key").value;
   next_url = base_url+"/next?key="+key;
@@ -140,7 +142,7 @@ function Next()
       source.value = src;
 
       // confirm to server
-      var xhr_confirm = CreateCORSRequest('get', "http://coltrane.cl.uni-heidelberg.de:60666/confirm");
+      var xhr_confirm = CreateCORSRequest('get', base_url+"/confirm");
       xhr_confirm.send(); // FIXME: handle errors
     }
   };
author	Patrick Simianer <p@simianer.de>	2015-06-26 15:20:55 +0200
committer	Patrick Simianer <p@simianer.de>	2015-06-26 15:20:55 +0200
commit	a29b90cba17c4ef5b03b505195410c6287cab774 (patch)
tree	64df7d2ef761b642898da1186ab7ea934e1cd683
parent	135d703cf532035048808c2b865344e6a7c20264 (diff)