gccoffice_education_project/frontend/school/itassets.html

<!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">&times;</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">&times;</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">&times;</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">&times;</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>