Commit b33ac986 authored by Kento HASEGAWA's avatar Kento HASEGAWA
Browse files

Improve UI

parent 96cd20b6

comm/server/static/css/bootstrap.min.css.map

0 → 100644
+1 −0

File added.

Preview size limit exceeded, changes collapsed.

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

0 → 100644
+52 −0
Changes for comm/server/static/css/pynq-manager.css: 52 added lines, 0 removed lines.
Original line number Diff line number Diff line 
html, body{

    /*width: 800px;*/

    /*height: 500px;*/

    font-size: 11px;

    overflow: hidden;

}

body{

    margin-top: 20px;

}



/* scrollbar settings */

::-webkit-scrollbar{

    width: 30px;

    border: 1px solid rgba(0, 0, 50, .2);

}

::-webkit-scrollbar-thumb{

    background-color: rgba(0, 0, 50, .5);

}



#question-table-wrapper{

    height: 350px;

    overflow-y: scroll;

    overflow-x: hidden;

}



#question-table-wrapper th.large-cell,

#question-table-wrapper td.large-cell{

    width: 24%;

}

#question-table-wrapper th.small-cell,

#question-table-wrapper td.small-cell{

    width: 14%;

}



#question-table-wrapper tr.question-row,

#question-table-wrapper tr.question-row td{

    cursor: pointer;

}



#question-table-wrapper tr.question-row.q-selected{

    background-color: rgba(200, 100, 100, .3);

}



#client-control-pane{

    height: 350px;

    overflow: scroll;

}



#client-control-pane table th,

#client-control-pane table td{

    width: 50%;

}

comm/server/static/js/bootstrap.bundle.min.js.map

0 → 100644
+1 −0

File added.

Preview size limit exceeded, changes collapsed.

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

+80 −0
Changes for comm/server/static/js/pynq-manager.js: 80 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -81,3 +81,83 @@ var PynqManager = (function(){ 


    return PynqManager;

})();





$(function(){



    var pynqClients = {}

    var pm = null;



    var refresh_question_table = function(){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_question_table"

        }).done(function(d){

            $("#question-table-wrapper").find("#question-table").remove();

            $("#question-table-wrapper").html(d);



            $(".show-question-status-button").click(function(){

                var qname = $(this).data("qname");

                show_question_status(qname);

                return false;

            });



            $(".question-row td").click(function(){

                var $tr = $(this).parent("tr.question-row");

                $(".question-row").removeClass("q-selected");

                $tr.addClass("q-selected");

                var qname = $tr.data("qname");

                show_question_status(qname);

                return false;

            });

        });

    }



    var refresh_client_table = function(){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_client_table"

        }).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();

            });

        });

    }



    var show_question_status = function(qname){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_question_status",

            data: {qname: qname}

        }).done(function(d){

            $("#client-control-pane").html("");

            $("#client-control-pane").html(d);



            $("#client-control-pane").find(".start-button").eq(0).click(function(){

                var qname = $(this).data("qname");

                pm.sendQuestion(qname, after=refresh_question_table);

            });

        });

    }



    refresh_question_table();

    refresh_client_table();



    $("#view-server-status-button").click(function(){

        refresh_client_table();

        return false;

    });



});

comm/server/templates/index.html

+5 −116
Changes for comm/server/templates/index.html: 5 added lines, 116 removed lines.
Original line number Diff line number Diff line
@@ -6,134 +6,24 @@ 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/css/pynq-manager.css">

    <script src="/static/js/jquery.min.js"></script>

    <script src="/static/js/bootstrap.bundle.min.js"></script>

    <script src="/static/js/pynq-manager.js"></script>

<style>

html, body{

    /*width: 800px;*/

    /*height: 500px;*/

    font-size: 11px;

    overflow: hidden;

}

body{

    margin-top: 20px;

}



/* scrollbar settings */

::-webkit-scrollbar{

    width: 30px;

    border: 1px solid rgba(0, 0, 50, .2);

}

::-webkit-scrollbar-thumb{

    background-color: rgba(0, 0, 50, .5);

}



#question-table-wrapper{

    height: 350px;

    overflow: scroll;

}





#question-table-wrapper th.large-cell,

#question-table-wrapper td.large-cell{

    width: 24%;

}

#question-table-wrapper th.small-cell,

#question-table-wrapper td.small-cell{

    width: 14%;

}



#client-control-pane table th,

#client-control-pane table td{

    width: 50%;

}

</style>



<script>

$(function(){



    var pynqClients = {}

    var pm = null;



    var refresh_question_table = function(){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_question_table"

        }).done(function(d){

            $("#question-table-wrapper").find("#question-table").remove();

            $("#question-table-wrapper").html(d);



            $(".show-question-status-button").click(function(){

                var qname = $(this).data("qname");

                show_question_status(qname);

                return false;

            });

        });

    }



    var refresh_client_table = function(){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_client_table"

        }).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();

            });

        });

    }



    var show_question_status = function(qname){

        $.ajax({

            type: "GET",

            dataType: "html",

            url: "/get_question_status",

            data: {qname: qname}

        }).done(function(d){

            $("#client-control-pane").html("");

            $("#client-control-pane").html(d);



            $("#client-control-pane").find(".start-button").eq(0).click(function(){

                var qname = $(this).data("qname");

                pm.sendQuestion(qname, after=refresh_question_table);

            });

        });

    }



    refresh_question_table();

    refresh_client_table();



    $("#view-server-status-button").click(function(){

        refresh_client_table();

        return false;

    });



});



</script>

</head>

<body>



<div id="wrapper">

        

    <div id="contorol-panel-wrapper" class="container">

        <h3>問題一覧</h3>

        <p><a href="#" id="view-server-status-button">クライアント状況</a></p>



        <div class="row">

            <div class="col" id="question-control-pane">

            <h3>問題一覧</h3>

            <p><a href="#" id="view-server-status-button">サーバ状況</a></p>



                <div id="question-table-wrapper">



                    <p>Loading...</p>

                </div>

            </div>
@@ -141,7 +31,6 @@ $(function(){ 
            <div class="col" id="client-control-pane">

                <p>Loading...</p>

            </div>



        </div>



    </div>