ignore empty query values

[mkws-moved-to-github.git] / examples / htdocs / tester.html

diff --git a/examples/htdocs/tester.html b/examples/htdocs/tester.html
index 89ec1d7..1ad711f 100644 (file)
--- a/examples/htdocs/tester.html
+++ b/examples/htdocs/tester.html
@@ -8,7 +8,6 @@
 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
 <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
 <link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
-<link rel="stylesheet" type="text/css" href="mkws-widget-ru.css" />
 
 <script type="text/javascript">
   var mkws_config = {
@@ -41,7 +40,6 @@
 <script type="text/javascript" src="src/mkws-popup.js"></script>
 
 <script type="text/javascript" src="mkws-widget-credo.js"></script>
-<script type="text/javascript" src="mkws-widget-ru.js"></script>
 
 <style>
 .dialog > textarea {
@@ -53,7 +51,7 @@ html {
   height: 100%;
 }
 body {
-  background-color: #888892;
+  background-color: #bbbbbb;
   margin: 0;
   padding: 0;
   display: flex;
@@ -63,9 +61,22 @@ body {
 header {
   font-size: 1.3em;
 }
-#top-bar, #current-bar {
-  padding: .5em;
+header button, #note > input {
+  margin-left: 1em;
+  border-radius: 4px;
+  background-color: #4368a1;
+  color: #dbe9ff;
+  font: inherit;
+  font-weight: normal;
+  border: 1px solid #7492c3;
+  padding: 0.15em 0.25em;
+}
+header button:hover, header button:active, header button:focus {
+  background-color: #2f5591;
+}
+#top-bar, #current-bar, #note {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
@@ -77,18 +88,15 @@ header {
   background-color: #54d8a8;
   color: #002868;
 }
-header button {
-  margin-left: 1em;
-  border-radius: 4px;
-  background-color: #4368a1;
-  color: #dbe9ff;
-  font: inherit;
-  font-weight: normal;
-  border: 1px solid #7492c3;
-  padding: 0.15em 0.25em;
+#note {
+  width: 100%;
+  padding: .5em;
 }
-header button:hover, header button:active, header button:focus {
-  background-color: #2f5591;
+#note > input {
+  flex: 1;
+  background-color: #7de3be;
+  border-color: #7ed6b6;
+  color: #002868;
 }
 #maybe {
   background-color: #F0AD4E;
@@ -125,12 +133,12 @@ header button:hover, header button:active, header button:focus {
   font-size: 110%;
 }
 #settings, #judiciary {
-  flex: 1;
+  padding: .5em;
   display: flex;
   align-items: center;
 }
 #results, #query-info {
-  flex: 1;
+  padding: .5em;
   display: flex;
   text-align: right;
   align-items: center;
@@ -141,10 +149,13 @@ header button:hover, header button:active, header button:focus {
 }
 #test-area {
   flex: 1;
-  padding: 1em;
+  padding: 2em;
   display: flex;
   justify-content: center;
-  align-items: center;
+  overflow: auto;
+}
+#test-subject {
+  margin: auto;
 }
 #results-table {
   flex: 1;
