|
|
<!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>Micro-Observer Updation</h5> <span>View and manage micro observer application batches </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" 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/Batch No</th> <th class="text-center width1">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 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> <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() {
// MOBILE NO: exactly 10 digits $('#mobile_num').on('input', function () { // Allow only digits this.value = this.value.replace(/\D/g, '');
// Max 10 digits if (this.value.length > 10) { this.value = this.value.slice(0, 10); } }); $('#unique_num').on('input', function () { // Allow only digits this.value = this.value.replace(/\D/g, ''); }); $('#batch_num').on('input', function () { // Allow only digits this.value = this.value.replace(/\D/g, ''); }); var table = $('#DetailsDatatable').DataTable({ dom: 'Bftip', columnDefs: [ { width: "150px", targets: 2 }, // Name / Pay Scale column { width: "150px", targets: 6 }, // Office Address column { width: "150px", targets: 8 }, { width: "150px", targets: 12 } ], 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 }); });
document.getElementById('resetBtn').addEventListener('click', function (e) { location.reload(); });
document.getElementById('searchBtn').addEventListener('click', function (e) { $('#pageLoader').show(); let unique_num = document.getElementById('unique_num').value; let mobile_num = document.getElementById('mobile_num').value; let batch_num = document.getElementById('batch_num').value; console.log(unique_num,",",mobile_num,",",batch_num); if(!unique_num && !mobile_num && !batch_num){ $('#pageLoader').hide(); Swal.fire({ icon: 'warning', title: 'For Search, Any One Is Required ', text: 'Please Enter required details', showConfirmButton: true, timer: 3000 }); e.preventDefault(); return; } if(mobile_num){ // Rule 1: Must be exactly 10 digits & must not start with 0 if (!/^[1-9][0-9]{9}$/.test(mobile_num)) { $('#pageLoader').hide(); Swal.fire({ icon: 'warning', title: 'Invalid Mobile Number', text: 'Mobile number must be 10 digits and cannot start with 0.' }); return; }
// Rule 2: Reject sequential numbers like 1234567890 if (mobile_num === "1234567890") { $('#pageLoader').hide(); Swal.fire({ icon: 'warning', title: 'Invalid Mobile Number', text: 'Sequential numbers like 1234567890 are not allowed.' }); return; }
// Rule 3: Reject all digits same (1111111111, 2222222222, etc.) if (/^(\d)\1{9}$/.test(mobile_num)) { $('#pageLoader').hide(); Swal.fire({ icon: 'warning', title: 'Invalid Mobile Number', text: 'All digits cannot be the same.' }); return; } } $.ajax({ type: "GET", url: `/election/api/dataentry_mob/update/getbymobanduniq`, data:{ mobilenum:mobile_num, uniquenum:unique_num, batch_num:batch_num }, contentType: "application/json", success: function (response) { console.log("API Response:", response); $('#pageLoader').hide(); if (response.status === "success") { console.log("Details Array:", response.data); // Convert object → array let records = response.data || []; console.log("Table Records:", records);
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: null, className: 'text-center' , render: r => `${r.slno || '-'}<br>/ ${r.batch_no || '-'}` }, { data: null, className: 'text-center width1' , 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 width2' , render: r => `${r.office_name || '-'}<br>/ <small>${r.office_address || '-'}</small>` }, { data: 'r_mobile_no' ,className: 'text-center' }, { data: 'res_address', className: 'text-center' }, { data: null, className: 'text-center' , render: r => `${r.native_ac_no || '-'} - ${r.native_assembly || '-'}` }, { data: null, className: 'text-center' , render: r => `${r.reside_ac_no || '-'} - ${r.res_assembly || '-'}` }, { data: null, className: 'text-center' , render: r => `${r.work_ac_no || '-'} - ${r.work_assembly || '-'}` }, { 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.enrolled_assembly || '-'} `, export: r => `Part: ${r.elector_part_no || '-'}\n` + `Sl: ${r.elector_sl_no || '-'}\n` + `${r.elector_epic_no || '-'}\n` + `${r.elector_ac_no || '-'} - ${r.enrolled_assembly || '-'}` } }, { data: 'img_full_path', 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 dept = data.dept; let desigId = data.designation_id; let officeId = data.office_id; let batchId = data.batch_id;
return ` <button class="btn btn-primary btn-sm" onclick="goToUpdateForm('${id}','${dept}','${desigId}','${officeId}','${batchId}')"> Update </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 '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 30, // Unique/Batch 60, // Name / Pay Scale 20, // Sex 60, // Designation 30, // State / Central 100, // Office Address 50, // Mobile 90, // Residence Address 40, // Native 40, // Reside 40, // Work 70, // Enrolled 50, // Photo 30 // action ];
// ⭐ 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: 12} ], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '80vh', scrollX: true, responsive: false, searching: true }); } else if (response.status === "no_data") { $('#pageLoader').hide(); Swal.fire({ icon: 'info', title: 'No Data', text: response.data || '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 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 goToUpdateForm(id, dept, designationId, officeId, batchId) {
// Save values in sessionStorage sessionStorage.setItem("upd_id", id); sessionStorage.setItem("upd_dept", dept); sessionStorage.setItem("upd_office_id", officeId); sessionStorage.setItem("upd_batch_id", batchId);
// Redirect to form page window.location.href = "/election/dataentry_mob/updateform";}
</script></body></html>
|
