Improve /part/problem view

static/css/adc2019.css

@@ -80,3 +80,18 @@ body{
 #content-right h4.inline-heading{
     display: inline-block;
 }
+
+#content-right h4#problem-status-title{
+    vertical-align: bottom;
+    margin-right: 10px;
+}
+
+#content-right #solution-list-container{
+    height: calc(100vh - 55px);
+    overflow-y: scroll;
+}
+
+#content-right #solution-list-container table>tbody>tr,
+#content-right #solution-list-container table>tbody>tr>td{
+    cursor: pointer;
+}

static/js/adc2019.js

@@ -26,6 +26,13 @@ class StatusView {
             _this.container.find('.start-button').click(()=>{
                 _this.start_solver();
             });
+
+            _this.container.find('.solution-detail-row td').click((e) => {
+                var solution_id = $(e.target).parent("tr").data("solution-id");
+                var problem_name = $(e.target).parent("tr").data("problem");
+                var viewer_url = "/viewer/solution#" + problem_name + "/" + solution_id;
+                window.open(viewer_url, "_blank");
+            })
         });
     }
 
@@ -46,8 +53,13 @@ class StatusView {
             var request_id = d['request_id'];
             var timeout = d['timeout'];
 
-            _this.container.find('#solver-processing-modal').modal('show');
+            _this.container.find('#solver-processing-modal').modal({
+                backdrop: 'static',
+                keyboard: false,
+                show: true
+            });
             _this.container.find('#solver-processing-modal').on('hidden.bs.modal', function(e){
+                console.log(e);
                 _this.show_problem();
             })
 
@@ -69,7 +81,6 @@ class StatusView {
             console.log(status);
             if(status == 'done'){
                 _this.request_refresh_timer = null;
-                // _this.show_problem();
             }else{
                 _this.request_refresh_timer = setTimeout(_this.get_request_status(request_id, timeout), 1000);
             }

templates/part_problem_status.html

 <div>
-    <!-- <div class="col-4"> -->
-    <h3> 【{{problem.name}}】</h3>
+    <h4 class='inline-heading' id='problem-status-title'>{{problem.name}}</h4>
     {#% # if localmode %#}
-    <p>
-        <button class="btn btn-primary btn-lg start-button" type="button" data-qname="{{problem.name}}">Start</button>
-        <button class="btn btn-danger btn-lg stop-button" type="button" data-qname="all">Stop</button>
-        <button class="btn btn-info btn-lg save-button" type="button" data-qname="{{problem.name}}">Save</button>
-        <button class="btn btn-success btn-lg submit-button" type="button" data-qname="{{problem.name}}">Up</button>
-    </p>
+    <button class="btn btn-primary btn-lg start-button" type="button" data-qname="{{problem.name}}">Start</button>
+    <!-- <button class="btn btn-danger btn-lg stop-button" type="button" data-qname="all">Stop</button> -->
+    <button class="btn btn-info btn-lg save-button" type="button" data-qname="{{problem.name}}">Save</button>
+    <button class="btn btn-success btn-lg submit-button" type="button" data-qname="{{problem.name}}">Up</button>
     {#% else %#}
     <!-- [View Only] -->
     {#% endif %#}
 </div>
 
-<div>
+<div id='solution-list-container'>
     <h4>処理結果一覧</h4>
     <table class="table table-bordered table-striped">
-        <tr>
-            <th>Timestamp</th>
-            <th>Client</th>
-            <th>Score</th>
-        </tr>
-        {% for k, v in problem.get_solutions().items() %}
-        {#% if (qdata.best_json == k) and (v.answer != "") %#}
-        <!-- <tr class="answer-detail-row submit-answer" data-json="{#{k}#}" data-qname="{#{qname}#}"> -->
-        {#% else %#}
-        <tr class="solution-detail-row" data-json="{{k}}" data-qname="{{problem.name}}">
-        {#% endif %#}
-            <td>{{v.timestamp_str}}</td>
-            <td>{{v.worker}}</td>
-            <td>
-                {#% if v.nlcheck == -1 %#}
-                <!-- Not solved -->
-                {#% else %#}
-                {#{v.nlcheck}#}
-                {#% endif %#}
-            </td>
-        </tr>
-        {% endfor %}
+        <thead>
+            <tr>
+                <th>Timestamp</th>
+                <th>Client</th>
+                <th>Score</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for k, v in problem.get_solutions().items() %}
+            {#% if (qdata.best_json == k) and (v.answer != "") %#}
+            <!-- <tr class="answer-detail-row submit-answer" data-json="{#{k}#}" data-qname="{#{qname}#}"> -->
+            {#% else %#}
+            <tr class="solution-detail-row" data-solution-id="{{k}}" data-problem="{{problem.name}}">
+            {#% endif %#}
+                <td>{{v.timestamp_str}}</td>
+                <td>{{v.worker}}</td>
+                <td>
+                    {#% if v.nlcheck == -1 %#}
+                    <!-- Not solved -->
+                    {#% else %#}
+                    {#{v.nlcheck}#}
+                    {#% endif %#}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
     </table>
 </div>
 
@@ -46,16 +47,16 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="solver-processing-modal-title">{{problem.name}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
-                </button>
+                </button> -->
             </div>
             <div class="modal-body" id="request-status-container">
             処理中...
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary">Save changes</button>
+                <button type="button" class="btn btn-danger">Stop</button>
+                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>