You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
12 KiB
375 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head th:replace="~{fragments/modules/base/head :: head}">
|
|
<style>
|
|
|
|
#AttendanceDatatable td {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
|
|
#AttendanceDatatable td:last-child {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.mark-present,
|
|
.mark-absent {
|
|
width: 90px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="wrapper">
|
|
<!-- header top menu Start -->
|
|
<header th:replace="~{fragments/modules/base/header :: header}"></header>
|
|
<!-- header top menu end -->
|
|
<div class="page-wrap">
|
|
<!--=============== Left Menu side Start ================-->
|
|
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
|
|
<!--=============== Left side End ================-->
|
|
<div class="main-content">
|
|
<div class="container-fluid">
|
|
|
|
<div class="row mt-1">
|
|
<div class="col-md-12">
|
|
<div class="card mt-2">
|
|
<div class="card-header" style="font-weight: bold;">
|
|
Attendance Training Data
|
|
</div>
|
|
<div class="card-body d-flex align-items-end">
|
|
|
|
|
|
<!-- SL No -->
|
|
<div class="col-sm-3">
|
|
<label for="slNoInput">Search by Unique No</label>
|
|
<input type="text" id="slNoInput" class="form-control"
|
|
placeholder="Enter Unique No">
|
|
</div>
|
|
|
|
<div class="col-md-1 col-sm-12 text-center pt-4">
|
|
<span style="font-weight: bold;">OR</span>
|
|
</div>
|
|
|
|
<!-- Mobile Number -->
|
|
<div class="col-sm-3">
|
|
<label for="mobileInput">Search by Mobile No</label>
|
|
<input type="text" id="mobileInput" class="form-control"
|
|
placeholder="Enter Mobile Number" maxlength="10">
|
|
</div>
|
|
|
|
<!-- Button (hidden initially) -->
|
|
<div class="col-sm-4 d-flex align-items-end">
|
|
<button id="searchBtn" class="btn btn-success mr-2">
|
|
Search
|
|
</button>
|
|
<button id="clearSearchBtn" class="btn btn-danger">
|
|
Clear
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row mt-1">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<table id="AttendanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
|
|
<thead class="thead-dark" >
|
|
<tr role="row">
|
|
<th class="text-center">S.No</th>
|
|
<th class="text-center">Unique No</th>
|
|
<th class="text-center">Constituency</th>
|
|
<th class="text-center">Training Center Name</th>
|
|
<th class="text-center">Hall No</th>
|
|
<th class="text-center">Category</th>
|
|
<th class="text-center">Name</th>
|
|
<th class="text-center">Attendance Status</th>
|
|
<th class="text-center">Action</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody style="text-align:center;">
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<!-- Add the 'Please wait' text below the spinner -->
|
|
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
|
|
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
|
|
<script src="dist/js/xlsx.full.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var table;
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
table = $('#AttendanceDatatable').DataTable({
|
|
dom: 'Bftip',
|
|
columnDefs: [
|
|
{ targets: 'no-sort', orderable: false }
|
|
],
|
|
lengthMenu: [
|
|
[50, 100, 200, 500, -1],
|
|
['50 rows', '100 rows', '200 rows', 'Show all']
|
|
],
|
|
scrollY: '50vh',
|
|
scrollX: true,
|
|
buttons: [
|
|
{
|
|
extend: 'pageLength',
|
|
className: 'btn btn-warning'
|
|
},
|
|
{
|
|
title: 'Data export',
|
|
extend: 'copyHtml5',
|
|
text: 'Copy',
|
|
className: 'btn btn-secondary'
|
|
},
|
|
{
|
|
extend: 'excelHtml5',
|
|
text: 'Excel',
|
|
className: 'btn btn-secondary'
|
|
},
|
|
{
|
|
extend: 'csvHtml5',
|
|
text: 'CSV',
|
|
className: 'btn btn-secondary'
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
text: 'PDF',
|
|
className: 'btn btn-secondary'
|
|
}
|
|
],
|
|
fixedHeader: true,
|
|
autoWidth: false,
|
|
responsive: false,
|
|
searching: true,
|
|
select: false,
|
|
processing: false
|
|
});
|
|
|
|
|
|
$("#searchBtn").click(function () {
|
|
searchAttendance();
|
|
});
|
|
|
|
});
|
|
|
|
|
|
function searchAttendance() {
|
|
|
|
|
|
|
|
let slNo = $("#slNoInput").val().trim();
|
|
let mobile = $("#mobileInput").val().trim();
|
|
|
|
if (!slNo && !mobile) {
|
|
Swal.fire({
|
|
icon: "warning",
|
|
title: "Please enter SL No or Mobile Number",
|
|
confirmButtonText: "OK",
|
|
allowOutsideClick: false
|
|
});
|
|
return;
|
|
}
|
|
|
|
$("#pageLoader").show();
|
|
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/attendance/searchAttendance",
|
|
type: "GET",
|
|
data: {
|
|
slNo: slNo,
|
|
mobileNo: mobile
|
|
},
|
|
success: function (res) {
|
|
|
|
$("#pageLoader").hide();
|
|
|
|
table.clear();
|
|
|
|
if (res && res.length > 0) {
|
|
|
|
res.forEach(function (data) {
|
|
|
|
statusBadge = data.attendance_status === 'P'
|
|
? '<span style="color:#28a745;font-weight:600;">Present</span>'
|
|
: '<span style="color:#dc3545;font-weight:600;">Absent</span>' ;
|
|
|
|
/* let statusBadge = data.attendance_status === 'P'
|
|
? '<span class="status-present-soft">Present</span>'
|
|
: '<span class="badge badge-danger">Absent</span>';*/
|
|
|
|
let actionButtons = `
|
|
<div class="d-flex flex-column align-items-center justify-content-center">
|
|
<button class="btn btn-success btn-sm mb-1 mark-present" data-slno="${data.slno}">
|
|
Present
|
|
</button>
|
|
<button class="btn btn-danger btn-sm mark-absent" data-slno="${data.slno}">
|
|
Absent
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
let index = table.rows().count() + 1;
|
|
table.row.add([
|
|
index,
|
|
data.slno || '',
|
|
data.constituency_details || '',
|
|
data.c_name || '',
|
|
data.hallno || '',
|
|
data.category || '',
|
|
data.name || '',
|
|
statusBadge,
|
|
actionButtons
|
|
]);
|
|
});
|
|
|
|
} else {
|
|
Swal.fire({
|
|
icon: "info",
|
|
title: "No data found",
|
|
confirmButtonText: "OK",
|
|
allowOutsideClick: false
|
|
});
|
|
}
|
|
|
|
table.draw();
|
|
},
|
|
error: function () {
|
|
$("#pageLoader").hide();
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "Error while fetching data",
|
|
confirmButtonText: "OK",
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// present
|
|
|
|
$(document).on("click", ".mark-present", function () {
|
|
let slno = $(this).data("slno");
|
|
updateAttendance(slno, 'P');
|
|
});
|
|
|
|
// Absent
|
|
$(document).on("click", ".mark-absent", function () {
|
|
let slno = $(this).data("slno");
|
|
updateAttendance(slno, 'A');
|
|
});
|
|
|
|
|
|
|
|
|
|
function updateAttendance(slno, status) {
|
|
|
|
Swal.fire({
|
|
title: "Are you sure?",
|
|
text: "Update attendance status?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Yes",
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false
|
|
}).then((result) => {
|
|
|
|
if (result.isConfirmed) {
|
|
|
|
$.ajax({
|
|
url: "/election/api/dataentryadmin/attendance/updateAttendance",
|
|
type: "POST",
|
|
contentType: "application/json",
|
|
data: JSON.stringify({
|
|
slno: slno,
|
|
status: status
|
|
}),
|
|
success: function () {
|
|
|
|
Swal.fire({
|
|
icon: "success",
|
|
title: "Updated successfully!",
|
|
confirmButtonText: "OK",
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false
|
|
}).then(() => {
|
|
location.reload();
|
|
|
|
});
|
|
},
|
|
error: function () {
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "Error updating attendance",
|
|
confirmButtonText: "OK",
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
$('#clearSearchBtn').click(function () {
|
|
|
|
// Clear input fields
|
|
$('#slNoInput').val('');
|
|
$('#mobileInput').val('');
|
|
|
|
// Optional: hide loader if visible
|
|
$('#pageLoader').hide();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|