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.
567 lines
18 KiB
567 lines
18 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/modules/base/head :: head}">
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.card1 {
|
|
padding: 0px;
|
|
margin-top: -58px;
|
|
margin-left: -230px;
|
|
}
|
|
|
|
/* ✅ Responsive Fix for Mobile Screens */
|
|
@media (max-width: 768px) {
|
|
.card1 {
|
|
margin-top: 0 !important;
|
|
|
|
padding: 15px;
|
|
}
|
|
|
|
.container {
|
|
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
#toiletDataContainer table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
} </style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container mt-4">
|
|
<header th:replace="~{fragments/modules/base/header :: header}"></header>
|
|
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
|
|
|
|
<div class="card p-3">
|
|
<div class="card-header">
|
|
<b>Toilets</b>
|
|
</div>
|
|
<br>
|
|
<!-- View Table -->
|
|
<div id="toiletDataContainer" style="display: none;">
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>No of Toilet Blocks</th>
|
|
<td id="td_blocks"></td>
|
|
|
|
<th>Male Toilets (Urinals)</th>
|
|
<td id="td_urinals"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Male Toilets (W.C)</th>
|
|
<td id="td_wc_male"></td>
|
|
|
|
<th>Female Toilets (W.C)</th>
|
|
<td id="td_wc_female"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Differently Abled Toilets</th>
|
|
<td id="td_disabled"></td>
|
|
|
|
<th>Incinerator for Napkin Disposal</th>
|
|
<td id="td_napkins"></td>
|
|
</tr>
|
|
</table>
|
|
<div class="text-center">
|
|
<button class="btn btn-primary" id="editToiletBtn">Update</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="toiletForm" novalidate>
|
|
<input type="hidden" name="school_id">
|
|
<input type="hidden" id="toilet_id" name="toilet_id" />
|
|
|
|
<div class="row p-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>No of Toilet Blocks *</label>
|
|
<input type="text" class="form-control" name="total_toiletBlocks"
|
|
id="total_toiletBlocks" required>
|
|
</div>
|
|
<div class="col-md-6 form-group">
|
|
<label>Total Male Toilets (Urinals) *</label>
|
|
<input type="text" class="form-control" name="total_male_urinals"
|
|
id="total_male_urinals" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row p-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Total Male Toilets (W.C) *</label>
|
|
<input type="text" class="form-control" name="total_wc_male"
|
|
id="total_wc_male" required>
|
|
</div>
|
|
<div class="col-md-6 form-group">
|
|
<label>Total Female Toilets (W.C) *</label>
|
|
<input type="text" class="form-control" name="total_wc_female"
|
|
id="total_wc_female" required>
|
|
</div>
|
|
<div class="col-md-6 form-group">
|
|
<label>Incinerator for Napkins Disposal *</label>
|
|
<div class="radio-group">
|
|
<input type="radio" name="is_napkins" value="true"> Yes
|
|
<input type="radio" name="is_napkins" value="false"> No
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 form-group">
|
|
<label>Differently Abled Toilets *</label>
|
|
<input type="text" class="form-control" name="total_diffAbled_toilet"
|
|
id="total_diffAbled_toilet" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<button type="submit" class="btn btn-primary"><i class="ik ik-save"></i>
|
|
Submit</button>
|
|
<button type="reset" class="btn btn-secondary"><i class="ik ik-refresh-cw"></i>
|
|
Reset</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="toiletModal" tabindex="-1" aria-labelledby="toiletModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="toiletUpdateForm">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Update Toilet 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">
|
|
<input type="hidden" id="modal_toilet_id" />
|
|
<input type="hidden" id="modal_school_id" />
|
|
|
|
<div class="mb-2"><label>No of Toilet Blocks *</label><input type="number" id="modal_blocks"
|
|
class="form-control" required /></div>
|
|
<div class="mb-2"><label>Male Toilets (Urinals) *</label><input type="number"
|
|
id="modal_urinals" class="form-control" required /></div>
|
|
<div class="mb-2"><label>Male Toilets (W.C) *</label><input type="number" id="modal_wc_male"
|
|
class="form-control" required /></div>
|
|
<div class="mb-2"><label>Female Toilets (W.C) *</label><input type="number"
|
|
id="modal_wc_female" class="form-control" required /></div>
|
|
<div class="mb-2"><label>Differently Abled Toilets *</label><input type="number"
|
|
id="modal_disabled" class="form-control" required /></div>
|
|
<div class="mb-2">
|
|
<label>Incinerator for Napkin Disposal *</label><br>
|
|
<input type="radio" name="modal_napkins" value="true" /> Yes
|
|
<input type="radio" name="modal_napkins" value="false" /> No
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-success">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
const schoolId = new URLSearchParams(window.location.search).get("schoolId");
|
|
$('input[name="school_id"]').val(schoolId);
|
|
$('#modal_school_id').val(schoolId);
|
|
/*$('#total_toiletBlocks').on('input', function () {
|
|
const value = parseInt($(this).val()) || 0;
|
|
if (value === 0) {
|
|
$('#total_male_urinals').val(0);
|
|
$('#total_wc_male').val(0);
|
|
$('#total_wc_female').val(0);
|
|
$('#total_diffAbled_toilet').val(0);
|
|
}
|
|
else{
|
|
|
|
$('#total_male_urinals').val('');
|
|
$('#total_wc_male').val('');
|
|
$('#total_wc_female').val('');
|
|
$('#total_diffAbled_toilet').val('');
|
|
|
|
}
|
|
|
|
|
|
});*/
|
|
/* $('#modal_blocks').on('input', function () {
|
|
const value = parseInt($(this).val()) || 0;
|
|
if (value === 0) {
|
|
$('#modal_urinals').val(0);
|
|
$('#modal_wc_male').val(0);
|
|
$('#modal_wc_female').val(0);
|
|
$('#modal_disabled').val(0);
|
|
}
|
|
else{
|
|
|
|
$('#modal_urinals').val('');
|
|
$('#modal_wc_male').val('');
|
|
$('#modal_wc_female').val('');
|
|
$('#modal_disabled').val('');
|
|
|
|
}
|
|
|
|
|
|
});*/
|
|
// ✅ Enforce only numeric input
|
|
['total_toiletBlocks', 'total_male_urinals', 'total_wc_male', 'total_wc_female', 'total_diffAbled_toilet']
|
|
.forEach(id => {
|
|
document.getElementById(id).addEventListener('input', function () {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if (parseInt(this.value) < 0) this.value = '';
|
|
});
|
|
});
|
|
|
|
['modal_blocks', 'modal_urinals', 'modal_wc_male', 'modal_wc_female', 'modal_disabled']
|
|
.forEach(id => {
|
|
document.getElementById(id).addEventListener('input', function () {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if (parseInt(this.value) < 0) this.value = '';
|
|
});
|
|
});
|
|
|
|
|
|
// ✅ Function to reload table data after update
|
|
function reloadToiletTable() {
|
|
$.get('/gcc/api/gccschool/schoolproperty/checkToiletDetails', { school_id: schoolId }, function (res) {
|
|
if (res && res[0]?.Data?.length > 0) {
|
|
const d = res[0].Data[0];
|
|
|
|
// Update table with fresh values
|
|
$('#td_blocks').text(d.total_toiletBlocks);
|
|
$('#td_urinals').text(d.total_male_urinals);
|
|
$('#td_wc_male').text(d.total_wc_male);
|
|
$('#td_wc_female').text(d.total_wc_female);
|
|
$('#td_disabled').text(d.total_diffAbled_toilet);
|
|
$('#td_napkins').text(d.is_napkins === true || d.is_napkins === "true" ? 'Yes' : 'No');
|
|
|
|
|
|
$('#toiletDataContainer').show();
|
|
$('#editToiletBtn').data('toiletData', d);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ✅ Initial load
|
|
$.get('/gcc/api/gccschool/schoolproperty/checkToiletDetails', { school_id: schoolId }, function (res) {
|
|
if (res && res[0]?.Data?.length > 0) {
|
|
const d = res[0].Data[0];
|
|
$('#toilet_id').val(d.toilet_id);
|
|
$('#toiletForm').hide();
|
|
$('#toiletDataContainer').show();
|
|
|
|
$('#td_blocks').text(d.total_toiletBlocks);
|
|
$('#td_urinals').text(d.total_male_urinals);
|
|
$('#td_wc_male').text(d.total_wc_male);
|
|
$('#td_wc_female').text(d.total_wc_female);
|
|
$('#td_disabled').text(d.total_diffAbled_toilet);
|
|
$('#td_napkins').text(d.is_napkins === true ? 'Yes' : 'No');
|
|
|
|
$('#editToiletBtn').data('toiletData', d);
|
|
} else {
|
|
$('#toiletForm').show();
|
|
$('#toiletDataContainer').hide();
|
|
}
|
|
});
|
|
|
|
// ✅ Save new toilet form (first time entry)
|
|
$('#toiletForm').submit(function (e) {
|
|
e.preventDefault();
|
|
const blocks = parseInt($('#total_toiletBlocks').val()) || 0;
|
|
const urinals = parseInt($('#total_male_urinals').val()) || 0;
|
|
const wc_male = parseInt($('#total_wc_male').val()) || 0;
|
|
const wc_female = parseInt($('#total_wc_female').val()) || 0;
|
|
const diff_abled = parseInt($('#total_diffAbled_toilet').val()) || 0;
|
|
const isNapkins = $('input[name="is_napkins"]:checked').val();
|
|
/* if (blocks === 0) {
|
|
$('#total_male_urinals').val(0);
|
|
$('#total_wc_male').val(0);
|
|
$('#total_wc_female').val(0);
|
|
$('#total_diffAbled_toilet').val(0);
|
|
}*/
|
|
|
|
if ($('#total_toiletBlocks').val().trim() === '') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter Total Toilet Blocks ',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
if ($('#total_male_urinals').val().trim() === '') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter number of Male Urinals (0 or more).',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if ($('#total_wc_male').val().trim() === '') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter number of Male WC (0 or more).',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if ($('#total_wc_female').val().trim() === '') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter number of Female WC (0 or more).',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
if (typeof isNapkins === 'undefined') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Please select whether there is an Incinerator for Napkins Disposal.',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if ($('#total_diffAbled_toilet').val().trim() === '') {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter number of Differently Abled Toilets (0 or more).',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
|
|
// Total toilets entered
|
|
/* const totalToilets = urinals + wc_male + wc_female + diff_abled;
|
|
|
|
if (blocks !== totalToilets) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Mismatch Detected',
|
|
text: `The number of toilet blocks (${blocks}) must match the total toilets (${totalToilets}) entered.`,
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
return;
|
|
}*/
|
|
|
|
const formData = new FormData(this);
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/gcc/api/gccschool/schoolproperty/saveToilets',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: res => {
|
|
// Swal.fire('Saved', res, 'success').then(() => {
|
|
Swal.fire({
|
|
title: 'Saved',
|
|
text: res,
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
}).then(() => {
|
|
location.reload();
|
|
// $('#toiletForm').hide();
|
|
// reloadToiletTable(); // refresh table
|
|
});
|
|
},
|
|
error: xhr =>Swal.fire({
|
|
title: 'Error',
|
|
text: xhr.responseText || 'Unknown error',
|
|
icon: 'error',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
})
|
|
//Swal.fire('Error', xhr.responseText || 'Unknown error', 'error')
|
|
});
|
|
});
|
|
|
|
let originalModalData = {};
|
|
|
|
$('#editToiletBtn').click(function () {
|
|
const d = $(this).data("toiletData");
|
|
|
|
|
|
$('#modal_toilet_id').val(d.toilet_id);
|
|
$('#modal_blocks').val(d.total_toiletBlocks);
|
|
$('#modal_urinals').val(d.total_male_urinals);
|
|
$('#modal_wc_male').val(d.total_wc_male);
|
|
$('#modal_wc_female').val(d.total_wc_female);
|
|
$('#modal_disabled').val(d.total_diffAbled_toilet);
|
|
$(`input[name="modal_napkins"][value="${d.is_napkins}"]`).prop('checked', true);
|
|
|
|
// ✅ Store original values
|
|
originalModalData = {
|
|
total_toiletBlocks: d.total_toiletBlocks.toString(),
|
|
total_male_urinals: d.total_male_urinals.toString(),
|
|
total_wc_male: d.total_wc_male.toString(),
|
|
total_wc_female: d.total_wc_female.toString(),
|
|
total_diffAbled_toilet: d.total_diffAbled_toilet.toString(),
|
|
is_napkins: d.is_napkins.toString()
|
|
};
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('toiletModal'));
|
|
modal.show();
|
|
});
|
|
|
|
$('#toiletUpdateForm').submit(function (e) {
|
|
e.preventDefault();
|
|
const updateBlocks = parseInt($('#modal_blocks').val()) || 0;
|
|
const updateUrinals = parseInt($('#modal_urinals').val()) || 0;
|
|
const updateWCMale = parseInt($('#modal_wc_male').val()) || 0;
|
|
const updateWCFemale = parseInt($('#modal_wc_female').val()) || 0;
|
|
const updateDisabled = parseInt($('#modal_disabled').val()) || 0;
|
|
/* if (!updateBlocks ) {
|
|
return Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Enter Total Toilet Blocks greater than 0.',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}*/
|
|
|
|
/* const updateTotal = updateUrinals + updateWCMale + updateWCFemale + updateDisabled;
|
|
|
|
if (updateBlocks !== updateTotal) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Mismatch Detected',
|
|
text: `The number of toilet blocks (${updateBlocks}) must match the total toilets (${updateTotal}) entered.`,
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
return;
|
|
}*/
|
|
|
|
const currentData = {
|
|
total_toiletBlocks: $('#modal_blocks').val(),
|
|
total_male_urinals: $('#modal_urinals').val(),
|
|
total_wc_male: $('#modal_wc_male').val(),
|
|
total_wc_female: $('#modal_wc_female').val(),
|
|
total_diffAbled_toilet: $('#modal_disabled').val(),
|
|
is_napkins: $('input[name="modal_napkins"]:checked').val()
|
|
};
|
|
|
|
// ✅ Check if any value has changed
|
|
const hasChanged = Object.keys(currentData).some(key => currentData[key] !== originalModalData[key]);
|
|
|
|
/* if (!hasChanged) {
|
|
Swal.fire('No Changes', 'Please make a change before submitting.', 'info');
|
|
return;
|
|
}*/
|
|
|
|
currentData.school_id = $('#modal_school_id').val();
|
|
|
|
$.post('/gcc/api/gccschool/schoolproperty/updateToiletDetails', currentData, function () {
|
|
// Swal.fire('Updated', 'Toilet data updated successfully!', 'success').then(() => {
|
|
Swal.fire({
|
|
title: 'Updated',
|
|
text: 'Toilet data updated successfully!',
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
}).then(() => {
|
|
const modalInstance = bootstrap.Modal.getInstance(document.getElementById('toiletModal'));
|
|
modalInstance.hide();
|
|
location.reload();
|
|
});
|
|
}).fail(() => {
|
|
// Swal.fire('Error', 'Update failed', 'error');
|
|
Swal.fire({
|
|
title: 'Error',
|
|
text: 'Update failed',
|
|
icon: 'error',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|