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.
405 lines
15 KiB
405 lines
15 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="header">School Module - Master Details - {Id 3232193827918}</div>
|
|
|
|
<hr style="border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px;">
|
|
|
|
<!-- Card 1: School Information -->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header" style=" background-color: #404E67;
|
|
color: white;">School Information</div>
|
|
<table class="table">
|
|
<tr>
|
|
<th>School Name:</th>
|
|
<td>CPS KOLATHUR II</td>
|
|
<th>UDISE Code:</th>
|
|
<td>33020401404</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Category:</th>
|
|
<td>Primary School</td>
|
|
<th>Medium:</th>
|
|
<td>Tamil, English</td>
|
|
</tr>
|
|
<tr>
|
|
<th>School Type:</th>
|
|
<td>Government</td>
|
|
<th>Zone:</th>
|
|
<td>Zone 11</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Ward:</th>
|
|
<td>Ward 122</td>
|
|
<th>Address:</th>
|
|
<td>1a, school road, Venkat Nagar, Kolathur, Chennai.</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h4>Room Wise Asset Mapping - Furniture Assets</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;">
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
|
|
<h5 style="font-weight:bold;">List of Electrical 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="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%;">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>
|
|
|
|
|
|
|
|
<!-- Card 2: Other Details -->
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</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 - Electrical 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="fan"> Fan
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="asset-checkbox" value="Smart TV"> Lights
|
|
</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() {
|
|
$('#CompletedCPSDatatable').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
|
|
});
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</html>
|