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.
322 lines
8.7 KiB
322 lines
8.7 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 🆕 Added Styles for Better Layout */
|
|
.card {
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
background-color: white;
|
|
}
|
|
|
|
.card .row {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.card .col-md-3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* 🆕 Centering the Filter Button */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
</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 - Dashboard</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="row">
|
|
<div class="col-md-3">
|
|
<label>Search with UDISE Number</label>
|
|
<select class="form-control" id="udiseDropdown">
|
|
<option value="">Select UDISE Number</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label>Category</label>
|
|
<select class="form-control" id="categoryDropdown">
|
|
<option value="">Select Category</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label>Zone</label>
|
|
<select class="form-control" id="zoneDropdown">
|
|
<option value="">Select Zone</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label>Ward</label>
|
|
<select class="form-control" id="wardDropdown">
|
|
<option value="">Select Ward</option>
|
|
</select>
|
|
</div>
|
|
</div> <!-- Row End -->
|
|
|
|
<!-- Centered Filter Button -->
|
|
<div class="row mt-3">
|
|
<div class="col-12 text-center">
|
|
<button id="filterButton" class="btn btn-primary " style="background-color: #0D587B;">Filter</button>
|
|
<button id="resetButton" class="btn btn-secondary">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- Card End -->
|
|
</div> <!-- Col-md-12 End -->
|
|
|
|
<!-- 🆕 DataTable -->
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<input type="hidden" id="loggedUserId" th:value="${user_id}">
|
|
|
|
<table id="schoolTable" class="table table-bordered table-striped">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>S.No</th>
|
|
<th>UDISE Number</th>
|
|
<th>Name</th>
|
|
<th>Category</th>
|
|
<th>Zone</th>
|
|
<th>Ward</th>
|
|
<th>Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="schoolTableBody">
|
|
<!-- Rows will be populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- DataTable Card End -->
|
|
|
|
|
|
</div> <!-- Container End -->
|
|
</div> <!-- Main Content End -->
|
|
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</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>
|
|
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
|
|
|
|
<!-- 🆕 DataTable Initialization Script -->
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#schoolTable').DataTable({
|
|
paging: true,
|
|
responsive: false,
|
|
searching: true,
|
|
select: false,
|
|
processing: false,
|
|
ordering: true,
|
|
info: true,
|
|
language: {
|
|
zeroRecords: "No schools found for this user.",
|
|
emptyTable: "No data available in table"
|
|
}
|
|
});
|
|
});
|
|
|
|
function loadDropdown(userId, type, dropdownId, placeholderText) {
|
|
$.ajax({
|
|
url: "/gcc/api/gccschool/dropdown/getAllDropdownValues",
|
|
method: "GET",
|
|
data: { user_id: userId, type: type },
|
|
success: function (response) {
|
|
console.log(`Dropdown (${type}) response:`, response);
|
|
let dropdown = $(`#${dropdownId}`);
|
|
dropdown.empty().append(`<option value="">${placeholderText}</option>`);
|
|
|
|
if (response[0].Message === "Success" && response[0].Data.length > 0) {
|
|
response[0].Data.forEach(item => {
|
|
dropdown.append(`<option value="${item}">${item}</option>`);
|
|
});
|
|
}
|
|
},
|
|
error: function () {
|
|
alert(`Failed to load ${type} dropdown`);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$('#filterButton').click(function () {
|
|
const userId = $('#loggedUserId').val();
|
|
const udise = $('#udiseDropdown').val();
|
|
const category = $('#categoryDropdown').val();
|
|
const zone = $('#zoneDropdown').val();
|
|
const ward = $('#wardDropdown').val();
|
|
|
|
$.ajax({
|
|
url: '/gcc/api/gccschool/schoolproperty/filterSchools',
|
|
method: 'GET',
|
|
data: {
|
|
user_id: userId,
|
|
udise: udise,
|
|
category: category,
|
|
zone: zone,
|
|
ward: ward
|
|
},
|
|
success: function (response) {
|
|
const table = $('#schoolTable').DataTable();
|
|
table.clear();
|
|
|
|
if (response.length > 0 && response[0].Message === "Success" && response[0].Data.length > 0) {
|
|
let schoolList = response[0].Data;
|
|
|
|
schoolList.forEach((school, index) => {
|
|
table.row.add([
|
|
index + 1,
|
|
school.udise || '',
|
|
school.school_name || '',
|
|
school.category || '',
|
|
school.zone || '',
|
|
school.division || '',
|
|
school.address || ''
|
|
]);
|
|
});
|
|
}
|
|
|
|
table.draw(); // Draw table whether data exists or not
|
|
},
|
|
error: function () {
|
|
alert("Error fetching filtered school data.");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
$('#filterButton').click(function () {
|
|
filterSchools(); // Call the function on button click
|
|
});
|
|
|
|
|
|
|
|
function loadSchoolsForUser(userId) {
|
|
$.ajax({
|
|
url: "/gcc/api/gccschool/schoolproperty/getLoginDetails",
|
|
method: "GET",
|
|
data: { user_id: userId },
|
|
success: function (response) {
|
|
if (response.length > 0 && response[0].Message === "Success") {
|
|
let schoolList = response[0].Data;
|
|
|
|
// Destroy and reinitialize the DataTable with createdRow
|
|
if ($.fn.DataTable.isDataTable('#schoolTable')) {
|
|
$('#schoolTable').DataTable().destroy();
|
|
}
|
|
|
|
const table = $('#schoolTable').DataTable({
|
|
createdRow: function (row, data, dataIndex) {
|
|
$(row).attr("onclick", `redirectToDetails(${schoolList[dataIndex].id})`);
|
|
}
|
|
});
|
|
|
|
table.clear();
|
|
|
|
schoolList.forEach((school, index) => {
|
|
table.row.add([
|
|
index + 1,
|
|
school.udise || '',
|
|
school.school_name || '',
|
|
school.category || '',
|
|
school.zone || '',
|
|
school.division || '',
|
|
school.address || ''
|
|
]);
|
|
});
|
|
|
|
table.draw();
|
|
} else {
|
|
alert("No schools found for this user.");
|
|
}
|
|
},
|
|
error: function () {
|
|
alert("Failed to load schools.");
|
|
}
|
|
});
|
|
}
|
|
|
|
// ⏬ Call this on page load with the logged-in user's ID
|
|
$(document).ready(function () {
|
|
const userId = $('#loggedUserId').val();
|
|
loadSchoolsForUser(userId);
|
|
loadDropdown(userId, 'udise', 'udiseDropdown', 'Select UDISE Number');
|
|
loadDropdown(userId, 'category', 'categoryDropdown', 'Select Category');
|
|
loadDropdown(userId, 'zone', 'zoneDropdown', 'Select Zone');
|
|
loadDropdown(userId, 'ward', 'wardDropdown', 'Select Ward');
|
|
|
|
// $('#schoolTable').DataTable();
|
|
});
|
|
|
|
function redirectToDetails(schoolId) {
|
|
window.location.href = "/gcc/school/otherdetails?schoolId=" + schoolId;
|
|
}
|
|
$('#resetButton').click(function () {
|
|
location.reload(); // This will reload the entire page
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|