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.
381 lines
12 KiB
381 lines
12 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/head-public :: head}"></head>
|
|
<style>
|
|
.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;
|
|
}
|
|
</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-officer :: nav}"></nav>
|
|
<!-- END Sidebar -->
|
|
|
|
<!-- Header -->
|
|
<header th:replace="~{fragments/header-officer :: header}"></header>
|
|
<!-- END Header -->
|
|
|
|
<!-- Main Container -->
|
|
<main id="main-container">
|
|
|
|
<!-- Page Content -->
|
|
<div class="content">
|
|
<div class="block-header block-header-default">
|
|
<h3 class="block-title">List of Payments</h3>
|
|
</div>
|
|
<div class="block block-rounded">
|
|
<div class="block-header block-header-default" style="display: block;">
|
|
<form class="row" action="javascript:getbydate()">
|
|
<div class="col-6">
|
|
<h3 class="block-title"></h3>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<input type="text" th:value="${fromdate}" class="datepicker form-control"
|
|
name="From Date" id="fromdate" placeholder="From Date"
|
|
data-date-format="dd-mm-yyyy" required />
|
|
</div>
|
|
<div class="col-4">
|
|
<input type="text" th:value="${todate}" class="datepicker form-control"
|
|
name="To Date" id="todate" placeholder="To Date"
|
|
data-date-format="dd-mm-yyyy" required />
|
|
</div>
|
|
<div class="col-4 p-0 text-center">
|
|
<button type="submit" class="btn btn-primary" id="submit" name="submit"
|
|
style="">Submit</button>
|
|
<button class="btn btn-danger" onclick="resetDate()" name="reset"
|
|
type="reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="block-content p-0">
|
|
<div class="p-sm-4 p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="paymentlist">
|
|
<thead class="thead-light">
|
|
<tr class="table-bordered">
|
|
<th class="text-center no-sort">S.No</th>
|
|
<th class="text-center" width="20%">Transaction Id</th>
|
|
<th class="text-center">Payment Status</th>
|
|
<th class="text-center">Payment Type</th>
|
|
<th class="text-center">Amount Received</th>
|
|
<th class="text-center">Created date</th>
|
|
<th class="text-center">User Details</th>
|
|
<th class="text-center">Booking Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="paymentDetailsBody">
|
|
<tr th:each="list, i : ${paymentlist}" class="${paymentlist}">
|
|
<td th:text="${i.count}"></td>
|
|
<td th:text="${list.transactionId}"></td>
|
|
<td th:text="${list.paymentStatus}"></td>
|
|
<td th:text="${list.paymentType}"></td>
|
|
<td th:text="${list.amountReceived}"></td>
|
|
<td th:text="${list.cdate}"></td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModal"
|
|
th:onclick="UserDetails([[${list.bookingDetails.bookingId}]])">View</button>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#Bookingdetails"
|
|
th:onclick="BookingDetails([[${list.bookingDetails.bookingId}]])">View</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--User Details-->
|
|
<div class="modal fade" id="userDetails" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">User Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="name">Name:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="name" id="name"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="mobileno">Mobile Number:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="mobileno" id="mobileno"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="email">Email:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="email" id="email"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="usertype">User type:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="usertype" id="usertype"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="street">Street:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="street" id="street"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="area">Area:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="area" id="area"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="location">Location:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="location" id="location"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="pincode">Pincode:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="pincode" id="pincode"
|
|
readonly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Booking Details-->
|
|
<div class="modal fade" id="Bookingdetails" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Booking Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="bookingid">Booking ID:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="bookingid" id="bookingid"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="hallname">Hall Name:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="hallname" id="hallname"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="bookingstatus">Booking Status:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="bookingstatus"
|
|
id="bookingstatus" readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="noofdays">No of Days:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="noofdays" id="noofdays"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="startdate">Start Date:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="startdate" id="startdate"
|
|
readonly />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label" for="enddate">End Date:<span
|
|
class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="enddate" id="enddate"
|
|
readonly />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Page Content -->
|
|
</main>
|
|
<!-- END Main Container -->
|
|
|
|
<!-- Footer -->
|
|
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
|
|
<!-- END Footer -->
|
|
</div>
|
|
<div th:replace="~{fragments/resetpassword :: div}"></div>
|
|
<!-- Scripts -->
|
|
<script th:replace="~{fragments/loginscript :: script}"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function () {
|
|
// DataTables 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'
|
|
}
|
|
];
|
|
|
|
// Initialize DataTable for each tab on tab shown event
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
var targetTable = $(e.target).attr('href'); // activated tab
|
|
$(targetTable).find('.dataTable').DataTable().columns.adjust();
|
|
});
|
|
|
|
// Initialize DataTable for Settlement Approved tab
|
|
$('#paymentlist').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']
|
|
],
|
|
buttons: buttons,
|
|
responsive: true,
|
|
searching: true,
|
|
select: false,
|
|
processing: false,
|
|
// Set width to 100%
|
|
"autoWidth": true
|
|
});
|
|
});
|
|
function UserDetails(bookingId) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/api/officer/getBookingDetails',
|
|
data: {
|
|
'bookingsId': bookingId
|
|
},
|
|
success: function (x) {
|
|
//console.log(x);
|
|
showUserInfo(x)
|
|
}
|
|
});
|
|
|
|
}
|
|
function BookingDetails(bookingId) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/api/officer/getBookingDetails',
|
|
data: {
|
|
'bookingsId': bookingId
|
|
},
|
|
success: function (x) {
|
|
//console.log(x);
|
|
showBookingInfo(x)
|
|
}
|
|
});
|
|
|
|
}
|
|
function showUserInfo(list) {
|
|
$('#userDetails').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#userDetails').modal('show');
|
|
|
|
// Populate booking information
|
|
$('#name').val(list.users.name);
|
|
$('#mobileno').val(list.users.mobileNo);
|
|
$('#email').val(list.users.email);
|
|
$('#usertype').val(list.users.usertype);
|
|
$('#street').val(list.users.street);
|
|
$('#area').val(list.users.area);
|
|
$('#location').val(list.users.location);
|
|
$('#pincode').val(list.users.pinCode);
|
|
}
|
|
function showBookingInfo(list) {
|
|
$('#Bookingdetails').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#Bookingdetails').modal('show');
|
|
|
|
// Populate booking information
|
|
$('#bookingid').val(list.bookingId);
|
|
$('#hallname').val(list.hallDetails.hallName);
|
|
$('#bookingstatus').val(list.bookingStatus);
|
|
$('#noofdays').val(list.noOfDays);
|
|
$('#startdate').val(list.startDate);
|
|
$('#enddate').val(list.endDate);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|