Improve UI

comm/server/main.py

@@ -292,6 +292,7 @@ def get_board_data():
     json_name = request.form['jname']
 
     lines = questions[qname]['answers'][json_name]['answer'].split("\n")
+    quality = questions[qname]['answers'][json_name]['nlcheck']
 
     # board_size = [int(v) for v in lines[1].rstrip().split()[1].split("X")]
     board_size = [int(v) for v in questions[qname]['board_size'].split("X")]
@@ -382,6 +383,7 @@ def get_board_data():
     res = {
         'line': lines,
         'board': board_size,
+        'quality': quality,
     }
 
     return json.dumps(res)

comm/server/static/css/pynq-manager.css

@@ -40,6 +40,9 @@ body{
 #question-table-wrapper tr.question-row.q-selected{
     background-color: rgba(200, 100, 100, .3);
 }
+#question-table-wrapper tr.question-row:hover{
+    background-color: rgba(200, 100, 100, .15);
+}
 
 #client-control-pane{
     height: 330px;
@@ -58,3 +61,13 @@ body{
 #question-control-pane h3{
     display: inline-block;
 }
+
+#client-control-pane tr.answer-detail-row, 
+#client-control-pane tr.answer-detail-row td{
+    cursor: pointer;
+}
+
+#client-control-pane tr.answer-detail-row:hover{
+    background-color: rgba(200, 100, 100, .15);
+}
+

comm/server/static/js/pynq-manager.js

@@ -171,7 +171,7 @@ $(function(){
                 var json_name = $(this).parent("tr").data("json");
                 var qname = $(this).parent("tr").data("qname");
                 var viewer_url = "/board-viewer#" + qname + "," + json_name
-                window.open(viewer_url, null);
+                window.open(viewer_url, "_blank");
             })
         });
     }

comm/server/templates/board-viewer.html

@@ -189,6 +189,7 @@ $(function(){
             $("#board_info_size").text(board_info);
             $("#board_info_linenum").text("" + Object.keys(line_data).length);
             $("#board_info_maxlength").text("" + max_line_length);
+            $("#board_info_quality").text("" + data['quality']);
 
             $("#viewer_status").text("Complete.");
 
@@ -205,6 +206,7 @@ $(function(){
             $("#board_info_size").text("...");
             $("#board_info_linenum").text("...");
             $("#board_info_maxlength").text("...");
+            $("#board_info_quality").text("...");
             controls.reset();
             var _data = hash.split(",")
             $("#board_info_qname").text("" + _data[0]);
@@ -281,6 +283,9 @@ body {
 
         <dt>Max line length</dt>
         <dd><span id="board_info_maxlength"></span></dd>
+
+        <dt>Quality</dt>
+        <dd><span id="board_info_quality"></span></dd>
     </div>
 
     <div id="view_area_wrapper">