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.
684 lines
24 KiB
684 lines
24 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/head-admin :: head}">
|
|
</head>
|
|
<style>
|
|
.header-class {
|
|
position: fixed;
|
|
top: 50;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.main-content {
|
|
margin-top: 70px;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.bookings-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.booking-card {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.booking-details p {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.settlement-btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.settlement-btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="page-container"
|
|
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
|
|
<aside th:replace="~{fragments/aside-right :: aside}"></aside>
|
|
<nav th:replace="~{fragments/nav-caretaker :: nav}"></nav>
|
|
<header th:replace="~{fragments/header-caretaker :: header}"></header>
|
|
|
|
<div class="content" style="margin-top: 77px;">
|
|
<div class="block block-rounded">
|
|
<div class="block-header bg-info text-white" style="background-color: #2c726c !important">
|
|
<h3 class="block-title">Past Bookings</h3>
|
|
</div>
|
|
<div class="block-content">
|
|
<div class="table-responsive">
|
|
<table id="pastBookingTable" class="table table-bordered table-vcenter">
|
|
<thead>
|
|
<tr>
|
|
<th>Hall Name</th>
|
|
<th>Booking Id</th>
|
|
<th>Reason for Booking</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>No of Days</th>
|
|
<th>Starting Period</th>
|
|
<th>Ending Period</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Iterate over past bookings and display them -->
|
|
<tr th:each="booking : ${pastBookings}" class="${pastBookings}">
|
|
<td th:text="${booking.hallDetails.hallName}"></td>
|
|
<td th:text="${booking.bookingId}"></td>
|
|
<td th:text="${booking.reason}"></td>
|
|
|
|
<td th:text="${booking.startDate}"></td>
|
|
<td th:text="${booking.endDate}"></td>
|
|
<td th:text="${booking.noOfDays}"></td>
|
|
<td>
|
|
<span th:text="${booking.startingSlot == 1 ? 'Morning' : 'Evening'}"></span>
|
|
</td>
|
|
<td>
|
|
<span th:text="${booking.endingSlot == 1 ? 'Morning' : 'Evening'}"></span>
|
|
</td>
|
|
<td>
|
|
<!-- Implement your logic for viewing details -->
|
|
<button type="button" class="btn btn-primary view-details"
|
|
th:onclick="bookingDetails([[${booking.bookingId}]])">View</button>
|
|
<button type="button" class="btn btn-primary settlement"
|
|
th:if="${booking.ebDetails != null and booking.settlement == null}"
|
|
th:onclick="settleTheAmount([[${booking.bookingId}]])">Settlement</button>
|
|
<button type="button" class="btn btn-primary" th:if="${booking.ebDetails==null}"
|
|
th:onclick="enterStartingReading([[${booking.bookingId}]], '[[${booking.hallDetails.ebNumber}]]')"
|
|
id="ebDetails">EB Details</button>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><br>
|
|
<br>
|
|
<div class="modal fade backdrop" id="bookingModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="block block-rounded block-themed block-transparent mb-0">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title">Booking Details</h3>
|
|
<div class="block-options">
|
|
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="fa fa-fw fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="block-content row">
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="name">Name<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="name" name="name"
|
|
placeholder="First Name" readonly>
|
|
</div>
|
|
<small id="emailHelp" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="mobileno">Mobile Number<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="mobileno" name="mobileno"
|
|
placeholder="Mobile Number" minlength="10" maxlength="10" pattern="[0-9]{10}"
|
|
readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="email">E-Mail ID<span class="required"></span>:</label>
|
|
<input type="email" class="form-control text-center" id="email" name="email"
|
|
placeholder="Email" maxlength="255" readonly>
|
|
</div>
|
|
<small id="emailHelps" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="doorNo">DoorNo<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="doorNo" name="doorNo"
|
|
placeholder="Door No" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="street">Street<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="street" name="street"
|
|
placeholder="Street" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="area">Area<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="area" name="area"
|
|
placeholder="Area" readonly>
|
|
</div>
|
|
<small id="emailHelped" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="location">Location<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="location" name="location"
|
|
placeholder="Location" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="pincode">Pincode<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="pincode" name="pincode"
|
|
placeholder="Pincode" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4" style="margin-left:0%">
|
|
<div class="form-group">
|
|
<label for="userType">User Type<span class="required">*</span>:</label>
|
|
<input class="form-control" id="usertype" name="usertype"
|
|
placeholder="User Type" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 hidden" id="employeeFields">
|
|
<!-- Employee fields here -->
|
|
</div>
|
|
<div class="col-sm-4 hidden" id="pensionerFields">
|
|
<!-- Pensioner fields here -->
|
|
</div>
|
|
<div class="col-sm-4 hidden" id="wardnoFields">
|
|
<!-- Ward number fields here -->
|
|
</div>
|
|
</div>
|
|
<div id="ebDetailsSection">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" style="color: white;">EB Details</h3>
|
|
</div>
|
|
<div class="block-content row">
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="startingreading">Starting Reading<span
|
|
class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="startingreading"
|
|
name="startingreading" readonly>
|
|
</div>
|
|
<small id="emailHelp" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="endingreading">Ending Reading<span
|
|
class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="endingreading"
|
|
name="endingreading" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="ebAmount"
|
|
name="ebAmount" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div id="damageListSection">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" style="color: white;">Settlement List</h3>
|
|
</div>
|
|
<div class="block-content row">
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="settlementId">Settlement Id<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="settlementId" name="settlementId" readonly>
|
|
</div>
|
|
<small id="emailHelp" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="damageAmount">Damage Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="damageAmount" name="damageAmount" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="EBAmount" name="EBAmount" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="depositAmount">Deposit Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="depositAmount" name="depositAmount" readonly>
|
|
</div>
|
|
</div>
|
|
</div></div>-->
|
|
|
|
<div id="settlementListSection">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" style="color: white;">Settlement List</h3>
|
|
</div>
|
|
<div class="block-content row">
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="settlementId">Settlement Id<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="settlementId"
|
|
name="settlementId" readonly>
|
|
</div>
|
|
<small id="emailHelp" class="form-text text-muted"></small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="damageAmount">Damage Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="damageAmount"
|
|
name="damageAmount" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="EBAmount"
|
|
name="EBAmount" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="form-group">
|
|
<label for="depositAmount">Deposit Amount<span
|
|
class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="depositAmount"
|
|
name="depositAmount" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade backdrop" id="EBdestailsModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="block block-rounded block-themed block-transparent mb-0">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title">EB Details</h3>
|
|
<div class="block-options">
|
|
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="fa fa-fw fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="block-content row">
|
|
<input type="hidden" class="form-control text-center" id="bookingId" name="bookingId"
|
|
readonly>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="ebNumber">Consumer Number<span class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="ebNumber" name="ebNumber"
|
|
placeholder="EB Number" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="startingReading">Starting Reading<span
|
|
class="required">*</span>:</label>
|
|
<input type="text" class="form-control text-center" id="startingReading"
|
|
name="startingReading">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="startingReadingimage">Starting Reading Image<span
|
|
class="required"></span>:</label>
|
|
<input type="file" class="form-control text-center startreading-image" id="startingReadingimage"
|
|
name="startingReadingimage">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><br><br>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" id="submitEbDetails">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
|
|
</div>
|
|
<div th:replace="~{fragments/resetpassword :: div}"></div>
|
|
<script th:replace="~{fragments/script :: script}"></script>
|
|
<script th:replace="~{fragments/loginscript :: script}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<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'
|
|
},
|
|
|
|
];
|
|
|
|
$('#pastBookingTable').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,
|
|
});
|
|
|
|
// Link the search input to DataTable
|
|
$('#searchInput').on('keyup', function () {
|
|
dataTable.search(this.value).draw();
|
|
});
|
|
|
|
});
|
|
function settleTheAmount(bookingId) {
|
|
window.location.href = '/communityhall/caretaker/caretakerpage?bookingId=' + bookingId;
|
|
}
|
|
|
|
function bookingDetails(bookingId) {
|
|
$.ajax({
|
|
url: '/communityhall/careTaker/api/viewuserDetails',
|
|
method: 'GET',
|
|
data: {bookingId: bookingId},
|
|
success: function (response) {
|
|
var users = response.users;
|
|
var settlement = response.settlement;
|
|
var ebDetails = response.ebDetails;
|
|
var damageList = response.damageList;
|
|
|
|
$('#name').val(users.name);
|
|
$('#mobileno').val(users.mobileNo);
|
|
$('#email').val(users.email);
|
|
$('#doorNo').val(users.doorNo);
|
|
$('#street').val(users.street);
|
|
$('#area').val(users.area);
|
|
$('#location').val(users.location);
|
|
$('#pincode').val(users.pinCode);
|
|
$('#usertype').val(users.usertype);
|
|
|
|
// Show or hide settlement section
|
|
if (settlement) {
|
|
$('#settlementId').val(settlement.settlementId);
|
|
$('#damageAmount').val(settlement.damageAmount);
|
|
$('#EBAmount').val(settlement.ebAmount);
|
|
$('#depositAmount').val(settlement.depositAmount);
|
|
$('#settlementListSection').show();
|
|
} else {
|
|
$('#settlementListSection').hide();
|
|
}
|
|
if (ebDetails) {
|
|
$('#startingreading').val(ebDetails.startingReading);
|
|
$('#endingreading').val(ebDetails.endingReading);
|
|
$('#ebAmount').val(ebDetails.ebAmount);
|
|
$('#ebDetailsSection').show();
|
|
} else {
|
|
$('#ebDetailsSection').hide();
|
|
}
|
|
$('#bookingModal').modal('show');
|
|
},
|
|
error: function () {
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function enterStartingReading(bookingId, ebNumber) {
|
|
$('#bookingId').val(bookingId);
|
|
$('#ebNumber').val(ebNumber);
|
|
$('#EBdestailsModal').modal('show');
|
|
}
|
|
let isCompressing = false;
|
|
// Attach the validation function to file input change event
|
|
$(document).on('change', '.startreading-image', function () {
|
|
validateFile(this);
|
|
});
|
|
|
|
function validateFile(fileInput) {
|
|
const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
|
|
const file = fileInput.files[0];
|
|
const filePath = fileInput.value;
|
|
let errorMessage = '';
|
|
|
|
// Clear any previous error message
|
|
clearError(fileInput);
|
|
|
|
// Check for duplicate files
|
|
if (isDuplicateFile(file.name, fileInput)) {
|
|
errorMessage = 'This file has already been selected. Please choose a different file.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
return;
|
|
}
|
|
|
|
// Validate file type
|
|
if (!allowedExtensions.exec(filePath)) {
|
|
errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
}
|
|
// Handle image files separately
|
|
else if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
|
|
compressImage(file).then(compressedFile => {
|
|
const dataTransfer = new DataTransfer();
|
|
dataTransfer.items.add(compressedFile);
|
|
fileInput.files = dataTransfer.files;
|
|
|
|
// Validate file size after compression
|
|
validateFileSize(fileInput);
|
|
}).catch(error => {
|
|
errorMessage = 'Error compressing image.';
|
|
displayError(fileInput, errorMessage);
|
|
});
|
|
}
|
|
// Directly validate PDF file size
|
|
else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
|
|
errorMessage = 'PDF file size exceeds the 2MB limit.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
}
|
|
else {
|
|
console.log('File size is within limit:', file.size, 'bytes');
|
|
clearError(fileInput);
|
|
}
|
|
}
|
|
|
|
|
|
function isDuplicateFile(fileName, currentInput) {
|
|
const fileInputs = document.querySelectorAll('.file-upload-field');
|
|
for (let input of fileInputs) {
|
|
if (input !== currentInput && input.files.length > 0 && input.files[0].name === fileName) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function clearError(fileInput) {
|
|
const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
|
|
while (errorElements.length > 0) {
|
|
errorElements[0].remove();
|
|
}
|
|
}
|
|
// Function to compress image using canvas
|
|
function compressImage(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const maxSize = 2097152; // 2MB in bytes
|
|
let scale = 1;
|
|
if (file.size > maxSize) {
|
|
scale = Math.sqrt(maxSize / file.size);
|
|
}
|
|
canvas.width = img.width * scale;
|
|
canvas.height = img.height * scale;
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
|
// Convert canvas content to blob
|
|
canvas.toBlob(blob => {
|
|
resolve(new File([blob], file.name, {type: 'image/jpeg', lastModified: Date.now()}));
|
|
}, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
|
|
};
|
|
img.src = event.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
// Function to validate file size after compression
|
|
function validateFileSize(fileInput) {
|
|
const file = fileInput.files[0];
|
|
if (file && file.size > 2097152) {
|
|
//console.log('File size is still greater than 2MB after compression.');
|
|
// Handle the situation where the file size is still greater than 2MB
|
|
displayError(fileInput, 'File size is still greater than 2MB after compression.');
|
|
fileInput.value = ''; // Clear the file input
|
|
} else {
|
|
//console.log('File size is within limit after compression.');
|
|
// Handle the situation where the file size is within the limit
|
|
}
|
|
}
|
|
|
|
// Function to display error messages
|
|
function displayError(fileInput, errorMessage) {
|
|
// Example implementation: show error message near the file input
|
|
let errorContainer = fileInput.nextElementSibling;
|
|
if (!errorContainer || !errorContainer.classList.contains('error-message')) {
|
|
errorContainer = document.createElement('div');
|
|
errorContainer.classList.add('error-message');
|
|
fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
|
|
}
|
|
errorContainer.textContent = errorMessage;
|
|
}
|
|
$(document).ready(function () {
|
|
$("#submitEbDetails").click(function () {
|
|
var bookid = parseInt($("#bookingId").val());
|
|
var startingReading = $("#startingReading").val();
|
|
var startingReadingimage = $("#startingReadingimage")[0].files[0]; // Get the file
|
|
|
|
var formData = new FormData();
|
|
formData.append("bookingId", bookid);
|
|
formData.append("startingReading", startingReading);
|
|
formData.append("startingReadingimage", startingReadingimage);
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/communityhall/careTaker/api/saveEbDetails",
|
|
data: formData,
|
|
contentType: false, // Prevent jQuery from setting content type
|
|
processData: false, // Prevent jQuery from processing the data
|
|
success: function (response) {
|
|
$("#EBdestailsModal").modal('hide');
|
|
|
|
// Show SweetAlert success message
|
|
Swal.fire({
|
|
title: 'Success!',
|
|
text: 'EB details saved successfully.',
|
|
icon: 'success',
|
|
confirmButtonText: 'OK'
|
|
}).then(function() {
|
|
// Reload the page after the alert is dismissed
|
|
location.reload();
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error(xhr.responseText);
|
|
alert("Error occurred while saving EbDetails.");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
document.getElementById('EBdetailsModal').addEventListener('hide.bs.modal', function () {
|
|
// Clear the startingReading input field
|
|
document.getElementById('startingReading').value = '';
|
|
|
|
// Clear the startingReadingimage file input field
|
|
document.getElementById('startingReadingimage').value = '';
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|