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.
602 lines
19 KiB
602 lines
19 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;
|
|
}
|
|
</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">
|
|
<div class="container">
|
|
|
|
<div class="col-md-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h4 style="margin-left: -256px;">Room Wise Asset Mapping - IT Assits</h4>
|
|
<button type="button" class="btn btn-primary"
|
|
style="background-color: #0D587B; border: none; border-radius: 6px; padding: 6px 16px;"
|
|
data-bs-toggle="modal" data-bs-target="#assetModal">
|
|
+ Add Assets
|
|
</button>
|
|
</div>
|
|
|
|
<hr
|
|
style="border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px; margin-left: -261px;">
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row mt-4" style=" margin-left: -281px;">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
|
|
<h5 style="font-weight:bold;">List of IT Assets</h5>
|
|
<h5 style="font-weight:bold;">
|
|
<span th:text="${deptId}" id="deptId" style="display:none"></span>
|
|
</h5>
|
|
<span th:text="${userId}" id="userId" style="display:none"></span>
|
|
|
|
<div id="completedCPSTable">
|
|
<table id="CompletedCPSDatatable1"
|
|
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%;">ASSET CODE</th>
|
|
<th style="width: 15%;">NAME</th>
|
|
<th style="width: 10%;">SOURCE</th>
|
|
<th style="width: 15%;">SERIAL NUMBER</th>
|
|
<th style="width: 15%;">RECEIVED DATE</th>
|
|
<th style="width: 10%;">RECEIVED BY</th>
|
|
<th style="width: 10%;">VENDOR DETAILS</th>
|
|
<th style="width: 10%;">INVOICE NUMBER</th>
|
|
<th style="width: 10%;">LOCATION</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>TH40V40I</td>
|
|
<td>CAMERA</td>
|
|
<td>GCC</td>
|
|
<td>22023293837281</td>
|
|
<td>JUN 23, 2025 12:40 PM</td>
|
|
<td>RECEIVED BY</td>
|
|
<td>N/A</td>
|
|
<td>2345676543ER</td>
|
|
<td>CHENNAI</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>TH40V40I</td>
|
|
<td>CAMERA</td>
|
|
<td>GCC</td>
|
|
<td>22023293837281</td>
|
|
<td>JUN 23, 2025 12:40 PM</td>
|
|
<td>RECEIVED BY</td>
|
|
<td>N/A</td>
|
|
<td>2345676543ER</td>
|
|
<td>CHENNAI</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>TH40V40I</td>
|
|
<td>CAMERA</td>
|
|
<td>GCC</td>
|
|
<td>22023293837281</td>
|
|
<td>JUN 23, 2025 12:40 PM</td>
|
|
<td>RECEIVED BY</td>
|
|
<td>N/A</td>
|
|
<td>2345676543ER</td>
|
|
<td>CHENNAI</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4" style="margin-left: -281px;">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
<h5 style="font-weight:bold;">Building Wise Asset Mapping status - IT Assets</h5>
|
|
<span th:text="${deptId}" id="deptId" style="display:none"></span>
|
|
<span th:text="${userId}" id="userId" style="display:none"></span>
|
|
|
|
<div id="completedCPSTable">
|
|
<table id="CompletedCPSDatatable2"
|
|
class="table table-striped table-bordered table-hover dataTable" role="grid"
|
|
style="width:100%">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>S.NO</th>
|
|
<th>BUILDING NAME</th>
|
|
<th>FLOORS</th>
|
|
<th>STATUS</th>
|
|
<th>ACTION</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>RIPON BUILDING</td>
|
|
<td>3</td>
|
|
<td>COMPLETED</td>
|
|
<td><span class="badge badge-success" style="cursor:pointer;"
|
|
onclick="openRoomMappingModal(1, 'RIPON BUILDING')">Add Room
|
|
Mapping</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>GREEN BUILDING</td>
|
|
<td>2</td>
|
|
<td>PENDING</td>
|
|
<td><span class="badge badge-success" style="cursor:pointer;"
|
|
onclick="openRoomMappingModal(2, 'GREEN BUILDING')">Add Room
|
|
Mapping</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Other Details -->
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="roomMappingModal" tabindex="-1" role="dialog" aria-labelledby="roomMappingModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="roomMappingModalLabel">Room Mapping for <span id="buildingName"></span>
|
|
</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>S.NO</th>
|
|
<th>Floor</th>
|
|
<th>Room</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="roomMappingBody">
|
|
<!-- Dynamic Data Will Be Inserted Here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Room Mapping Modal -->
|
|
<div class="modal fade" id="addRoomMappingModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="addRoomMappingModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addRoomMappingModalLabel">Add Room Mapping for <span
|
|
id="roomFloor"></span> - <span id="roomName"></span></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>S.NO</th>
|
|
<th>Room Type</th>
|
|
<th>Room Name</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="addRoomMappingBody">
|
|
<!-- Dynamic Data Will Be Inserted Here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Asset Mapping Modal -->
|
|
<div class="modal fade" id="assetMappingModal" tabindex="-1" role="dialog" aria-labelledby="assetMappingModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Asset Mapping for <span id="assetRoomName"></span></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>S.NO</th>
|
|
<th>Room Type</th>
|
|
<th>Assets</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="assetMappingBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Room Wise Asset Mapping - IT Assets</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">
|
|
<!-- Building Dropdown -->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="buildingDropdown">Select Building *</label>
|
|
<select id="buildingDropdown" class="form-control">
|
|
<option value="">-- Select Building --</option>
|
|
<option value="building1">Building 1</option>
|
|
<option value="building2">Building 2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floor Dropdown -->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="floorDropdown">Select Floor *</label>
|
|
<select id="floorDropdown" class="form-control">
|
|
<option value="">-- Select Floor --</option>
|
|
<option value="floor1">1st Floor</option>
|
|
<option value="floor2">2nd Floor</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room Type Dropdown -->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="roomTypeDropdown">Select Room Type *</label>
|
|
<select id="roomTypeDropdown" class="form-control">
|
|
<option value="">-- Select Room Type --</option>
|
|
<option value="classroom">Classroom</option>
|
|
<option value="conference">Conference Room</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room Dropdown -->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="roomDropdown">Select Room *</label>
|
|
<select id="roomDropdown" class="form-control">
|
|
<option value="">-- Select Room --</option>
|
|
<option value="room1">Number 1</option>
|
|
<option value="room2">Number 2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assets Dropdown -->
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="assetDropdown">Select Assets *</label>
|
|
<div class="form-control" id="assetDropdown">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="asset-checkbox" value="Computer"> Computer
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="asset-checkbox" value="Smart TV"> Smart TV
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="asset-checkbox" value="Projector"> Projector
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="asset-checkbox" value="Printer"> Printer
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Asset Selection Section -->
|
|
<div class="col-md-12" id="assetContainer"></div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save</button>
|
|
</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>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
|
|
$(document).ready(function () {
|
|
$('#CompletedCPSDatatable1').DataTable({
|
|
scrollX: true, // Enables horizontal scrolling
|
|
autoWidth: false, // Ensures manual column widths are respected
|
|
responsive: true, // Ensures better mobile view
|
|
dom: 'Bftip',
|
|
lengthMenu: [
|
|
[10, 50, 100, 200, -1],
|
|
['10 rows', '50 rows', '100 rows', 'Show all']
|
|
],
|
|
buttons: [
|
|
{extend: 'pageLength', className: 'btn btn-warning'},
|
|
{extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary'},
|
|
{extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary'},
|
|
{extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary'},
|
|
{extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary'}
|
|
],
|
|
fixedHeader: true,
|
|
searching: true,
|
|
select: false,
|
|
processing: false
|
|
});
|
|
$('#CompletedCPSDatatable2').DataTable();
|
|
});
|
|
|
|
|
|
|
|
document.getElementById('buildingDropdown').addEventListener('change', function () {
|
|
const floorDropdown = document.getElementById('floorDropdown').parentElement;
|
|
const roomTypeDropdown = document.getElementById('roomTypeDropdown').parentElement;
|
|
const roomDropdown = document.getElementById('roomDropdown').parentElement;
|
|
const assetDropdown = document.getElementById('assetDropdown').parentElement;
|
|
|
|
if (this.value) {
|
|
floorDropdown.style.display = 'block';
|
|
roomTypeDropdown.style.display = 'block';
|
|
roomDropdown.style.display = 'block';
|
|
} else {
|
|
floorDropdown.style.display = 'none';
|
|
roomTypeDropdown.style.display = 'none';
|
|
roomDropdown.style.display = 'none';
|
|
assetDropdown.style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('floorDropdown').value = "";
|
|
document.getElementById('roomTypeDropdown').value = "";
|
|
document.getElementById('roomDropdown').value = "";
|
|
});
|
|
|
|
// Show assets only when all dropdowns are selected
|
|
function checkAllSelections() {
|
|
const building = document.getElementById('buildingDropdown').value;
|
|
const floor = document.getElementById('floorDropdown').value;
|
|
const roomType = document.getElementById('roomTypeDropdown').value;
|
|
const room = document.getElementById('roomDropdown').value;
|
|
|
|
const assetDropdown = document.getElementById('assetDropdown').parentElement;
|
|
|
|
if (building && floor && roomType && room) {
|
|
assetDropdown.style.display = 'block';
|
|
} else {
|
|
assetDropdown.style.display = 'none';
|
|
document.getElementById('assetContainer').innerHTML = ''; // Clear asset selection
|
|
}
|
|
}
|
|
|
|
document.getElementById('floorDropdown').addEventListener('change', checkAllSelections);
|
|
document.getElementById('roomTypeDropdown').addEventListener('change', checkAllSelections);
|
|
document.getElementById('roomDropdown').addEventListener('change', checkAllSelections);
|
|
|
|
// Initially hide all dependent dropdowns and asset section
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementById('floorDropdown').parentElement.style.display = 'none';
|
|
document.getElementById('roomTypeDropdown').parentElement.style.display = 'none';
|
|
document.getElementById('roomDropdown').parentElement.style.display = 'none';
|
|
document.getElementById('assetDropdown').parentElement.style.display = 'none';
|
|
});
|
|
|
|
// Dynamic Asset Mapping with Quantity Input
|
|
document.querySelectorAll('.asset-checkbox').forEach(checkbox => {
|
|
checkbox.addEventListener('change', function () {
|
|
const assetContainer = document.getElementById('assetContainer');
|
|
const assetValue = this.value;
|
|
|
|
if (this.checked) {
|
|
const assetDiv = document.createElement('div');
|
|
assetDiv.classList.add('asset-item');
|
|
assetDiv.id = `asset-${assetValue}`;
|
|
assetDiv.innerHTML = `
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mt-2">
|
|
<label>${assetValue} Quantity *</label>
|
|
<input type="number" class="form-control" placeholder="Enter Quantity" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
assetContainer.appendChild(assetDiv);
|
|
} else {
|
|
const existingDiv = document.getElementById(`asset-${assetValue}`);
|
|
if (existingDiv) {
|
|
assetContainer.removeChild(existingDiv);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
function openRoomMappingModal(buildingId, buildingName) {
|
|
$('#buildingName').text(buildingName);
|
|
|
|
const data = [
|
|
{sno: 1, floor: 'G', room: 'CLASSROOMS,LIBRARY', status: 'COMPLETED'},
|
|
{sno: 2, floor: 'G+1', room: '-', status: 'PENDING'},
|
|
{sno: 3, floor: 'G+2', room: '-', status: 'PENDING'}
|
|
];
|
|
|
|
$('#roomMappingBody').empty();
|
|
|
|
data.forEach((item) => {
|
|
$('#roomMappingBody').append(`
|
|
<tr>
|
|
<td>${item.sno}</td>
|
|
<td>${item.floor}</td>
|
|
<td>${item.room}</td>
|
|
<td>${item.status}</td>
|
|
<td>
|
|
<button class="btn btn-success" onclick="openAddRoomMapping('${item.room}', '${item.floor}')">Add Room Mapping</button>
|
|
</td>
|
|
</tr>
|
|
`);
|
|
});
|
|
|
|
$('#roomMappingModal').modal('show');
|
|
}
|
|
|
|
function openAddRoomMapping(roomName, floor) {
|
|
$('#roomFloor').text(floor);
|
|
$('#roomName').text(roomName);
|
|
$('#addRoomMappingModal').modal('show');
|
|
|
|
// Example Data (You can replace it with AJAX call)
|
|
let roomData = [
|
|
{sno: 1, roomType: 'Lab', roomName: 'Physics Lab', status: 'Pending'},
|
|
{sno: 2, roomType: 'Classroom', roomName: 'Class 10-A', status: 'Completed'}
|
|
];
|
|
|
|
let tbody = $('#addRoomMappingBody');
|
|
tbody.empty();
|
|
|
|
roomData.forEach((item) => {
|
|
tbody.append(`
|
|
<tr>
|
|
<td>${item.sno}</td>
|
|
<td>${item.roomType}</td>
|
|
<td>${item.roomName}</td>
|
|
<td>${item.status}</td>
|
|
<td><button class="btn btn-success" onclick="openAssetMappingModal('${item.roomName}', '${item.roomType}')">Add Room Mapping</button></td>
|
|
</tr>
|
|
`);
|
|
});
|
|
}
|
|
|
|
function openAssetMappingModal(roomName, roomType) {
|
|
$('#assetRoomName').text(`${roomName} (${roomType})`);
|
|
|
|
const assetData = [
|
|
{ sno: 1, roomType: roomType, assets: 'Projector', status: 'Completed' },
|
|
{ sno: 2, roomType: roomType, assets: 'Whiteboard', status: 'Pending' }
|
|
];
|
|
|
|
$('#assetMappingBody').empty();
|
|
|
|
assetData.forEach((item) => {
|
|
$('#assetMappingBody').append(`
|
|
<tr>
|
|
<td>${item.sno}</td>
|
|
<td>${item.roomType}</td>
|
|
<td>${item.assets}</td>
|
|
<td>${item.status}</td>
|
|
<td>
|
|
<button class="btn btn-success" onclick="openAssetModal('${roomName}', '${roomType}')">Add Room Mapping</button>
|
|
</td>
|
|
</tr>
|
|
`);
|
|
});
|
|
|
|
$('#assetMappingModal').modal('show');
|
|
}
|
|
|
|
// Function to Open Asset Modal
|
|
function openAssetModal(roomName, roomType) {
|
|
// Optional: Pre-fill the room name and type in the modal
|
|
$('#roomTypeDropdown').val(roomType.toLowerCase());
|
|
$('#roomDropdown').val(roomName.toLowerCase());
|
|
|
|
$('#assetModal').modal('show');
|
|
}
|
|
</script>
|
|
|
|
</html>
|