table, pagination front-end, links, filtering added to users view

app/app/templates/logged_layout.html

@@ -99,7 +99,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link " href="./users">
+            <a class="nav-link " href="./administration/users">
               <i class="ni ni-single-02 text-info"></i> Users
             </a>
           </li>

app/app/templates/new/admin/users.html

+{% extends 'logged_layout.html' %}
+
+{% block title %} Users - HPC&A IoT {% endblock %}
+
+{% block header %} 
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
+{% endblock %}
+
+{% block location %} 
+<a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="/administration">Administration</a> 
+<p class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block"> &nbsp;-&nbsp; </p>
+<a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="/administration/users">Users</a> 
+{% endblock %}
+
+{% block body %}
+    <!-- Page content -->
+    <div class="container-fluid mt--7">
+      <!-- Table -->
+      <div class="row">
+        <div class="col">
+          <div class="card shadow">
+            <div class="card-header bg-transparent">
+              <h3 class="mb-0">Users</h3>
+            </div>
+            <div class="card-body">
+		{% if users %}
+		<div class="col-md-8 offset-md-2" style="margin-bottom: 20px;">
+			<form class="navbar-search navbar-search-light form-inline mr-3 d-none d-md-flex ml-lg-auto">
+			  <div class="form-group mb-0">
+			    <div class="input-group input-group-alternative">
+			      <div class="input-group-prepend">
+				<span class="input-group-text"><i class="fas fa-search"></i></span>
+			      </div>
+			      <input class="form-control" placeholder="Search" type="text" id="filter_name" name="filter_name" onkeyup="return users_update();">
+			    </div>
+			  </div>
+			</form>
+		</div>
+		<table class="table table-hover">
+			<thead>
+				<th> Name </th>
+				<th> Role </th>
+			</thead>
+			<tbody id="users_body">
+				{% for u in users %}
+				<tr onclick="window.location='/administration/users/{{ u[0] }}';">
+					<th> {{ u[0] }} </th>
+					<th> {{ u[2] }} </th>
+				</tr>
+				{% endfor %}
+			</tbody>
+		</table>
+		{% endif %}
+            </div>
+            <div class="card-footer py-4">
+              <nav aria-label="...">
+                <ul class="pagination justify-content-end mb-0">
+                  <li class="page-item disabled">
+                    <a class="page-link" href="#" tabindex="-1">
+                      <i class="fas fa-angle-left"></i>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                  </li>
+                  <li class="page-item active">
+                    <a class="page-link" href="#">1</a>
+                  </li>
+                  <li class="page-item">
+                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
+                  </li>
+                  <li class="page-item"><a class="page-link" href="#">3</a></li>
+                  <li class="page-item">
+                    <a class="page-link" href="#">
+                      <i class="fas fa-angle-right"></i>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+	    <div class="card-body">
+                <div class="col-lg-4">
+			<a href="/administration/new-user"><button class="btn btn-primary" type="submit">New User</button></a>
+		</div>
+            </div>
+
+
+          </div>
+        </div>
+      </div>
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript">
+	function users_update() {
+		$.ajax({
+			url:"/administration/users/table-filter/1?name="+$("#filter_name").val(),
+			type:"get",
+			success: function(data) {
+				data = eval(data);
+				$("#users_body").empty();
+				data.forEach(function (entry) {
+					str = "<tr onclick=window.location=\"/administration/users/"+entry[0]+"\"><td>"+entry[0]+"</td>"+"<td>"+entry[1]+"</td></tr>";
+					$("#users_body").append(unescape(str));
+				});
+			}
+		});
+	}
+</script>
+{% endblock %}

app/app/views_admin.py

@@ -20,8 +20,6 @@ from app.helpers.misc import restricted
 
 MAX_PG = 5
 MAX_PG_ENTRIES_USERS = 10
-MAX_PG_ENTRIES_DATA = 10
-MAX_PG_ENTRIES_GRAPH_HOURS = 24
 
 @app.route('/administration', methods=['GET', 'POST'])
 @restricted(access_level='admin')
@@ -41,3 +39,34 @@ def administration():
         
         return redirect(request.url)
 
+
+@app.route('/administration/users')
+@restricted(access_level='admin')
+def administration_users():
+    cur_pg = 1
+    users = ud.get_range([MAX_PG_ENTRIES_USERS, (cur_pg-1)*MAX_PG_ENTRIES_USERS])[1]
+
+    return render_template('new/admin/users.html', users=users)
+
+
+@app.route('/administration/users/<name>')
+@restricted(access_level='admin')
+def administration_users_user(name):
+    cur_pg = 1
+    users = ud.get_range([MAX_PG_ENTRIES_USERS, (cur_pg-1)*MAX_PG_ENTRIES_USERS])[1]
+
+    return render_template('new/admin/user.html', users=users)
+
+
+@app.route('/administration/users/table-<option>/<page>')
+@restricted(access_level='admin')
+def administration_users_table(option, page):
+    if option == 'filter':
+        users = ud.get_range_name(request.args.get('name'), [MAX_PG_ENTRIES_USERS, (int(page)-1)*MAX_PG_ENTRIES_USERS])[1]
+    elif option == 'page':
+        users = ud.get_range([MAX_PG_ENTRIES_USERS, (int(page)-1)*MAX_PG_ENTRIES_USERS])[1]
+
+    users = [[u[0],u[2]] for u in users]
+
+    return str(users), 200
+