260 lines
12 KiB
HTML
260 lines
12 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">×</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>
|
|
<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>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">×</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>Change Password?</label>
|
|
<select class="form-control" name="Chpassword" id="mChpassword">
|
|
<option>Yes</option>
|
|
<option>No</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type = "text" 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>
|
|
|
|
</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:sendModifyUser();">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</table>
|
|
|
|
</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 ) {
|
|
return '<a class="btn btn-info btn-sm" data-toggle="modal" data-target="#ModifyUserModal" onClick="javascript:setFormUser(' + row[0] + ');">' + 'Edit' + '</a>';
|
|
},
|
|
"targets": 8
|
|
},
|
|
]
|
|
|
|
});
|
|
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 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);
|
|
$("#mChpassword").val('No');
|
|
$("#mPassword").val(result.password);
|
|
$("#mStatus").val(result.status);
|
|
$("#mUserGroup").val(result.group);
|
|
$("#mAuthMethod").val(result.auth_method);
|
|
$("#mDescription").val(result.description);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|