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
-
4gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
-
321gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/castemaster.html
-
62gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/childlist.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentcorrectionmaster.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentreasonmaster.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/dropoutreasonmaster.html
-
323gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/educationmaster.html
-
339gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/gendermaster.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/incomemaster.html
-
336gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/interestfieldmaster.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/livingmaster.html
-
337gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/locationmaster.html
-
955gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/nonchildlist.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/ownermaster.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/religionmaster.html
-
142gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/surveyorsreports.html
-
335gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/vulnerabilitymaster.html
-
335gcc_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