19 changed files with 9009 additions and 0 deletions
-
324gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Controller/ChildrenSurveyController.java
-
71gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Controller/MainController.java
-
1036gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Service/ChildrenSurveyService.java
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/castemaster.html
-
129gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/childlist.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentcorrectionmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/documentreasonmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/dropoutreasonmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/educationmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/gendermaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/incomemaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/interestfieldmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/livingmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/locationmaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/ownermaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/religionmaster.html
-
15gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/surveyorsreports.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/vulnerabilitymaster.html
-
531gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/whereaboutmaster.html
1036
gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Service/ChildrenSurveyService.java
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Caste Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Caste |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th> Caste Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Caste</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label> Caste Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/castemasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/savecaste", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/caste-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Document Correction Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Document Correction |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Document Correction Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Document Correction</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Document Correction Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentcreationmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentcreationsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentcreationstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Document Reason Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Document Reason |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Document Reason Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Document Reason</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Religion Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentreasonmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentreasonmaster", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/documentreasonmasterstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Dropout Reason Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Dropout Reason |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Dropout Reason Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Dropout Reason</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Dropout Reason Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/dropoutreasonmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/dropoutreasonsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/dropoutreasonstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Education Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Education |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Education Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Education</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Education Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/educationmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/save", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Gender Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Gender |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Gender Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Gender</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Gender Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/gendermasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/gendersave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/gender-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Income Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Income |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Income Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Income</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Income Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/incomemasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/incomesave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/incomemasterstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Interest Field Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Interest Field |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Interest Field Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Interest Field</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Interest Field Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/interestfieldmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/interestfieldsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/interestfieldmaster-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Living Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Living Type |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Living Type Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Living</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Living Type Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/livingmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/livingsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/living-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Location Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Location |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Location Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Location</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Location Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/locationmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/locationsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/location-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Owner Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Owner |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Owner Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Owner</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Owner Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/ownermasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/ownermastersave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/ownermasterstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Religion Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Religion |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Religion Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Religion</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Religion Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/religionmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/religionsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/religion-status", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Vulnerability Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Vulnerability |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Vulnerability Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Vulnerability</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Vulnerability Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/vulnerabilitymasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/vulnerabilitysave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/vulnerabilitymasterstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,531 @@ |
|||||
|
<!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"> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title d-flex align-items-center"> |
||||
|
<i class="ik ik-book bg-blue me-2"></i> |
||||
|
<h5 class="mb-0">Where About Master</h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6 text-end"> |
||||
|
<button class="btn btn-primary" onclick="openAddModal()"> |
||||
|
<i class="fa fa-plus"></i> Add Where About |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<div class="card-block"> |
||||
|
|
||||
|
<table id="educationTable" class="table table-bordered table-striped"> |
||||
|
|
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>ID</th> |
||||
|
<th>Where About Name</th> |
||||
|
<th>Status</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tbody></tbody> |
||||
|
|
||||
|
</table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="modal fade" id="educationModal"> |
||||
|
|
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
|
||||
|
<div class="modal-header bg-primary text-white"> |
||||
|
<h5 class="modal-title">Add Religion</h5> |
||||
|
|
||||
|
<button type="button" class="close" data-bs-dismiss="modal"> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label>Where About Name</label> |
||||
|
|
||||
|
<input type="text" id="educationName" class="form-control"> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
<button class="btn btn-primary" onclick="saveEducation()"> |
||||
|
Save |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-secondary" data-bs-dismiss="modal"> |
||||
|
Close |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!--<hr>--> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
|
||||
|
|
||||
|
<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 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 |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
});*/ |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function openAddModal() { |
||||
|
|
||||
|
$("#educationName").val(''); |
||||
|
|
||||
|
let modal = new bootstrap.Modal( |
||||
|
document.getElementById('educationModal') |
||||
|
); |
||||
|
|
||||
|
modal.show(); |
||||
|
} |
||||
|
|
||||
|
function loadEducationTable() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/whereaboutmasterlist", |
||||
|
type: "GET", |
||||
|
|
||||
|
success: function (data) { |
||||
|
|
||||
|
let tbody = ""; |
||||
|
|
||||
|
data.forEach(function (row) { |
||||
|
|
||||
|
let statusBadge = row.isactive == 1 |
||||
|
? `<span class="badge">Active</span>` |
||||
|
: `<span class="badge">Disabled</span>`; |
||||
|
|
||||
|
let actionButton = row.isactive == 1 |
||||
|
? ` |
||||
|
<button class="btn btn-danger btn-sm" |
||||
|
onclick="toggleStatus(${row.id},0)"> |
||||
|
Disable |
||||
|
</button> |
||||
|
` |
||||
|
: ` |
||||
|
<button class="btn btn-success btn-sm" |
||||
|
onclick="toggleStatus(${row.id},1)"> |
||||
|
Enable |
||||
|
</button> |
||||
|
`; |
||||
|
|
||||
|
tbody += ` |
||||
|
<tr> |
||||
|
|
||||
|
<td>${row.id}</td> |
||||
|
|
||||
|
<td>${row.english_name}</td> |
||||
|
|
||||
|
<td>${statusBadge}</td> |
||||
|
|
||||
|
<td>${actionButton}</td> |
||||
|
|
||||
|
</tr> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
if ($.fn.DataTable.isDataTable('#educationTable')) { |
||||
|
|
||||
|
$('#educationTable') |
||||
|
.DataTable() |
||||
|
.clear() |
||||
|
.destroy(); |
||||
|
} |
||||
|
|
||||
|
$("#educationTable tbody").html(tbody); |
||||
|
|
||||
|
$('#educationTable').DataTable({ |
||||
|
responsive: true |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function saveEducation() { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/whereaboutsave", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
english_name: $("#educationName").val() |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Saved Successfully' |
||||
|
}); |
||||
|
|
||||
|
bootstrap.Modal.getInstance( |
||||
|
document.getElementById('educationModal') |
||||
|
).hide(); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function toggleStatus(id, status) { |
||||
|
|
||||
|
$.ajax({ |
||||
|
|
||||
|
url: "/gcc/api/children-survey/whereaboutstatus", |
||||
|
|
||||
|
type: "POST", |
||||
|
|
||||
|
contentType: "application/json", |
||||
|
|
||||
|
data: JSON.stringify({ |
||||
|
|
||||
|
id: id, |
||||
|
status: status |
||||
|
|
||||
|
}), |
||||
|
|
||||
|
success: function () { |
||||
|
|
||||
|
Swal.fire({ |
||||
|
icon: 'success', |
||||
|
title: 'Status Updated' |
||||
|
}); |
||||
|
|
||||
|
loadEducationTable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue