Use hash to show each question status and support for client icons (#8)

.gitignore

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

comm/server/main.py

@@ -28,32 +28,10 @@ questions = None
 clients = None
 current_seed = 1
 
-def update_answer_list(qname):
-
-    global app_args
-    global questions
-
-    questions[qname]['answers'] = []
-
-    _folder_name = os.path.splitext(qname)[0]
-    _answers_path = "{}/{}".format(app_args['out'], _folder_name)
-    if os.path.isdir(_answers_path):
-        answer_log_file = glob.glob("{}/*.json".format(_answers_path))
-        answer_log_file.sort()
-        answer_log_file.reverse()
-
-        for v2 in answer_log_file:
-            with open(v2, "r") as fp:
-                answer_log = json.load(fp)
-            questions[qname]['answers'].append(answer_log)
-
-@app.before_request
-def before_request():
+def load_questions():
     global app_args
     global questions
-    global clients
 
-    if questions is None:
     question_path = os.path.abspath(app_args["question"])
     question_list = glob.glob("{}/NL_*.txt".format(question_path))
     question_list.sort()
@@ -103,12 +81,30 @@ def before_request():
             except KeyError as e:
                 pass
 
-    if clients is None:
+def update_answer_list(qname):
 
-        with open(app_args["client"], "r") as fp:
-            _clients = fp.readlines()
+    global app_args
+    global questions
 
-        clients = [v.rstrip() for v in _clients]
+    questions[qname]['answers'] = []
+
+    _folder_name = os.path.splitext(qname)[0]
+    _answers_path = "{}/{}".format(app_args['out'], _folder_name)
+    if os.path.isdir(_answers_path):
+        answer_log_file = glob.glob("{}/*.json".format(_answers_path))
+        answer_log_file.sort()
+        answer_log_file.reverse()
+
+        for v2 in answer_log_file:
+            with open(v2, "r") as fp:
+                answer_log = json.load(fp)
+            questions[qname]['answers'].append(answer_log)
+
+@app.before_request
+def before_request():
+    global app_args
+
+    g.local_mode = (request.remote_addr == "127.0.0.1")
 
 @app.route("/post", methods=["POST"])
 def post():
@@ -237,7 +233,8 @@ def solve_questions(qname, qstr):
     request_time = time.time()
 
     for c in clients:
-        _th = threading.Thread(name=c, target=worker, args=(c, qname, qstr, current_seed, request_time))
+        client_addr = c[0]
+        _th = threading.Thread(name=client_addr, target=worker, args=(client_addr, qname, qstr, current_seed, request_time))
         _th.start()
         threads.append(_th)
         current_seed += 1
@@ -269,7 +266,8 @@ def get_clients():
     res = OrderedDict()
 
     for c in clients:
-        res[c] = "http://{}".format(c)
+        client_ip = c[0]
+        res[client_ip] = "http://{}".format(client_ip)
 
     return json.dumps(res)
 
@@ -289,7 +287,7 @@ def client_table():
     global app_args
     global clients
 
-    return render_template("part_client_table.html", clients=clients)
+    return render_template("part_client_table.html", clients=clients, local_mode=g.local_mode)
 
 @app.route("/get_question_status")
 def question_status():
@@ -314,22 +312,42 @@ def index():
 
     question_path = os.path.abspath(app_args["question"])
 
+    print(g.local_mode)
+
     return render_template("index.html", questions=questions, question_path=question_path, clients=clients)
 
 def main(args):
     raise NotImprementedError()
 
+def init_system():
+
+    global app_args
+    global questions
+    global clients
+    
+    if questions is None:
+        load_questions()
+
+    if clients is None:
+
+        with open(app_args["client"], "r") as fp:
+            _clients = fp.readlines()
+
+        clients = [v.rstrip().split() for v in _clients]
+
 if __name__ == "__main__":
 
     parser = argparse.ArgumentParser(description="PYNQ control panel.")
     parser.add_argument("-c", "--client", action="store", type=str, default=None, required=True, help="Client list.")
     parser.add_argument("-q", "--question", action="store", type=str, default="./problems", help="Path to the question folder.")
     parser.add_argument("-o", "--out", action="store", type=str, default="./answers", help="Path to the output folder.")
-    parser.add_argument("-t", "--timeout", action="store", type=int, default=300, help="Timeout.")
     parser.add_argument("--debug", action="store_true", default=False, help="Debug mode.")
     args = vars(parser.parse_args())
     app_args = args
 
+    init_system()
+
     if args["debug"]:
         app.debug = True
     app.run(host='0.0.0.0', threaded=True)
+

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

@@ -101,13 +101,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",
@@ -145,12 +151,15 @@ $(function(){
         });
     }
 
-    refresh_question_table();
-    refresh_client_table();
+    $(window).on('hashchange', function(){
+        var hash = location.hash.replace("#", "");
+        if(hash == ""){
+            show_client_table();
+        }else{
+            show_question_status(hash);
+        }
+    }).trigger('hashchange');
 
-    $("#view-server-status-button").click(function(){
-        refresh_client_table();
-        return false;
-    });
+    refresh_question_table();
 
 });

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 %}
+            &nbsp;<img src="static/client-icon/{{c[3]}}" alt="{{c[2]}}" height="30" />
+            {% 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 %}