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.
815 lines
28 KiB
815 lines
28 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<title>Playground Details</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<style>
|
|
.radio-group {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
/* Remove background image from the container itself */
|
|
.select2-container--default .select2-selection--multiple {
|
|
padding-right: 30px;
|
|
min-height: 38px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
position: relative; /* important for the ::after */
|
|
background-image: none;
|
|
}
|
|
|
|
/* Add the dropdown arrow via a pseudo-element */
|
|
.select2-container--default .select2-selection--multiple::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 8px;
|
|
width: 14px;
|
|
height: 14px;
|
|
transform: translateY(-50%);
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Each selected tag */
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 5px 10px;
|
|
margin: 4px 4px 0 0;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* The text inside the tag */
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* The "X" close icon */
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
position: static;
|
|
transform: none;
|
|
color: #333;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
<form id="playgroundForm">
|
|
<div class="card p-3">
|
|
<div class="card-header">
|
|
<b>Playground</b>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Presence of Playground <span style="color: red;">*</span></label>
|
|
<div class="radio-group">
|
|
<input type="radio" name="hasPlayground" value="Yes"> Yes
|
|
<input type="radio" name="hasPlayground" value="No"> No
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 form-group" id="playgroundAreaGroup" style="display: none;">
|
|
<label>Area of Playground (Sq. ft) <span style="color: red;">*</span></label>
|
|
<input type="number" class="form-control" id="playground_area" min="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Presence of Court <span style="color: red;">*</span></label>
|
|
<div class="radio-group">
|
|
<input type="radio" name="hasCourt" value="Yes"> Yes
|
|
<input type="radio" name="hasCourt" value="No"> No
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col-md-6 form-group" id="courtTypeGroup" style="display: none;">
|
|
<label>Type of Court <span class="text-danger">*</span></label>
|
|
<div class="custom-select-wrapper">
|
|
<select id="court_type" class="form-control custom-select-style" multiple="multiple">
|
|
Options will be added dynamically here
|
|
</select>
|
|
<i class="bi bi-caret-down-fill dropdown-icon"></i>
|
|
</div>
|
|
</div> -->
|
|
<div class="col-md-6 form-group" id="courtTypeGroup" style="display: none;">
|
|
<label>Type of Court <span style="color: red;">*</span></label>
|
|
<select id="court_type" class="form-control " multiple > </select>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Inventory Items <span style="color: red;">*</span></label>
|
|
<select id="inventory" class="form-control" multiple></select>
|
|
|
|
</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="button" class="btn btn-secondary" id="resetBtn">
|
|
<i class="ik ik-refresh-cw"></i> Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal fade" id="editPlaygroundModal" tabindex="-1" aria-labelledby="editPlaygroundModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form id="playgroundEditForm">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editPlaygroundModalLabel">Playground 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="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Presence of Playground <span style="color: red;">*</span></label>
|
|
<div class="radio-group">
|
|
<input type="radio" name="modalhasPlayground" value="Yes"> Yes
|
|
<input type="radio" name="modalhasPlayground" value="No"> No
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 form-group" id="modalplaygroundAreaGroup" style="display: none;">
|
|
<label>Area of Playground (Sq. ft) <span style="color: red;">*</span></label>
|
|
<input type="number" class="form-control" id="modalplayground_area" min="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Presence of Court <span style="color: red;">*</span></label>
|
|
<div class="radio-group">
|
|
<input type="radio" name="modalhasCourt" value="Yes"> Yes
|
|
<input type="radio" name="modalhasCourt" value="No"> No
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 form-group" id="modalcourtTypeGroup" style="display: none;">
|
|
<label>Type of Court <span style="color: red;">*</span></label>
|
|
<select id="modalcourt_type" class="form-control" multiple="multiple"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 form-group">
|
|
<label>Inventory Items <span style="color: red;">*</span></label>
|
|
<select id="modalinventory" class="form-control" multiple="multiple"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ik ik-save"></i> Submit
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const schoolId = urlParams.get("schoolId");
|
|
|
|
document.getElementById('playground_area').addEventListener('input', function () {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if (parseInt(this.value) < 0) {
|
|
this.value = '';
|
|
}
|
|
});
|
|
|
|
console.log("Playground form JS ready.");
|
|
|
|
/*$('#court_type, #inventory').select2({width: '100%'});
|
|
|
|
|
|
// Load dropdown data
|
|
$.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
|
|
const $court = $('#court_type').empty();
|
|
$court.append('<option value="">Select Type of court </option>');
|
|
response.data.forEach(item => {
|
|
$court.append(`<option value="${item.court_id}">${item.court_type}</option>`);
|
|
});
|
|
});*/
|
|
|
|
|
|
$.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
|
|
const $court = $('#court_type');
|
|
$court.empty(); // Clear existing options
|
|
response.data.forEach(item => {
|
|
$court.append(`<option value="${item.court_id}">${item.court_type}</option>`);
|
|
});
|
|
|
|
// Destroy any previous select2 instance if reinitializing
|
|
if ($court.hasClass("select2-hidden-accessible")) {
|
|
$court.select2('destroy');
|
|
}
|
|
|
|
$court.select2({
|
|
placeholder: "Select Type of Court",
|
|
width: '100%',
|
|
minimumResultsForSearch: Infinity, // disables typing/search box
|
|
closeOnSelect: false // allow multiple selection
|
|
});
|
|
});
|
|
$('#court_type').on('select2:opening', function() {
|
|
setTimeout(() => {
|
|
$('.select2-search__field').prop('readonly', true); // disable typing
|
|
}, 0);
|
|
});
|
|
$.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
|
|
const $equip = $('#inventory').empty();
|
|
$equip.append('<option value="">Select Inventory Items </option>');
|
|
response.data.forEach(item => {
|
|
$equip.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
|
|
});
|
|
|
|
$equip.select2({
|
|
placeholder: "Select Inventory Items",
|
|
width: '100%',
|
|
multiple: true,
|
|
minimumResultsForSearch: Infinity, // disables search typing
|
|
closeOnSelect: false
|
|
});
|
|
|
|
// Optional: disable typing in the input
|
|
$equip.on('select2:opening', function() {
|
|
setTimeout(() => {
|
|
$('.select2-search__field').prop('readonly', true);
|
|
}, 0);
|
|
});
|
|
});
|
|
// Populate modal court types
|
|
/*$.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
|
|
const $modalCourt = $('#modalcourt_type').empty();
|
|
response.data.forEach(item => {
|
|
$modalCourt.append(`<option value="${item.court_id}">${item.court_type}</option>`);
|
|
});
|
|
|
|
$modalCourt.select2({
|
|
placeholder: "Select Type of Court",
|
|
width: '100%',
|
|
closeOnSelect: false,
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
|
|
$modalCourt.on('select2:opening', function () {
|
|
setTimeout(() => {
|
|
$('.select2-search__field').prop('readonly', true);
|
|
}, 0);
|
|
});
|
|
});
|
|
|
|
// Populate modal inventory items
|
|
$.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
|
|
const $modalInventory = $('#modalinventory').empty();
|
|
response.data.forEach(item => {
|
|
$modalInventory.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
|
|
});
|
|
|
|
$modalInventory.select2({
|
|
placeholder: "Select Inventory Items",
|
|
width: '100%',
|
|
closeOnSelect: false,
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
|
|
$modalInventory.on('select2:opening', function () {
|
|
setTimeout(() => {
|
|
$('.select2-search__field').prop('readonly', true);
|
|
}, 0);
|
|
});
|
|
});*/
|
|
|
|
// Toggle Playground Area based on radio button selection
|
|
$('input[name="modalhasPlayground"]').on('change', function () {
|
|
if ($(this).val() === 'Yes') {
|
|
$('#modalplaygroundAreaGroup').show();
|
|
} else {
|
|
$('#modalplaygroundAreaGroup').hide();
|
|
//$('#modalplayground_area').val(''); // optional: clear input
|
|
}
|
|
});
|
|
|
|
// Toggle Court Type section based on radio button selection
|
|
$('input[name="modalhasCourt"]').on('change', function () {
|
|
if ($(this).val() === 'Yes') {
|
|
$('#modalcourtTypeGroup').show();
|
|
} else {
|
|
$('#modalcourtTypeGroup').hide();
|
|
//$('#modalcourt_type').val(null).trigger('change'); // ✅ Correct // optional: clear selected items
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*$.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
|
|
const $equip = $('#inventory').empty();
|
|
$equip.append('<option value="">Select Inventory Items </option>');
|
|
response.data.forEach(item => {
|
|
$equip.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
|
|
});
|
|
});*/
|
|
|
|
|
|
$.get('/gcc/api/gccschool/schoolproperty/checkPlaygroundDetails', { school_id: schoolId }, function (response) {
|
|
const data = response && response[0];
|
|
|
|
const pg = data?.playgroundDetails;
|
|
|
|
// Show form if no data or if critical values are missing
|
|
if (!pg || Object.keys(pg).length === 0 || pg.is_playground === undefined || pg.is_court === undefined) {
|
|
$('#playgroundForm').show();
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Construct comma-separated court and equipment lists
|
|
let courtList = data.CourtDetails?.map(cd => cd.court_type).join(", ") || "—";
|
|
let equipmentList = data.EquipmentDetails?.map(ed => ed.equipment_type).join(", ") || "—";
|
|
|
|
const table = `
|
|
<div class="col-md-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" id="playgroundTableWrapper">
|
|
<h5 class="mb-0"> Playground Details</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tr><th>Playground Present</th><td>${pg.is_playground ? 'Yes' : 'No'}</td></tr>
|
|
<tr><th>Playground Area</th><td>${pg.playground_area ?? '—'}</td></tr>
|
|
<tr><th>Court Present</th><td>${pg.is_court ? 'Yes' : 'No'}</td></tr>
|
|
<tr><th>Type of Court</th><td>${courtList}</td></tr>
|
|
<tr><th>Inventory Items</th><td>${equipmentList}</td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<button id="editPlaygroundBtn" class="btn btn-primary px-4">Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('.container.mt-4').prepend(table);
|
|
$('#playgroundForm').hide();
|
|
|
|
// Enable Edit mode: fill form and show
|
|
/*$(document).on('click', '#editPlaygroundBtn', function () {
|
|
// Populate fields
|
|
$(`input[name="modalhasPlayground"][value="${pg.is_playground ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
|
|
$('#modalplayground_area').val(pg.playground_area);
|
|
$(`input[name="modalhasCourt"][value="${pg.is_court ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
|
|
|
|
const courtIds = data.CourtDetails?.map(cd => cd.court_id?.toString()) || [];
|
|
|
|
const equipIds = data.EquipmentDetails?.map(ed => ed.equipment_detais_id?.toString()) || [];
|
|
|
|
setTimeout(() => {
|
|
$('#modalcourt_type').val(courtIds).trigger('change');
|
|
$('#modalinventory').val(equipIds).trigger('change');
|
|
}, 200);
|
|
const courtIds = data.CourtDetails?.map(cd => cd.Courts_detais_id?.toString()) || [];
|
|
const equipIds = data.EquipmentDetails?.map(ed => ed.equipment_detais_id?.toString()) || [];
|
|
|
|
setTimeout(() => {
|
|
$('#modalcourt_type').val(courtIds).trigger('change');
|
|
$('#modalinventory').val(equipIds).trigger('change');
|
|
}, 200);
|
|
|
|
|
|
$('button[type="submit"]').html('Save changes');
|
|
console.log(courtIds);
|
|
|
|
// Show modal
|
|
const editModal = new bootstrap.Modal(document.getElementById('editPlaygroundModal'));
|
|
editModal.show();
|
|
});*/
|
|
$(document).on('click', '#editPlaygroundBtn', function () {
|
|
window.modalDrinkingRawResponse = data;
|
|
// Store playground ID for use during update
|
|
$('#editPlaygroundModal').data('playground_id', pg.playground_id);
|
|
|
|
// Pre-select radio values and playground area
|
|
$(`input[name="modalhasPlayground"][value="${pg.is_playground ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
|
|
$('#modalplayground_area').val(pg.playground_area);
|
|
$(`input[name="modalhasCourt"][value="${pg.is_court ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
|
|
|
|
const $modalCourt = $('#modalcourt_type');
|
|
const $modalInventory = $('#modalinventory');
|
|
|
|
// Preload detail row IDs and selection IDs
|
|
const courtData = data.CourtDetails?.map(cd => ({
|
|
Courts_detais_id: cd.Courts_detais_id, // ✅ correct DB ID
|
|
court_id: cd.court_id.toString() // ✅ select2 expects string
|
|
})) || [];
|
|
|
|
const equipmentData = data.EquipmentDetails?.map(ed => ({
|
|
equipment_detais_id: ed.equipment_detais_id, // ✅ correct DB ID
|
|
equipment_id: ed.equipment_id.toString()
|
|
})) || [];
|
|
|
|
// Extract just the selected IDs to set values in select2
|
|
const courtIds = courtData.map(cd => cd.court_id);
|
|
const equipIds = equipmentData.map(ed => ed.equipment_id);
|
|
|
|
console.log("Preselected Court IDs:", courtIds);
|
|
console.log("Preselected Equipment IDs:", equipIds);
|
|
|
|
// Fetch dropdown options and then trigger modal
|
|
Promise.all([
|
|
$.get('/gcc/api/gccschool/dropdown/getCourtData'),
|
|
$.get('/gcc/api/gccschool/dropdown/getEquipmentData')
|
|
]).then(([courtResponse, equipResponse]) => {
|
|
// COURT
|
|
$modalCourt.empty();
|
|
courtResponse.data.forEach(item => {
|
|
$modalCourt.append(`<option value="${item.court_id}">${item.court_type}</option>`);
|
|
});
|
|
$modalCourt.select2({
|
|
placeholder: "Select Type of Court",
|
|
width: '100%',
|
|
closeOnSelect: false,
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
|
|
// INVENTORY
|
|
$modalInventory.empty();
|
|
equipResponse.data.forEach(item => {
|
|
$modalInventory.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
|
|
});
|
|
$modalInventory.select2({
|
|
placeholder: "Select Inventory Items",
|
|
width: '100%',
|
|
closeOnSelect: false,
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
|
|
// Set preselected values after a slight delay
|
|
setTimeout(() => {
|
|
$modalCourt.val(courtIds).trigger('change');
|
|
$modalInventory.val(equipIds).trigger('change');
|
|
}, 150);
|
|
|
|
// Store full detail info for use in form submission (you can also use hidden inputs if needed)
|
|
$('#editPlaygroundModal').data('courtDetailData', courtData);
|
|
$('#editPlaygroundModal').data('equipDetailData', equipmentData);
|
|
|
|
// Show the modal
|
|
setTimeout(() => {
|
|
const editModal = new bootstrap.Modal(document.getElementById('editPlaygroundModal'));
|
|
editModal.show();
|
|
}, 300);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
$('input[name="hasPlayground"]').change(function () {
|
|
if ($(this).val() === 'Yes') {
|
|
$('#playgroundAreaGroup').show();
|
|
} else {
|
|
$('#playgroundAreaGroup').hide();
|
|
$('#playground_area').val(''); // Clear the input when "No" is selected
|
|
}
|
|
});
|
|
|
|
|
|
$('input[name="hasCourt"]').change(function () {
|
|
if ($(this).val() === 'Yes') {
|
|
$('#courtTypeGroup').show();
|
|
} else {
|
|
$('#courtTypeGroup').hide();
|
|
$('#court_type').val(null).trigger('change'); // Clears dropdown
|
|
}
|
|
});
|
|
|
|
|
|
$('#playgroundForm').on('submit', function (e) {
|
|
e.preventDefault();
|
|
console.log("Submit triggered");
|
|
|
|
const hasPlayground = $('input[name="hasPlayground"]:checked').val();
|
|
const hasCourt = $('input[name="hasCourt"]:checked').val();
|
|
const playgroundArea = $('#playground_area').val();
|
|
const courtTypes = $('#court_type').val();
|
|
const equipmentList = $('#inventory').val();
|
|
|
|
//const schoolId = 1;
|
|
|
|
/*if (!hasPlayground) return Swal.fire('Validation Error', 'Select presence of playground.', 'warning');
|
|
if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 0))
|
|
return Swal.fire('Validation Error', 'Enter valid playground area.', 'warning');
|
|
if (!hasCourt) return Swal.fire('Validation Error', 'Select presence of court.', 'warning');
|
|
if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0))
|
|
return Swal.fire('Validation Error', 'Select at least one court type.', 'warning');
|
|
if (!equipmentList || equipmentList.length === 0)
|
|
return Swal.fire('Validation Error', 'Select at least one inventory item.', 'warning');*/
|
|
if (!hasPlayground) {
|
|
return Swal.fire({
|
|
title: 'Validation Error',
|
|
text: 'Select presence of playground.',
|
|
icon: 'warning',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 100)) {
|
|
return Swal.fire({
|
|
title: 'Validation Error',
|
|
text: 'playground area must be numbers greater than 100.',
|
|
icon: 'warning',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if (!hasCourt) {
|
|
return Swal.fire({
|
|
title: 'Validation Error',
|
|
text: 'Select presence of court.',
|
|
icon: 'warning',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0)) {
|
|
return Swal.fire({
|
|
title: 'Validation Error',
|
|
text: 'Select at least one court type.',
|
|
icon: 'warning',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
if (!equipmentList || equipmentList.length === 0) {
|
|
return Swal.fire({
|
|
title: 'Validation Error',
|
|
text: 'Select at least one inventory item.',
|
|
icon: 'warning',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
|
|
const payload = {
|
|
is_playground: hasPlayground === 'Yes',
|
|
playground_area: hasPlayground === 'Yes' ? parseFloat(playgroundArea) : 0,
|
|
is_court: hasCourt === 'Yes',
|
|
courtid: courtTypes,
|
|
equipmentid: equipmentList,
|
|
school_id: schoolId,
|
|
|
|
};
|
|
|
|
console.log("Payload:", payload);
|
|
|
|
$.ajax({
|
|
url: '/gcc/api/gccschool/schoolproperty/savePlayground',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(payload),
|
|
success: function (response) {
|
|
Swal.fire({
|
|
title: 'Success',
|
|
text: 'Playground saved successfully!',
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
}).then(() => location.reload());
|
|
},
|
|
error: function (xhr) {
|
|
console.error("Error:", xhr);
|
|
Swal.fire({
|
|
title: 'Error',
|
|
text: 'Failed to save playground details.',
|
|
icon: 'error',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
}
|
|
|
|
});
|
|
});
|
|
$('#playgroundEditForm').on('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const hasPlayground = $('input[name="modalhasPlayground"]:checked').val();
|
|
const hasCourt = $('input[name="modalhasCourt"]:checked').val();
|
|
const playgroundArea = $('#modalplayground_area').val();
|
|
const courtTypes = $('#modalcourt_type').val(); // court_id[]
|
|
const equipmentList = $('#modalinventory').val(); // equipment_id[]
|
|
const playgroundId = $('#editPlaygroundModal').data('playground_id');
|
|
|
|
if (!hasPlayground) return Swal.fire('Validation Error', 'Select presence of playground.', 'warning');
|
|
if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 100))
|
|
return Swal.fire('Validation Error', 'playground area must be numbers greater than 100.', 'warning');
|
|
|
|
if (!hasCourt) return Swal.fire('Validation Error', 'Select presence of court.', 'warning');
|
|
if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0))
|
|
return Swal.fire('Validation Error', 'Select at least one court type.', 'warning');
|
|
|
|
if (!equipmentList || equipmentList.length === 0)
|
|
return Swal.fire('Validation Error', 'Select at least one inventory item.', 'warning');
|
|
|
|
// ✅ Extract preloaded backend data (used to get *_detais_id)
|
|
const courtData = courtTypes.map(id => {
|
|
const match = window.modalDrinkingRawResponse?.CourtDetails?.find(c => c.court_id == id);
|
|
return {
|
|
court_id: parseInt(id),
|
|
Courts_detais_id: match?.Courts_detais_id || 0
|
|
};
|
|
});
|
|
|
|
const equipmentData = equipmentList.map(id => {
|
|
const match = window.modalDrinkingRawResponse?.EquipmentDetails?.find(e => e.equipment_id == id);
|
|
return {
|
|
equipment_id: parseInt(id),
|
|
equipment_detais_id: match?.equipment_detais_id || 0
|
|
};
|
|
});
|
|
|
|
const payload = {
|
|
is_playground: hasPlayground === 'Yes',
|
|
playground_area: hasPlayground === 'Yes' ? parseFloat(playgroundArea) : 0,
|
|
is_court: hasCourt === 'Yes',
|
|
school_id: parseInt(new URLSearchParams(window.location.search).get("schoolId")),
|
|
|
|
playground_id: parseInt(playgroundId),
|
|
equipments: equipmentData,
|
|
courts: courtData
|
|
|
|
};
|
|
|
|
console.log("✅ Final Playground Update Payload:", payload);
|
|
|
|
$.ajax({
|
|
url: '/gcc/api/gccschool/schoolproperty/updatePlayground',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(payload),
|
|
success: function (res) {
|
|
if (res.status === "OK") {
|
|
// Swal.fire('Success', res.message || 'Playground updated!', 'success').then(() => location.reload());
|
|
Swal.fire({
|
|
title: 'Success',
|
|
text: res.message || 'Playground updated!',
|
|
icon: 'success',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
}).then(() => location.reload());
|
|
|
|
} else {
|
|
// Swal.fire('Error', res.message || 'Update failed.', 'error');
|
|
Swal.fire({
|
|
title: 'Error',
|
|
text: res.message || 'Update failed.',
|
|
icon: 'error',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: true
|
|
});
|
|
|
|
}
|
|
},
|
|
error: function (xhr) {
|
|
console.error("XHR Error:", xhr);
|
|
let msg = xhr.responseText || "Unknown error occurred";
|
|
Swal.fire('Error', msg, 'error');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
function resetFacilityFields() {
|
|
console.log("Reset button clicked - Facilities");
|
|
|
|
// Uncheck all radio buttons
|
|
$('input[type="radio"]').prop('checked', false);
|
|
|
|
// Clear input fields
|
|
$('#playground_area').val('');
|
|
|
|
|
|
// Clear multi-select dropdowns
|
|
$('#court_type').val(null).trigger('change');
|
|
$('#inventory').val(null).trigger('change');
|
|
|
|
// Hide conditional sections
|
|
$('#playgroundAreaGroup').hide();
|
|
$('#courtTypeGroup').hide();
|
|
}
|
|
|
|
// Event Listener for Reset Button
|
|
$(document).on('click', '#resetBtn', function (event) {
|
|
event.preventDefault();
|
|
resetFacilityFields();
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|