Commit bd7832e0d833844b00af037524185adf20a6dffc

Authored by Miguel Barão
1 parent 6cebde62
Exists in master and in 1 other branch dev

- changes in the looks of the admin page

Showing 2 changed files with 57 additions and 46 deletions   Show diff stats
static/js/admin.js
1 1 $(document).ready(function() {
2 2 // button handlers (runs once)
3   - function define_buttons_handlers() {
  3 + function button_handlers() {
4 4 $("#allow_all").click(
5 5 function() {
6 6 $(":checkbox").prop("checked", true).trigger('change');
... ... @@ -13,11 +13,13 @@ $(document).ready(function() {
13 13 );
14 14 $("#reset_password").click(
15 15 function () {
16   - var number = $("#reset_number").val();
17 16 $.ajax({
18 17 type: "POST",
19 18 url: "/admin",
20   - data: {"cmd": "reset_password", "value": number}
  19 + data: {
  20 + "cmd": "reset_password",
  21 + "value": $("#reset_number").val()
  22 + }
21 23 });
22 24 }
23 25 );
... ... @@ -78,16 +80,15 @@ $(document).ready(function() {
78 80 active.sort(function(a,b){return a[2] < b[2] ? -1 : (a[2] == b[2] ? 0 : 1);});
79 81 n = active.length;
80 82 for(var i = 0; i < n; i++) {
81   - rows += '<tr' + (active[i][5]? '' : ' class="danger"') + '>\
  83 + rows += '<tr' + (active[i][5]? '' : ' class="bg-danger"') + '>\
82 84 <td>' + active[i][0] + '</td>\
83 85 <td>' + active[i][1] + '</td>\
84 86 <td>' + active[i][2].slice(11,19) + '</td>\
85   - <td><div data-toggle="tooltip" data-placement="top" title="'+active[i][4]+'">' + active[i][3] + '</div></td>\
86   - <td>' + (active[i][5]? '' : '<span class="label label-danger">unfocus</span>') + '</td>\
  87 + <td>' + (active[i][5]? '' : '<span class="label bg-danger">unfocus</span>') + '</td>\
87 88 </tr>';
88 89 }
89 90 $("#online_students").html(rows);
90   - $("#online-header").html(n + " Activo(s)");
  91 + $("#online-header").html(n);
91 92  
92 93 }
93 94  
... ... @@ -111,7 +112,7 @@ $(document).ready(function() {
111 112 // ----------------------------------------------------------------------
112 113 function populateStudentsTable(students) {
113 114 var n = students.length;
114   - $("#students-header").html(n + " Inscritos")
  115 + $("#students-header").html(n)
115 116 var rows = "";
116 117 $.each(students, function(i, d) {
117 118 var uid = d['uid'];
... ... @@ -130,8 +131,8 @@ $(document).ready(function() {
130 131 (d['start_time']=='' ? '' : ' <span class="label label-success">teste</span>') +
131 132 // (d['online'] ? '<span class="label label-warning">online</span>' : '') +
132 133 '</td>\
133   - <td>' + uid + '</td>\
134   - <td>' + d['name'] + (d['password_defined'] ? ' <span class="label label-default">pw</span>' : '') +'</td>\
  134 + <td>' + uid + (d['password_defined'] ? ' <i class="fa fa-key" aria-hidden="true"></i>' : '') + '</td>\
  135 + <td>' + d['name'] + '</td>\
135 136 <td>';
136 137 var g = d['grades'];
137 138 var glength = g.length;
... ... @@ -171,6 +172,6 @@ $(document).ready(function() {
171 172 }
172 173  
173 174 populate(); // run once when the page is loaded
174   - define_buttons_handlers();
  175 + button_handlers(); // assign handlers to buttons
175 176 setInterval(populate, 5000); // poll server on 5s interval
176 177 });
... ...
templates/admin.html
... ... @@ -11,12 +11,11 @@
11 11  
12 12 <!-- optional -->
13 13 <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
14   - <link rel="stylesheet" href="/static/css/test.css">
  14 + <!-- <link rel="stylesheet" href="/static/css/test.css"> -->
15 15  
16 16 <style>
17 17 body {
18 18 padding-top: 100px;
19   - background: #ccc;
20 19 }
21 20 </style>
22 21 </head>
... ... @@ -24,22 +23,42 @@
24 23 <body>
25 24 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
26 25 <a class="navbar-brand" href="#">
27   - <i class="fa fa-clock-o" aria-hidden="true"></i>
  26 + <!-- <i class="fa fa-clock-o" aria-hidden="true"></i> -->
28 27 <span id="clock"> --:-- </span>
29 28 </a>
30   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  29 +
  30 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
31 31 <span class="navbar-toggler-icon"></span>
32 32 </button>
33 33  
34   - <div class="collapse navbar-collapse" id="navbarText">
35   - <ul class="navbar-nav mr-auto">
36   - </ul>
  34 +<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  35 + <span class="navbar-toggler-icon"></span>
  36 + </button>
37 37  
38   - <span class="navbar-text">
  38 + -->
  39 + <div class="collapse navbar-collapse" id="navbarNavDropdown">
  40 + <ul class="navbar-nav">
  41 +<!-- <li class="nav-item">
  42 + <a class="nav-link" href="#">Features</a>
  43 + </li> -->
  44 + <li class="nav-item dropdown">
  45 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAluno" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  46 + Aluno
  47 + </a>
  48 + <div class="dropdown-menu" aria-labelledby="navbarDropdownAluno">
  49 + <a class="dropdown-item" href="#" id="inserir_novo_aluno">Inserir novo...</a>
  50 + <a class="dropdown-item" href="#" id="reset_password">Reset password...</a>
  51 + <a class="dropdown-item" href="#" id="allow_all">Autorizar todos</a>
  52 + <a class="dropdown-item" href="#" id="deny_all">Desautorizar todos</a>
  53 + </div>
  54 + </li>
  55 + </ul>
  56 + <div class="navbar-nav"></div>
  57 +<!-- <span class="navbar-text">
39 58 <i class="fa fa-user" aria-hidden="true"></i>
40 59 <span id="name">Admin</span>
41 60 <span class="caret"></span>
42   - </span>
  61 + </span> -->
43 62 </div>
44 63 </nav>
45 64 <!-- ===================================================================== -->
... ... @@ -49,18 +68,18 @@
49 68 <h3 id="title"></h3>
50 69 Ref: <span id="ref"></span><br>
51 70 Enunciado: <span id="filename"></span><br>
52   - Database: <span id="database"></span><br>
53   - Testes entregues: <span id="answers_dir"></span>
  71 + Base de dados: <span id="database"></span><br>
  72 + Testes submetidos: <span id="answers_dir"></span><br>
  73 + <span class="badge badge-secondary"><span id="students-header"></span></span> inscritos<br>
  74 + <span class="badge badge-success"><span id="online-header"></span></span> online
  75 +
54 76 </div> <!-- jumbotron -->
55 77  
56 78 <!-- ===================================================================== -->
57   - <div class="card border-dark">
58   - <div class="card-header" id="online-header">
59   - <!-- to be populated -->
60   - </div>
61   - <div class="card-body">
  79 + <!-- <div class="card border-dark"> -->
  80 + <!-- <div class="card-body"> -->
62 81 <table class="table table-condensed noleftmargin">
63   - <thead>
  82 + <thead class="thead-default">
64 83 <tr>
65 84 <th>Número</th>
66 85 <th>Nome</th>
... ... @@ -74,18 +93,14 @@
74 93 <!-- to be populated -->
75 94 </tbody>
76 95 </table>
77   - </div> <!-- card-body -->
78   - </div> <!-- card -->
  96 + <!-- </div> card-body -->
  97 + <!-- </div> card -->
79 98  
80 99 <!-- ===================================================================== -->
81   - <div class="card border-dark">
82   - <div class="card-header" id="students-header">
83   - <!-- to be populated -->
84   - </div>
85   -
86   - <div class="card-body">
  100 + <!-- <div class="card border-dark"> -->
  101 + <!-- <div class="card-body"> -->
87 102 <table class="table noleftmargin">
88   - <thead>
  103 + <thead class="thead-default">
89 104 <tr>
90 105 <th>Perm.</th>
91 106 <th>Número</th>
... ... @@ -98,16 +113,11 @@
98 113 <!-- to be populated -->
99 114 </tbody>
100 115 </table>
101   - </div> <!-- card-body -->
  116 + <!-- </div> card-body -->
102 117  
103   - <div class="card-footer">
  118 + <!-- <div class="card-footer"> -->
104 119 <div class="row">
105 120 <div class="col-sm-4">
106   - Permitir
107   - <button id="allow_all" class="btn btn-xs btn-primary">Todos</button>
108   - <button id="deny_all" class="btn btn-xs btn-primary">Nenhum</button>
109   - </div>
110   - <div class="col-sm-4">
111 121 <button id="novo_aluno" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#novo_aluno_modal">Inserir novo aluno</button>
112 122 </div>
113 123 <div class="col-sm-4">
... ... @@ -119,8 +129,8 @@
119 129 </div>
120 130 </div>
121 131 </div> <!-- row -->
122   - </div> <!-- card-footer -->
123   - </div> <!-- card -->
  132 + <!-- </div> card-footer -->
  133 + <!-- </div> card -->
124 134 <!-- ===================================================================== -->
125 135 </div> <!-- container -->
126 136 <!-- ===================================================================== -->
... ...