You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
687 lines
20 KiB
687 lines
20 KiB
<!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>
|