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.
 
 

827 lines
24 KiB

<!DOCTYPE html>
<html lang="en" dir="ltr">
<html xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<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;
}
#assetModal .modal-body {
max-height: 80vh;
overflow-y: auto;
}
#floordetailsModal .modal-body {
max-height: 80vh;
overflow-y: auto;
}
#roomMappingModal .modal-body {
max-height: 80vh;
overflow-y: auto;
min-height: 40vh;
}
/* Default desktop view */
/*.responsive-section {
margin-left: -256px;
}*/
/* Wider negative margin if needed */
/*.responsive-section-wide {
margin-left: -281px;
}*/
/* Mobile responsiveness */
@media (max-width: 768px) {
.responsive-section,
.responsive-section-wide {
margin-left: 0 !important;
padding: 0 10px;
}
.btn.mb-2 {
width: 100%;
margin-top: 10px;
}
.d-flex.justify-content-between {
flex-direction: column;
align-items: flex-start;
}
.table {
display: block;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
}
</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="main-content" style="margin-top: 6px; padding-left: 0px;">
<div class="container">
<div class="col-md-12">
<div class="d-flex justify-content-between align-items-center responsive-section">
<!-- <h4 style="margin-left: -256px;">Rooms</h4>-->
<h4 >Rooms</h4>
<button type="button" class="btn btn-primary mb-2 add-room-btn" id="addRoomBtn"
style="background-color: #0D587B; border: none; border-radius: 6px; padding: 6px 16px;"
data-bs-toggle="modal" data-bs-target="#addRoomModal">
<i class="bi bi-plus-lg"></i>Add Room
</button>
</div>
<hr class="responsive-section"
style="border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px;" >
</div>
<div class="row mt-4 responsive-section-wide">
<div class="col-md-12">
<div class="card">
<div class="card-block">
<table id="CompletedCPSDatatable"
class="table table-striped table-bordered table-hover dataTable" role="grid"
style="width: 100%">
<thead class="thead-dark">
<tr>
<th style="width: 5%;">S.NO</th>
<th style="width: 10%;">Room Name</th>
<th style="width: 15%;">Building Name</th>
<th style="width: 10%;">Floor</th>
<th style="width: 15%;">Room Type</th>
<th style="width: 10%;">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Card 2: Other Details -->
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Floor Details Modal -->
<div class="modal fade" id="floordetailsModal" tabindex="-1" role="dialog" aria-labelledby="floordetailsModalLabel"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">Floor Details</h5>
<button type="button" class="close" data-dismiss="modal"
onclick="$('#floordetailsModal').modal('hide');" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" id="floorDetailsTable">
<thead class="thead-dark">
<tr>
<th class="text-center">S.No</th>
<th class="text-center">Room Name</th>
<th class="text-center">Building Name</th>
<th class="text-center">Floor</th>
<th class="text-center">Room Type</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<!-- Data will be inserted here -->
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
onclick="$('#floordetailsModal').modal('hide');">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="viewRoomModal" tabindex="-1" aria-labelledby="viewRoomModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">View Room Details</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Room Name</label> <input type="text" id="viewRoomName"
class="form-control" readonly>
</div>
<div class="col-md-6">
<label class="form-label">Building Name</label> <input type="text" id="viewBuildingName"
class="form-control" readonly>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Floor</label> <input type="text" id="viewFloor"
class="form-control" readonly>
</div>
<div class="col-md-6">
<label class="form-label">Room Type</label> <input type="text" id="viewRoomType"
class="form-control" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Edit Room Modal -->
<div class="modal fade" id="editRoomModal" tabindex="-1" aria-labelledby="editRoomModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-success text-white">
<h5 class="modal-title">Edit Room Details</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Room Name</label> <input type="text" id="editRoomName"
class="form-control"> <input type="hidden" id="editRoomId">
</div>
<div class="col-md-6">
<label class="form-label">Building</label> <select id="editBuildingId" class="form-control" disabled>
<option value="">Select Building</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Floor</label> <select id="editFloorId" class="form-control">
<option value="">Select Floor</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Room Type</label> <select id="editRoomTypeId"
class="form-control">
<option value="">Select Room Type</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="saveEditRoom">Save
Changes</button>
<button type="button" class="btn btn-danger" id="roomDelete">Delete</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addRoomModal" tabindex="-1"
data-bs-backdrop="static" data-bs-keyboard="false"
aria-labelledby="addRoomModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">Add New Room</h5>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Building<span style="color: red;">*</span></label> <select id="addBuildingId" class="form-control">
<option value="">Select Building</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Floor<span style="color: red;">*</span></label> <select id="addFloorId" class="form-control">
<option value="">Select Floor</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Room Type<span style="color: red;">*</span></label> <select id="addRoomTypeId" class="form-control">
<option value="">Select Room Type</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Room Name<span style="color: red;">*</span></label> <input type="text" id="addRoomName"
class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="saveAddRoom">Save Room</button>
</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>
</body>
<script>
window.schoolId = window.schoolId || new URLSearchParams(window.location.search).get('schoolId');
if (!window.schoolId) {
Swal.fire("Missing School ID", "No schoolId found in the URL", "warning");
throw new Error("Missing schoolId");
}
function loadSavedRoomDetails(school_id) {
$.ajax({
url: '/gcc/api/gccschool/buildingasset/getRoomDetails',
type: 'GET',
contentType: 'application/json',
data: { school_id },
success: function (response) {
if (response.status === "OK") {
$('#CompletedCPSDatatable').DataTable({
destroy: true,
searching: true,
select: false,
autoWidth: true,
scrollY: '60vh',
scrollCollapse: true,
processsing: false,
responsive: true,
paging: true,
info: true,
data: response.data,
columns: [
{ data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
{ data: 'room_name', defaultContent: '-', className: 'text-center' },
{ data: 'building_name', defaultContent: '-', className: 'text-center' },
{ data: 'floor', defaultContent: '-', className: 'text-center' },
{ data: 'room_type', defaultContent: '-', className: 'text-center' },
{
data: 'room_id',
render: function (data, type, row) {
return `
<div class="text-center">
<button class="btn btn-sm btn-primary me-1 view-btn2" data-room-id="${data}" title="View">
<i class="bi bi-eye"></i>
</button>
<button class="btn btn-sm btn-success edit-btn2" data-room-id="${data}" data-building-id="${row.building_id}" title="Edit">
<i class="bi bi-pencil"></i>
</button>
</div>`;
},
className: 'text-center'
}
]
});
} else {
$('#CompletedCPSDatatable tbody').html(`<tr><td colspan="6" class="text-center text-danger">${response.data}</td></tr>`);
}
},
error: function () {
Swal.fire("Error", "Something went wrong while fetching room details.", "error");
}
});
}
function loadBuildingsDropdown(schoolId, selectedBuildingId = null) {
$.ajax({
url: '/gcc/api/gccschool/dropdown/getBuildingsBySchoolId',
type: 'GET',
data: { school_id: schoolId },
success: function (response) {
const dropdown = $('#editBuildingId');
dropdown.empty().append('<option value="">Select Building</option>');
if (response.status === "OK") {
response.data.forEach(building => {
const selected = building.buildng_id == selectedBuildingId ? 'selected' : '';
dropdown.append(`<option value="${building.buildng_id}" ${selected}>${building.building_name}</option>`);
});
}
},
error: function () {
Swal.fire("Error", "Unable to load buildings", "error");
}
});
}
function loadRoomTypesDropdown() {
$.ajax({
url: '/gcc/api/gccschool/dropdown/getRooms',
type: 'GET',
success: function (response) {
const dropdown = $('#editRoomTypeId');
dropdown.empty().append('<option value="">Select Room Type</option>');
if (response.status === 'OK') {
response.data.forEach(room => {
dropdown.append(`<option value="${room.room_master_id}">${room.room_type}</option>`);
});
}
}
});
}
function loadBuildingsDropdownForAdd(schoolId) {
$.get('/gcc/api/gccschool/dropdown/getBuildingsBySchoolId', { school_id: schoolId }, function (response) {
const dropdown = $('#addBuildingId');
dropdown.empty().append('<option value="">Select Building</option>');
if (response.status === 'OK') {
response.data.forEach(building => {
dropdown.append(`<option value="${building.buildng_id}">${building.building_name}</option>`);
});
}
});
}
function loadRoomTypesDropdownForAdd() {
$.get('/gcc/api/gccschool/dropdown/getRooms', function (response) {
const dropdown = $('#addRoomTypeId');
dropdown.empty().append('<option value="">Select Room Type</option>');
if (response.status === 'OK') {
response.data.forEach(room => {
dropdown.append(`<option value="${room.room_master_id}">${room.room_type}</option>`);
});
}
});
}
$('#addRoomModal').on('show.bs.modal', function () {
$('#addBuildingId').val('');
$('#addFloorId').val('');
$('#addRoomTypeId').val('');
$('#addRoomName').val('');
});
$(document).ready(function () {
loadRoomTypesDropdown();
loadRoomTypesDropdownForAdd();
loadBuildingsDropdownForAdd(schoolId);
loadSavedRoomDetails(schoolId);
});
$(document).on('click', '.view-btn2', function () {
const roomId = $(this).data('room-id');
$.ajax({
url: `/gcc/api/gccschool/buildingasset/getRoomById`,
method: 'GET',
data: { room_id: roomId },
success: function (response) {
if (response.status === 'OK' && response.data) {
const room = response.data;
$('#viewRoomName').val(room.room_name || '');
$('#viewBuildingName').val(room.building_name || '');
$('#viewFloor').val(room.floor || '');
$('#viewRoomType').val(room.room_type || '');
$('#viewRoomModal').modal('show');
} else {
Swal.fire("Error", response.data || "Room data not found", "error");
}
},
error: function () {
Swal.fire("Error", "Failed to load room details", "error");
}
});
});
$(document).on('click', '.edit-btn2', function () {
const roomId = $(this).data('room-id');
const buildingIdFromAttr = $(this).data('building-id');
$.ajax({
url: '/gcc/api/gccschool/buildingasset/getRoomById',
method: 'GET',
data: { room_id: roomId },
success: function (response) {
if (response.status === 'OK') {
const room = response.data;
$('#editRoomId').val(room.room_id);
$('#editRoomName').val(room.room_name);
loadBuildingsDropdown(room.school_id, buildingIdFromAttr);
loadFloorDropdown(buildingIdFromAttr, room.floors_id);
$('#editRoomTypeId').val(room.room_master_id);
$('#editRoomModal').modal('show');
} else {
Swal.fire("Error", response.data || "Room not found", "error");
}
},
error: function () {
Swal.fire("Error", "Failed to load room details", "error");
}
});
});
$('#saveEditRoom').on('click', function () {
const updatedRoom = {
room_id: $('#editRoomId').val(),
room_num: $('#editRoomName').val(),
building_id: $('#editBuildingId').val(),
floors_id: $('#editFloorId').val() || null,
room_type: $('#editRoomTypeId').val(),
school_id: schoolId
};
$.ajax({
url: '/gcc/api/gccschool/buildingasset/editRoom',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify(updatedRoom),
success: function (response) {
if (response === 'Rooms Edited Sucessfully') {
$('#editRoomModal').modal('hide');
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Room updated successfully',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
}).then(() => {
loadSavedRoomDetails(schoolId);
});
} else {
Swal.fire({
icon: 'error',
title: 'Error',
text: response || "Update failed",
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
},
error: function () {
Swal.fire({
icon: 'error',
title: 'Error',
text: "Something went wrong while saving changes",
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
});
});
$('#saveAddRoom').on('click', function () {
const buildingId = $('#addBuildingId').val();
const floorId = $('#addFloorId').val();
const roomType = $('#addRoomTypeId').val();
const roomName = $('#addRoomName').val().trim();
if (!buildingId) {
Swal.fire({
icon: 'warning',
title: 'Building Required',
text: 'Please select a building .',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
return;
}
if (!floorId) {
Swal.fire({
icon: 'warning',
title: 'Floor Required',
text: 'Please select a floor .',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
return;
}
if (!roomType) {
Swal.fire({
icon: 'warning',
title: 'Room Type Required',
text: 'Please select a room type.',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
return;
}
if (!roomName) {
Swal.fire({
icon: 'warning',
title: 'Room Name Required',
text: 'Please enter a room name .',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
return;
}
const payload = {
room_num: $('#addRoomName').val(),
building_id: $('#addBuildingId').val(),
floors_id: $('#addFloorId').val(),
room_type: $('#addRoomTypeId').val(),
school_id: schoolId
};
$.ajax({
url: '/gcc/api/gccschool/buildingasset/saveRoom',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(payload),
success: function (response) {
if (response === 'Rooms Mapped Sucessfully') {
$('#addRoomModal').modal('hide');
Swal.fire({
title: "Success",
text: "Room added successfully",
icon: "success",
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
}).then(() => {
location.reload(); // 🔁 This reloads the page after user confirms the success alert
});}
else {
Swal.fire({
icon: 'error',
title: 'Error',
text: response || 'Save failed',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
},
error: function () {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Something went wrong while saving',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
});
});
function loadFloorDropdown(buildingId, selectedFloorId = null) {
$.ajax({
url: '/gcc/api/gccschool/dropdown/getFloorsByBuilding',
type: 'GET',
data: { building_id: buildingId },
success: function (response) {
const dropdown = $('#editFloorId');
dropdown.empty().append('<option value="">Select Floor</option>');
if (response.status === 'OK') {
response.data.forEach(floor => {
const selected = floor.floors_id == selectedFloorId ? 'selected' : '';
dropdown.append(`<option value="${floor.floors_id}" ${selected}>${floor.floor_name}</option>`);
});
}
},
error: function () {
Swal.fire("Error", "Failed to load floors", "error");
}
});
}
$('#addBuildingId').on('change', function () {
const buildingId = $(this).val();
$.get('/gcc/api/gccschool/dropdown/getFloorsByBuilding', { building_id: buildingId }, function (response) {
const dropdown = $('#addFloorId');
dropdown.empty().append('<option value="">Select Floor</option>');
if (response.status === 'OK') {
response.data.forEach(floor => {
dropdown.append(`<option value="${floor.floors_id}">${floor.floor_name}</option>`);
});
}
});
});
$('#roomDelete').on('click', function () {
const roomId = $('#editRoomId').val();
const isDelete = true;
Swal.fire({
title: 'Are you sure?',
text: "Do you really want to delete this room?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
}).then((result) => {
if (result.isConfirmed) {
// Call AJAX only if user confirms
$.ajax({
url: '/gcc/api/gccschool/buildingasset/deleteRoom',
method: 'POST',
data: {
room_id: roomId,
is_delete: isDelete
},
success: function (response) {
Swal.fire({
icon: 'success',
title: 'Success',
text: response,
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
confirmButtonText: 'OK'
}).then(() => {
location.reload();
});
},
error: function () {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Failed to delete the room.',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
});
} else if (result.dismiss === Swal.DismissReason.cancel) {
// Show info alert when cancelled
Swal.fire({
icon: 'info',
title: 'Cancelled',
text: 'No changes were made.',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: true
});
}
});
});
</script>
</html>