@@ -180,6 +191,7 @@ header button:hover, header button:active, header button:focus {
     <span id="settings">
       Settings:
       <button id="widget-markup-button">Widget</button>
+      <button id="mkws-config-button">MKWS config</button>
       <button id="queries-button">Queries</button>
     </span>
     <span id="results">
@@ -200,11 +212,17 @@ header button:hover, header button:active, header button:focus {
   <span id="query-info">
     <span id="count"></span>
   </span>
+  <span id="note">
+    Note: <input type="text"></input>
+  </span>
 </header>
 
 <div id="widget-markup" class="dialog" title="Widget markup">
   <textarea></textarea>
 </div>
+<div id="mkws-config" class="dialog" title="MKWS configuration">
+  <textarea></textarea>
+</div>
 <div id="queries" class="dialog" title="Queries">
   <textarea></textarea>
 </div>
@@ -222,19 +240,41 @@ header button:hover, header button:active, header button:focus {
 <script>
 (function () { // wrapper
 // Initial data
-this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
-$("#queries > textarea").html(this.queries.join("\n"));
+this.queries = ["sushi", "wurst", "tea", "latte"];
 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
+if (localStorage.getItem('mkwstest-queries')) {
+  this.queries = JSON.parse(localStorage.getItem('mkwstest-queries'));
+}
+if (localStorage.getItem('mkwstest-widget-markup')) {
+  this.widgetMarkup = localStorage.getItem('mkwstest-widget-markup');
+}
+if (localStorage.getItem('mkwstest-mkws-config')) {
+  mkws_config = JSON.parse(localStorage.getItem('mkwstest-mkws-config'));
+}
+$("#queries > textarea").html(this.queries.join("\n"));
 $("#widget-markup > textarea").html(this.widgetMarkup);
+$("#mkws-config > textarea").html(JSON.stringify(mkws_config));
+mkws.setMkwsConfig(mkws_config);
+mkws.authenticated = false;
+mkws.authenticating = false;
 
 this.results = {};
-var next;
+var next = 0;
+if (localStorage.getItem('mkwstest-results')) {
+  this.results = JSON.parse(localStorage.getItem('mkwstest-results'));
+}
+if (localStorage.getItem('mkwstest-next') !== null) {
+  next = parseInt(localStorage.getItem('mkwstest-next'));
+}
+
 var context = this;
 
 var showNext = function () {
   if (next <  this.queries.length) {
+    $('#note > input').val("");
     $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
     $('#query').html('"' + this.queries[next] + '"');
+    localStorage.setItem("mkwstest-next", next);
     next++;
     $('#count').html(next + " / " + this.queries.length);
     mkws.init('#test-subject');
@@ -250,7 +290,8 @@ var startEval = function () {
 }
 var judge = function (e) {
   var query = $('#test-subject > div').attr('autosearch');
-  context.results[query] = {judgement: $(this).html()};
+  context.results[query] = {judgement: $(this).html(), note: $("#note > input").val() || ""};
+  localStorage.setItem("mkwstest-results", JSON.stringify(context.results));
   showNext();
 }
 
@@ -268,6 +309,7 @@ $(".dialog").dialog({
 // Markup dialog
 var updateMarkup = function () {
   context.widgetMarkup = $("#widget-markup > textarea").val();
+  localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
   startEval();
 }
 $("#widget-markup-button").click(function () {
@@ -278,9 +320,28 @@ $("#widget-markup").dialog("option", "buttons", [
   {text: "Cancel", click: function() { $(this).dialog("close"); }}   
 ]);
 
+// MKWS config dialog
+var updateConfig = function () {
+  mkws.setMkwsConfig(JSON.parse($("#mkws-config > textarea").val()));
+  mkws.authenticated = false;
+  mkws.authenticating = false;
+  localStorage.setItem("mkwstest-mkws-config", $("#mkws-config > textarea").val());
+  startEval();
+}
+$("#mkws-config-button").click(function () {
+  $("#mkws-config").dialog("open");
+});
+$("#mkws-config").dialog("option", "buttons", [
+  {text: "Start new evaluation", click: updateConfig},
+  {text: "Cancel", click: function() { $(this).dialog("close"); }}   
+]);
+
 // Queries dialog
 var updateQueries = function () {
   context.queries = $("#queries > textarea").val().split("\n");
+  // ignore empty query values
+  context.queries = $.grep(context.queries, function (query, index) { return query.match(/^\s*\S+/) } );
+  localStorage.setItem("mkwstest-queries", JSON.stringify(context.queries));
   startEval();
 }
 $("#queries-button").click(function () {
@@ -299,30 +360,30 @@ $("#results-csv-button").click(function () {
   $("#results-csv").dialog("open");
 });
 $("#results-table").dialog("option", "open", function () {
-  var html = "<tr><th>Query</th><th>Relevant?</th><tr>";
+  var html = "<tr><th>Query</th><th>Relevant?</th><th>Note</th><tr>";
   for (var i = 0; i < context.queries.length; i++) {
     var q = context.queries[i];
     var r = context.results;
     if (r[q]) {
-      html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td></tr>\n";
+      html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td><td>" + r[q].note + "</td></tr>\n";
     }
   } 
   $("#results-table > table").html(html);
 });
 $("#results-csv").dialog("option", "open", function () {
-  var csv = "Query|Relevant?\n";
+  var csv = "Query|Relevant?|Note\n";
   for (var i = 0; i < context.queries.length; i++) {
     var q = context.queries[i];
     var r = context.results;
     if (r[q]) {
-      csv += [q, r[q].judgement].join("|") + "\n";
+      csv += [q, r[q].judgement, r[q].note].join("|") + "\n";
     }
   } 
   $("#results-csv > textarea").html(csv);
 });
 
 $('button.judgement').click(judge);
-startEval();
+showNext();
 })();// wrapper
 </script>