|
|
<!DOCTYPE html><html lang="en" dir="ltr"><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head><style> body { background-color: #f8f9fa; /* font-family: Arial, sans-serif;*/ }
.header { font-size: 22px; font-weight: bold; margin-bottom: 20px; }
.table { border: 1px solid #dee2e6; }
.table th, .table td { border: 1px solid #dee2e6; padding: 10px; }
.section-title { font-size: 18px; font-weight: bold; margin-top: 20px; border-bottom: 2px solid #007bff; padding-bottom: 5px; }
.form-group { margin-top: 15px; }
.radio-group { display: flex; gap: 20px; margin-top: 10px; }
.info-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.info-table td, .info-table th { border: 1px solid #ddd; padding: 10px; vertical-align: middle; }
.info-table td:first-child { font-weight: bold; width: 50%; }
.info-table td:last-child { color: #555; }
.btn-gap { margin-left: 1rem; /* or any value you like */ } .student-data-wrapper { padding: 0px; margin-top: -58px; margin-left: -186px; width: 120%;}
@media (max-width: 768px) { .student-data-wrapper { margin-left: 0; width: 100%; padding: 0 15px; /* Optional horizontal spacing */ }} </style>
<body> <div class="wrapper"> <header th:replace="~{fragments/modules/base/header :: header}"></header> <div class="page-wrap"> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <div class="card"> <div class="main-content" style="background-color: white;"> <!-- <div class="container">
<div> <div style="padding: 0px;margin-top:-58px;margin-left: -233px;width:120%;">
<div class="row" style=" padding: 15px;"> <div class="col-md-6 form-group"> <label>Total No of Students <span class="text-danger">*</span></label> <input type="text" class="form-control" placeholder="Enter the value" id="total_students" required /> </div>
</div> <div class="row" style=" padding: 15px;">
<div class="col-md-4 form-group"> <label>No of Boys <span class="text-danger">*</span></label> <input type="text" class="form-control" placeholder="Enter the value" id="total_boys" required /> </div> <div class="col-md-4 form-group"> <label>No of Girls <span class="text-danger">*</span></label> <input type="text" class="form-control" placeholder="Enter the value" id="total_girls" required /> </div> <div class="col-md-4 form-group"> <label>Others <span class="text-danger">*</span></label> <input type="text" class="form-control" placeholder="Enter the value" id="others" required /> </div> </div>
<div class="card-footer text-center" > <button type="submit" class="btn btn-primary" id="StudentSubmitBtn"><i class="ik ik-save"></i>Submit </button> <button type="reset" class="btn btn-secondary mr-2" id="StudentresetButton"><i class="ik ik-refresh-cw"></i>Reset </button>
</div> </div>--> <div class="student-data-wrapper">
<div class="card-header d-flex justify-content-between align-items-center"> <b>Student Details</b>
</div>
<!-- Read-only View --> <div id="studentReadOnlyView" style="display: none;"> <table class="info-table"> <tr> <td>Total No of Students</td> <td id="readonly_total_students">-</td> </tr> <tr> <td>No of Boys</td> <td id="readonly_total_boys">-</td> </tr> <tr> <td>No of Girls</td> <td id="readonly_total_girls">-</td> </tr> <tr> <td>Transgender</td> <td id="readonly_others">-</td> </tr> </table> <br> <div class=" text-center"> <button type="button" class="btn btn-primary" id="processupdate" style="display:none;">Update</button>
</div> </div>
<!-- Editable Form --> <div id="studentEntryForm" style="display: none;"> <div class="row p-3"> <div class="col-md-6 form-group"> <label>Total No of Student <span class="text-danger">*</span></label> <input type="text" class="form-control" id="total_students" required /> </div> </div> <div class="row p-3"> <div class="col-md-4 form-group"> <label>No of Boys <span class="text-danger">*</span></label> <input type="text" class="form-control" id="total_boys" required /> </div> <div class="col-md-4 form-group"> <label>No of Girls <span class="text-danger">*</span></label> <input type="text" class="form-control" id="total_girls" required /> </div> <div class="col-md-4 form-group"> <label>Transgender <span class="text-danger">*</span></label> <input type="text" class="form-control" id="others" required /> </div> </div> <div class="card-footer text-center"> <button type="submit" class="btn btn-primary" id="StudentSubmitBtn"><i class="ik ik-save"></i> Submit</button> <button type="reset" class="btn btn-secondary" id="StudentresetButton"><i class="ik ik-refresh-cw"></i> Reset</button> </div> </div>
<!-- Modal for Update --> <div class="modal fade" id="studentUpdateModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Update Student Details</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"><label>Total Students *</label><input id="modal_total_students" class="form-control"></div> <div class="form-group"><label>No of Boys *</label><input id="modal_total_boys" class="form-control"></div> <div class="form-group"><label>No of Girls *</label><input id="modal_total_girls" class="form-control"></div> <div class="form-group"><label>Transgender *</label><input id="modal_others" class="form-control"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="saveModalUpdate">Save Changes</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> <div style="position: relative; top: 50%; transform: translateY(-50%);"> <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> <span class="sr-only">Loading...</span> </div> <!-- Add the 'Please wait' text below the spinner --> <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> </div> </div>
</div>
</div> </div> </div>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <script type="text/javascript">
$(document).ready(function () { const urlParams = new URLSearchParams(window.location.search); const schoolId = urlParams.get("schoolId");
document.getElementById('total_students').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('total_boys').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('total_girls').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('others').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } }); document.getElementById('modal_total_students').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('modal_total_boys').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('modal_total_girls').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
document.getElementById('modal_others').addEventListener('input', function () { this.value = this.value.replace(/[^0-9]/g, ''); if (parseInt(this.value) < 0) { this.value = ''; } });
/* $.ajax({ url: '/gcc/api/gccschool/buildingasset/getStudentStrengthBySchoolId', type: 'GET', data: {schoolId}, success: function (response) { console.log(response); if (response.status === 'OK') { if(response.studentStrength.length > 0){ const data = response.studentStrength[0]; // Get the first object from the array // Show the update button (assuming it's an ID, use #) $('#processupdate').show(); //$('.card-footer').hide(); $('#StudentSubmitBtn').hide(); $('#StudentresetButton').hide(); $('#refreshButton').show(); // Populate values into the respective HTML elements $('#total_students').val(data.total_students || 0); $('#total_boys').val(data.total_boys || 0); $('#total_girls').val(data.total_girls || 0); $('#others').val(data.others || 0); }else { // Optional: handle the case where studentStrength is empty $('#total_students').text(''); $('#total_boys').text(''); $('#total_girls').text(''); $('#others').text(''); $('#processupdate').hide(); // hide update button if no data } } else if(response.status==='NEW'){ $('#processupdate').hide(); $('#refreshButton').hide(); $('.card-footer').show(); } } });*/ $.ajax({ url: '/gcc/api/gccschool/buildingasset/getStudentStrengthBySchoolId', type: 'GET', data: {schoolId}, success: function (response) { if (response.status === 'OK' && response.studentStrength.length > 0) { const data = response.studentStrength[0]; $('#readonly_total_students').text(data.total_students || 0); $('#readonly_total_boys').text(data.total_boys || 0); $('#readonly_total_girls').text(data.total_girls || 0); $('#readonly_others').text(data.others || 0);
$('#studentReadOnlyView').show(); $('#studentEntryForm').hide(); $('#processupdate').show(); $('#refreshButton').show(); } else { $('#studentReadOnlyView').hide(); $('#studentEntryForm').show(); $('.card-footer').show(); $('#processupdate').hide(); $('#refreshButton').hide(); } } });
$('#processupdate').on('click', function () { $('#modal_total_students').val($('#readonly_total_students').text()); $('#modal_total_boys').val($('#readonly_total_boys').text()); $('#modal_total_girls').val($('#readonly_total_girls').text()); $('#modal_others').val($('#readonly_others').text()); $('#studentUpdateModal').modal('show'); });
$('#saveModalUpdate').on('click', function () { let requestData = { total_students: parseInt($('#modal_total_students').val()) || 0, total_boys: parseInt($('#modal_total_boys').val()) || 0, total_girls: parseInt($('#modal_total_girls').val()) || 0, others: parseInt($('#modal_others').val()) || 0, school_id: schoolId }; if (!$('#modal_total_students').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter Total No of Students.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#modal_total_boys').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Boys.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#modal_total_girls').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Girls.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#modal_others').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Transgender.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (requestData.total_students !== (requestData.total_boys + requestData.total_girls + requestData.others)) { Swal.fire('Validation Error', 'Total should equal Boys + Girls + Transgender.', 'warning'); return; }
$('#pageLoader').show(); $.ajax({ url: '/gcc/api/gccschool/schoolproperty/updateStudentDetails', type: 'POST', contentType: 'application/x-www-form-urlencoded', // important data: $.param(requestData), // flatten the object correctly success: function (res) { console.log("res:" + res); $('#pageLoader').hide(); $('#studentUpdateModal').modal('hide'); // Swal.fire('Updated!', res, 'success').then(() => location.reload()); Swal.fire({ title: 'Updated!', text: 'Student strength details updated successfully!', icon: 'success', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }).then(() => location.reload());
}, error: function (err) { $('#pageLoader').hide(); Swal.fire({ title: 'Error', text: err.responseText, icon: 'error', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true });
// Swal.fire('Error', err.responseText, 'error'); } }); });
$(document).on('click', '#StudentSubmitBtn', function () {
//parseInt($('#tot_staff').val()) || 0; let total_students = parseInt($('#total_students').val()) || 0; let total_boys = parseInt($('#total_boys').val()) || 0; let total_girls = parseInt($('#total_girls').val()) || 0; let others = parseInt($('#others').val()) || 0; //let school_id = 1;
console.log("total_students=", total_students); console.log("total_boys=", total_boys); console.log("total_girls=", total_girls); console.log("others=", others); console.log("school_id=", schoolId); if (!$('#total_students').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter Total No of Students.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#total_boys').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Boys.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#total_girls').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Girls.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
if (!$('#others').val().trim()) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please enter No of Transgender.', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: true }); return; }
// Validate inputs let fields = { "Total No of Students": total_students, "No of Boys": total_boys, "No of Girls": total_girls, "Others": others, };
/*for (let key in fields) { if (!fields[key] || isNaN(fields[key])) { Swal.fire({ icon: 'info', title: 'Validation Error', text: `Please enter ${key}` + " , IF No means Enter 0", confirmButtonText: 'OK' }); return; // Stop execution if validation fails } }*/
if (total_students !== (total_boys + total_girls + others)) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Total Students must be equal to the sum of No of Boys, No of Girls, and Transgender.', allowOutsideClick: false, // Disable clicking outside the modal to close it allowEscapeKey: false, // Disable escape key to close the modal allowEnterKey: false, // Disable enter key to close the modal showConfirmButton: true }); return; }
// Prepare Data for AJAX let requestData = { total_students: total_students, total_boys: total_boys, total_girls: total_girls, school_id: schoolId, others: others };
$('#StudentSubmitBtn').prop('disabled', true).text('Processing...'); $('#pageLoader').show(); $.ajax({ url: '/gcc/api/gccschool/schoolproperty/saveStudentStrength', type: 'POST', contentType: 'application/x-www-form-urlencoded', data: $.param(requestData), success: function (response) { $('#pageLoader').hide(); $('#StudentSubmitBtn').prop('disabled', false).text('Submit'); Swal.fire({ icon: 'success', title: 'Success', text: response, allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, confirmButtonText: 'OK' }).then((result) => { if (result.isConfirmed) { $('#StudentSubmitBtn').prop('disabled', false).text('Submit'); location.reload(); } }); }, error: function (xhr, status, error) { $('#pageLoader').hide(); $('#StudentSubmitBtn').prop('disabled', false).text('Submit'); let errorMessage = xhr.responseText;
Swal.fire({ icon: 'error', title: 'Error', text: errorMessage, confirmButtonText: 'OK' }); console.error('Error:', xhr.responseText); } });
});
function resetStudentFields() { console.log("Reset button clicked"); $('#total_students, #total_boys, #total_girls, #others').val(''); }
// Event Listener for Reset Button $(document).on('click', '#StudentresetButton', function (event) { event.preventDefault(); resetStudentFields(); }); $('#refreshButton').on('click', function (e) { e.preventDefault(); // prevent default reset behavior, optional location.reload(); }); }); </script></body>
</html>
|