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.
434 lines
22 KiB
434 lines
22 KiB
<!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>
|