????
Your IP : 216.73.216.209
<% layout('../layouts/userLayout.eta') %>
<div class="content">
<div class="page-inner">
<div class="page-header">
<div class="page-title">Độc giả</div>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item"><a href="/main">Giao diện chính</a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item"><a href="#">Danh sách tài khoản độc giả</a></li>
</ul>
</div>
<div class="page-body">
<div class="row">
<div class="col-lg-8 col-md-6">
<div class="card">
<div class="card-body">
<table id="reader-table" class="table table-striped table-bordered table-hover w-100">
<thead>
<tr>
<th>STT</th>
<th>Họ và tên</th>
<th>Tên đăng nhập</th>
<th>CMND</th>
<th>Email</th>
<th>SĐT</th>
<!-- <th>Chức năng</th> -->
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header bg-primary">
<div class="card-title text-white">Thông tin độc giả</div>
</div>
<div class="card-body">
<form id="reader-form" action="" method="POST">
<div class="form-inline justify-content-end mr-3">
<input type="hidden" name="id" data-bind="value: reader.UUID">
<div class="btn-group">
<button type="submit" class="btn btn-sm btn-primary" data-bind="html:saveBtnLabel"></button>
<button id="del-btn" type="button" class="btn btn-sm btn-danger" data-bind="visible:reader.UUID">
<span class="btn-label"><i class="fas fa-user-times"></i></span> Xoá
</button>
<button type="button" class="btn btn-sm btn-success"
data-bind="visible:reader.UUID,events:{click:reset}">
<span class="btn-label"><i class="fas fa-user-plus"></i></span> Tạo mới
</button>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Tên đăng nhập</label>
<div class="col-md-8">
<input type="text" class="k-textbox form-control" name="username"
data-bind="value: reader.Username, readonly: reader.UUID"
title="Tên đăng nhập không được để trống" required>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Mật khẩu</label>
<div class="col-md-8">
<input id="new-pass" type="password" class="form-control input-full" name="newpassword"
data-bind="value: newPass, notRequired: reader.UUID" title="Mật khẩu không được để trống">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Nhập lại mật khẩu</label>
<div class="col-md-8">
<input type="password" class="form-control input-full" name="confirmpass"
data-bind="value: confirmPass" title="Mật khẩu xác nhận không đúng">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Họ và tên</label>
<div class="col-md-8">
<input type="text" class="form-control input-full" name="fullname"
data-bind="value:reader.FullName" title="Họ và tên không được để trống" required>
</div>
</div>
<div class="form-check form-inline">
<label class="col-md-4">Giới tính</label>
<div class="col-md-8">
<label class="custom-control custom-radio custom-control-inline">
<input name="gender" class="custom-control-input" type="radio" value="true"
data-bind="checked:reader.Gender" checked>
<span class="custom-control-label">Nam</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input name="gender" class="custom-control-input" type="radio" value="false"
data-bind="checked:reader.Gender">
<span class="custom-control-label">Nữ</span>
</label>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">CMND, số hộ chiếu</label>
<div class="col-md-8">
<input type="text" class="form-control input-full" name="idnumber"
data-bind="value: reader.IdNumber" title="CMND hoặc số hộ chiếu không được để trống" required>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Ngày sinh</label>
<div class="col-md-8">
<!-- <input id="birthday" type="text" class="k-textbox form-control" name="birthday" data-bind="value: reader.Birthday"> -->
<input id="birthday" type="text" class="form-control" data-role="datepicker"
data-format="dd/MM/yyyy" data-culture="vi-VN" name="birthday" data-bind="value:reader.Birthday">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Email</label>
<div class="col-md-8">
<input type="text" class="form-control input-full" name="email" data-bind="value:reader.Email">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Số điện thoại</label>
<div class="col-md-8">
<input type="text" class="form-control input-full" name="phone" data-bind="value:reader.Telephone">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4">Địa chỉ</label>
<div class="col-md-8">
<input type="text" class="form-control input-full" name="address" data-bind="value:reader.Address">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
kendo.data.binders.notRequired = kendo.data.Binder.extend({
refresh: function () {
var required = !this.bindings.notRequired.get();
if (required) {
this.element.setAttribute("required", "required");
} else {
this.element.removeAttribute("required");
}
}
});
// view model
var readerVM = kendo.observable({
reader: { Gender: true },
newPass: null,
confirmPass: null,
reset: function (e) {
this.set('reader', { Gender: true });
this.set('newPass', null);
this.set('confirmPass', null);
},
saveBtnLabel: function (e) {
return this.get('reader.UUID') ? '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu' : '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu mới'
}
});
kendo.bind($('#reader-form'), readerVM);
$('#birthday').bind('focus', function (e) { $(this).data('kendoDatePicker').open() });
$('#birthday').inputmask('datetime', { inputFormat: "dd/mm/yyyy" });
// DataTable của độc giả
var readerTable = $('#reader-table').DataTable({
ajax: {
type: 'get',
url: 'docgia/json',
dataType: 'json'
},
ordering: false,
select: { style: 'single' },
language: { url: "/js/plugin/datatables/Vietnamese.json" },
columns: [
{ data: 'RowNum', className: "text-center" },
{ data: "FullName" },
{ data: "Username" },
{ data: "IdNumber", className: "text-center" },
{ data: "Email" },
{ data: "Telephone" }
],
});
readerTable.on('select', function (e, dt, type, indexes) {
var data = dt.row(indexes[0]).data();
readerVM.set('reader', data);
});
readerTable.on('deselect', function (e, dt, type, indexes) {
readerVM.reset();
});
// Lưu thông tin độc giả
$('#reader-form').validate({
validClass: "success",
rules: {
confirmpass: { equalTo: '#new-pass' }
},
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
submitHandler: function (domForm) {
$.ajax({
url: '',
method: readerVM.get('reader.UUID') ? 'PUT' : 'POST',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: $(domForm).serialize(),
success: function (data, text, jqXHR) {
readerTable.ajax.reload(null, false);
readerVM.reset();
},
error: function (jqXHR, text, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
});
$('#del-btn').on('click', function (e) {
var reader = readerVM.get('reader').toJSON();
$('<div/>').kendoConfirm({
title: 'Xác nhận',
content: `<span class="text-primary"><i class="fas fa-question-circle"></i> Bạn có muốn xóa độc giả ${reader.FullName}</span>`,
visible: true,
messages: {
okText: 'Xóa',
cancel: 'Đóng lại'
}
}).data('kendoConfirm').result
.done(function () {
$.ajax({
url: '',
method: 'DELETE',
data: { id: reader.UUID },
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, text, jqXHR) {
readerTable.ajax.reload(null, false);
readerVM.reset();
},
error: function (jqXHR, text, err) {
$('<div/>').kendoAlert({
title: 'Đã xảy ra lỗi',
content: `<span class="text-danger"><i class="fas fa-times-circle"></i> ${jqXHR.responseText}</span>`,
visible: true
})
}
})
}).fail()
})
});
</script>