|
|
<!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">×</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">×</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">×</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">×</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>
|