21 changed files with 3639 additions and 2498 deletions
-
15gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Controller/ChildrenSurveyController.java
-
9gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Controller/MainController.java
-
115gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Service/ChildrenSurveyService.java
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/castemaster.html
-
32gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/childlist.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentcorrectionmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentreasonmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/dropoutreasonmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/educationmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/gendermaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/incomemaster.html
-
4gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/interestfieldmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/livingmaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/locationmaster.html
-
955gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/nonchildlist.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/ownermaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/religionmaster.html
-
2gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/surveyorsreports.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/vulnerabilitymaster.html
-
3gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/whereaboutmaster.html
@ -0,0 +1,955 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" dir=""> |
||||
|
<html xmlns:th="http://www.thymeleaf.org"> |
||||
|
|
||||
|
<head th:replace="~{fragments/modules/base/head :: head}"> |
||||
|
<style> |
||||
|
#surveyModal .modal-dialog { |
||||
|
max-width: 70%; |
||||
|
width: 70%; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-content { |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
#surveyModal .modal-header { |
||||
|
background-color: #f8f9fa; |
||||
|
border-bottom: 2px solid #007bff; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-title { |
||||
|
font-weight: 600; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body { |
||||
|
padding: 30px 40px; |
||||
|
} |
||||
|
|
||||
|
#surveyDetails .row { |
||||
|
margin-bottom: 15px; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 1px solid #e9ecef; |
||||
|
} |
||||
|
|
||||
|
#surveyDetails .col-md-5 { |
||||
|
font-weight: 600; |
||||
|
color: #34495e; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
#surveyDetails .col-md-7 { |
||||
|
font-weight: 500; |
||||
|
color: #555; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* Modal scrollbar styling */ |
||||
|
#surveyModal .modal-body::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body::-webkit-scrollbar-thumb { |
||||
|
background: #007bff; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body::-webkit-scrollbar-thumb:hover { |
||||
|
background: #0056b3; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
#surveyModal .modal-dialog { |
||||
|
max-width: 96%; |
||||
|
width: 96%; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-dialog { |
||||
|
max-width: 75%; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-content { |
||||
|
border-radius: 12px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-header { |
||||
|
background: #44506A; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-title { |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
#surveyModal .modal-body { |
||||
|
padding: 30px; |
||||
|
background: #f7f8fa; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.detail-card { |
||||
|
background: #fff; |
||||
|
border-radius: 12px; |
||||
|
padding: 14px 18px; |
||||
|
border: 1px solid #e9ecef; |
||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.detail-label { |
||||
|
font-size: 13px; |
||||
|
font-weight: 700; |
||||
|
color: #7f8c8d; |
||||
|
text-transform: uppercase; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.detail-value { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #2c3e50; |
||||
|
line-height: 1.6; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
.section-heading { |
||||
|
font-size: 24px; |
||||
|
font-weight: 700; |
||||
|
margin-bottom: 20px; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 2px solid #e5e7eb; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.section-heading { |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
margin-bottom: 20px; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 2px solid #e74c3c; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
.detail-card { |
||||
|
background: white; |
||||
|
border-radius: 10px; |
||||
|
padding: 15px 18px; |
||||
|
height: 100%; |
||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); |
||||
|
border: 1px solid #edf0f2; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
@media(max-width:768px) { |
||||
|
|
||||
|
#surveyModal .modal-dialog { |
||||
|
max-width: 95%; |
||||
|
} |
||||
|
|
||||
|
.detail-card { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="wrapper"> |
||||
|
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
||||
|
|
||||
|
<div class="page-wrap"> |
||||
|
<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-6"> |
||||
|
<div class="page-header-title"> |
||||
|
<i class="ik ik-thumbs-up bg-blue"></i> |
||||
|
<div class="d-inline"> |
||||
|
<h5>Children Survey Dashboard</h5> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<input type="date" id="fromDate" class="form-control d-inline-block" |
||||
|
style="width:150px;"> |
||||
|
<span class="mx-1">to</span> |
||||
|
<input type="date" id="toDate" class="form-control d-inline-block" |
||||
|
style="width:150px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-6"> |
||||
|
<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 active" aria-current="page">Update Staff</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div>--> |
||||
|
<div class="page-header"> |
||||
|
<div class="row align-items-center"> |
||||
|
|
||||
|
<!-- LEFT SIDE --> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-thumbs-up bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Children Survey Dashboard</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- RIGHT SIDE (DATE FILTER) --> |
||||
|
<!--<div class="col-lg-6 text-end"> |
||||
|
<label class="form-label fw-semibold me-2">From Date:</label> |
||||
|
<input type="date" id="fromDate" class="form-control d-inline-block" |
||||
|
style="width:150px;"> |
||||
|
<label class="form-label fw-semibold me-2">To Date:</label> |
||||
|
<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;"> |
||||
|
</div>--> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- BREADCRUMB (SEPARATE ROW) --> |
||||
|
<div class="row mt-2"> |
||||
|
<div class="col-lg-12"> |
||||
|
<nav class="breadcrumb-container"> |
||||
|
<ol class="breadcrumb"> |
||||
|
<li class="breadcrumb-item"> |
||||
|
<a href="/index"><i class="ik ik-home"></i></a> |
||||
|
</li> |
||||
|
<li class="breadcrumb-item active">Non Survey Child List</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
<div class="row mb-3 align-items-end"> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<select id="area" class="form-control"> |
||||
|
<option value="">Area Wise</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<label class="fw-semibold">From Date</label> |
||||
|
<input type="date" id="fromDate" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<label class="fw-semibold">To Date</label> |
||||
|
<input type="date" id="toDate" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-md-2 text-center"> |
||||
|
<button class="btn btn-primary w-100" onclick="fetchSurveyData()"> |
||||
|
Search |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-2 text-center"> |
||||
|
<button class="btn btn-secondary w-100" onclick="resetFilters()"> |
||||
|
Reset |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!--<div class="row mb-3"> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<select id="gender" class="form-control"> |
||||
|
<option value="">Gender</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<select id="age" class="form-control"> |
||||
|
<option value="">Age</option> |
||||
|
<option value="4-8">4-8</option> |
||||
|
<option value="9-13">9-13</option> |
||||
|
<option value="14-18">14-18</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<select id="area" class="form-control"> |
||||
|
<option value="">Area Wise</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-2"> |
||||
|
<select id="education" class="form-control"> |
||||
|
<option value="">Education</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<label class="form-label fw-semibold me-2">From Date:</label> |
||||
|
<input type="date" id="fromDate" class="form-control d-inline-block" style="width:150px;"> |
||||
|
<label class="form-label fw-semibold me-2">To Date:</label> |
||||
|
<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row mb-3 justify-content-center"> |
||||
|
|
||||
|
<div class="col-md-2 text-center"> |
||||
|
<button class="btn btn-primary w-100 " onclick="fetchSurveyData()">Search</button> |
||||
|
|
||||
|
</div> |
||||
|
<div class="col-md-2 text-center"> |
||||
|
<button class="btn btn-secondary w-100 " onclick="resetFilters()">Reset</button> |
||||
|
</div> |
||||
|
</div>--> |
||||
|
|
||||
|
</div> |
||||
|
<!-- Salary Report Table --> |
||||
|
<div class="card-block mt-3"> |
||||
|
<table id="surveyTable" class="table table-striped table-bordered"> |
||||
|
<div class="mb-3"> |
||||
|
|
||||
|
<!--<button class="btn btn-success" onclick="downloadBulkSurveyExcel()"> |
||||
|
|
||||
|
<i class="fa fa-file-excel"></i> |
||||
|
Bulk Download Excel |
||||
|
|
||||
|
</button>--> |
||||
|
|
||||
|
</div> |
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>Date</th> |
||||
|
<th>Survey ID</th> |
||||
|
<th>Reason</th> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<th>Area</th> |
||||
|
<th>House No</th> |
||||
|
<th>Block No</th> |
||||
|
|
||||
|
|
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
|
||||
|
</tbody> |
||||
|
<tfoot class="thead-dark"> |
||||
|
|
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal fade" id="surveyModal" tabindex="-1"> |
||||
|
<div class="modal-dialog modal-lg modal-dialog-scrollable" style="max-width:70%; width:70%;"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header"> |
||||
|
<h5 class="modal-title">Child Survey Details</h5> |
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<div id="surveyDetails"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div th:replace="~{fragments/modules/base/script :: script}"></div> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> |
||||
|
<!-- DataTables --> |
||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css"> |
||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css"> |
||||
|
|
||||
|
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script> |
||||
|
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script> |
||||
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script> |
||||
|
|
||||
|
<!-- DataTable Buttons --> |
||||
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script> |
||||
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> |
||||
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> |
||||
|
|
||||
|
|
||||
|
<script th:inline="javascript"> |
||||
|
//var createdBy = /*[[${LoginUserId}]]*/''; |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*$(document).ready(function () { |
||||
|
|
||||
|
function clearUrlParams() { |
||||
|
const currentUrl = window.location.href; |
||||
|
const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters |
||||
|
window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params |
||||
|
} |
||||
|
|
||||
|
// Call this on page load to reset the URL |
||||
|
clearUrlParams(); |
||||
|
|
||||
|
// Initialize DataTable |
||||
|
var table = $('#salaryreporttable').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' |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'pdfHtml5', |
||||
|
text: 'PDF', |
||||
|
className: 'btn btn-secondary', |
||||
|
id: 'pdfBtn', |
||||
|
exportOptions: { |
||||
|
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] |
||||
|
}, |
||||
|
orientation: 'landscape', // Change to landscape for more horizontal space |
||||
|
pageSize: 'A3', // You can change to A4 or A3 depending on your needs |
||||
|
customize: function (doc) { |
||||
|
// Custom column widths for better fit |
||||
|
//doc.content[1].table.widths = ['2%', '6%', '6%', '6%', '6%', '6%', '6%', '3%', '3%', '3%', '3%', '3%', '3%', '6%', '6%', '6%']; |
||||
|
|
||||
|
// Optional: Adjust font size if needed |
||||
|
doc.styles.tableBodyEven.alignment = 'center'; |
||||
|
doc.styles.tableBodyOdd.alignment = 'center'; |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
fixedHeader: true, |
||||
|
autoWidth: true, |
||||
|
responsive: true, |
||||
|
searching: true, |
||||
|
select: false, |
||||
|
processing: false |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
async function downloadBulkSurveyExcel() { |
||||
|
|
||||
|
let area = $("#area").val(); |
||||
|
let fromDate = $("#fromDate").val(); |
||||
|
let toDate = $("#toDate").val(); |
||||
|
|
||||
|
try { |
||||
|
|
||||
|
let response = await $.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/nonsurveyed/list", |
||||
|
type: "GET", |
||||
|
data: { |
||||
|
|
||||
|
area: area, |
||||
|
fromDate: fromDate, |
||||
|
toDate: toDate |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
let excelData = []; |
||||
|
|
||||
|
response.forEach(function (row, index) { |
||||
|
|
||||
|
excelData.push({ |
||||
|
|
||||
|
"S.No": index + 1, |
||||
|
"Date": row.survey_date || '', |
||||
|
"Survey ID": row.survey_id || '', |
||||
|
"Reason": row.reason || '', |
||||
|
"Area": row.area || '', |
||||
|
"House No": row.house_no || '', |
||||
|
"Block No": row.block_no || '' |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
if (excelData.length === 0) { |
||||
|
|
||||
|
alert("No data found"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let worksheet = XLSX.utils.json_to_sheet(excelData); |
||||
|
|
||||
|
let workbook = XLSX.utils.book_new(); |
||||
|
|
||||
|
XLSX.utils.book_append_sheet( |
||||
|
workbook, |
||||
|
worksheet, |
||||
|
"Non Survey Child List" |
||||
|
); |
||||
|
|
||||
|
XLSX.writeFile( |
||||
|
workbook, |
||||
|
"Non_Survey_Child_List.xlsx" |
||||
|
); |
||||
|
|
||||
|
} catch (e) { |
||||
|
|
||||
|
console.log(e); |
||||
|
alert("Error downloading excel"); |
||||
|
} |
||||
|
} |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
// 🔹 Load dropdowns when page loads |
||||
|
loadDropdowns(); |
||||
|
fetchSurveyData(true); |
||||
|
|
||||
|
// 🔹 (Optional) Load table initially |
||||
|
// fetchSurveyData(); |
||||
|
// Restrict To Date based on From Date |
||||
|
$("#fromDate").on("change", function () { |
||||
|
|
||||
|
let fromDate = $(this).val(); |
||||
|
|
||||
|
// Set minimum selectable date for To Date |
||||
|
$("#toDate").attr("min", fromDate); |
||||
|
|
||||
|
// If current To Date is less than From Date, clear it |
||||
|
if ($("#toDate").val() < fromDate) { |
||||
|
$("#toDate").val(''); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
function resetFilters() { |
||||
|
$("#searchName").val(''); |
||||
|
$("#gender").val(''); |
||||
|
$("#age").val(''); |
||||
|
$("#area").val(''); |
||||
|
$("#education").val(''); |
||||
|
$("#fromDate").val(''); |
||||
|
$("#toDate").val(''); |
||||
|
|
||||
|
// Re-load table with all data |
||||
|
fetchSurveyData(true); |
||||
|
} |
||||
|
function viewSurvey(surveyId) { |
||||
|
|
||||
|
|
||||
|
$.ajax({ |
||||
|
url: "/gcc/api/children-survey/details", |
||||
|
type: "GET", |
||||
|
data: { surveyId: surveyId }, |
||||
|
success: function (data) { |
||||
|
|
||||
|
let html = ""; |
||||
|
function buildSection(title, sectionData) { |
||||
|
|
||||
|
let sectionHtml = ` |
||||
|
|
||||
|
<div class="survey-section mb-5"> |
||||
|
|
||||
|
<h5 class="section-heading"> |
||||
|
${title} |
||||
|
</h5> |
||||
|
|
||||
|
<div class="row"> |
||||
|
`; |
||||
|
|
||||
|
let keys = Object.keys(sectionData); |
||||
|
|
||||
|
keys.forEach(function (key) { |
||||
|
|
||||
|
sectionHtml += ` |
||||
|
|
||||
|
<div class="col-md-6 mb-3"> |
||||
|
|
||||
|
<div class="detail-card"> |
||||
|
|
||||
|
<div class="detail-label"> |
||||
|
${key} |
||||
|
</div> |
||||
|
|
||||
|
<div class="detail-value"> |
||||
|
${sectionData[key] || '-'} |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
`; |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
sectionHtml += ` |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
|
||||
|
return sectionHtml; |
||||
|
} |
||||
|
|
||||
|
/*function buildSection(title, sectionData) { |
||||
|
|
||||
|
let sectionHtml = ` |
||||
|
<div class="mb-4"> |
||||
|
|
||||
|
<h5 class="fw-bold border-bottom pb-2 mb-3"> |
||||
|
${title} |
||||
|
</h5> |
||||
|
`; |
||||
|
|
||||
|
Object.keys(sectionData).forEach(function (key) { |
||||
|
|
||||
|
sectionHtml += ` |
||||
|
<div class="row py-2 border-bottom"> |
||||
|
|
||||
|
<div class="col-md-5 fw-bold"> |
||||
|
${key} |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-7"> |
||||
|
: ${sectionData[key] || ''} |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
sectionHtml += `</div>`; |
||||
|
|
||||
|
return sectionHtml; |
||||
|
}*/ |
||||
|
|
||||
|
|
||||
|
|
||||
|
html += buildSection( |
||||
|
"Location Details", |
||||
|
data.locationDetails |
||||
|
); |
||||
|
html += buildSection( |
||||
|
"Personal Information", |
||||
|
data.personalInformation |
||||
|
); |
||||
|
|
||||
|
html += buildSection( |
||||
|
"Education Details", |
||||
|
data.educationDetails |
||||
|
); |
||||
|
|
||||
|
html += buildSection( |
||||
|
"Health Details", |
||||
|
data.healthDetails |
||||
|
); |
||||
|
|
||||
|
html += buildSection( |
||||
|
"Document Details", |
||||
|
data.documentDetails |
||||
|
); |
||||
|
|
||||
|
html += buildSection( |
||||
|
"Vulnerability Details", |
||||
|
data.vulnerabilityDetails |
||||
|
); |
||||
|
|
||||
|
$("#surveyDetails").html(html); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('surveyModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
/*success: function (data) { |
||||
|
|
||||
|
let html = ""; |
||||
|
|
||||
|
Object.keys(data).forEach(function (key) { |
||||
|
|
||||
|
html += ` |
||||
|
<div class="row mb-2"> |
||||
|
<div class="col-md-5"> |
||||
|
<strong>${key}</strong> |
||||
|
</div> |
||||
|
<div class="col-md-7"> |
||||
|
: ${data[key]} |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
$("#surveyDetails").html(html); |
||||
|
|
||||
|
// Show modal |
||||
|
let modal = new bootstrap.Modal(document.getElementById('surveyModal')); |
||||
|
modal.show(); |
||||
|
}*/ |
||||
|
}); |
||||
|
} |
||||
|
function fetchSurveyData(isInitialLoad = false) { |
||||
|
|
||||
|
|
||||
|
var gender = $("#gender").val(); |
||||
|
var age = $("#age").val(); |
||||
|
var area = $("#area").val(); |
||||
|
var education = $("#education").val(); |
||||
|
var fromDate = $("#fromDate").val(); |
||||
|
var toDate = $("#toDate").val(); |
||||
|
|
||||
|
// SHOW SWAL ONLY WHEN SEARCH BUTTON CLICKED |
||||
|
if (!isInitialLoad && |
||||
|
|
||||
|
gender == '' && |
||||
|
age == '' && |
||||
|
area == '' && |
||||
|
education == '' && |
||||
|
fromDate == '' && |
||||
|
toDate == '') { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'warning', |
||||
|
title: 'Warning', |
||||
|
text: 'Please select at least one filter.', |
||||
|
confirmButtonColor: '#3085d6' |
||||
|
}); |
||||
|
|
||||
|
return; |
||||
|
} |
||||
|
if (fromDate != '') { |
||||
|
if (toDate == '') { |
||||
|
Swal.fire({ |
||||
|
icon: 'warning', |
||||
|
title: 'Warning', |
||||
|
text: 'Please select both from date and to date.', |
||||
|
confirmButtonColor: '#3085d6' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
if (toDate != '') { |
||||
|
if (fromDate == '') { |
||||
|
Swal.fire({ |
||||
|
icon: 'warning', |
||||
|
title: 'Warning', |
||||
|
text: 'Please select both from date and to date.', |
||||
|
confirmButtonColor: '#3085d6' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
$.ajax({ |
||||
|
url: "/gcc/api/children-survey/nonsurveyed/list", |
||||
|
type: "GET", |
||||
|
data: { |
||||
|
|
||||
|
|
||||
|
area: $("#area").val(), |
||||
|
|
||||
|
fromDate: $("#fromDate").val(), |
||||
|
toDate: $("#toDate").val() |
||||
|
}, |
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
//<td>${row.survey_date || ''}</td> |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${formatDate(row.survey_date)}</td> |
||||
|
|
||||
|
<td>${row.survey_id || ''}</td> |
||||
|
|
||||
|
<td>${row.reason || ''}</td> |
||||
|
|
||||
|
<td>${row.area || ''}</td> |
||||
|
|
||||
|
<td>${row.house_no || ''}</td> |
||||
|
|
||||
|
<td>${row.block_no || ''}</td> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
// 🔥 Destroy old DataTable if exists |
||||
|
if ($.fn.DataTable.isDataTable('#surveyTable')) { |
||||
|
$('#surveyTable').DataTable().clear().destroy(); |
||||
|
} |
||||
|
|
||||
|
// Set new data |
||||
|
$("#surveyTable tbody").html(tbody); |
||||
|
|
||||
|
// 🔥 Reinitialize DataTable WITH BUTTONS |
||||
|
$('#surveyTable').DataTable({ |
||||
|
dom: 'Bfrtip', |
||||
|
buttons: [ |
||||
|
{ |
||||
|
extend: 'pageLength', |
||||
|
className: 'btn btn-warning' |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'excelHtml5', |
||||
|
text: 'Excel', |
||||
|
className: 'btn btn-success' |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'pdfHtml5', |
||||
|
text: 'PDF', |
||||
|
className: 'btn btn-secondary', |
||||
|
orientation: 'landscape', |
||||
|
pageSize: 'A4' |
||||
|
} |
||||
|
], |
||||
|
responsive: true, |
||||
|
destroy: true |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
function formatDate(dateString) { |
||||
|
|
||||
|
if (!dateString) return ''; |
||||
|
|
||||
|
const date = new Date(dateString); |
||||
|
|
||||
|
const day = String(date.getDate()).padStart(2, '0'); |
||||
|
|
||||
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
|
|
||||
|
const year = date.getFullYear(); |
||||
|
|
||||
|
return `${day}-${month}-${year}`; |
||||
|
} |
||||
|
function loadDropdowns() { |
||||
|
|
||||
|
// Gender |
||||
|
$.ajax({ |
||||
|
url: "/gcc/api/children-survey/gender", |
||||
|
type: "GET", |
||||
|
success: function (data) { |
||||
|
|
||||
|
let options = '<option value="">Gender</option>'; |
||||
|
|
||||
|
data.forEach(function (g) { |
||||
|
options += `<option value="${g.id}">${g.english_name}</option>`; |
||||
|
}); |
||||
|
|
||||
|
$("#gender").html(options); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Area |
||||
|
$.ajax({ |
||||
|
url: "/gcc/api/children-survey/location", |
||||
|
type: "GET", |
||||
|
success: function (data) { |
||||
|
|
||||
|
let options = '<option value="">Area</option>'; |
||||
|
|
||||
|
data.forEach(function (a) { |
||||
|
options += `<option value="${a.id}">${a.english_name}</option>`; |
||||
|
}); |
||||
|
|
||||
|
$("#area").html(options); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Education |
||||
|
$.ajax({ |
||||
|
url: "/gcc/api/children-survey/education", |
||||
|
type: "GET", |
||||
|
success: function (data) { |
||||
|
|
||||
|
let options = '<option value="">Education</option>'; |
||||
|
|
||||
|
data.forEach(function (e) { |
||||
|
options += `<option value="${e.id}">${e.english_name}</option>`; |
||||
|
}); |
||||
|
|
||||
|
$("#education").html(options); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue