|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head><style>
.form-group { margin-bottom: 20px; /* Add space between form groups */}
.form-select.custom-select { width: 100%; /* Ensure select elements take full width of their container */}</style><body> <div class="wrapper"> <!-- Header --> <header th:replace="~{fragments/modules/base/header :: header}"></header>
<div class="page-wrap"> <!-- Left Menu --> <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<div class="main-content"> <div class="container-fluid"> <div class="page-header"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="fas fa-th-large bg-blue"></i> <div class="d-inline"> <h5>CM Dashboard</h5> <span>All Details</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item">CM Dashboard</li> <li class="breadcrumb-item active" aria-current="page">All Details</li> </ol> </nav> </div> </div> </div>
<hr> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="zone-select"><b>Zone Name:</b></label> <select id="zone-select" class="form-select custom-select"> <option value="all">--All--</option> <option value="B-Buildings">B-Buildings</option> <option value="BR-Bus Route Roads">BR-Bus Route Roads</option> <option value="D-Storm Water Drains">D-Storm Water Drains</option> <option value="J-Bridges">J-Bridges</option> <option value="L-Electrical">L-Electrical</option> <option value="P-Parks and Playfields">P-Parks and Playfields</option> <option value="Q-Solid Waste Management">Q-Solid Waste Management</option> <option value="SP-SPECIAL PROJECTS">SP-SPECIAL PROJECTS</option> <option value="01 - NA-THIRUVOTTIYUR">01 - NA-THIRUVOTTIYUR</option> <option value="02 - NB-MANALI">02 - NB-MANALI</option> <option value="03 - NC-MADHAVARAM">03 - NC-MADHAVARAM</option> <option value="04 - ND-TONDIARPET">04 - ND-TONDIARPET</option> <option value="05 - NE-ROYAPURAM">05 - NE-ROYAPURAM</option> <option value="06 - NF-THIRU-VI-KA NAGAR">06 - NF-THIRU-VI-KA NAGAR</option> <option value="07 - NG-AMBATTUR">07 - NG-AMBATTUR</option> <option value="08 - NH-ANNA NAGAR">08 - NH-ANNA NAGAR</option> <option value="09 - NJ-TEYNAMPET">09 - NJ-TEYNAMPET</option> <option value="10 - NK-KODAMBAKKAM">10 - NK-KODAMBAKKAM</option> <option value="11 - NL-VALASARAVAKKAM">11 - NL-VALASARAVAKKAM</option> <option value="12 - NM-ALANDUR">12 - NM-ALANDUR</option> <option value="13 - NN-ADYAR">13 - NN-ADYAR</option> <option value="14 - NP-PERUNGUDI">14 - NP-PERUNGUDI</option> <option value="15 - NQ-SHOZHINGANALLUR">15 - NQ-SHOZHINGANALLUR</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="scheme-select"><b>Scheme Name:</b></label> <select id="scheme-select" class="form-select custom-select"> <option value="all">--All--</option> <option value="CAPITAL GRANT FUND">CAPITAL GRANT FUND</option> <option value="CHENNAI MEGA CITY DEVELOPMENT MISSION">CHENNAI MEGA CITY DEVELOPMENT MISSION</option> <option value="HEALTH BUILDINGS-NUHM">HEALTH BUILDINGS-NUHM</option> <option value="NULM - NIGHT SHELTER (SPL)">NULM - NIGHT SHELTER (SPL)</option> <option value="Own Source Fund">Own Source Fund</option> <option value="SMART CITY">SMART CITY</option> <option value="SMART CITY-SPECIAL PROJECT">SMART CITY-SPECIAL PROJECT</option> <option value="SWACHH BHARAT MISSION">SWACHH BHARAT MISSION</option> <option value="TURIF - 2020-2021">TURIF - 2020-2021</option> <option value="TURIF (2018-2019)">TURIF (2018-2019)</option> <option value="TURIF (2019-2020)">TURIF (2019-2020)</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="work-select"><b>Type of Work Name:</b></label> <select id="work-select" class="form-select custom-select"> <option value="all">--All--</option> <option value="Bridges">Bridges</option> <option value="Buildings">Buildings</option> <option value="Culvert">Culvert</option> <option value="Electrical">Electrical</option> <option value="Flyovers">Flyovers</option> <option value="Footpath">Footpath</option> <option value="Overbridges">Overbridges</option> <option value="Parks">Parks</option> <option value="Playfields">Playfields</option> <option value="Road Cut Restoration">Road Cut Restoration</option> <option value="Roads">Roads</option> <option value="Storm Water Drain">Storm Water Drain</option> <option value="Subway">Subway</option> </select> </div> </div> </div></div> <div class="card-block"> <div> <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%"> <thead class="thead-dark"> <tr role="row"> <th>S.No</th> <th>EST ID</th> <th>Region Name</th> <th>Zone Name</th> <th>Scheme Name</th> <th>Category of Work</th> <th>Type of Work</th> </tr> </thead> <tbody> <tr th:each="cmlistinfo, i : ${cmlist}"> <td th:text="${i.count}">0</td> <td> <a style="color: blue;" href="javascript:void(0)" th:onclick="'showModal(' + ${cmlistinfo.data_id} + ')'" th:text="${cmlistinfo.abs_est_number}"></a> </td> <td th:text="${cmlistinfo.regionname}"></td> <td th:text="${cmlistinfo.zonename}"></td> <td th:text="${cmlistinfo.schemename}"></td> <td th:text="${cmlistinfo.workcategory}"></td> <td th:text="${cmlistinfo.typeofwork}"></td> </tr> </tbody> <tfoot class="thead-dark"> <tr> <th>S.No</th> <th>EST ID</th> <th>Region Name</th> <th>Zone Name</th> <th>Scheme Name</th> <th>Category of Work</th> <th>Type of Work</th> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<!-- Modal --> <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="detailModalLabel"><span id="modal_abs_est_number"></span></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-striped table-bordered"> <tbody> <tr><th>Name of Work</th><td id="modal_nameofwork"></td></tr> <tr><th>Region Name</th><td id="modal_regionname"></td></tr> <tr><th>Zone Name</th><td id="modal_zonename"></td></tr> <tr><th>Ward Name</th><td id="modal_wardname"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Agreement Details:</span></thead> <tbody> <tr><th>Administration Sanctioned</th><td id="modal_administrationsanctioned"></td></tr> <tr><th>Agreement Date</th><td id="modal_agreementdate"></td></tr> <tr><th>Agreement Period</th><td id="modal_agreementperiod"></td></tr> <tr><th>Council Resolution Date</th><td id="modal_councilresolutiondate"></td></tr> <tr><th>LOA Issued</th><td id="modal_loaissued"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Scheme Details:</span></thead> <tbody> <tr><th>Scheme Name</th><td id="modal_schemename"></td></tr> <tr><th>Technical Sanction Date</th><td id="modal_technicalsanctiondate"></td></tr> <tr><th>Technical Bid Finalized</th><td id="modal_technicalbidfinalized"></td></tr> <tr><th>Tender Announced</th><td id="modal_tenderannounced"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Work Category Details:</span></thead> <tbody> <tr><th>Work Category</th><td id="modal_workcategory"></td></tr> <tr><th>Work Commenced</th><td id="modal_workcommenced"></td></tr> <tr><th>Work Order Issued</th><td id="modal_workorderissued"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Completed Date Wise Details:</span></thead> <tbody> <tr><th>Completed Date 25%</th><td id="modal_completeddate_25_percent"></td></tr> <tr><th>Completed Date 50%</th><td id="modal_completeddate_50_percent"></td></tr> <tr><th>Completed Date 75%</th><td id="modal_completeddate_75_percent"></td></tr> <tr><th>Completed Date 100%</th><td id="modal_completeddate_100_percent"></td></tr> <tr><th>Completion Report Date</th><td id="modal_completionreportdate"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Payment Details:</span></thead> <tbody> <tr><th>Type of Work</th><td id="modal_typeofwork"></td></tr> <tr><th>Value of Work</th><td>Rs.<span id="modal_valueofwork"></span></td></tr> <tr><th>Price Bid Finalize Date</th><td id="modal_pricebidfinalized"></td></tr> <tr><th>Paymentfully Settled Date</th><td id="modal_paymentfullysettleddate"></td></tr> </tbody> </table> <table class="table table-striped table-bordered"> <thead><span style="font-weight: bold;color: red; font-size: 20px;">Image:</span></thead> <tbody> <tr><td><img id="modal_workimage" src="" alt="Work Image" style="width:100%;"></td></tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
<!-- Include jQuery and Bootstrap JavaScript --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script type="text/javascript"> $(document).ready(function() {
var table = $('#worksDatatable').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', fixedColumns: { left: 1, right: 1 }, 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: true, searching: false, select: false, processing: false }); function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } // Get URL parameters let zoneParam = getUrlParameter('zonename'); let schemeParam = getUrlParameter('schemename'); let workParam = getUrlParameter('typeofwork');
// Set the dropdown values if parameters exist if (zoneParam) { $('#zone-select').val(zoneParam); } if (schemeParam) { $('#scheme-select').val(schemeParam); } if (workParam) { $('#work-select').val(workParam); } // Trigger the DataTable filter $('#zone-select, #scheme-select, #work-select').trigger('change'); // Custom filter function $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { let zoneValue = $('#zone-select').val(); let schemeValue = $('#scheme-select').val(); let workValue = $('#work-select').val();
let zoneText = data[3]; // Index of zone column let schemeText = data[4]; // Index of scheme column let workText = data[6]; // Index of work column
if ( (zoneValue === "all" || zoneText.includes(zoneValue)) && (schemeValue === "all" || schemeText.includes(schemeValue)) && (workValue === "all" || workText.includes(workValue)) ) { return true; } return false; } );
// Event listener for filter dropdowns $('#zone-select, #scheme-select, #work-select').on('change', function() { table.draw(); });
}); function showModal(dataId) { // Fetch the data based on dataId $.ajax({ url: '/gcc/api/cmdashboard/all-list/' + dataId, method: 'GET', success: function(data) { // Update the modal content document.getElementById('modal_abs_est_number').innerText = data.abs_est_number; document.getElementById('modal_nameofwork').innerText = data.nameofwork; document.getElementById('modal_regionname').innerText = data.regionname; document.getElementById('modal_zonename').innerText = data.zonename; document.getElementById('modal_wardname').innerText = data.wardname; document.getElementById('modal_administrationsanctioned').innerText = data.administrationsanctioned; document.getElementById('modal_agreementdate').innerText = data.agreementdate; document.getElementById('modal_agreementperiod').innerText = data.agreementperiod; document.getElementById('modal_councilresolutiondate').innerText = data.councilresolutiondate; document.getElementById('modal_loaissued').innerText = data.loaissued; document.getElementById('modal_schemename').innerText = data.schemename; document.getElementById('modal_technicalsanctiondate').innerText = data.technicalsanctiondate; document.getElementById('modal_technicalbidfinalized').innerText = data.technicalbidfinalized; document.getElementById('modal_tenderannounced').innerText = data.tenderannounced; document.getElementById('modal_workcategory').innerText = data.workcategory; document.getElementById('modal_workcommenced').innerText = data.workcommenced; document.getElementById('modal_workorderissued').innerText = data.workorderissued; document.getElementById('modal_completeddate_25_percent').innerText = data.completeddate_25_percent; document.getElementById('modal_completeddate_50_percent').innerText = data.completeddate_50_percent; document.getElementById('modal_completeddate_75_percent').innerText = data.completeddate_75_percent; document.getElementById('modal_completeddate_100_percent').innerText = data.completeddate_100_percent; document.getElementById('modal_completionreportdate').innerText = data.completionreportdate;
document.getElementById('modal_typeofwork').innerText = data.typeofwork; document.getElementById('modal_valueofwork').innerText = data.valueofwork; document.getElementById('modal_pricebidfinalized').innerText = data.pricebidfinalized; document.getElementById('modal_paymentfullysettleddate').innerText = data.paymentfullysettleddate; $('#modal_workimage').attr('src', data.imageurl);
// Show the modal $('#detailModal').modal('show'); }, error: function(err) { console.error(err); alert('Failed to fetch data'); } }); }
</script></body></html>
|
