|
|
<!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>
|
