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.
 
 
 
 
 

655 lines
32 KiB

<!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">&times;</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>