1 changed files with 0 additions and 484 deletions
@ -1,484 +0,0 @@ |
|||||
<!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; |
|
||||
} |
|
||||
|
|
||||
.modal-label { |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.modal-value { |
|
||||
color: #444; |
|
||||
} |
|
||||
|
|
||||
.modal-section-title { |
|
||||
font-size: 1.2rem; |
|
||||
font-weight: bold; |
|
||||
margin-top: 20px; |
|
||||
margin-bottom: 10px; |
|
||||
border-bottom: 2px solid #dee2e6; |
|
||||
padding-bottom: 5px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.modal-title-big { |
|
||||
font-size: 20px; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
|
|
||||
.modal-subtext { |
|
||||
color: #b4c5d3; |
|
||||
font-size: 13px; |
|
||||
} |
|
||||
|
|
||||
.card-section { |
|
||||
background: white; |
|
||||
border-radius: 10px; |
|
||||
padding: 20px; |
|
||||
margin-bottom: 25px; |
|
||||
border: 1px solid #eee; |
|
||||
} |
|
||||
|
|
||||
.section-title { |
|
||||
font-weight: 700; |
|
||||
color: #333; |
|
||||
margin-bottom: 15px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.label-text { |
|
||||
font-size: 13px; |
|
||||
color: #6c757d; |
|
||||
} |
|
||||
|
|
||||
.value-text { |
|
||||
font-size: 15px; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.info-block { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.badge-status { |
|
||||
background: #ffd9b3; |
|
||||
color: #a65c00; |
|
||||
padding: 6px 10px; |
|
||||
border-radius: 5px; |
|
||||
font-size: 13px; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.btn-big { |
|
||||
padding: 12px 25px; |
|
||||
border-radius: 8px; |
|
||||
width: 200px; |
|
||||
} |
|
||||
|
|
||||
.rdo-box { |
|
||||
border: 1px solid #eee; |
|
||||
border-radius: 10px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
</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"> |
|
||||
<div class="row align-items-end"> |
|
||||
<div class="col-lg-6"> |
|
||||
<div class="page-header-title"> |
|
||||
<i class="fa fa-list-alt bg-blue"></i> |
|
||||
<div class="d-inline"> |
|
||||
<h5>Request List</h5> |
|
||||
<span>Flag Pole Request List</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-lg-6"> |
|
||||
<nav class="breadcrumb-container" aria-label="breadcrumb"> |
|
||||
<ol class="breadcrumb"> |
|
||||
<li class="breadcrumb-item"> |
|
||||
<a href="/swm/index"><i class="ik ik-home"></i></a> |
|
||||
</li> |
|
||||
<li class="breadcrumb-item" aria-current="page">Flag Pole Request List</li> |
|
||||
<li class="breadcrumb-item active" aria-current="page">Request List</li> |
|
||||
</ol> |
|
||||
</nav> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row mt-4"> |
|
||||
|
|
||||
<div class="col-md-12"> |
|
||||
<div class="card"> |
|
||||
<div class="card-header d-flex justify-content-between align-items-center fw-bold"> |
|
||||
<h3 class="mb-0">Temporary Flag Poles - Request List</h3> |
|
||||
<h7 class="mb-0">Rdo Request List</h7> |
|
||||
</div> |
|
||||
|
|
||||
<div class="row mt-3 ml-2"> |
|
||||
<div class="col-md-3"> |
|
||||
<label for="startDate" class="form-label" style="font-size: medium;">From |
|
||||
Date:</label> |
|
||||
<input type="date" id="startDate" class="form-control" placeholder="Start Date"> |
|
||||
</div> |
|
||||
<div class="col-md-3"> |
|
||||
<label for="endDate" class="form-label" style="font-size: medium;">To |
|
||||
Date:</label> |
|
||||
<input type="date" id="endDate" class="form-control" placeholder="End Date"> |
|
||||
</div> |
|
||||
<div class="col-md-3" style="margin-top: 30px;"> |
|
||||
<button id="searchBtn" class="btn btn-primary">Search</button> |
|
||||
<button id="resetBtn" class="btn btn-secondary">Reset</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="card-body"> |
|
||||
<div> |
|
||||
<div class="row mt-2"> |
|
||||
|
|
||||
|
|
||||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|
||||
<div class="card card-box p-4"> |
|
||||
<h6 class="text-facebook mb-20 mt-2 text-center fw-bold"><b>Total |
|
||||
Request</b> |
|
||||
</h6> |
|
||||
<h4 class="text-twitter fw-700 text-center" id="totalrequest">10 |
|
||||
</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|
||||
<div class="card card-box p-4"> |
|
||||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Pending Decision |
|
||||
</b></h6> |
|
||||
<h4 class="text-twitter fw-700 text-center" id="pendingdecision">8 |
|
||||
</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|
||||
<div class="card card-box p-4"> |
|
||||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Approved</b> |
|
||||
</h6> |
|
||||
<h4 class="text-twitter fw-700 text-center" id="approved">2</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|
||||
<div class="card card-box p-4"> |
|
||||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Rejected</b> |
|
||||
</h6> |
|
||||
<h4 class="text-twitter fw-700 text-center" id="rejected">0</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div> |
|
||||
<table id="QaqcDatatable" |
|
||||
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 no-sort">Applicant Name</th> |
|
||||
<th class="text-center">Zone/Ward</th> |
|
||||
<th class="text-center">Event Type</th> |
|
||||
<th class="text-center">Application Date</th> |
|
||||
<th class="text-center">Status</th> |
|
||||
<th class="text-center">Action</th> |
|
||||
|
|
||||
</tr> |
|
||||
|
|
||||
</thead> |
|
||||
<tbody> |
|
||||
|
|
||||
</tbody> |
|
||||
</table> |
|
||||
</div> |
|
||||
|
|
||||
</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> |
|
||||
|
|
||||
<!-- Details Modal --> |
|
||||
<div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true"> |
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable"> |
|
||||
<div class="modal-content"> |
|
||||
|
|
||||
<div class="modal-header" style="background:#2f3e54; color:white;"> |
|
||||
<div> |
|
||||
<h4 class="modal-title-big" id="modalTitle"></h4> |
|
||||
<div id="modalSubTitle" class="modal-subtext"></div> |
|
||||
</div> |
|
||||
|
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span |
|
||||
aria-hidden="true">×</span></button> |
|
||||
</div> |
|
||||
|
|
||||
<div class="modal-body"> |
|
||||
|
|
||||
<div id="modalContent"></div> |
|
||||
|
|
||||
<div class="text-center mt-4"> |
|
||||
<button type="button" class="btn btn-primary btn-big" data-dismiss="modal" |
|
||||
style="background:#2f3e54;">Close</button> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|
||||
<script type="text/javascript"> |
|
||||
|
|
||||
$(document).ready(function () { |
|
||||
|
|
||||
// ----------------------------- |
|
||||
// STATIC DATA |
|
||||
// ----------------------------- |
|
||||
var staticData = [ |
|
||||
{ |
|
||||
sno: 1, |
|
||||
applicant: "Yogi", |
|
||||
zoneWard: "08", |
|
||||
eventType: "Religious", |
|
||||
appDate: "05-12-2025", |
|
||||
status: "Pending", |
|
||||
|
|
||||
submittedDate: "December 2, 2024", |
|
||||
totalPoles: "65", |
|
||||
applicantName: "Priya Sharma", |
|
||||
mobileNumber: "+91 9123456789", |
|
||||
address: "456, Park Avenue, City Center", |
|
||||
eventDesc: "Independence Day celebration across multiple streets with flag displays.", |
|
||||
streetName: "Park Avenue", |
|
||||
zoneName: "Zone 1", |
|
||||
ward: "Ward 12", |
|
||||
poles: "30", |
|
||||
height: "8 meters", |
|
||||
poleMaterial: "Wood", |
|
||||
flagMaterial: "Cloth" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
// Destroy previous instance if exists |
|
||||
if ($.fn.DataTable.isDataTable('#QaqcDatatable')) { |
|
||||
$('#QaqcDatatable').DataTable().clear().destroy(); |
|
||||
} |
|
||||
|
|
||||
// ----------------------------- |
|
||||
// INITIALIZE DATATABLE |
|
||||
// ----------------------------- |
|
||||
var table = $('#QaqcDatatable').DataTable({ |
|
||||
data: staticData, |
|
||||
dom: 'Bftip', |
|
||||
columns: [ |
|
||||
{ data: "sno", className: "text-center" }, |
|
||||
{ data: "applicant", className: "text-center" }, |
|
||||
{ data: "zoneWard", className: "text-center" }, |
|
||||
{ data: "eventType", className: "text-center" }, |
|
||||
{ data: "appDate", className: "text-center" }, |
|
||||
|
|
||||
{ |
|
||||
data: "status", |
|
||||
className: "text-center", |
|
||||
render: () => `<span class="badge bg-warning text-dark">Pending</span>` |
|
||||
}, |
|
||||
|
|
||||
{ |
|
||||
data: null, |
|
||||
className: "text-center", |
|
||||
render: () => `<button class="btn btn-primary btn-sm viewBtn">View</button>` |
|
||||
} |
|
||||
], |
|
||||
scrollY: '50vh', |
|
||||
responsive: true |
|
||||
}); |
|
||||
|
|
||||
// ----------------------------- |
|
||||
// VIEW BUTTON → OPEN MODAL |
|
||||
// ----------------------------- |
|
||||
$(document).on("click", ".viewBtn", function () { |
|
||||
|
|
||||
let row = table.row($(this).closest("tr")).data(); |
|
||||
|
|
||||
// HEADER |
|
||||
$("#modalTitle").html(`Application Details - ${row.applicantName}`); |
|
||||
$("#modalSubTitle").html(`Request ID: REQ-2024-002 • 3 Streets`); |
|
||||
$("#statusBadge").html(row.status); |
|
||||
|
|
||||
// BODY CONTENT |
|
||||
let html = ` |
|
||||
<!-- GENERAL INFO --> |
|
||||
<div class="card-section"> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-4 d-flex justify-content-between align-items-start"> |
|
||||
|
|
||||
<!-- LEFT SIDE: LABEL + VALUE grouped --> |
|
||||
<div class="info-block"> |
|
||||
<div class="label-text">Submitted Date</div> |
|
||||
<div class="value-text">${row.submittedDate}</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- RIGHT SIDE: BADGE --> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="col-md-4"> |
|
||||
<div class="label-text">Total Poles</div> |
|
||||
<div class="value-text">${row.totalPoles}</div> |
|
||||
</div> |
|
||||
<div class="col-md-4 "> |
|
||||
<div class="value-text d-flex justify-content-between align-items-start"><span class="badge-status" id="statusBadge">${row.status}</span></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
<!-- APPLICANT INFO --> |
|
||||
<div class="card-section"> |
|
||||
<div class="section-title">Applicant Information</div> |
|
||||
|
|
||||
<div class="row mb-2"> |
|
||||
<div class="col-md-6"> |
|
||||
<div class="label-text">Applicant Name</div> |
|
||||
<div class="value-text">${row.applicantName}</div> |
|
||||
</div> |
|
||||
<div class="col-md-6"> |
|
||||
<div class="label-text">Mobile Number</div> |
|
||||
<div class="value-text">${row.mobileNumber}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="mb-2"> |
|
||||
<div class="label-text">Address</div> |
|
||||
<div class="value-text">${row.address}</div> |
|
||||
</div> |
|
||||
|
|
||||
<div> |
|
||||
<div class="label-text">Event Description</div> |
|
||||
<div class="value-text">${row.eventDesc}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- STREET BLOCK --> |
|
||||
<div class="card-section"> |
|
||||
<div class="section-title">Street Details & Flag Pole Specifications</div> |
|
||||
|
|
||||
<!-- STREET 1 --> |
|
||||
<div class="value-text mb-2">Street 1: ${row.streetName}</div> |
|
||||
|
|
||||
<div class="row mb-3"> |
|
||||
<div class="col-md-4"> |
|
||||
<div class="label-text">Street Name</div> |
|
||||
<div class="value-text">${row.streetName}</div> |
|
||||
</div> |
|
||||
<div class="col-md-4"> |
|
||||
<div class="label-text">Zone</div> |
|
||||
<div class="value-text">${row.zoneName}</div> |
|
||||
</div> |
|
||||
<div class="col-md-4"> |
|
||||
<div class="label-text">Ward</div> |
|
||||
<div class="value-text">${row.ward}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- POLE SPECS --> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-3"> |
|
||||
<div class="label-text">Number of Poles</div> |
|
||||
<div class="value-text">${row.poles}</div> |
|
||||
</div> |
|
||||
<div class="col-md-3"> |
|
||||
<div class="label-text">Height</div> |
|
||||
<div class="value-text">${row.height}</div> |
|
||||
</div> |
|
||||
<div class="col-md-3"> |
|
||||
<div class="label-text">Pole Material</div> |
|
||||
<div class="value-text">${row.poleMaterial}</div> |
|
||||
</div> |
|
||||
<div class="col-md-3"> |
|
||||
<div class="label-text">Flag Material</div> |
|
||||
<div class="value-text">${row.flagMaterial}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- RDO DECISION --> |
|
||||
<div class="rdo-box"> |
|
||||
<div class="section-title">RDO Decision</div> |
|
||||
|
|
||||
<div class="mb-3"> |
|
||||
<label class="label-text">Remarks*</label> |
|
||||
<textarea class="form-control" rows="4" placeholder="Enter your remarks here..."></textarea> |
|
||||
</div> |
|
||||
|
|
||||
<div class="d-flex justify-content-between"> |
|
||||
<button class="btn btn-secondary btn-big" disabled>Approve Request</button> |
|
||||
<button class="btn btn-secondary btn-big" disabled>Reject Request</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
`; |
|
||||
|
|
||||
$("#modalContent").html(html); |
|
||||
$("#detailsModal").modal("show"); |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
}); |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue