Add the status view when solving a problem

main.py

@@ -32,6 +32,15 @@ def webui_template_workers():
     else:
         return abort(404)
 
+@webui.route('/part/request/<request_id>')
+def webui_part_request_status(request_id=None):
+    if (adc2019system.role is not None) and (adc2019system.role.type == 'host'):
+        request_status = adc2019system.role.get_request_status(float(request_id))
+        print(request_status)
+        return render_template('part_request_status.html', status=request_status)
+    else:
+        return abort(404)
+
 @webui.route('/template/question/<name>')
 def webui_template_question_status(name=None):
 

roles/host.py

@@ -219,11 +219,28 @@ class Request(object):
             status = 'timeout'
         else:
             status = 'processing'
+        
+        if self.broadcast_time is None:
+            progress = 0,
+        else:
+            progress_question =  response_count / worker_count * 100
+            progress_time = (time.time() - self.broadcast_time) / self.timeout * 100
+            progress = min(100, max(progress_question, progress_time))
+        
+        worker_list = self.worker_manager.get_workers().keys()
+        worker_status = dict()
+        for v in all_workers:
+            if v in self.response:
+                worker_status[v] = 'Processed'
+            else:
+                worker_status[v] = 'Waiting for response'
 
         return {
             'status': status,
             'workers': worker_count,
-            'solutions': response_count
+            'solutions': response_count,
+            'progress': progress,
+            'worker_status': worker_status
             }
 
     def broadcast(self):

static/js/adc2019.js

@@ -5,6 +5,7 @@ class StatusView {
     constructor(selector) {
         this.container = $(selector);
         this.question_key = null;
+        this.request_refresh_timer = null;
     }
 
     // 問題詳細画面を表示
@@ -42,8 +43,50 @@ class StatusView {
             contentType: 'application/json'
         }).done((d) => {
             // TODO: タイムアウトになる時間まで，モーダル表示させる
-            console.log(d);
+            var request_id = d['request_id'];
+            var timeout = d['timeout'];
+
             _this.container.find('#solver-processing-modal').modal('show');
+            _this.container.find('#solver-processing-modal').on('hidden.bs.modal', function(e){
+                _this.show_question();
+            })
+
+            _this.get_request_status(request_id, timeout);
+        });
+    }
+
+    get_request_status(request_id, timeout){
+        var _this = this;
+        // $.ajax({
+        //     type: 'POST',
+        //     dataType: 'json',
+        //     url: '/api/request/status',
+        //     data: JSON.stringify({
+        //         'request_id': request_id
+        //     }),
+        //     contentType: 'application/json'
+        // }).done((d) => {
+        //     if(d['status'] != 'done'){
+        //         _this.request_refresh_timer = setTimeout(_this.get_request_status(request_id, timeout), 1000);
+        //     }
+        //     console.log(d);
+        // });
+        $.ajax({
+            type: 'GET',
+            dataType: 'html',
+            url: '/part/request/' + request_id
+        }).done((d) => {
+            _this.container.find('#request-status-container').empty();
+            _this.container.find('#request-status-container').html(d);
+
+            status = $(d).find('#request-status-value').text();
+            console.log(status);
+            if(status == 'done'){
+                _this.request_refresh_timer = null;
+                // _this.show_question();
+            }else{
+                _this.request_refresh_timer = setTimeout(_this.get_request_status(request_id, timeout), 1000);
+            }
         });
     }
     

templates/part_question_status.html

@@ -11,29 +11,6 @@
     {#% else %#}
     <!-- [View Only] -->
     {#% endif %#}
-    <!-- <div class="col-8">
-        <p>処理結果</p>
-        <table class="table table-bordered">
-            <tr>
-                <th>Client (Solver)</th>
-                <th>Status</th>
-            </tr>
-            {% for c in solvers %}
-            <tr>
-                <td>
-                    {% if c|length > 3 %}
-                    <img src="static/client-icon/{{c[3]}}" alt="{{c[2]}}" height="30" />&nbsp;
-                    {% endif %}
-                    {{c[0]}}
-                    {% if c|length > 2 %}
-                    &nbsp;({{c[2]}})
-                    {% endif %}
-                </td>
-                <td>{{qdata.solver[c[0]]}}</td>
-            </tr>
-            {% endfor %}
-        </table>
-    </div> -->
 </div>
 
 <div>
@@ -73,7 +50,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" id="request-status-container">
             処理中...
             </div>
             <div class="modal-footer">

templates/part_request_status.html

+<div>
+    <p>処理結果:<span id='request-status-value'>{{status.status}}</span></p>
+    <table class="table table-bordered">
+        <tr>
+            <th>Worker (Solver)</th>
+            <th>Status</th>
+        </tr>
+        {% for k, v in status['worker_status'].items() %}
+        <tr>
+            <td>{{k}}</td>
+            <td>{{v}}</td>
+        </tr>
+        {% endfor %}
+    </table>
+</div>