9 changed files with 3483 additions and 319 deletions
-
16src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
-
8src/main/java/in/gov/chennaicorporation/gccoffice/shelterinspection/Controller/MainController.java
-
255src/main/java/in/gov/chennaicorporation/gccoffice/shelterinspection/Controller/ShelterInspectionController.java
-
510src/main/java/in/gov/chennaicorporation/gccoffice/shelterinspection/Service/ShelterInspectionService.java
-
1015src/main/java/in/gov/chennaicorporation/gccoffice/shelterinspection/Service/ShelterService.java
-
19src/main/resources/templates/modules/shelterinspection/dashboard.html
-
984src/main/resources/templates/modules/shelterinspection/resucelist.html
-
800src/main/resources/templates/modules/shelterinspection/smcmeetinglist.html
-
131src/main/resources/templates/modules/shelterinspection/visitlist.html
1015
src/main/java/in/gov/chennaicorporation/gccoffice/shelterinspection/Service/ShelterService.java
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,984 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
|
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
|
|||
<!-- 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"> |
|||
<style> |
|||
.table-responsive { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
<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="far fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Resuce List</h5> |
|||
<span>Shelter Resuce</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="/index"><i class="ik ik-home"></i></a> |
|||
</li> |
|||
<li class="breadcrumb-item" aria-current="page">Shelter Resuce</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Resuce List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<hr> |
|||
|
|||
|
|||
<!-- Filters Section --> |
|||
<div class="row mb-4"> |
|||
|
|||
<div class="col-md-4"> |
|||
<label class="form-label fw-semibold me-2">From Date:</label> |
|||
<input type="date" id="fromDate" class="form-control d-inline-block" style="width:100px;"> |
|||
|
|||
<label class="form-label fw-semibold me-2">To Date:</label> |
|||
<input type="date" id="toDate" class="form-control d-inline-block" style="width:100px;"> |
|||
</div> |
|||
|
|||
<!-- <div class="col-md-2"> |
|||
<select id="zone" class="form-control"> |
|||
<option value="">All Zones</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-md-2"> |
|||
<select id="category" class="form-control"> |
|||
<option value="">All Categories</option> |
|||
</select> |
|||
</div> --> |
|||
|
|||
<div class="col-md-2"> |
|||
<button class="btn btn-primary w-100" onclick="loadResuceList()">Search</button> |
|||
</div> |
|||
<div class="col-md-2"> |
|||
<button class="btn btn-secondary w-100" onclick="resetFilters()">Reset</button> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="table-responsive"> |
|||
|
|||
<table id="shelterResuceListTable" |
|||
class="table table-bordered table-striped dt-responsive nowrap w-100"> |
|||
|
|||
<thead class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Resuce Designation</th> |
|||
<th class="text-center">No of Resuces</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody></tbody> |
|||
|
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Meeting List Details --> |
|||
<!-- Resuce List Details Modal --> |
|||
<div class="modal fade" id="ResuceDetailsModal" tabindex="-1" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-xl modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
|
|||
<!-- Header --> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="resuceDetailsModalTitle"> |
|||
Resuce List Details |
|||
</h5> |
|||
|
|||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> |
|||
<span>×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
|
|||
<!-- Body --> |
|||
<div class="modal-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="resuceDetailsTable" class="table table-bordered table-striped table-hover w-100"> |
|||
<thead class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th id="shelterColumnHeader" class="text-center">Shelter</th> |
|||
<th id="hospitalColumnHeader" class="text-center">Hospital Name</th> |
|||
<th class="text-center">CDO</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Resuce Date</th> |
|||
<!--<th class="text-center">Resuce Time</th>--> |
|||
<!--<th class="text-center">Area of Visit</th> |
|||
<th class="text-center">No of People in homeless person identified</th>--> |
|||
<th class="text-center">No of People in homeless situation rescued</th> |
|||
<!--<th class="text-center">Remark</th>--> |
|||
</tr> |
|||
</thead> |
|||
<tbody id="resuceDetailsBody"></tbody> |
|||
</table> |
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Footer --> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|||
Close |
|||
</button> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- ========================================================= |
|||
RESCUED PEOPLE DETAILS MODAL |
|||
========================================================= --> |
|||
|
|||
<div class="modal fade" id="rescuedPeopleModal" tabindex="-1" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-lg modal-dialog-centered"> |
|||
|
|||
<div class="modal-content"> |
|||
|
|||
<!-- Header --> |
|||
<div class="modal-header bg-primary text-white"> |
|||
<h5 class="modal-title"> |
|||
Rescued People Details |
|||
</h5> |
|||
|
|||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> |
|||
<span>×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
|
|||
<!-- Body --> |
|||
<div class="modal-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="rescuedPeopleTable" class="table table-bordered table-striped table-hover w-100"> |
|||
<thead class="thead-dark"> |
|||
|
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Age</th> |
|||
<th class="text-center">Gender</th> |
|||
<th class="text-center">Rescue of Location</th> |
|||
<th class="text-center">Remarks</th> |
|||
</tr> |
|||
|
|||
</thead> |
|||
|
|||
<tbody id="rescuedPeopleBody"></tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Footer --> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|||
Close |
|||
</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</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> |
|||
|
|||
|
|||
<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 th:inline="javascript"> |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
loadDropdowns(); |
|||
//loadResuceList(); |
|||
initializeResuceDates(); |
|||
|
|||
}); |
|||
|
|||
function resetFilters() { |
|||
|
|||
$("#zone").val(""); |
|||
$("#category").val(""); |
|||
|
|||
|
|||
initializeResuceDates(); |
|||
|
|||
} |
|||
|
|||
function loadResuceList() { |
|||
|
|||
if ($.fn.DataTable.isDataTable('#shelterResuceListTable')) { |
|||
$('#shelterResuceListTable').DataTable().destroy(); |
|||
} |
|||
|
|||
$("#shelterResuceListTable tbody").empty(); |
|||
|
|||
$.ajax({ |
|||
|
|||
url: "/gcc/api/shelterinspection/shelterResuceList", |
|||
type: "GET", |
|||
|
|||
data: { |
|||
fromDate: $("#fromDate").val(), |
|||
toDate: $("#toDate").val(), |
|||
/* zone: $("#zone").val(), |
|||
category: $("#category").val() */ |
|||
}, |
|||
|
|||
success: function (response) { |
|||
console.log(response); |
|||
|
|||
let rows = ""; |
|||
|
|||
$.each(response, function (i, item) { |
|||
|
|||
rows += ` |
|||
<tr> |
|||
<td>${i + 1}</td> |
|||
|
|||
<td><strong>${item.resuceDesignation || "-"}</strong></td> |
|||
|
|||
|
|||
<td class="text-center"> |
|||
${Number(item.totalResuces) > 0 |
|||
? `<a href="javascript:void(0);" |
|||
onclick="viewResuceList('${item.resuceDesignationId}', '${escapeHtml(item.shelterName)}', '${item.uqid}', '${item.resuceDesignation}')" |
|||
style="color: #007bff; text-decoration: underline; cursor: pointer;"> |
|||
${item.totalResuces} |
|||
</a>` |
|||
: `${item.totalResuces}` |
|||
} |
|||
</td> |
|||
|
|||
|
|||
</tr> |
|||
`; |
|||
}); |
|||
|
|||
$("#shelterResuceListTable tbody").html(rows); |
|||
|
|||
$('#shelterResuceListTable').DataTable({ |
|||
|
|||
responsive: true, |
|||
pageLength: 10, |
|||
ordering: true, |
|||
|
|||
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' } |
|||
] |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
error: function () { |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'Unable to load shelter list.', |
|||
allowOutsideClick: false |
|||
}); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
function formatCategory(category) { |
|||
|
|||
if (!category) return "-"; |
|||
|
|||
return category |
|||
.replace(/-/g, " ") |
|||
.replace(/\b\w/g, function (letter) { |
|||
return letter.toUpperCase(); |
|||
}); |
|||
|
|||
} |
|||
|
|||
function viewResuceList(resuceDesignationId, shelterName, uqid, resuceDesignation) { |
|||
|
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/shelterResuceDetails", |
|||
type: "GET", |
|||
data: { |
|||
resuceDesignationId: resuceDesignationId, |
|||
uqid: uqid, |
|||
fromDate: $("#fromDate").val(), |
|||
toDate: $("#toDate").val() |
|||
}, |
|||
|
|||
success: function (res) { |
|||
if ($.fn.DataTable.isDataTable('#resuceDetailsTable')) { |
|||
$('#resuceDetailsTable').DataTable().destroy(); |
|||
} |
|||
|
|||
// Clear old data |
|||
$("#resuceDetailsBody").empty(); |
|||
|
|||
// ================================================= |
|||
// SHOW / HIDE SHELTER / HOSPITAL COLUMN |
|||
// ================================================= |
|||
|
|||
if (String(resuceDesignationId) === "1") { |
|||
|
|||
// Shelter |
|||
$("#shelterColumnHeader").show(); |
|||
$("#hospitalColumnHeader").hide(); |
|||
|
|||
} else if (String(resuceDesignationId) === "5") { |
|||
|
|||
// Hospital |
|||
$("#shelterColumnHeader").hide(); |
|||
$("#hospitalColumnHeader").show(); |
|||
|
|||
} else { |
|||
|
|||
// Other designations |
|||
$("#shelterColumnHeader").hide(); |
|||
$("#hospitalColumnHeader").hide(); |
|||
} |
|||
|
|||
// ========================================== |
|||
// SET MODAL TITLE |
|||
// ========================================== |
|||
|
|||
/*$("#resuceDetailsModalTitle").text( |
|||
"Resuce List Details - " + (shelterName || "-") |
|||
);*/ |
|||
let modalName = "-"; |
|||
|
|||
|
|||
// --------------------------------------------- |
|||
// CASE 1 : SHELTER |
|||
// --------------------------------------------- |
|||
|
|||
modalName = resuceDesignation; |
|||
|
|||
|
|||
|
|||
// --------------------------------------------- |
|||
// OTHER CASES |
|||
// --------------------------------------------- |
|||
|
|||
|
|||
|
|||
$("#resuceDetailsModalTitle").text( |
|||
"Resuce List Details - " + modalName |
|||
); |
|||
|
|||
|
|||
let rows = ""; |
|||
|
|||
// ========================================== |
|||
// Destroy previous DataTable |
|||
// ========================================== |
|||
|
|||
|
|||
|
|||
// ========================================== |
|||
// No Data |
|||
// ========================================== |
|||
|
|||
if (!res || res.length === 0) { |
|||
|
|||
rows = ` |
|||
<tr> |
|||
<td colspan="9" class="text-center"> No Resuce details found </td> |
|||
</tr> |
|||
`; |
|||
|
|||
} |
|||
|
|||
// ========================================== |
|||
// Load Data |
|||
// ========================================== |
|||
|
|||
else { |
|||
|
|||
$.each(res, function (i, item) { |
|||
|
|||
// ---------------------------------- |
|||
// Table Row |
|||
// ---------------------------------- |
|||
|
|||
rows += ` |
|||
<tr> |
|||
|
|||
<td class="text-center">${item.sno || i + 1}</td> |
|||
|
|||
<td class="shelterColumn"> |
|||
<strong>${item.shelterName || "-"}</strong> |
|||
</td> |
|||
|
|||
<td class="hospitalColumn"> |
|||
<strong>${item.hospitalName || "-"}</strong> |
|||
</td> |
|||
<td class="text-center">${item.cdo || "-"}</td> |
|||
<td class="text-center">${item.date || "-"}</td> |
|||
<td class="text-center">${item.qid1 ?? "-"}</td> |
|||
<!-- <td class="text-center">${item.qid2 ?? "-"}</td>--> |
|||
<!-- <td class="text-center">${item.qid3 ?? "-"}</td>--> |
|||
<!-- <td class="text-center">${item.qid4 ?? "-"}</td>--> |
|||
|
|||
<td class="text-center"> |
|||
${Number(item.qid5) > 0 |
|||
? ` |
|||
<a href="javascript:void(0);" |
|||
onclick="viewRescuedPeople('${item.surveyId}')" |
|||
style="color:#007bff; text-decoration:underline; cursor:pointer;"> |
|||
${item.qid5} |
|||
</a> |
|||
` |
|||
: `${item.qid5 ?? "-"}` |
|||
} |
|||
</td> |
|||
|
|||
<!-- <td>${formatResuceRemark(item.qid11)}</td>--> |
|||
|
|||
</tr> |
|||
`; |
|||
}); |
|||
} |
|||
|
|||
|
|||
// ========================================== |
|||
// Insert Data |
|||
// ========================================== |
|||
|
|||
$("#resuceDetailsBody").html(rows); |
|||
|
|||
|
|||
|
|||
|
|||
// ========================================== |
|||
// Initialize DataTable |
|||
// ========================================== |
|||
|
|||
let resuceTable = $('#resuceDetailsTable').DataTable({ |
|||
|
|||
responsive: false, |
|||
pageLength: 10, |
|||
ordering: true, |
|||
autoWidth: false, |
|||
|
|||
|
|||
|
|||
dom: 'Bfrtip', |
|||
buttons: [ |
|||
{ extend: 'pageLength', className: 'btn btn-warning' }, |
|||
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-success' }, |
|||
{ |
|||
extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', exportOptions: { |
|||
columns: ":visible" |
|||
} |
|||
}, |
|||
|
|||
] |
|||
|
|||
|
|||
}); |
|||
// ===================================================== |
|||
// SHOW / HIDE COLUMNS |
|||
// ===================================================== |
|||
|
|||
if (String(resuceDesignationId) === "1") { |
|||
|
|||
// ================================================= |
|||
// DESIGNATION 1 = SHELTER |
|||
// ================================================= |
|||
|
|||
// Show Shelter column |
|||
resuceTable.column(1).visible(true); |
|||
|
|||
// Hide Hospital column |
|||
resuceTable.column(2).visible(false); |
|||
|
|||
} |
|||
|
|||
|
|||
else if (String(resuceDesignationId) === "5") { |
|||
|
|||
// ================================================= |
|||
// DESIGNATION 5 = HOSPITAL |
|||
// ================================================= |
|||
|
|||
// Hide Shelter column |
|||
resuceTable.column(1).visible(false); |
|||
|
|||
// Show Hospital column |
|||
resuceTable.column(2).visible(true); |
|||
|
|||
} |
|||
|
|||
|
|||
else { |
|||
|
|||
// ================================================= |
|||
// OTHER DESIGNATIONS |
|||
// ================================================= |
|||
|
|||
// Hide Shelter |
|||
resuceTable.column(1).visible(false); |
|||
|
|||
// Hide Hospital |
|||
resuceTable.column(2).visible(false); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
// ========================================== |
|||
// Show Modal |
|||
// ========================================== |
|||
|
|||
$("#ResuceDetailsModal").modal({ |
|||
backdrop: "static", |
|||
keyboard: false |
|||
}); |
|||
|
|||
$("#ResuceDetailsModal").modal("show"); |
|||
|
|||
}, |
|||
|
|||
error: function (xhr) { |
|||
|
|||
Swal.fire({ |
|||
icon: "error", |
|||
title: "Error", |
|||
text: "Unable to load meeting details.", |
|||
allowOutsideClick: false |
|||
}); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// ========================================================= |
|||
// ESCAPE HTML |
|||
// ========================================================= |
|||
function escapeHtml(value) { |
|||
|
|||
if (value === null || value === undefined) { |
|||
return ""; |
|||
} |
|||
|
|||
return String(value) |
|||
.replace(/&/g, "&") |
|||
.replace(/</g, "<") |
|||
.replace(/>/g, ">") |
|||
.replace(/"/g, """) |
|||
.replace(/'/g, "'"); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
// ========================================================= |
|||
// FORMAT Resuce REMARK |
|||
// ========================================================= |
|||
function formatResuceRemark(value) { |
|||
|
|||
// ========================================== |
|||
// NO REMARK |
|||
// ========================================== |
|||
if ( |
|||
value === null || |
|||
value === undefined || |
|||
String(value).trim() === '' |
|||
) { |
|||
return ` |
|||
<a href="javascript:void(0);" |
|||
class="btn btn-sm btn-outline-primary disabled"> |
|||
No Remark |
|||
</a> |
|||
`; |
|||
} |
|||
|
|||
var text = String(value).trim(); |
|||
|
|||
// ========================================== |
|||
// SPLIT ALL WORDS |
|||
// ========================================== |
|||
var words = text.split(/\s+/); |
|||
|
|||
// ========================================== |
|||
// DISTRIBUTE ALL WORDS INTO 4 LINES |
|||
// ========================================== |
|||
var totalWords = words.length; |
|||
var wordsPerLine = Math.ceil(totalWords / 4); |
|||
|
|||
var lines = []; |
|||
|
|||
for (var i = 0; i < words.length; i += wordsPerLine) { |
|||
lines.push( |
|||
words.slice(i, i + wordsPerLine).join(' ') |
|||
); |
|||
} |
|||
|
|||
// ========================================== |
|||
// MAXIMUM 4 LINES |
|||
// ========================================== |
|||
lines = lines.slice(0, 4); |
|||
|
|||
return lines.join('<br>'); |
|||
} |
|||
|
|||
|
|||
// ========================================================= |
|||
// VIEW RESCUED PEOPLE DETAILS |
|||
// ========================================================= |
|||
|
|||
function viewRescuedPeople(surveyId) { |
|||
|
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/shelterRescuedPeopleDetails", |
|||
type: "GET", |
|||
data: { |
|||
surveyId: surveyId, |
|||
fromDate: $("#fromDate").val(), |
|||
toDate: $("#toDate").val() |
|||
}, |
|||
|
|||
success: function (res) { |
|||
console.log(res); |
|||
let rows = ""; |
|||
|
|||
// ========================================== |
|||
// DESTROY PREVIOUS DATATABLE |
|||
// ========================================== |
|||
|
|||
if ($.fn.DataTable.isDataTable('#rescuedPeopleTable')) { |
|||
$('#rescuedPeopleTable').DataTable().destroy(); |
|||
} |
|||
|
|||
|
|||
// ========================================== |
|||
// CLEAR OLD DATA |
|||
// ========================================== |
|||
|
|||
$("#rescuedPeopleBody").empty(); |
|||
|
|||
|
|||
// ========================================== |
|||
// NO DATA |
|||
// ========================================== |
|||
|
|||
if (!res || res.length === 0) { |
|||
|
|||
rows = ` |
|||
<tr> |
|||
<td colspan="5" class="text-center"> |
|||
No rescued people details found |
|||
</td> |
|||
</tr> |
|||
`; |
|||
} |
|||
|
|||
|
|||
// ========================================== |
|||
// LOAD DATA |
|||
// ========================================== |
|||
|
|||
else { |
|||
|
|||
$.each(res, function (i, item) { |
|||
|
|||
rows += ` |
|||
<tr> |
|||
|
|||
<td class="text-center">${i + 1}</td> |
|||
<td class="text-center">${item.name || "-"}</td> |
|||
<td class="text-center">${item.age || "-"}</td> |
|||
<td class="text-center">${item.gender || "-"}</td> |
|||
<td class="text-center">${item.location || "-"}</td> |
|||
<td class="text-center">${item.remarks || "-"}</td> |
|||
</tr> |
|||
`; |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
// ========================================== |
|||
// INSERT DATA |
|||
// ========================================== |
|||
|
|||
$("#rescuedPeopleBody").html(rows); |
|||
|
|||
|
|||
// ========================================== |
|||
// INITIALIZE DATATABLE |
|||
// ========================================== |
|||
|
|||
$('#rescuedPeopleTable').DataTable({ |
|||
responsive: false, |
|||
pageLength: 10, |
|||
ordering: true, |
|||
autoWidth: false, |
|||
dom: 'Bfrtip', |
|||
buttons: [ |
|||
{ extend: 'pageLength', className: 'btn btn-warning' }, |
|||
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-success' }, |
|||
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' } |
|||
] |
|||
|
|||
}); |
|||
|
|||
|
|||
// ========================================== |
|||
// SHOW MODAL |
|||
// ========================================== |
|||
|
|||
$("#rescuedPeopleModal").modal({ |
|||
backdrop: "static", |
|||
keyboard: false |
|||
}); |
|||
|
|||
$("#rescuedPeopleModal").modal("show"); |
|||
|
|||
}, |
|||
|
|||
|
|||
// ========================================== |
|||
// ERROR |
|||
// ========================================== |
|||
|
|||
error: function (xhr) { |
|||
|
|||
Swal.fire({ |
|||
icon: "error", |
|||
title: "Error", |
|||
text: "Unable to load rescued people details.", |
|||
allowOutsideClick: false |
|||
}); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
// ========================================================= |
|||
// INITIALIZE COMPLAINT DATE FILTER |
|||
// From Date = Minimum DB cdate |
|||
// To Date = Today |
|||
// ========================================================= |
|||
|
|||
function initializeResuceDates() { |
|||
|
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/shelterResuceMinDate", |
|||
type: "GET", |
|||
success: function (minDate) { |
|||
|
|||
console.log("Minimum Meeting cdate:", minDate); |
|||
|
|||
// ================================================= |
|||
// TODAY |
|||
// ================================================= |
|||
|
|||
var today = new Date(); |
|||
|
|||
var yyyy = today.getFullYear(); |
|||
|
|||
var mm = String(today.getMonth() + 1).padStart(2, '0'); |
|||
var dd = String(today.getDate()).padStart(2, '0'); |
|||
var todayString = yyyy + '-' + mm + '-' + dd; |
|||
|
|||
|
|||
// ================================================= |
|||
// FROM DATE |
|||
// ================================================= |
|||
|
|||
if (minDate) { |
|||
$('#fromDate').val(minDate); |
|||
} else { |
|||
// If no DB date found, |
|||
// use today |
|||
|
|||
$('#fromDate').val(todayString); |
|||
} |
|||
|
|||
|
|||
// ================================================= |
|||
// TO DATE = TODAY |
|||
// ================================================= |
|||
|
|||
$('#toDate').val(todayString); |
|||
|
|||
|
|||
// ================================================= |
|||
// LOAD REPORT |
|||
// ================================================= |
|||
|
|||
loadResuceList(); |
|||
|
|||
}, |
|||
|
|||
error: function (xhr) { |
|||
|
|||
console.error("Unable to get minimum meeting date:",); |
|||
|
|||
// ================================================= |
|||
// FALLBACK TO TODAY |
|||
// ================================================= |
|||
|
|||
var today = new Date(); |
|||
|
|||
var yyyy = today.getFullYear(); |
|||
|
|||
var mm = String(today.getMonth() + 1).padStart(2, '0'); |
|||
var dd = String(today.getDate()).padStart(2, '0'); |
|||
var todayString = yyyy + '-' + mm + '-' + dd; |
|||
|
|||
|
|||
$('#fromDate').val(todayString); |
|||
$('#toDate').val(todayString); |
|||
|
|||
loadResuceList(); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
function loadDropdowns() { |
|||
|
|||
// Zone |
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/zones", |
|||
type: "GET", |
|||
success: function (data) { |
|||
|
|||
let options = '<option value="">All Zones</option>'; |
|||
|
|||
data.forEach(function (zone) { |
|||
options += `<option value="${zone}">${zone}</option>`; |
|||
}); |
|||
|
|||
$("#zone").html(options); |
|||
|
|||
} |
|||
}); |
|||
|
|||
// Category |
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/categories", |
|||
type: "GET", |
|||
success: function (data) { |
|||
|
|||
let options = '<option value="">All Categories</option>'; |
|||
|
|||
data.forEach(function (category) { |
|||
|
|||
let text = category |
|||
.replace(/-/g, " ") |
|||
.replace(/\b\w/g, function (c) { |
|||
return c.toUpperCase(); |
|||
}); |
|||
|
|||
options += `<option value="${category}">${text}</option>`; |
|||
}); |
|||
|
|||
$("#category").html(options); |
|||
|
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,800 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
|
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
|
|||
<!-- 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"> |
|||
<style> |
|||
|
|||
.table-responsive { |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
<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="far fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>SMC Meeting List</h5> |
|||
<span>Shelter SMC Meeting</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="/index"><i class="ik ik-home"></i></a> |
|||
</li> |
|||
<li class="breadcrumb-item" aria-current="page">Shelter SMC Meeting</li> |
|||
<li class="breadcrumb-item active" aria-current="page">SMC Meeting List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<hr> |
|||
|
|||
|
|||
<!-- Filters Section --> |
|||
<div class="row mb-4"> |
|||
|
|||
<div class="col-md-4"> |
|||
<label class="form-label fw-semibold me-2">From Date:</label> |
|||
<input type="date" id="fromDate" class="form-control d-inline-block" style="width:100px;"> |
|||
|
|||
<label class="form-label fw-semibold me-2">To Date:</label> |
|||
<input type="date" id="toDate" class="form-control d-inline-block" style="width:100px;"> |
|||
</div> |
|||
|
|||
<div class="col-md-2"> |
|||
<select id="zone" class="form-control"> |
|||
<option value="">All Zones</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-md-2"> |
|||
<select id="category" class="form-control"> |
|||
<option value="">All Categories</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-md-2"> |
|||
<button class="btn btn-primary w-100" onclick="loadMeetingList()">Search</button> |
|||
</div> |
|||
<div class="col-md-2"> |
|||
<button class="btn btn-secondary w-100" onclick="resetFilters()">Reset</button> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="table-responsive"> |
|||
|
|||
<table id="shelterListTable" class="table table-bordered table-striped dt-responsive nowrap w-100"> |
|||
|
|||
<thead class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">SHELTER</th> |
|||
<th class="text-center">Zone</th> |
|||
<th class="text-center">Category</th> |
|||
<th class="text-center">No of Meetings</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody></tbody> |
|||
|
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Meeting List Details --> |
|||
<!-- Meeting List Details Modal --> |
|||
<div class="modal fade" id="MeetingDetailsModal" tabindex="-1" data-backdrop="static" data-keyboard="false"> |
|||
|
|||
<div class="modal-dialog modal-xl modal-dialog-centered"> |
|||
|
|||
<div class="modal-content"> |
|||
|
|||
<!-- Header --> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id ="meetingDetailsModalTitle"> |
|||
Meeting List Details |
|||
</h5> |
|||
|
|||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> |
|||
<span>×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
|
|||
<!-- Body --> |
|||
<div class="modal-body"> |
|||
|
|||
<div class="table-responsive"> |
|||
|
|||
<table id="meetingDetailsTable" class="table table-bordered table-striped table-hover w-100"> |
|||
|
|||
<thead class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Shelter</th> |
|||
<th class="text-center">CDO</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">No. of NGO Directors Attended</th> |
|||
<th class="text-center">No. of Shelter Staff Attended</th> |
|||
<th class="text-center">No. of Concerns Resolved / Addressed</th> |
|||
<th class="text-center">Photo</th> |
|||
<th class="text-center">Remark</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody id="meetingDetailsBody"></tbody> |
|||
|
|||
</table> |
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Footer --> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|||
Close |
|||
</button> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- ========================================================= |
|||
Meeting PHOTO MODAL |
|||
========================================================= --> |
|||
|
|||
<div class="modal fade" id="meetingPhotoModal" tabindex="-1" data-backdrop="static" data-keyboard="false"> |
|||
|
|||
<div class="modal-dialog modal-lg modal-dialog-centered"> |
|||
|
|||
<div class="modal-content"> |
|||
|
|||
<!-- Header --> |
|||
<div class="modal-header bg-primary text-white"> |
|||
|
|||
<h5 class="modal-title" id="meetingPhotoModalTitle"> |
|||
Meeting Photo |
|||
</h5> |
|||
|
|||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> |
|||
<span>×</span> |
|||
</button> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Body --> |
|||
<div class="modal-body text-center"> |
|||
|
|||
<!-- Photo --> |
|||
<div id="meetingPhotoContainer"> |
|||
<img id="meetingModalPhoto" src="" class="img-fluid rounded" |
|||
style="max-height: 450px; max-width: 100%;"> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Footer --> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|||
Close |
|||
</button> |
|||
</div> |
|||
|
|||
</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> |
|||
|
|||
|
|||
<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 th:inline="javascript"> |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
loadDropdowns(); |
|||
//loadMeetingList(); |
|||
initializeMeetingDates(); |
|||
|
|||
}); |
|||
|
|||
function resetFilters() { |
|||
|
|||
$("#zone").val(""); |
|||
$("#category").val(""); |
|||
|
|||
//loadMeetingList(); |
|||
initializeMeetingDates(); |
|||
|
|||
} |
|||
|
|||
function loadMeetingList() { |
|||
|
|||
if ($.fn.DataTable.isDataTable('#shelterListTable')) { |
|||
$('#shelterListTable').DataTable().destroy(); |
|||
} |
|||
|
|||
$("#shelterListTable tbody").empty(); |
|||
|
|||
$.ajax({ |
|||
|
|||
url: "/gcc/api/shelterinspection/shelterMeetingList", |
|||
type: "GET", |
|||
|
|||
data: { |
|||
fromDate: $("#fromDate").val(), |
|||
toDate: $("#toDate").val(), |
|||
zone: $("#zone").val(), |
|||
category: $("#category").val() |
|||
}, |
|||
|
|||
success: function(response) { |
|||
|
|||
let rows = ""; |
|||
|
|||
$.each(response, function(i, item) { |
|||
|
|||
rows += ` |
|||
<tr> |
|||
<td>${i + 1}</td> |
|||
|
|||
<td><strong>${item.shelterName || "-"}</strong></td> |
|||
<td class="text-center">${item.zone || "-"}</td> |
|||
<td class="text-center">${formatCategory(item.category)}</td> |
|||
|
|||
<td class="text-center"> |
|||
${ |
|||
Number(item.totalMeetings) > 0 |
|||
? `<a href="javascript:void(0);" |
|||
onclick="viewMeeting('${item.uqid}', '${escapeHtml(item.shelterName)}')" |
|||
style="color: #007bff; text-decoration: underline; cursor: pointer;"> |
|||
${item.totalMeetings} |
|||
</a>` |
|||
: `${item.totalMeetings}` |
|||
} |
|||
</td> |
|||
|
|||
|
|||
</tr> |
|||
`; |
|||
}); |
|||
|
|||
$("#shelterListTable tbody").html(rows); |
|||
|
|||
$('#shelterListTable').DataTable({ |
|||
|
|||
responsive: true, |
|||
pageLength: 10, |
|||
ordering: true, |
|||
|
|||
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'} |
|||
] |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
error: function() { |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'Unable to load shelter list.', |
|||
allowOutsideClick: false |
|||
}); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
function formatCategory(category) { |
|||
|
|||
if (!category) return "-"; |
|||
|
|||
return category |
|||
.replace(/-/g, " ") |
|||
.replace(/\b\w/g, function(letter) { |
|||
return letter.toUpperCase(); |
|||
}); |
|||
|
|||
} |
|||
|
|||
function viewMeeting(uqid, shelterName) { |
|||
|
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/shelterMeetingDetails", |
|||
type: "GET", |
|||
data: { |
|||
uqid: uqid, |
|||
fromDate: $("#fromDate").val(), |
|||
toDate: $("#toDate").val() |
|||
}, |
|||
|
|||
success: function (res) { |
|||
|
|||
// ========================================== |
|||
// SET MODAL TITLE |
|||
// ========================================== |
|||
|
|||
$("#meetingDetailsModalTitle").text( |
|||
"Meeting List Details - " + (shelterName || "-") |
|||
); |
|||
|
|||
let rows = ""; |
|||
|
|||
// ========================================== |
|||
// Destroy previous DataTable |
|||
// ========================================== |
|||
|
|||
if ($.fn.DataTable.isDataTable('#meetingDetailsTable')) { |
|||
$('#meetingDetailsTable').DataTable().destroy(); |
|||
} |
|||
|
|||
// Clear old data |
|||
$("#meetingDetailsBody").empty(); |
|||
|
|||
|
|||
// ========================================== |
|||
// No Data |
|||
// ========================================== |
|||
|
|||
if (!res || res.length === 0) { |
|||
|
|||
rows = ` |
|||
<tr> |
|||
<td colspan="9" class="text-center"> No meeting details found </td> |
|||
</tr> |
|||
`; |
|||
|
|||
} |
|||
|
|||
// ========================================== |
|||
// Load Data |
|||
// ========================================== |
|||
|
|||
else { |
|||
|
|||
$.each(res, function (i, item) { |
|||
|
|||
// ---------------------------------- |
|||
// Photo |
|||
// ---------------------------------- |
|||
|
|||
let photoHtml = formatMeetingPhoto(item.meetingPhoto); |
|||
|
|||
|
|||
// ---------------------------------- |
|||
// Table Row |
|||
// ---------------------------------- |
|||
|
|||
rows += ` |
|||
<tr> |
|||
|
|||
<td class="text-center">${item.sno || i + 1}</td> |
|||
<td><strong>${item.shelterName || "-"}</strong></td> |
|||
<td class="text-center">${item.cdo || "-"}</td> |
|||
<td class="text-center">${item.date || "-"}</td> |
|||
<td class="text-center">${item.qid3 ?? "-"}</td> |
|||
<td class="text-center">${item.qid4 ?? "-"}</td> |
|||
<td class="text-center">${item.qid5 ?? "-"}</td> |
|||
<td class="text-center">${photoHtml}</td> |
|||
<td>${formatMeetingRemark(item.qid6)}</td> |
|||
|
|||
</tr> |
|||
`; |
|||
}); |
|||
} |
|||
|
|||
|
|||
// ========================================== |
|||
// Insert Data |
|||
// ========================================== |
|||
|
|||
$("#meetingDetailsBody").html(rows); |
|||
|
|||
|
|||
// ========================================== |
|||
// Initialize DataTable |
|||
// ========================================== |
|||
|
|||
$('#meetingDetailsTable').DataTable({ |
|||
|
|||
responsive: false, |
|||
pageLength: 10, |
|||
ordering: true, |
|||
autoWidth: false, |
|||
|
|||
|
|||
|
|||
dom: 'Bfrtip', |
|||
buttons: [ |
|||
{extend: 'pageLength', className: 'btn btn-warning'}, |
|||
{extend: 'copyHtml5', text: 'Copy', className: 'btn btn-success'}, |
|||
{extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary'}, |
|||
|
|||
] |
|||
|
|||
}); |
|||
|
|||
|
|||
// ========================================== |
|||
// Show Modal |
|||
// ========================================== |
|||
|
|||
$("#MeetingDetailsModal").modal({ |
|||
backdrop: "static", |
|||
keyboard: false |
|||
}); |
|||
|
|||
$("#MeetingDetailsModal").modal("show"); |
|||
|
|||
}, |
|||
|
|||
error: function (xhr) { |
|||
|
|||
Swal.fire({ |
|||
icon: "error", |
|||
title: "Error", |
|||
text: "Unable to load meeting details.", |
|||
allowOutsideClick: false |
|||
}); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
// ========================================================= |
|||
// MEETING PHOTO BUTTON |
|||
// ========================================================= |
|||
$(document).on("click", ".meetingPhotoBtn, .photoBtn", function () { |
|||
|
|||
var photoUrl = $(this).attr("data-photo"); |
|||
|
|||
if (photoUrl && photoUrl.trim() !== "") { |
|||
|
|||
$("#meetingModalPhoto") |
|||
.attr("src", photoUrl) |
|||
.show(); |
|||
|
|||
$("#meetingPhotoModal").modal({ |
|||
backdrop: "static", |
|||
keyboard: false |
|||
}); |
|||
|
|||
$("#meetingPhotoModal").modal("show"); |
|||
} |
|||
|
|||
}); |
|||
|
|||
// ========================================================= |
|||
// FORMAT MEETING PHOTO |
|||
// ========================================================= |
|||
function formatMeetingPhoto(photo) { |
|||
|
|||
if (!photo || String(photo).trim() === "") { |
|||
return 'No Photo'; |
|||
} |
|||
|
|||
return ` |
|||
<a href="javascript:void(0);" |
|||
id="meetingPhoto" |
|||
class="photoBtn btn btn-sm btn-outline-primary" |
|||
data-photo="${escapeHtml(photo)}"> |
|||
View Photo |
|||
</a> |
|||
`; |
|||
} |
|||
|
|||
// ========================================================= |
|||
// FORMAT MEETING PHOTO |
|||
// ========================================================= |
|||
function formatMeetingPhoto(photo) { |
|||
|
|||
// ========================================== |
|||
// NO PHOTO |
|||
// ========================================== |
|||
if (!photo || String(photo).trim() === "") { |
|||
|
|||
return ` |
|||
<a href="javascript:void(0);" |
|||
class="btn btn-sm btn-outline-primary disabled"> |
|||
No Photo |
|||
</a> |
|||
`; |
|||
} |
|||
|
|||
// ========================================== |
|||
// PHOTO AVAILABLE |
|||
// ========================================== |
|||
return ` |
|||
<a href="javascript:void(0);" |
|||
class="meetingPhotoBtn btn btn-sm btn-outline-primary" |
|||
data-photo="${escapeHtml(photo)}"> |
|||
View Photo |
|||
</a> |
|||
`; |
|||
} |
|||
|
|||
// ========================================================= |
|||
// ESCAPE HTML |
|||
// ========================================================= |
|||
function escapeHtml(value) { |
|||
|
|||
if (value === null || value === undefined) { |
|||
return ""; |
|||
} |
|||
|
|||
return String(value) |
|||
.replace(/&/g, "&") |
|||
.replace(/</g, "<") |
|||
.replace(/>/g, ">") |
|||
.replace(/"/g, """) |
|||
.replace(/'/g, "'"); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
// ========================================================= |
|||
// FORMAT MEETING REMARK |
|||
// ========================================================= |
|||
function formatMeetingRemark(value) { |
|||
|
|||
// ========================================== |
|||
// NO REMARK |
|||
// ========================================== |
|||
if ( |
|||
value === null || |
|||
value === undefined || |
|||
String(value).trim() === '' |
|||
) { |
|||
return ` |
|||
<a href="javascript:void(0);" |
|||
class="btn btn-sm btn-outline-primary disabled"> |
|||
No Remark |
|||
</a> |
|||
`; |
|||
} |
|||
|
|||
var text = String(value).trim(); |
|||
|
|||
// ========================================== |
|||
// SPLIT ALL WORDS |
|||
// ========================================== |
|||
var words = text.split(/\s+/); |
|||
|
|||
// ========================================== |
|||
// DISTRIBUTE ALL WORDS INTO 4 LINES |
|||
// ========================================== |
|||
var totalWords = words.length; |
|||
var wordsPerLine = Math.ceil(totalWords / 4); |
|||
|
|||
var lines = []; |
|||
|
|||
for (var i = 0; i < words.length; i += wordsPerLine) { |
|||
lines.push( |
|||
words.slice(i, i + wordsPerLine).join(' ') |
|||
); |
|||
} |
|||
|
|||
// ========================================== |
|||
// MAXIMUM 4 LINES |
|||
// ========================================== |
|||
lines = lines.slice(0, 4); |
|||
|
|||
return lines.join('<br>'); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// ========================================================= |
|||
// INITIALIZE COMPLAINT DATE FILTER |
|||
// From Date = Minimum DB cdate |
|||
// To Date = Today |
|||
// ========================================================= |
|||
|
|||
function initializeMeetingDates() { |
|||
|
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/shelterMeetingMinDate", |
|||
type: "GET", |
|||
success: function (minDate) { |
|||
|
|||
console.log("Minimum Meeting cdate:", minDate); |
|||
|
|||
// ================================================= |
|||
// TODAY |
|||
// ================================================= |
|||
|
|||
var today = new Date(); |
|||
|
|||
var yyyy = today.getFullYear(); |
|||
|
|||
var mm = String(today.getMonth() + 1).padStart(2, '0'); |
|||
var dd = String(today.getDate()).padStart(2, '0'); |
|||
var todayString = yyyy + '-' + mm + '-' + dd; |
|||
|
|||
|
|||
// ================================================= |
|||
// FROM DATE |
|||
// ================================================= |
|||
|
|||
if (minDate) { |
|||
$('#fromDate').val(minDate); |
|||
} else { |
|||
// If no DB date found, |
|||
// use today |
|||
|
|||
$('#fromDate').val(todayString); |
|||
} |
|||
|
|||
|
|||
// ================================================= |
|||
// TO DATE = TODAY |
|||
// ================================================= |
|||
|
|||
$('#toDate').val(todayString); |
|||
|
|||
|
|||
// ================================================= |
|||
// LOAD REPORT |
|||
// ================================================= |
|||
|
|||
loadMeetingList(); |
|||
|
|||
}, |
|||
|
|||
error: function (xhr) { |
|||
|
|||
console.error("Unable to get minimum meeting date:",); |
|||
|
|||
// ================================================= |
|||
// FALLBACK TO TODAY |
|||
// ================================================= |
|||
|
|||
var today = new Date(); |
|||
|
|||
var yyyy = today.getFullYear(); |
|||
|
|||
var mm = String(today.getMonth() + 1).padStart(2, '0'); |
|||
var dd = String(today.getDate()).padStart(2, '0'); |
|||
var todayString = yyyy + '-' + mm + '-' + dd; |
|||
|
|||
|
|||
$('#fromDate').val(todayString); |
|||
$('#toDate').val(todayString); |
|||
|
|||
loadMeetingList(); |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
function loadDropdowns() { |
|||
|
|||
// Zone |
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/zones", |
|||
type: "GET", |
|||
success: function(data) { |
|||
|
|||
let options = '<option value="">All Zones</option>'; |
|||
|
|||
data.forEach(function(zone) { |
|||
options += `<option value="${zone}">${zone}</option>`; |
|||
}); |
|||
|
|||
$("#zone").html(options); |
|||
|
|||
} |
|||
}); |
|||
|
|||
// Category |
|||
$.ajax({ |
|||
url: "/gcc/api/shelterinspection/categories", |
|||
type: "GET", |
|||
success: function(data) { |
|||
|
|||
let options = '<option value="">All Categories</option>'; |
|||
|
|||
data.forEach(function(category) { |
|||
|
|||
let text = category |
|||
.replace(/-/g, " ") |
|||
.replace(/\b\w/g, function(c) { |
|||
return c.toUpperCase(); |
|||
}); |
|||
|
|||
options += `<option value="${category}">${text}</option>`; |
|||
}); |
|||
|
|||
$("#category").html(options); |
|||
|
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue