From bd7832e0d833844b00af037524185adf20a6dffc Mon Sep 17 00:00:00 2001
From: Miguel Barão <miguel.barao@gmail.com>
Date: Wed, 18 Oct 2017 23:34:32 +0100
Subject: [PATCH] - changes in the looks of the admin page

---
 static/js/admin.js   | 23 ++++++++++++-----------
 templates/admin.html | 80 +++++++++++++++++++++++++++++++++++++++++++++-----------------------------------
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/static/js/admin.js b/static/js/admin.js
index 3c7f8ea..25d1d1a 100644
--- a/static/js/admin.js
+++ b/static/js/admin.js
@@ -1,6 +1,6 @@
 $(document).ready(function() {
     // button handlers (runs once)
-    function define_buttons_handlers() {
+    function button_handlers() {
         $("#allow_all").click(
             function() {
                 $(":checkbox").prop("checked", true).trigger('change');
@@ -13,11 +13,13 @@ $(document).ready(function() {
         );
         $("#reset_password").click(
             function () {
-                var number = $("#reset_number").val();
                 $.ajax({
                     type: "POST",
                     url: "/admin",
-                    data: {"cmd": "reset_password", "value": number}
+                    data: {
+                        "cmd": "reset_password",
+                        "value": $("#reset_number").val()
+                    }
                 });
             }
         );
@@ -78,16 +80,15 @@ $(document).ready(function() {
         active.sort(function(a,b){return a[2] < b[2] ? -1 : (a[2] == b[2] ? 0 : 1);});
         n = active.length;
         for(var i = 0; i < n; i++) {
-            rows += '<tr' + (active[i][5]? '' : ' class="danger"') + '>\
+            rows += '<tr' + (active[i][5]? '' : ' class="bg-danger"') + '>\
             <td>' + active[i][0] + '</td>\
             <td>' + active[i][1] + '</td>\
             <td>' + active[i][2].slice(11,19) + '</td>\
-            <td><div data-toggle="tooltip" data-placement="top" title="'+active[i][4]+'">' + active[i][3] + '</div></td>\
-            <td>' + (active[i][5]? '' : '<span class="label label-danger">unfocus</span>') + '</td>\
+            <td>' + (active[i][5]? '' : '<span class="label bg-danger">unfocus</span>') + '</td>\
             </tr>';
         }
         $("#online_students").html(rows);
-        $("#online-header").html(n + " Activo(s)");
+        $("#online-header").html(n);
 
     }
 
@@ -111,7 +112,7 @@ $(document).ready(function() {
     // ----------------------------------------------------------------------
     function populateStudentsTable(students) {
         var n = students.length;
-        $("#students-header").html(n + " Inscritos")
+        $("#students-header").html(n)
         var rows = "";
         $.each(students, function(i, d) {
             var uid = d['uid'];
@@ -130,8 +131,8 @@ $(document).ready(function() {
                     (d['start_time']=='' ? '' : ' <span class="label label-success">teste</span>') +
                     // (d['online'] ? '<span class="label label-warning">online</span>' : '') +
                 '</td>\
-                <td>' + uid + '</td>\
-                <td>' + d['name'] + (d['password_defined'] ? ' <span class="label label-default">pw</span>' : '') +'</td>\
+                <td>' + uid + (d['password_defined'] ? ' <i class="fa fa-key" aria-hidden="true"></i>' : '') + '</td>\
+                <td>' + d['name'] + '</td>\
                 <td>';
             var g = d['grades'];
             var glength = g.length;
@@ -171,6 +172,6 @@ $(document).ready(function() {
     }
 
     populate();                    // run once when the page is loaded
-    define_buttons_handlers();
+    button_handlers();             // assign handlers to buttons
     setInterval(populate, 5000);   // poll server on 5s interval
 });
diff --git a/templates/admin.html b/templates/admin.html
index b3496ff..b51a4dc 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -11,12 +11,11 @@
 
     <!-- optional -->
     <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/static/css/test.css">
+    <!-- <link rel="stylesheet" href="/static/css/test.css"> -->
 
     <style>
         body {
             padding-top: 100px;
-            background: #ccc;
         }
     </style>
 </head>
@@ -24,22 +23,42 @@
 <body>
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
   <a class="navbar-brand" href="#">
-    <i class="fa fa-clock-o" aria-hidden="true"></i>
+    <!-- <i class="fa fa-clock-o" aria-hidden="true"></i> -->
     <span id="clock"> --:-- </span>
   </a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarText">
-    <ul class="navbar-nav mr-auto">
-    </ul>
+<!--   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-    <span class="navbar-text">
+ -->
+  <div class="collapse navbar-collapse" id="navbarNavDropdown">
+    <ul class="navbar-nav">
+<!--       <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li> -->
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAluno" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Aluno
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdownAluno">
+          <a class="dropdown-item" href="#" id="inserir_novo_aluno">Inserir novo...</a>
+          <a class="dropdown-item" href="#" id="reset_password">Reset password...</a>
+          <a class="dropdown-item" href="#" id="allow_all">Autorizar todos</a>
+          <a class="dropdown-item" href="#" id="deny_all">Desautorizar todos</a>
+        </div>
+      </li>
+    </ul>
+    <div class="navbar-nav"></div>
+<!--     <span class="navbar-text">
       <i class="fa fa-user" aria-hidden="true"></i>
       <span id="name">Admin</span>
       <span class="caret"></span>
-    </span>
+    </span> -->
   </div>
 </nav>
 <!-- ===================================================================== -->
@@ -49,18 +68,18 @@
         <h3 id="title"></h3>
         Ref: <span id="ref"></span><br>
         Enunciado: <span id="filename"></span><br>
-        Database: <span id="database"></span><br>
-        Testes entregues: <span id="answers_dir"></span>
+        Base de dados: <span id="database"></span><br>
+        Testes submetidos: <span id="answers_dir"></span><br>
+        <span class="badge badge-secondary"><span id="students-header"></span></span> inscritos<br>
+        <span class="badge badge-success"><span id="online-header"></span></span> online
+
     </div> <!-- jumbotron -->
 
 <!-- ===================================================================== -->
-    <div class="card border-dark">
-        <div class="card-header" id="online-header">
-            <!-- to be populated -->
-        </div>
-        <div class="card-body">
+    <!-- <div class="card border-dark"> -->
+        <!-- <div class="card-body"> -->
             <table class="table table-condensed noleftmargin">
-                <thead>
+                <thead class="thead-default">
                     <tr>
                         <th>Número</th>
                         <th>Nome</th>
@@ -74,18 +93,14 @@
                     <!-- to be populated -->
                 </tbody>
             </table>
-        </div> <!-- card-body -->
-    </div> <!-- card -->
+        <!-- </div> card-body -->
+    <!-- </div> card -->
 
 <!-- ===================================================================== -->
-    <div class="card border-dark">
-        <div class="card-header" id="students-header">
-            <!-- to be populated -->
-        </div>
-
-        <div class="card-body">
+    <!-- <div class="card border-dark"> -->
+        <!-- <div class="card-body"> -->
             <table class="table noleftmargin">
-                <thead>
+                <thead class="thead-default">
                     <tr>
                         <th>Perm.</th>
                         <th>Número</th>
@@ -98,16 +113,11 @@
                     <!-- to be populated -->
                 </tbody>
             </table>
-        </div> <!-- card-body -->
+        <!-- </div> card-body -->
 
-        <div class="card-footer">
+        <!-- <div class="card-footer"> -->
             <div class="row">
                 <div class="col-sm-4">
-                    Permitir
-                    <button id="allow_all" class="btn btn-xs btn-primary">Todos</button>
-                    <button id="deny_all" class="btn btn-xs btn-primary">Nenhum</button>
-                </div>
-                <div class="col-sm-4">
                     <button id="novo_aluno" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#novo_aluno_modal">Inserir novo aluno</button>
                 </div>
                 <div class="col-sm-4">
@@ -119,8 +129,8 @@
                     </div>
                 </div>
             </div> <!-- row -->
-        </div> <!-- card-footer -->
-    </div> <!-- card -->
+        <!-- </div> card-footer -->
+    <!-- </div> card -->
 <!-- ===================================================================== -->
 </div> <!-- container -->
 <!-- ===================================================================== -->
--
libgit2 0.21.2