|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"><style>
</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="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <!-- <i class="far fa-calendar-plus bg-blue"></i> --> <div class="d-inline"> <h5>Batches</h5> <span>View and manage application batches</span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <span style="font-weight: bold;">Batches List</span> </div> <div class="card-body"> <div class="table-responsive"> <table id="batchDatatable" 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">Batch ID</th> <th class="text-center">Receiving Date</th> <th class="text-center">Department</th> <th class="text-center">Office Name</th> <th class="text-center">Applications</th> <th class="text-center">Completed</th> <th class="text-center">Pending</th> <th class="text-center">Action</th> </tr> </thead> <tbody> </tbody> </table> </div> </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 type="text/javascript">
$(document).ready(function() {
var table = $('#batchDatatable').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', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' } ], fixedHeader: true, autoWidth: true, responsive: false, searching: true, select: false, processing: false }); getbatchdetails(); });
function getbatchdetails(){ $('#pageLoader').show(); $.ajax({ type: "GET", url: `/election/api/dataentry/batch/getBatchDetails`, // Append query string to URL contentType: "application/json", success: function (response) { console.log("API Response:", response); $('#pageLoader').hide(); if (response.status === "success") { console.log("Details Array:", response.data); // Ensure details is an array and has at least one entry if (Array.isArray(response.data) && response.data) { let table = $('#batchDatatable').DataTable({ destroy: true, searching: true, autoWidth: true, paging: true, info: true, data: response.data, columns: [ { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' }, { data: 'id', defaultContent: '-', className: 'text-center' }, { data: 'rec_date', defaultContent: '-', className: 'text-center' }, { data: 'dept_name', defaultContent: '-', className: 'text-center' }, { data: null, className: "text-center", render: function (data, type, row) {
let address = '';
if (row.address1) address += row.address1; if (row.address2) address += (address ? ', ' : '') + row.address2;
return ` <div> <span>${row.office_name}</span><br> <span class="text-muted">${address || '-'}</span> </div> `; } }, { data: 'noof_application', defaultContent: '-', className: 'text-center' }, { data: 'completed', defaultContent: '-', className: 'text-center' }, { data: 'pending', defaultContent: '-', className: 'text-center' }, { data: 'id', className: 'text-center', render: function (data, type, row) { return ` <button class="btn btn-primary btn-sm" onclick="gotodetailspage('${row.id}', '${row.pending}')"> New Entry </button> `; } } ], dom: 'Bfrtip', buttons: [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn', }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn', filename: function () { return 'batch_details_' + getTimestamp(); } }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn', filename: function () { return 'batch_details_' + getTimestamp(); } }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn', filename: function () { return 'batch_details_' + getTimestamp(); } } ], columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '80vh', scrollX: true, responsive: false, searching: true }); } else{ $('#pageLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text:'Something went wrong!' }); } } else if (response.status === "error") { $('#pageLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text: response.message || 'Something went wrong!' }); } else { $('#pageLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text: response.message || 'Something went wrong!' }); } },
error: function (error) { $('#pageLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text: response.message || 'Something went wrong!' }); } });}
function gotodetailspage(batchid, pending) {
if (Number(pending) === 0) { Swal.fire({ title: "No Pending Entries", text: "All entries are completed for this batch.", icon: "warning" }); return; // stop redirect }
// else proceed window.location.href = '/election/dataentry/batchbyid?batchid=' + batchid;}
function getTimestamp() { const now = new Date(); const yyyy = now.getFullYear(); const mm = String(now.getMonth() + 1).padStart(2, '0'); const dd = String(now.getDate()).padStart(2, '0'); const hh = String(now.getHours()).padStart(2, '0'); const mi = String(now.getMinutes()).padStart(2, '0'); const ss = String(now.getSeconds()).padStart(2, '0');
return `${yyyy}${mm}${dd}_${hh}${mi}${ss}`;}
</script></body></html>
|
