docklet/web/templates/user_list.html

367 lines
17 KiB
HTML

{% extends "base_AdminLTE.html"%}
{% block title %}Docklet | UserList{% endblock %}
{% block panel_title %}UserList{% endblock %}
{% block panel_list %}
<ol class="breadcrumb">
<li>
<a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
</li>
<li class="active">
<strong>UserList</strong>
</li>
</ol>
{% endblock %}
{% block css_src %}
<link href="//cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables_themeroller.css" rel="stylesheet">
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">User List</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#AddUserModal"><i class="fa fa-plus"></i> Add User</button>
<div class="modal inmodal" id="AddUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<i class="fa fa-laptop modal-icon"></i>
<h4 class="modal-title">Add User</h4>
<small class="font-bold">Add a user in Docklet</small>
</div>
<div class="modal-body">
<form action="/user/add/" method="POST" id="addUserForm">
<div class="form-group">
<label>User Name</label>
<input type = "text" placeholder="Enter Username" class="form-control" name="username">
</div>
<div class="form-group">
<label>PASSWORD</label>
<input type = "password" placeholder="Enter Password" class="form-control" name="password">
</div>
<div class="form-group">
<label>E-mail</label>
<input type="email" placeholder="Enter E-mail Address" class="form-control" name="e_mail">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="javascript:sendAddUser();">Submit</button>
</div>
</div>
</div>
</div>
<div class="table table-responsive">
<table id="myDataTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Name</th>
<th>E_mail</th>
<th>Tel</th>
<th>RegisterDate</th>
<th>Status</th>
<th>Group</th>
<th>Beans</th>
<th>Command</th>
</tr>
</thead>
<tbody>
</tbody>
<div class="modal inmodal" id="ModifyUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<i class="fa fa-laptop modal-icon"></i>
<h4 class="modal-title">Modify User</h4>
<small class="font-bold">Modify a user in Docklet</small>
</div>
<div class="modal-body">
<form action="/user/modify/" method="POST" id="modifyUserForm">
<div class="form-group">
<label>User Name</label>
<input type = "text" placeholder="Enter Username" class="form-control" name="username" id="mUsername" readonly="readonly">
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="mStatus">
<option>normal</option>
<option>applying</option>
<option>init</option>
<option>locked</option>
</select>
</div>
<div class="form-group">
<label>True Name</label>
<input type = "text" placeholder="Enter Truename" class="form-control" name="truename" id="mTruename">
</div>
<div class="form-group">
<label>E-mail</label>
<input type="email" placeholder="Enter E-mail Address" class="form-control" name="e_mail" id="mE_mail">
</div>
<div class="form-group">
<label>Department</label>
<input type = "text" placeholder="Enter Department" class="form-control" name="department" id="mDepartment">
</div>
<div class="form-group">
<label>Student Number</label>
<input type = "text" placeholder="Enter Student Number" class="form-control" name="student_number" id="mStudentNumber">
</div>
<div class="form-group">
<label>Telephone Number</label>
<input type = "text" placeholder="Enter Telephone Number" class="form-control" name="tel" id="mTel">
</div>
<!--div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter Password" class="form-control" name="password" id="mPassword">
</div-->
<div class="form-group">
<label>User Group</label>
<select class="form-control" name="group" id="mUserGroup">
{% for group in groups %}
<option>{{ group }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label>Auth Method</label>
<select class="form-control" name="auth_method" id="mAuthMethod">
<option>local</option>
<option>pam</option>
<option>iaaa</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" name="description" id="mDescription" readonly="readonly">
</textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<a class="btn btn-danger" data-toggle="modal" data-target="#ChpasswordModal" onClick="" id="ChpasswordButton">Change Password</a>
<button type="button" class="btn btn-primary" onClick="javascript:sendModifyUser();">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal inmodal" id="ChpasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<i class="fa fa-laptop modal-icon"></i>
<h4 class="modal-title">Changing Password</h4>
</div>
<div class="modal-body">
<form action="/user/change/" method="POST" id="chpasswordForm">
<div class="form-group">
<label>User Name</label>
<input type = "text" placeholder="Enter Username" class="form-control" name="username" id="mpUsername" readonly="readonly">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter Password" class="form-control" name="password" id="mpPassword">
</div>
</form>
<div class="form-group">
<label>Retype Password</label>
<input type="password" placeholder="Enter Password" class="form-control" id="mpPassword2">
</div>
<p style="color:red" id="notCorrectFlag"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="javascript:sendChpassword();">Submit</button>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Processing Beans Applications</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="table table-responsive">
<table class="table table-striped table-bordered table-hover table-image" >
<thead>
<tr>
<th>Application ID</th>
<th>Username</th>
<th>Number</th>
<th>Submission Time</th>
<th>Reason</th>
<th>Command</th>
</tr>
</thead>
<tbody>
{% for application in applications %}
<tr>
<td>{{ application.id }}</td>
<td>{{ application.username }}</td>
<td>{{ application.number }} beans</td>
<td>{{ application.time }}</td>
<td>{{ application.reason }}</td>
<td><a class="btn btn-xs btn-info" href="/beans/admin/{{ application.id }}/agree/">Agree</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-xs btn-danger" href="/beans/admin/{{ application.id }}/reject/">Reject</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script_src %}
<script src="//cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="//cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#myDataTable').dataTable({
"ajax": {
"url": "/user/list/",
"type": "POST"
},
//"scrollX": true,
"columnDefs": [
{
"render": function ( data, type, row ) {
str='<a class="btn btn-info btn-xs" data-toggle="modal" data-target="#ModifyUserModal" onClick="javascript:setFormUser(' + row[0] + ');">' + 'Edit' + '</a>';
if (row[6]=='applying')
{
str=str + '<a class="btn btn-danger btn-xs" onClick="javascript:setActivateUser(' + row[0] + ');">' + 'Activate' + '</a>';
}
return str;
},
"targets": 9
},
]
});
var gTable = $('#myGroupTable').dataTable({
"ajax": {
"url": "/group/detail/",
"type": "POST"
},
//"scrollX": true,
"columnDefs": [
{
"render": function ( data, type, row ) {
return '<a class="btn btn-info btn-sm" data-toggle="modal" data-target="#ModifyGroupModal" onClick="javascript:setFormGroup(' + row[0] + ');">' + 'Edit' + '</a>';
},
"targets": 6
},
]
});
});
function sendAddUser(){
document.getElementById("addUserForm").submit();
}
function sendAddGroup(){
document.getElementById("addGroupForm").submit();
}
function sendModifyUser(){
document.getElementById("modifyUserForm").submit();
}
function sendChpassword(){
if ($("#mpPassword").val() == $("#mpPassword2").val())
{
document.getElementById("chpasswordForm").submit();
}
else
{
$("#notCorrectFlag").html("Two passwords are not identical");
}
}
function sendModifyGroup(){
document.getElementById("modifyGroupForm").submit();
}
function setFormUser(arg){
$.post("/user/query/",
{
ID: arg,
},
function(data,status){
var result = eval("("+data+")").data;
$("#mUsername").val(result.username);
$("#mTruename").val(result.truename);
$("#mE_mail").val(result.e_mail);
$("#mDepartment").val(result.department);
$("#mStudentNumber").val(result.student_number);
$("#mTel").val(result.tel);
$("#mStatus").val(result.status);
$("#mUserGroup").val(result.group);
$("#mAuthMethod").val(result.auth_method);
$("#mDescription").val(result.description);
$("#ChpasswordButton").attr("onClick", "javascript:setFormChpassword(\"" + result.username + "\");");
});
}
function setFormChpassword(arg){
$("#mpUsername").val(arg);
}
function setActivateUser(arg){
$.post("/user/change/",
{
ID: arg,
Instruction: "Activate",
},
function(data,status){
location.reload();
});
}
$(document).ready(function() {
$(".table-image").DataTable();
});
</script>
{% endblock %}