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.
 
 
 
 
 

432 lines
14 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-admin :: head}"></head>
<meta charset="ISO-8859-1">
<!-- Include DataTables CSS -->
</head>
<style>
.block-content {
padding-bottom: 10px;
}
.small-input {
width: 150px;
/* Adjust the width as needed */
}
.small-table th,
.small-table td {
font-size: 14px;
/* Adjust font size as needed */
}
/* Reduce padding for table cells */
.small-table td,
.small-table th {
padding: 5px;
/* Adjust padding as needed */
}
.card-body table {
width: 100%;
padding: 100px;
}
.card-body th,
td {
padding: 8px;
text-align: left;
}
.amount-cell {
text-align: right;
padding-right: 1rem;
/* Adjust padding as needed */
}
.table {
width: 100% !important;
}
.hidden {
display: none;
}
</style>
<body>
<!-- Page Container -->
<div id="page-container"
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
<!-- Side Overlay aside (right)-->
<aside th:replace="~{fragments/aside-right :: aside}"></aside>
<!-- END Side Overlay (right)-->
<!-- Sidebar Nav-->
<nav th:replace="~{fragments/nav-admin :: nav}"></nav>
<!-- END Sidebar -->
<!-- Header -->
<header th:replace="~{fragments/header-admin :: header}"></header>
<!-- END Header -->
<!-- Main Container -->
<main id="main-container">
<!-- Page Content -->
<!-- Card Container -->
<div class="content">
<div class="block block-rounded">
<form id="myForm" th:action="@{/communityhall/admin/getDeveloperdetails}" onsubmit="return validateme()"
method="post">
<div class="block-header bg-primary text-white">
<h3 class="block-title">Community Hall Reports</h3>
</div>
<div class="block-content">
<div class="row">
<div class="col-sm-3 mb-2">
<label class="form-label" for="fromdate">From:<span
class="text-danger">*</span></label> <input type="date"
th:value="${fromdate}" class="form-control" name="FromDate" id="fromdate"
placeholder="From Date" required="required" data-date-format="yyyy-mm-dd" />
</div>
<div class="col-sm-3 mb-2">
<label class="form-label" for="todate">To:<span class="text-danger">*</span></label>
<input type="date" th:value="${todate}" class="form-control" name="ToDate"
id="todate" placeholder="To Date" required="required"
data-date-format="yyyy-mm-dd" />
</div>
<div class="col-sm-3 mb-2">
<label class="form-label" for="request">Get Info:<span
class="text-danger">*</span></label>
<select type="text" class="form-control text-center" id="request" name="request"
onchange="myRequest()" required>
<option value="">Select</option>
<option value="1" th:selected="${request=='1'}">Transaction Response</option>
<option value="2" th:selected="${request=='2'}">Refund Response</option>
<option value="3" th:selected="${request=='3'}">Booking Calendar</option>
</select>
</div>
<!-- bookingDetailsDropdown1 -->
<div class="col-sm-3 mb-2" id="bookingDetailsDropdown1" style="display: none;">
<label class="form-label" for="bookingId">Booking Id: </label>
<input type="number" class="form-control" id="bookingId" name="bookingId"
th:value="${bookingId}" placeholder="BookingId">
</div>
<!-- bookingDetailsDropdown2 -->
<div class="col-sm-3 mb-2" id="bookingDetailsDropdown2" style="display: none;">
<label class="form-label" for="hallId">Hall Id: </label>
<input type="number" class="form-control" id="hallId" name="hallId"
th:value="${hallId}" placeholder="HallId">
</div>
<div class="col-sm-3 mb-2" id="bookingDetailsDropdown3" style="display: none;">
<label class="form-label" for="hallNameDropdown">Hall Name:</label>
<select class="form-select custom-select" name="hallName" id="hallNameDropdown">
<option th:value="${hallName}">--Select Hall--</option>
<!-- Initial population using Thymeleaf -->
<th:block th:each="hall : ${halls}">
<option th:value="${hall.hallName}"
th:text="${hall.hallName}">
</option>
</th:block>
</select>
</div>
<div class="col-sm-3">
<br>
<button type="submit" class="btn btn-sm btn-primary mt-2" name="submit"
id="submit">Submit</button>
<button class="btn btn-danger mt-2" onclick="resetDate()" name="reset"
type="reset">Reset</button>
</div>
</div>
</div>
</form>
</div>
<div class="table-responsive" id="requestTable1Container" th:if="${request}==1">
<table id="requestTable1" class="table table-striped table-bordered table-hover dataTable"
role="grid" width="99.5%">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th>Booking Id</th>
<th>Hall Id</th>
<th>Amount</th>
<th>Status Code</th>
<th>Transaction Id</th>
<th>User Id</th>
<!--<th>Payment Status</th>-->
</tr>
</thead>
<tr th:each="transaction, iterStat : ${TransactionResponse}">
<td th:text="${iterStat.count}">0</td>
<td th:text="${transaction[0]}"></td>
<td th:text="${transaction[1]}"></td>
<td th:text="${transaction[2]}"></td>
<td th:text="${transaction[3]}"></td>
<td th:text="${transaction[4]}"></td>
<td th:text="${transaction[5]}"></td>
<!--
<td th:text="${transaction[6]}"></td>
-->
</tr>
</table>
</div>
<div class="table-responsive" id="requestTable2Container" th:if="${request}==2">
<table id="requestTable2" class="table table-striped table-bordered table-hover dataTable"
role="grid" width="99.5%">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Refund Status</th>
<th>Amount</th>
<th>Transaction Id</th>
<th>User Id</th>
</tr>
</thead>
<tbody>
<tr th:each="refund, iterStat : ${RefundResponse}">
<td th:text="${iterStat.count}">0</td>
<td th:text="${refund[0]}"></td>
<td th:text="${refund[1] != null ? refund[1] : '-'}"></td>
<td th:text="${refund[2]}"></td>
<td th:text="${refund[3]}"></td>
<td th:text="${refund[4]}"></td>
<td th:text="${refund[5]}"></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" id="requestTable3Container" th:if="${request}==3">
<table id="requestTable3" class="table table-striped table-bordered table-hover dataTable"
role="grid" width="99.5%">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th>Booking Date</th>
<th>Booking Id1</th>
<th>Booking Id2</th>
<th>Morning Slot</th>
<th>Evening Slot</th>
<th>Hall Name</th>
<th>Hall Id</th>
</tr>
</thead>
<tbody>
<tr th:each="booking, iterStat : ${BookingCalendar}">
<td th:text="${iterStat.count}">0</td>
<td th:text="${booking[0]}"></td>
<td th:text="${booking[1] != null ? booking[1] : '-'}"></td>
<td th:text="${booking[2] != null ? booking[2] : '-'}"></td>
<td th:text="${booking[3]}"></td>
<td th:text="${booking[4]}"></td>
<td th:text="${booking[5]}"></td>
<td th:text="${booking[6]}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
</div>
<div th:replace="~{fragments/resetpassword :: div}"></div>
<script th:replace="~{fragments/loginscript :: script}"></script>
<script>
$(document).ready(function () {
// Common buttons configuration
var buttons = [{
extend: 'pageLength',
className: 'btn btn-primary'
}, {
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-primary',
id: 'copyBtn'
}, {
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-primary',
id: 'excelBtn'
}, {
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-primary',
id: 'csvBtn'
}, {
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-primary',
id: 'pdfBtn'
}];
// DataTables initialization
$('#requestTable1, #requestTable2, #requestTable3').DataTable({
dom: 'Bftip',
columnDefs: [{
targets: 'no-sort',
orderable: false
}],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: buttons,
responsive: true,
searching: true, // Enable search
select: false,
processing: false,
order: [] // Remove any default sorting
});
// Link the search input to DataTable
$('#searchInput').on('keyup', function () {
$('#bookinglistdataTable').DataTable().search(this.value).draw();
});
});
function validateme() {
return true;
}
var fromdate = document.getElementById("fromdate"), todate = document
.getElementById("todate");
function validateDate() {
if ($("#fromdate").val() == "" || $("#todate").val() == "") {
todate.setCustomValidity("FromDate and ToDate Must");
} else {
todate.setCustomValidity('');
}
}
fromdate.onchange = validateDate;
todate.onchange = validateDate;
$(document).ready(function () {
var today = new Date();
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
maxDate: '1'
})
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
document.addEventListener("DOMContentLoaded", function () {
myRequest(); // Initial call to set dropdowns based on initial value
});
document.addEventListener("DOMContentLoaded", function () {
var today = new Date();
var sixMonthsLater = new Date();
sixMonthsLater.setMonth(today.getMonth() + 6);
var minDate = today.toISOString().split('T')[0];
var maxDate = sixMonthsLater.toISOString().split('T')[0];
let fromDateInput = document.getElementById('fromdate');
let toDateInput = document.getElementById('todate');
fromDateInput.setAttribute('max', maxDate);
toDateInput.setAttribute('max', maxDate);
fromDateInput.addEventListener('change', function () {
let selectedFromDate = this.value;
let toDateInput = document.getElementById('todate');
toDateInput.setAttribute('min', selectedFromDate);
toDateInput.value = ''; // Reset the value of toDate
});
});
function myRequest() {
// Hide all dropdowns initially
document.getElementById("bookingDetailsDropdown1").style.display = "none";
document.getElementById("bookingDetailsDropdown2").style.display = "none";
document.getElementById("bookingDetailsDropdown3").style.display = "none";
// Get the selected value from the 'Get Info' dropdown
var requestValue = document.getElementById("request").value;
// Show relevant dropdowns based on the selected value
if (requestValue === "1") {
document.getElementById("bookingDetailsDropdown1").style.display = "block";
document.getElementById("bookingDetailsDropdown2").style.display = "block";
} else if (requestValue === "2") {
document.getElementById("bookingDetailsDropdown1").style.display = "block";
} else if (requestValue === "3") {
document.getElementById("bookingDetailsDropdown1").style.display = "block";
document.getElementById("bookingDetailsDropdown3").style.display = "block";
// Fetch and populate Hall Names dropdown
fetch('/communityhall/user/api/gethallnames')
.then(response => response.json())
.then(data => {
// console.log('Hall Names Data:', data); // Debug log
const hallNameDropdown = document.getElementById('hallNameDropdown');
const selectedHall = hallNameDropdown.value; // Retain current selection
// Reset dropdown options
hallNameDropdown.innerHTML = '<option value="">--Select Hall--</option>';
// Populate options dynamically
data.forEach(hall => {
const option = document.createElement('option');
option.value = hall.hallName;
option.textContent = hall.hallName;
// Preserve selection
if (hall.hallName === selectedHall) {
option.selected = true;
}
hallNameDropdown.appendChild(option);
});
})
.catch(error => console.error('Error fetching hall names:', error));
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("basedon").addEventListener("change", function() {
const selectedValue = this.value;
document.getElementById("bookingcountbasedonDropdown").style.display = selectedValue ? "block" : "none";
});
});
// Function to reset date fields
function resetDate() {
window.location.href = "/communityhall/admin/developer";
document.getElementById('fromdate').value = '';
document.getElementById('todate').value = '';
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('request').addEventListener('change', function () {
myRequest(); // Handle request change
});
});
</script>
</body>
</html>