|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head><style> .width1 { width: 120px; }
.width2 { width: 150px; }</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>Updation</h5> <span>View and Update</span> </div> </div> </div> </div> </div>
<!-- <div class="row">
<div class="col-md-12"> <div class="card"> <div class="card-header"> <span>Fill in the details </span> </div> <div class="card-body"> <div class="row"> <div class="col-md-3 col-sm-12"> <label class="form-label" for="unique_num">Unique Number</label> <input type="text" class="form-control" id="unique_num"> </div> <div class="col-md-1 col-sm-12 text-center pt-4"> <span style="font-weight: bold;">OR</span> </div> <div class="col-md-3 col-sm-12"> <label class="form-label" for="batch_num">Batch No</label> <input type="text" class="form-control" id="batch_num"> </div> <div class="col-md-1 col-sm-12 text-center pt-4"> <span style="font-weight: bold;">OR</span> </div> <div class="col-md-3 col-sm-12"> <label class="form-label" for="mobile_num">Mobile Number</label> <input type="text" class="form-control" id="mobile_num"> </div> </div>
<div class="row mt-3"> <div class="col-12 d-flex justify-content-center"> <button type="submit" id="searchBtn" class="btn btn-primary mx-2">Search</button>
<button class="btn btn-danger mx-2" id="resetBtn" name="reset">Reset</button> </div> </div>
</div> </div> </div> </div> --> <div class="row mb-3"> <div class="col-md-12 d-flex justify-content-end"> <button type="button" class="btn btn-primary mx-2" id="pendingListBtn" onclick="loadPendingList()">Pending List</button> <button type="button" class="btn btn-success" id="updatedListBtn" onclick="loadUpdatedList()">Updated List</button> </div> </div>
<div class="row" id="detailscard"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="table-responsive">
<table id="DetailsDatatable" 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 width1">Name</th> <th class="text-center">Sex</th>
<th class="text-center">Designation</th> <th class="text-center">State / Central</th> <th class="text-center width2">Office Address</th> <th class="text-center">Mobile Number</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> <!-- <th class="text-center">Photo</th> --> <th class="text-center">Action</th> </tr> </thead> <tbody>
</tbody> </table> </div> </div>
</div> </div> </div>
</div> </div>
<!-- Modal for Updated Details --> <div class="modal fade" id="updatedDetailsModal" tabindex="-1" role="dialog" aria-labelledby="updatedDetailsModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-primary text-white"> <h5 class="modal-title" id="updatedDetailsModalLabel">Updated Details</h5> <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" onclick="$('#updatedDetailsModal').modal('hide')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id="updatedDetailsContent" style="max-height: 70vh; overflow-y: auto;"> <div class="text-center" id="modalLoader" style="display: none;"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> </div> <div id="modalDataContainer" style="display: none;"> <table class="table table-bordered table-striped"> <thead class="bg-light"> <tr> <th>Field</th> <th>Requested Details</th> <th>Updated Details (poll_person)</th> </tr> </thead> <tbody> <tr> <th>slno</th> <td id="req_slno"></td> <td id="upd_slno"></td> </tr> <tr> <th>Name</th> <td id="req_name"></td> <td id="upd_name"></td> </tr> <tr> <th>Gender</th> <td id="req_gender"></td> <td id="upd_gender"></td> </tr> <tr> <th>Designation</th> <td id="req_designation"></td> <td id="upd_designation"></td> </tr> <tr> <th>Mobile Number</th> <td id="req_mobile"></td> <td id="upd_mobile"></td> </tr> <tr> <th>Residential Address</th> <td id="req_address"></td> <td id="upd_address"></td> </tr> <tr> <th>Office Name/Address</th> <td id="req_office"></td> <td id="upd_office"></td> </tr> <tr> <th>Native AC</th> <td id="req_native_ac"></td> <td id="upd_native_ac"></td> </tr> <tr> <th>Electoral AC</th> <td id="req_elector_ac"></td> <td id="upd_elector_ac"></td> </tr> <tr> <th>Part No / Sl No</th> <td id="req_part_slno"></td> <td id="upd_part_slno"></td> </tr> <tr> <th>Photo URL</th> <td id="req_photo"></td> <td id="upd_photo"></td> </tr> <tr> <th>Updated Date & Time</th> <td id="req_updatedate"></td> <td id="upd_updatedate"></td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" onclick="$('#updatedDetailsModal').modal('hide')">Close</button> </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">
let currentMode = 'pending';
$(document).ready(function () { loadPendingList(); });
function loadPendingList() { currentMode = 'pending'; $('#pendingListBtn').removeClass('btn-secondary').addClass('btn-primary'); $('#updatedListBtn').removeClass('btn-success').addClass('btn-secondary'); loadTableData(`/election/api/pollpersonupdateadmin/getPollPersonUpdateRequest`, false); }
function loadUpdatedList() { currentMode = 'updated'; $('#updatedListBtn').removeClass('btn-secondary').addClass('btn-success'); $('#pendingListBtn').removeClass('btn-primary').addClass('btn-secondary'); loadTableData(`/election/api/pollpersonupdateadmin/getUpdatedPollPersonRequests`, true); }
function loadTableData(apiUrl, isUpdated) { $('#pageLoader').show();
$.ajax({ type: "GET", url: apiUrl, contentType: "application/json", success: function (response) { console.log("API Response:", response); $('#pageLoader').hide();
let records = response || [];
let table = $('#DetailsDatatable').DataTable({ destroy: true, searching: true, autoWidth: true, paging: true, info: true, data: records, columns: [ { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' }, { data: 'slno', className: 'text-center', render: r => `${r || '-'}` }, { data: 'name', className: 'text-center width1', render: r => `${r || '-'}` }, { data: 'sex', className: 'text-center' }, { data: 'designation_id', className: 'text-center' },
{ data: null, className: 'text-center', render: () => '-' }, { data: null, className: 'text-center width2', render: () => '-' }, { data: 'mobile_no', className: 'text-center' }, { data: 'address1', className: 'text-center', render: r => `${r || '-'}` }, { data: 'native_ac_name', className: 'text-center' }, { data: 'reside_ac_name', className: 'text-center' }, { data: null, className: 'text-center', render: () => '-' },
{ 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 || '-'} `, export: r => `Part: ${r.elector_part_no || '-'}\n` + `Sl: ${r.elector_sl_no || '-'}\n` + `${r.elector_epic_no || '-'}\n` + `${r.elector_ac_no || '-'}` } },
// { // data: 'photo_upload_url', // className: 'text-center', // render: function (url, type, row) { // if (!url) { // return `<span style="color:red;">No Image</span>`; // } // return ` // <img src="${url}" // style="height: 100px; width: 100px; object-fit: cover; border:1px solid #ccc;" // alt="Photo"> // `; // } // }, { data: null, className: 'text-center', render: function (data) {
let id = data.id; let slno = data.slno;
if (isUpdated) { return ` <button class="btn btn-success btn-sm view-btn" onclick="viewUpdatedDetailsModal('${id}', '${slno}')"> Updated Details </button> `; } else { return ` <button class="btn btn-info btn-sm view-btn" onclick="viewDetails('${id}', '${slno}')"> View </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 'polling_personnel_details_' + getTimestamp(); } }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn', filename: function () { return 'polling_personnel_details_' + getTimestamp(); } }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn', title: 'Polling Personnel Details', filename: function () { return 'polling_personnel_details_' + getTimestamp(); }, orientation: 'landscape', 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 30, // Unique/Batch 60, // Name / Pay Scale 20, // Sex 60, // Designation 30, // State / Central 100, // Office Address 40, // Mobile 90, // Residence Address 40, // Native 40, // Reside 40, // Work 70, // Enrolled // 50, // Photo 30 ];
// 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: 2 }, { width: "150px", targets: 6 }, { width: "120px", targets: 8 }, { width: "150px", targets: 12 }, { width: "150px", targets: 13 }
], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '80vh', scrollX: true, responsive: false, searching: true }); }, error: function (error) { $('#pageLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to fetch data' }); } }); }
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 viewDetails(id, slno) { // Save values in sessionStorage if needed sessionStorage.setItem("upd_id", id); sessionStorage.setItem("upd_slno", slno);
// Redirect to form page or handle view logic window.location.href = "/election/dataentryadmin/updatepollpersonform"; }
function viewUpdatedDetailsModal(id, slno) { $('#updatedDetailsModal').modal('show'); $('#modalLoader').show(); $('#modalDataContainer').hide();
let reqPromise = $.ajax({ type: "GET", url: `/election/api/pollpersonupdateadmin/getUpdatedRequestDetailsById?id=${id}` });
let updPromise = $.ajax({ type: "GET", url: `/election/api/pollpersonupdateadmin/getPollPersonDetailsBySlno?slno=${slno}` });
Promise.all([reqPromise, updPromise]).then(function(results) { $('#modalLoader').hide(); let reqRes = results[0]; let updRes = results[1];
// Populate Requested Details (poll_person_new) if (reqRes && reqRes.length > 0) { let req = reqRes[0]; $('#req_slno').text(req.slno || '-'); $('#req_name').text(req.name || '-'); $('#req_gender').text(req.sex || '-'); $('#req_designation').text(req.designation || req.designation_id || '-'); $('#req_mobile').text(req.r_mobile_no || req.mobile_no || req.phone_no || '-'); let reqAddr = [req.r_address1, req.r_address2, req.r_address3].filter(Boolean).join(', '); $('#req_address').text(reqAddr || '-');
let reqOffice = [req.office, req.address1, req.address2, req.address3].filter(Boolean).join(', '); $('#req_office').text(reqOffice || '-'); $('#req_native_ac').text(req.native_ac_name || req.native_ac_no || '-'); $('#req_elector_ac').text(req.elector_ac_no || '-'); $('#req_part_slno').text((req.elector_part_no || '-') + ' / ' + (req.elector_sl_no || '-'));
let reqDate = req.updatedate || req.cdate || req.updated_date; if (reqDate) { let d = new Date(reqDate); let dd = String(d.getDate()).padStart(2, '0'); let mm = String(d.getMonth() + 1).padStart(2, '0'); let yyyy = d.getFullYear(); let hours = d.getHours(); let minutes = String(d.getMinutes()).padStart(2, '0'); let ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; $('#req_updatedate').text(`${dd}-${mm}-${yyyy} ${String(hours).padStart(2, '0')}:${minutes} ${ampm}`); } else { $('#req_updatedate').text('-'); }
if (req.img_full_path) { $('#req_photo').html(`<a href="${req.img_full_path}" target="_blank">View Photo</a>`); } else { $('#req_photo').text('-'); } }
// Populate Updated Details (poll_person) if (updRes && updRes.length > 0) { let upd = updRes[0]; $('#upd_slno').text(upd.slno || '-'); $('#upd_name').text(upd.name || '-'); $('#upd_gender').text(upd.sex || '-'); $('#upd_designation').text(upd.designation || '-'); $('#upd_mobile').text(upd.r_mobile_no || upd.mobile_no || upd.phone_no || '-');
let updAddr = [upd.r_address1, upd.r_address2, upd.r_address3].filter(Boolean).join(', '); $('#upd_address').text(updAddr || '-');
let updOffice = [upd.office, upd.address1, upd.address2, upd.address3].filter(Boolean).join(', '); $('#upd_office').text(updOffice || '-');
$('#upd_native_ac').text(upd.native_ac_name || upd.native_ac_no || '-'); $('#upd_elector_ac').text(upd.elector_ac_no || '-'); $('#upd_part_slno').text((upd.elector_part_no || '-') + ' / ' + (upd.elector_sl_no || '-'));
let updDate = upd.updatedate || upd.cdate || upd.updated_date; if (updDate) { let d = new Date(updDate); let dd = String(d.getDate()).padStart(2, '0'); let mm = String(d.getMonth() + 1).padStart(2, '0'); let yyyy = d.getFullYear(); let hours = d.getHours(); let minutes = String(d.getMinutes()).padStart(2, '0'); let ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; $('#upd_updatedate').text(`${dd}-${mm}-${yyyy} ${String(hours).padStart(2, '0')}:${minutes} ${ampm}`); } else { $('#upd_updatedate').text('-'); }
if (upd.img_full_path) { $('#upd_photo').html(`<a href="${upd.img_full_path}" target="_blank">View Photo</a>`); } else { $('#upd_photo').text('-'); } }
$('#modalDataContainer').show(); }).catch(function(err) { $('#modalLoader').hide(); Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to fetch updated details!' }); }); }
</script></body>
</html>
|