|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head><style>#batchDetailscard label{ /* font-size: medium; */ font-weight: bold; } #batchDetailscard span{ font-size: 12px; } .btncontainer button{ width: 50%;}</style><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>Micro-Observer Batch Information</h5> <span>View micro observer batch details </span> </div> </div> </div> </div> </div> <div class="container"> <div class="row mt-2 mb-2" style="padding: 10px;border: 1px solid green;background-color: rgba(144, 238, 144, 0.4);"> <div class="col-md-4"><!-- <p style="margin-bottom: 2px;font-size: medium;font-weight: bold;">Application <span id="c_completed_plus"></span> of <span id="c_noof_application"></span></p>
--> <p style="margin-bottom: 2px;font-size: 15px;font-size: medium;font-weight: bold;"><span id="c_completed"></span> saved . <span id="c_pending"></span> remaining</p> </div> <div class="col-md-4"> </div> <div class="col-md-4" style="text-align: right;font-weight: bold;font-size:x-large;"> <!-- <span id="cc_completed_plus"></span>/<span id="cc_noof_application"></span> --> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card" id="batchDetailscard"> <div class="card-header"> <span style="font-weight: bold;">Micro-Observer Batch Information</span> </div> <div class="card-body"> <div class="row mb-3" style="row-gap:15px;">
<div class="col-md-3 col-sm-12"> <label for="batch_id" >Batch ID :</label> </div> <div class="col-md-9 col-sm-12"> <span id="batch_id" th:text="${batchdetails.id}"></span> </div>
<div class="col-md-3 col-sm-12"> <label for="receiving_date" >Receiving Date :</label> </div> <div class="col-md-9 col-sm-12"> <span th:text="${batchdetails.received_date}"></span> </div>
<div class="col-md-3 col-sm-12"> <label for="batch_dept" >Department :</label> </div> <div class="col-md-9 col-sm-12"> <span th:text="${batchdetails.dept_name}"></span> </div> <div class="col-md-3 col-sm-12"> <label for="office_name" >Office Name :</label> </div> <div class="col-md-9 col-sm-12"> <span th:text="${batchdetails.office_name} + ', ' + (${batchdetails.address1} ?: '') + (${batchdetails.address2} != null ? ', ' + ${batchdetails.address2} : '') + (${batchdetails.address3} != null ? ', ' + ${batchdetails.address3} : '')"> </span> </div>
<div class="col-md-3 col-sm-12"> <label for="no_of_app" >No of Applications :</label> </div> <div class="col-md-9 col-sm-12"> <span th:text="${batchdetails.noof_application}"></span> </div> </div> <div class="row mt-4 btncontainer"> <div class="col-12 d-flex justify-content-center"> <button class="btn btn-secondary" onclick="goback()" >Back</button> <button class="btn btn-primary mx-2" th:onclick="'gotoNewEntry(' + ${batchdetails.id} + ',' + ${batchdetails.dept_id} + ',' + ${batchdetails.office_id} + ')'"> Add New Entry </button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <!-- <div class="card-header">
<h3><b>Applicants for Checklist</b></h3> </div> -->
<div class="card-body">
<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">Unique No / Batch No</th> <th class="text-center">Name / Pay Scale / Cur.Basic /Grade Pay</th> <th class="text-center">Sex</th> <th class="text-center">Designation</th> <th class="text-center">State /Central</th> <th class="text-center">Office Address</th> <th class="text-center">Mobile</th> <th class="text-center">Residential Address</th> <th class="text-center">Native Constituency</th> <th class="text-center">Residential Constituency</th> <th class="text-center">Working Constituency</th> <th class="text-center">Enrolled - Part / Sl.No / EPIC / Assembly Constituency</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 type="text/javascript">
$(document).ready(function() {
let batch_id=document.getElementById("batch_id").textContent; getstatuscounts(batch_id); var table = $('#batchDatatable').DataTable({ dom: 'Bftip', // columnDefs: [ // { targets: 'no-sort', orderable: false }
columnDefs: [ { width: "150px", targets: 1 }, // Name / Pay Scale column { width: "150px", targets: 2 }, // Office Address column { width: "250px", targets: 6 }, {width: "150px", targets: 12}, {width: "100px", targets: 7}, {width: "200px", targets: 8}
], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '80vh', 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 }); const initialParams = new URLSearchParams({ batchNo: batch_id, fromSLno: "", toSLno: "", mobileNo: "", category: "", officeName: "", notExist: "" });
loadApplicants(initialParams.toString()); });
function loadApplicants(paramString) {
$('#pageLoader').show();
$.ajax({ type: "GET", url: `/election/api/checklistadminmob/getApplicants?${paramString}`,
success: function (response) {
console.log("API Response:", response); $('#pageLoader').hide();
if (response.message === "success" && Array.isArray(response.data)) {
$('#batchDatatable').DataTable({ destroy: true, searching: true, autoWidth: true, paging: true, info: true, data: response.data,
columns: [ { data: null, className: 'text-center', render: (d,t,r,m) => m.row + 1 },
{ data: null, className: "text-center", render: r => `${r.slno || '-'}<br>/ ${r.batch_no || '-'}` },
{ data: null, className: "text-center", render: r => ` ${r.name || '-'}<br> <small> ${r.pay_scale || '-'} / ${r.basic_pay || '-'} / ${r.grade_pay || '-'} </small>` },
{ data: 'sex', className: 'text-center' }, { data: 'new_designation', className: 'text-center' }, { data: 'govt_type', className: 'text-center' }, { data: null, className: "text-center", render: r => `${r.office_name || '-'}<br>/ ${r.address || '-'}` },
{ data: null, className: 'text-center', render: r => `${r.r_mobile_no || ''}` },
{ data: null, className: 'text-center', render: r => `${r.r_address1 || ''} ${r.r_address2 || ''} ${r.r_address3 || ''} - ${r.r_pincode || ''}` },
{ data: null, className: 'text-center', render : r => `${r.native_ac_no || ''} - ${r.native_constituency || ''}` }, { data: null, className: 'text-center', render : r => `${r.reside_ac_no || ''} - ${r.residential_constituency || ''}` }, { data: null, className: 'text-center', render : r => `${r.work_ac_no || ''} - ${r.working_constituency || ''}` },
{ data: null, className: 'text-center', render: { display: r => ` Part: ${r.elector_part_no || '-'}<br> Sl: ${r.elector_sl_no || '-'}<br> ${r.elector_epic_no || '-'}<br> ${r.elector_ac_no || '-'} - ${r.elector_constituency || '-'} `, export: r => `Part: ${r.elector_part_no || '-'}\n` + `Sl: ${r.elector_sl_no || '-'}\n` + `${r.elector_epic_no || '-'}\n` + `${r.elector_ac_no || '-'} - ${r.elector_constituency || '-'}` } } ],
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 'micro_observer_details_' + getTimestamp(); } }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn', filename: function () { return 'micro_observer_details_' + getTimestamp(); } }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn', title:'Micro Observer Details', filename: function () { return 'micro_observer_details_' + getTimestamp(); }, orientation: 'landscape', // ⭐ important line pageSize: 'A4',
customize: function (doc) {
doc.pageOrientation = 'landscape';
// Reduce page margins to use full width doc.pageMargins = [10, 10, 10, 10];
// Reduce default font size so columns fit doc.defaultStyle.fontSize = 7; doc.styles.tableHeader.fontSize = 8;
// ⭐ Force table to shrink inside page doc.content[1].table.widths = [ 20, // S.No 40, // Unique/Batch 80, // Name / Pay Scale 30, // Sex 60, // Designation 30, // State / Central 100, // Office Address 50, // Mobile 90, // Residence Address 40, // Native 40, // Reside 40, // Work 80 // Enrolled ];
// ⭐ Remove large default paddings var objLayout = {}; objLayout['hLineWidth'] = function(i) { return 0.3; }; objLayout['vLineWidth'] = function(i) { return 0.3; }; objLayout['hLineColor'] = function(i) { return '#000'; }; objLayout['vLineColor'] = function(i) { return '#000'; };
objLayout['paddingLeft'] = function(i) { return 2; }; objLayout['paddingRight'] = function(i) { return 2; }; objLayout['paddingTop'] = function(i) { return 2; }; objLayout['paddingBottom'] = function(i) { return 2; };
doc.content[1].layout = objLayout; }
} ],
columnDefs: [ { width: "150px", targets: 1 }, { width: "150px", targets: 2 }, { width: "250px", targets: 6 }, {width: "150px", targets: 12}, {width: "100px", targets: 7}, {width: "200px", targets: 8} ],
scrollY: '80vh', scrollX: true, responsive: false });
} /* else { Swal.fire("No Data", "No records found", "warning"); } */ },
error: function (xhr) { $('#pageLoader').hide(); console.log(" Server Error:", xhr.responseText);
Swal.fire({ icon: 'error', title: 'Error', text: 'Server error! Check console.', confirmButtonText: 'OK', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false }).then(() => { location.reload(); // optional action }); } });}
function getstatuscounts(batchId){ $('#pageLoader').show(); fetch('/election/api/dataentry_mob/batch/getbatchbyId?id=' + batchId) .then(response => response.json()) .then(result => {
if (result.status !== "success") { console.error("API error:", result.message); return; }
let data = result.data; console.log("Details:", data); // Example: set values into input fields /* document.getElementById("c_noof_application").textContent = data.noof_application; document.getElementById("cc_noof_application").textContent = data.noof_application; */ document.getElementById("c_completed").textContent = data.completed; document.getElementById("c_pending").textContent = data.pending; /* let completedCount = parseInt(data.completed) || 0; let completedPlusOne = completedCount + 1;
document.getElementById("c_completed_plus").textContent = completedPlusOne; document.getElementById("cc_completed_plus").textContent = completedPlusOne; */
}) .catch(error => { console.error("Error fetching batch counts details:", error); }) .finally(() => { $('#pageLoader').hide(); // ALWAYS hide loader });}
function gotoNewEntry(batchId, deptId, officeId) { $('#pageLoader').show(); fetch('/election/api/dataentry_mob/batch/getbatchbyId?id=' + batchId) .then(response => response.json()) .then(result => {
if (result.status !== "success") { console.error("API error:", result.message); return; } if (result.status === "success") { let data = result.data; console.log("Details:", data); let noa=data.noof_application; let coma=data.completed; if(coma>=noa){ Swal.fire({ icon: 'info', title: 'Already no of application is achieved', text: 'For this Batch,Total no of application is filled already.', confirmButtonText: 'OK', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false }).then(() => { window.location.href="/election/dataentry_mob/batches"; }); return; } else{ sessionStorage.setItem("batchId", batchId); sessionStorage.setItem("deptId", deptId); sessionStorage.setItem("officeId", officeId);
window.location.href = "/election/dataentry_mob/newentry"; } } }) .catch(error => { console.error("Error fetching batch counts details:", error); }) .finally(() => { $('#pageLoader').hide(); // ALWAYS hide loader });
}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}`;}function goback(){ window.location.href="/election/dataentry_mob/batches";}
</script></body></html>
|
