Merge branch 'comm-server' into 'comm'

Merg comm-server

See merge request adc2018/adc2018-system!6

.gitignore

@@ -19,3 +19,7 @@ solver
 # Python files
 *.pyc
 __pycache__/
+
+# client-icons
+client-icon/
+

comm/server/README.md

-DAS2017 ADC サーバプログラム
+DAS218 ADC サーバプログラム
 ===
 
-DAS2017 アルゴリズムデザインコンテスト用サーバプログラム
+DAS2018 アルゴリズムデザインコンテスト用サーバプログラム
 
 ## Description
 
@@ -32,12 +32,6 @@ python3 main.py [--question XXXX] [--port XXXX] [--clients XXXX]
 
     <dt>-p, --port</dt>
     <dd>サーバのポート (デフォルト：5000)</dd>
-
-    <dt>-l, --line-num-th</dt>
-    <dd>処理を分岐させるライン数の閾値</dd>
-
-    <dt>-t, --timeout</dt>
-    <dd>PYNQで処理させるタイムアウト(秒)</dd>
 </dl>
 
 ## Comments

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

@@ -46,9 +46,13 @@ body{
     overflow-y: scroll;
 }
 
-#client-control-pane table th,
-#client-control-pane table td{
-    width: 50%;
+#client-control-pane table th.large-cell,
+#client-control-pane table td.large-cell{
+    width: 40%;
+}
+#client-control-pane table th.small-cell,
+#client-control-pane table td.small-cell{
+    width: 20%;
 }
 
 #question-control-pane h3{

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

@@ -74,7 +74,31 @@ var PynqManager = (function(){
 
     _p.sendStop = function(){
 
-        console.log("Not implemented!");
+        for (var key in this.clients){
+            (function(_key, _client){
+                var statusObj = $(".client-status-row[data-cname='"+_key+"']").find(".client-status-value").eq(0)
+                $.ajax({
+                    type: "POST",
+                    url: "/stop",
+                    dataType: "json",
+                    data: {
+                        "client": _client
+                    }
+                }).done(function(res){
+                    var answer = res["status"];
+                    var message = "";
+
+                    if (answer) {
+                        message = answer;
+                    }else{
+                        message = "Illegal response: " + res;
+                    }
+                    statusObj.text(message);
+                }).fail(function(){
+                    statusObj.text("Connection error");
+                });
+            })(key, this.clients[key]);
+        }
 
     }
 
@@ -101,13 +125,19 @@ $(function(){
                 $(".question-row").removeClass("q-selected");
                 $tr.addClass("q-selected");
                 var qname = $tr.data("qname");
-                show_question_status(qname);
+                // show_question_status(qname);
+                location.hash = "#" + qname;
                 return false;
             });
+
+            var hash = location.hash.replace("#", "");
+            if(hash != ""){
+                $(".question-row[data-qname='" + hash + "']").addClass("q-selected");
+            }
         });
     }
 
-    var refresh_client_table = function(){
+    var show_client_table = function(){
         $.ajax({
             type: "GET",
             dataType: "html",
@@ -115,16 +145,7 @@ $(function(){
         }).done(function(d){
             $("#client-control-pane").html("");
             $("#client-control-pane").html(d);
-
-            $.ajax({
-                type: "GET",
-                dataType: "json",
-                url: "/get_clients"
-            }).done(function(d){
-                pynqClients = d;
-                pm = PynqManager(pynqClients);
-                pm.getStatus();
-            });
+            pm.getStatus();
         });
     }
 
@@ -142,15 +163,30 @@ $(function(){
                 var qname = $(this).data("qname");
                 pm.sendQuestion(qname, after=refresh_question_table);
             });
+            $("#client-control-pane").find(".stop-button").eq(0).click(function(){
+                pm.sendStop();
+            });
         });
     }
 
+    $(window).on('hashchange', function(){
+        var hash = location.hash.replace("#", "");
+        if(hash == ""){
+            show_client_table();
+        }else{
+            show_question_status(hash);
+        }
+    }).trigger('hashchange');
+
     refresh_question_table();
-    refresh_client_table();
 
-    $("#view-server-status-button").click(function(){
-        refresh_client_table();
-        return false;
+    $.ajax({
+        type: "GET",
+        dataType: "json",
+        url: "/get_clients"
+    }).done(function(d){
+        pynqClients = d;
+        pm = PynqManager(pynqClients);
     });
 
 });

comm/server/templates/index.html

@@ -20,7 +20,7 @@
         <div class="row">
             <div class="col-5" id="question-control-pane">
                 <h3>問題一覧</h3>&nbsp;
-                <span><a href="#" id="view-server-status-button">クライアント状況</a></span>
+                <span><a href="/#" id="view-server-status-button">システム状況</a></span>
                 <div id="question-table-wrapper">
                     <p>Loading...</p>
                 </div>

comm/server/templates/part_client_table.html

-<h3>クライアント状況</h3>
+<h3>システム状況</h3>
+
+<h4>動作モード</h4>
+<p>
+{% if local_mode %}
+Normal Mode
+{% else %}
+Viewer Mode
+{% endif %}
+</p>
+
+<h4>クライアント</h4>
 <table class="table table-bordered" id="clients-table">
     <tr>
-        <th>クライアント名</th>
-        <th>ステータス</th>
+        <th class="">Client</th>
+        <th class="">Role</th>
+        <th class="">Status</th>
     </tr>
     {% for c in clients %}
-    <tr class="client-status-row" data-cname="{{c}}">
-        <td class="client-status-name">{{c}}</td>
+    <tr class="client-status-row" data-cname="{{c[0]}}">
+        <td class="client-status-name">
+            {% 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 class="">{{c[1]}}</td>
         <td class="client-status-value"></td>
     </tr>
     {% endfor %}

comm/server/templates/part_question_status.html

 <div class="row">
-    <div class="col-6">
-        <h3>問題 【{{qname}}】</h3>
+    <div class="col-4">
+        <h3> 【{{qname}}】</h3>
         <p>
             <button class="btn btn-primary btn-lg start-button" type="button" data-qname="{{qname}}">Start</button>
+            <button class="btn btn-danger btn-lg stop-button" type="button" data-qname="all">Stop</button>
         </p>
     </div>
-    <div class="col-6">
+    <div class="col-8">
         <p>処理結果</p>
         <table class="table table-bordered">
             <tr>
-                <th>クライアント</th>
+                <th>Client (Solver)</th>
                 <th>Status</th>
             </tr>
-            {% for c in clients %}
+            {% for c in solvers %}
             <tr>
-                <td>{{c}}</td>
+                <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></td>
             </tr>
             {% endfor %}
@@ -33,7 +42,7 @@
         {% for v in qdata.answers %}
         <tr>
             <td>{{v.timestamp}}</td>
-            <td>{{v.client}}</td>
+            <td>{{v.solver}}</td>
             <td>{{v.nlcheck}}</td>
         </tr>
         {% endfor %}