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.

683 lines
24 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-admin :: head}">
  4. </head>
  5. <style>
  6. .header-class {
  7. position: fixed;
  8. top: 50;
  9. left: 0;
  10. width: 100%;
  11. z-index: 1000;
  12. }
  13. .main-content {
  14. margin-top: 70px;
  15. }
  16. body,
  17. html {
  18. margin: 0;
  19. padding: 0;
  20. width: 100%;
  21. height: 100%;
  22. overflow: auto;
  23. }
  24. .bookings-list {
  25. display: flex;
  26. justify-content: center;
  27. align-items: center;
  28. height: 100vh;
  29. padding: 20px;
  30. box-sizing: border-box;
  31. }
  32. .booking-card {
  33. max-width: 600px;
  34. width: 100%;
  35. background-color: #fff;
  36. border-radius: 8px;
  37. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  38. padding: 20px;
  39. box-sizing: border-box;
  40. overflow: hidden;
  41. }
  42. .booking-details p {
  43. margin: 10px 0;
  44. }
  45. .settlement-btn {
  46. display: block;
  47. width: 100%;
  48. padding: 10px;
  49. background-color: #4caf50;
  50. color: white;
  51. border: none;
  52. border-radius: 5px;
  53. cursor: pointer;
  54. font-size: 16px;
  55. margin-top: 20px;
  56. }
  57. .settlement-btn:hover {
  58. background-color: #45a049;
  59. }
  60. </style>
  61. <body>
  62. <div id="page-container"
  63. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  64. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  65. <nav th:replace="~{fragments/nav-caretaker :: nav}"></nav>
  66. <header th:replace="~{fragments/header-caretaker :: header}"></header>
  67. <div class="content" style="margin-top: 77px;">
  68. <div class="block block-rounded">
  69. <div class="block-header bg-info text-white" style="background-color: #2c726c !important">
  70. <h3 class="block-title">Past Bookings</h3>
  71. </div>
  72. <div class="block-content">
  73. <div class="table-responsive">
  74. <table id="pastBookingTable" class="table table-bordered table-vcenter">
  75. <thead>
  76. <tr>
  77. <th>Hall Name</th>
  78. <th>Booking Id</th>
  79. <th>Reason for Booking</th>
  80. <th>Start Date</th>
  81. <th>End Date</th>
  82. <th>No of Days</th>
  83. <th>Starting Period</th>
  84. <th>Ending Period</th>
  85. <th>Actions</th>
  86. </tr>
  87. </thead>
  88. <tbody>
  89. <!-- Iterate over past bookings and display them -->
  90. <tr th:each="booking : ${pastBookings}" class="${pastBookings}">
  91. <td th:text="${booking.hallDetails.hallName}"></td>
  92. <td th:text="${booking.bookingId}"></td>
  93. <td th:text="${booking.reason}"></td>
  94. <td th:text="${booking.startDate}"></td>
  95. <td th:text="${booking.endDate}"></td>
  96. <td th:text="${booking.noOfDays}"></td>
  97. <td>
  98. <span th:text="${booking.startingSlot == 1 ? 'Morning' : 'Evening'}"></span>
  99. </td>
  100. <td>
  101. <span th:text="${booking.endingSlot == 1 ? 'Morning' : 'Evening'}"></span>
  102. </td>
  103. <td>
  104. <!-- Implement your logic for viewing details -->
  105. <button type="button" class="btn btn-primary view-details"
  106. th:onclick="bookingDetails([[${booking.bookingId}]])">View</button>
  107. <button type="button" class="btn btn-primary settlement"
  108. th:if="${booking.ebDetails != null and booking.settlement == null}"
  109. th:onclick="settleTheAmount([[${booking.bookingId}]])">Settlement</button>
  110. <button type="button" class="btn btn-primary" th:if="${booking.ebDetails==null}"
  111. th:onclick="enterStartingReading([[${booking.bookingId}]], '[[${booking.hallDetails.ebNumber}]]')"
  112. id="ebDetails">EB Details</button>
  113. </td>
  114. </tr>
  115. </tbody>
  116. </table>
  117. </div>
  118. </div>
  119. </div>
  120. </div><br>
  121. <br>
  122. <div class="modal fade backdrop" id="bookingModal" tabindex="-1" role="dialog"
  123. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  124. <div class="modal-dialog modal-lg" role="document">
  125. <div class="modal-content">
  126. <div class="block block-rounded block-themed block-transparent mb-0">
  127. <div class="block-header bg-primary-dark">
  128. <h3 class="block-title">Booking Details</h3>
  129. <div class="block-options">
  130. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  131. aria-label="Close">
  132. <i class="fa fa-fw fa-times"></i>
  133. </button>
  134. </div>
  135. </div>
  136. <div class="block-content row">
  137. <div class="col-sm-4">
  138. <div class="form-group">
  139. <label for="name">Name<span class="required">*</span>:</label>
  140. <input type="text" class="form-control text-center" id="name" name="name"
  141. placeholder="First Name" readonly>
  142. </div>
  143. <small id="emailHelp" class="form-text text-muted"></small>
  144. </div>
  145. <div class="col-sm-4">
  146. <div class="form-group">
  147. <label for="mobileno">Mobile Number<span class="required">*</span>:</label>
  148. <input type="text" class="form-control text-center" id="mobileno" name="mobileno"
  149. placeholder="Mobile Number" minlength="10" maxlength="10" pattern="[0-9]{10}"
  150. readonly>
  151. </div>
  152. </div>
  153. <div class="col-sm-4">
  154. <div class="form-group">
  155. <label for="email">E-Mail ID<span class="required"></span>:</label>
  156. <input type="email" class="form-control text-center" id="email" name="email"
  157. placeholder="Email" maxlength="255" readonly>
  158. </div>
  159. <small id="emailHelps" class="form-text text-muted"></small>
  160. </div>
  161. <div class="col-sm-4">
  162. <div class="form-group">
  163. <label for="doorNo">DoorNo<span class="required">*</span>:</label>
  164. <input type="text" class="form-control text-center" id="doorNo" name="doorNo"
  165. placeholder="Door No" readonly>
  166. </div>
  167. </div>
  168. <div class="col-sm-4">
  169. <div class="form-group">
  170. <label for="street">Street<span class="required">*</span>:</label>
  171. <input type="text" class="form-control text-center" id="street" name="street"
  172. placeholder="Street" readonly>
  173. </div>
  174. </div>
  175. <div class="col-sm-4">
  176. <div class="form-group">
  177. <label for="area">Area<span class="required">*</span>:</label>
  178. <input type="text" class="form-control text-center" id="area" name="area"
  179. placeholder="Area" readonly>
  180. </div>
  181. <small id="emailHelped" class="form-text text-muted"></small>
  182. </div>
  183. <div class="col-sm-4">
  184. <div class="form-group">
  185. <label for="location">Location<span class="required">*</span>:</label>
  186. <input type="text" class="form-control text-center" id="location" name="location"
  187. placeholder="Location" readonly>
  188. </div>
  189. </div>
  190. <div class="col-sm-4">
  191. <div class="form-group">
  192. <label for="pincode">Pincode<span class="required">*</span>:</label>
  193. <input type="text" class="form-control text-center" id="pincode" name="pincode"
  194. placeholder="Pincode" readonly>
  195. </div>
  196. </div>
  197. <div class="col-sm-4" style="margin-left:0%">
  198. <div class="form-group">
  199. <label for="userType">User Type<span class="required">*</span>:</label>
  200. <input class="form-control" id="usertype" name="usertype"
  201. placeholder="User Type" readonly>
  202. </div>
  203. </div>
  204. <div class="col-sm-4 hidden" id="employeeFields">
  205. <!-- Employee fields here -->
  206. </div>
  207. <div class="col-sm-4 hidden" id="pensionerFields">
  208. <!-- Pensioner fields here -->
  209. </div>
  210. <div class="col-sm-4 hidden" id="wardnoFields">
  211. <!-- Ward number fields here -->
  212. </div>
  213. </div>
  214. <div id="ebDetailsSection">
  215. <div class="block-header bg-primary-dark">
  216. <h3 class="block-title" style="color: white;">EB Details</h3>
  217. </div>
  218. <div class="block-content row">
  219. <div class="col-sm-4">
  220. <div class="form-group">
  221. <label for="startingreading">Starting Reading<span
  222. class="required">*</span>:</label>
  223. <input type="text" class="form-control text-center" id="startingreading"
  224. name="startingreading" readonly>
  225. </div>
  226. <small id="emailHelp" class="form-text text-muted"></small>
  227. </div>
  228. <div class="col-sm-4">
  229. <div class="form-group">
  230. <label for="endingreading">Ending Reading<span
  231. class="required">*</span>:</label>
  232. <input type="text" class="form-control text-center" id="endingreading"
  233. name="endingreading" readonly>
  234. </div>
  235. </div>
  236. <div class="col-sm-4">
  237. <div class="form-group">
  238. <label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
  239. <input type="text" class="form-control text-center" id="ebAmount"
  240. name="ebAmount" readonly>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. <!-- <div id="damageListSection">
  246. <div class="block-header bg-primary-dark">
  247. <h3 class="block-title" style="color: white;">Settlement List</h3>
  248. </div>
  249. <div class="block-content row">
  250. <div class="col-sm-4">
  251. <div class="form-group">
  252. <label for="settlementId">Settlement Id<span class="required">*</span>:</label>
  253. <input type="text" class="form-control text-center" id="settlementId" name="settlementId" readonly>
  254. </div>
  255. <small id="emailHelp" class="form-text text-muted"></small>
  256. </div>
  257. <div class="col-sm-4">
  258. <div class="form-group">
  259. <label for="damageAmount">Damage Amount<span class="required">*</span>:</label>
  260. <input type="text" class="form-control text-center" id="damageAmount" name="damageAmount" readonly>
  261. </div>
  262. </div>
  263. <div class="col-sm-4">
  264. <div class="form-group">
  265. <label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
  266. <input type="text" class="form-control text-center" id="EBAmount" name="EBAmount" readonly>
  267. </div>
  268. </div>
  269. <div class="col-sm-4">
  270. <div class="form-group">
  271. <label for="depositAmount">Deposit Amount<span class="required">*</span>:</label>
  272. <input type="text" class="form-control text-center" id="depositAmount" name="depositAmount" readonly>
  273. </div>
  274. </div>
  275. </div></div>-->
  276. <div id="settlementListSection">
  277. <div class="block-header bg-primary-dark">
  278. <h3 class="block-title" style="color: white;">Settlement List</h3>
  279. </div>
  280. <div class="block-content row">
  281. <div class="col-sm-4">
  282. <div class="form-group">
  283. <label for="settlementId">Settlement Id<span class="required">*</span>:</label>
  284. <input type="text" class="form-control text-center" id="settlementId"
  285. name="settlementId" readonly>
  286. </div>
  287. <small id="emailHelp" class="form-text text-muted"></small>
  288. </div>
  289. <div class="col-sm-4">
  290. <div class="form-group">
  291. <label for="damageAmount">Damage Amount<span class="required">*</span>:</label>
  292. <input type="text" class="form-control text-center" id="damageAmount"
  293. name="damageAmount" readonly>
  294. </div>
  295. </div>
  296. <div class="col-sm-4">
  297. <div class="form-group">
  298. <label for="EBAmount">Eb Amount<span class="required">*</span>:</label>
  299. <input type="text" class="form-control text-center" id="EBAmount"
  300. name="EBAmount" readonly>
  301. </div>
  302. </div>
  303. <div class="col-sm-4">
  304. <div class="form-group">
  305. <label for="depositAmount">Deposit Amount<span
  306. class="required">*</span>:</label>
  307. <input type="text" class="form-control text-center" id="depositAmount"
  308. name="depositAmount" readonly>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. <div class="modal-footer">
  315. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. <div class="modal fade backdrop" id="EBdestailsModal" tabindex="-1" role="dialog"
  321. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  322. <div class="modal-dialog modal-lg" role="document">
  323. <div class="modal-content">
  324. <div class="block block-rounded block-themed block-transparent mb-0">
  325. <div class="block-header bg-primary-dark">
  326. <h3 class="block-title">EB Details</h3>
  327. <div class="block-options">
  328. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  329. aria-label="Close">
  330. <i class="fa fa-fw fa-times"></i>
  331. </button>
  332. </div>
  333. </div>
  334. <div class="block-content row">
  335. <input type="hidden" class="form-control text-center" id="bookingId" name="bookingId"
  336. readonly>
  337. <div class="col-sm-6">
  338. <div class="form-group">
  339. <label for="ebNumber">Consumer Number<span class="required">*</span>:</label>
  340. <input type="text" class="form-control text-center" id="ebNumber" name="ebNumber"
  341. placeholder="EB Number" readonly>
  342. </div>
  343. </div>
  344. <div class="col-sm-6">
  345. <div class="form-group">
  346. <label for="startingReading">Starting Reading<span
  347. class="required">*</span>:</label>
  348. <input type="text" class="form-control text-center" id="startingReading"
  349. name="startingReading">
  350. </div>
  351. </div>
  352. <div class="col-sm-6">
  353. <div class="form-group">
  354. <label for="startingReadingimage">Starting Reading Image<span
  355. class="required"></span>:</label>
  356. <input type="file" class="form-control text-center startreading-image" id="startingReadingimage"
  357. name="startingReadingimage">
  358. </div>
  359. </div>
  360. </div>
  361. </div><br><br>
  362. <div class="modal-footer">
  363. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  364. <button type="button" class="btn btn-primary" id="submitEbDetails">Submit</button>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  370. </div>
  371. <div th:replace="~{fragments/resetpassword :: div}"></div>
  372. <script th:replace="~{fragments/script :: script}"></script>
  373. <script th:replace="~{fragments/loginscript :: script}"></script>
  374. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  375. <script type="text/javascript">
  376. $(document).ready(
  377. function () {
  378. // DataTables buttons configuration
  379. var buttons = [{
  380. extend: 'pageLength',
  381. className: 'btn btn-primary'
  382. }, {
  383. title: 'Data export',
  384. extend: 'copyHtml5',
  385. text: 'Copy',
  386. className: 'btn btn-primary',
  387. id: 'copyBtn'
  388. }, {
  389. extend: 'excelHtml5',
  390. text: 'Excel',
  391. className: 'btn btn-primary',
  392. id: 'excelBtn'
  393. }, {
  394. extend: 'csvHtml5',
  395. text: 'CSV',
  396. className: 'btn btn-primary',
  397. id: 'csvBtn'
  398. }, {
  399. extend: 'pdfHtml5',
  400. text: 'PDF',
  401. className: 'btn btn-primary',
  402. id: 'pdfBtn'
  403. },
  404. ];
  405. $('#pastBookingTable').DataTable(
  406. {
  407. dom: 'Bftip',
  408. columnDefs: [{
  409. targets: 'no-sort',
  410. orderable: false
  411. }],
  412. lengthMenu: [
  413. [50, 100, 200, 500, -1],
  414. ['50 rows', '100 rows', '200 rows',
  415. '500 rows', 'Show all']],
  416. scrollY: '50vh',
  417. fixedColumns: {
  418. left: 1,
  419. right: 1
  420. },
  421. buttons: [buttons],
  422. responsive: true,
  423. searching: true, // Enable search
  424. select: false,
  425. processing: false,
  426. });
  427. // Link the search input to DataTable
  428. $('#searchInput').on('keyup', function () {
  429. dataTable.search(this.value).draw();
  430. });
  431. });
  432. function settleTheAmount(bookingId) {
  433. window.location.href = '/communityhall/caretaker/caretakerpage?bookingId=' + bookingId;
  434. }
  435. function bookingDetails(bookingId) {
  436. $.ajax({
  437. url: '/communityhall/careTaker/api/viewuserDetails',
  438. method: 'GET',
  439. data: {bookingId: bookingId},
  440. success: function (response) {
  441. var users = response.users;
  442. var settlement = response.settlement;
  443. var ebDetails = response.ebDetails;
  444. var damageList = response.damageList;
  445. $('#name').val(users.name);
  446. $('#mobileno').val(users.mobileNo);
  447. $('#email').val(users.email);
  448. $('#doorNo').val(users.doorNo);
  449. $('#street').val(users.street);
  450. $('#area').val(users.area);
  451. $('#location').val(users.location);
  452. $('#pincode').val(users.pinCode);
  453. $('#usertype').val(users.usertype);
  454. // Show or hide settlement section
  455. if (settlement) {
  456. $('#settlementId').val(settlement.settlementId);
  457. $('#damageAmount').val(settlement.damageAmount);
  458. $('#EBAmount').val(settlement.ebAmount);
  459. $('#depositAmount').val(settlement.depositAmount);
  460. $('#settlementListSection').show();
  461. } else {
  462. $('#settlementListSection').hide();
  463. }
  464. if (ebDetails) {
  465. $('#startingreading').val(ebDetails.startingReading);
  466. $('#endingreading').val(ebDetails.endingReading);
  467. $('#ebAmount').val(ebDetails.ebAmount);
  468. $('#ebDetailsSection').show();
  469. } else {
  470. $('#ebDetailsSection').hide();
  471. }
  472. $('#bookingModal').modal('show');
  473. },
  474. error: function () {
  475. }
  476. });
  477. }
  478. function enterStartingReading(bookingId, ebNumber) {
  479. $('#bookingId').val(bookingId);
  480. $('#ebNumber').val(ebNumber);
  481. $('#EBdestailsModal').modal('show');
  482. }
  483. let isCompressing = false;
  484. // Attach the validation function to file input change event
  485. $(document).on('change', '.startreading-image', function () {
  486. validateFile(this);
  487. });
  488. function validateFile(fileInput) {
  489. const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
  490. const file = fileInput.files[0];
  491. const filePath = fileInput.value;
  492. let errorMessage = '';
  493. // Clear any previous error message
  494. clearError(fileInput);
  495. // Check for duplicate files
  496. if (isDuplicateFile(file.name, fileInput)) {
  497. errorMessage = 'This file has already been selected. Please choose a different file.';
  498. fileInput.value = ''; // Clear the file input
  499. displayError(fileInput, errorMessage);
  500. return;
  501. }
  502. // Validate file type
  503. if (!allowedExtensions.exec(filePath)) {
  504. errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
  505. fileInput.value = ''; // Clear the file input
  506. displayError(fileInput, errorMessage);
  507. }
  508. // Handle image files separately
  509. else if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
  510. compressImage(file).then(compressedFile => {
  511. const dataTransfer = new DataTransfer();
  512. dataTransfer.items.add(compressedFile);
  513. fileInput.files = dataTransfer.files;
  514. // Validate file size after compression
  515. validateFileSize(fileInput);
  516. }).catch(error => {
  517. errorMessage = 'Error compressing image.';
  518. displayError(fileInput, errorMessage);
  519. });
  520. }
  521. // Directly validate PDF file size
  522. else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
  523. errorMessage = 'PDF file size exceeds the 2MB limit.';
  524. fileInput.value = ''; // Clear the file input
  525. displayError(fileInput, errorMessage);
  526. }
  527. else {
  528. console.log('File size is within limit:', file.size, 'bytes');
  529. clearError(fileInput);
  530. }
  531. }
  532. function isDuplicateFile(fileName, currentInput) {
  533. const fileInputs = document.querySelectorAll('.file-upload-field');
  534. for (let input of fileInputs) {
  535. if (input !== currentInput && input.files.length > 0 && input.files[0].name === fileName) {
  536. return true;
  537. }
  538. }
  539. return false;
  540. }
  541. function clearError(fileInput) {
  542. const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
  543. while (errorElements.length > 0) {
  544. errorElements[0].remove();
  545. }
  546. }
  547. // Function to compress image using canvas
  548. function compressImage(file) {
  549. return new Promise((resolve, reject) => {
  550. const reader = new FileReader();
  551. reader.onload = function (event) {
  552. const img = new Image();
  553. img.onload = function () {
  554. const canvas = document.createElement('canvas');
  555. const ctx = canvas.getContext('2d');
  556. const maxSize = 2097152; // 2MB in bytes
  557. let scale = 1;
  558. if (file.size > maxSize) {
  559. scale = Math.sqrt(maxSize / file.size);
  560. }
  561. canvas.width = img.width * scale;
  562. canvas.height = img.height * scale;
  563. ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  564. // Convert canvas content to blob
  565. canvas.toBlob(blob => {
  566. resolve(new File([blob], file.name, {type: 'image/jpeg', lastModified: Date.now()}));
  567. }, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
  568. };
  569. img.src = event.target.result;
  570. };
  571. reader.readAsDataURL(file);
  572. });
  573. }
  574. // Function to validate file size after compression
  575. function validateFileSize(fileInput) {
  576. const file = fileInput.files[0];
  577. if (file && file.size > 2097152) {
  578. //console.log('File size is still greater than 2MB after compression.');
  579. // Handle the situation where the file size is still greater than 2MB
  580. displayError(fileInput, 'File size is still greater than 2MB after compression.');
  581. fileInput.value = ''; // Clear the file input
  582. } else {
  583. //console.log('File size is within limit after compression.');
  584. // Handle the situation where the file size is within the limit
  585. }
  586. }
  587. // Function to display error messages
  588. function displayError(fileInput, errorMessage) {
  589. // Example implementation: show error message near the file input
  590. let errorContainer = fileInput.nextElementSibling;
  591. if (!errorContainer || !errorContainer.classList.contains('error-message')) {
  592. errorContainer = document.createElement('div');
  593. errorContainer.classList.add('error-message');
  594. fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
  595. }
  596. errorContainer.textContent = errorMessage;
  597. }
  598. $(document).ready(function () {
  599. $("#submitEbDetails").click(function () {
  600. var bookid = parseInt($("#bookingId").val());
  601. var startingReading = $("#startingReading").val();
  602. var startingReadingimage = $("#startingReadingimage")[0].files[0]; // Get the file
  603. var formData = new FormData();
  604. formData.append("bookingId", bookid);
  605. formData.append("startingReading", startingReading);
  606. formData.append("startingReadingimage", startingReadingimage);
  607. $.ajax({
  608. type: "POST",
  609. url: "/communityhall/careTaker/api/saveEbDetails",
  610. data: formData,
  611. contentType: false, // Prevent jQuery from setting content type
  612. processData: false, // Prevent jQuery from processing the data
  613. success: function (response) {
  614. $("#EBdestailsModal").modal('hide');
  615. // Show SweetAlert success message
  616. Swal.fire({
  617. title: 'Success!',
  618. text: 'EB details saved successfully.',
  619. icon: 'success',
  620. confirmButtonText: 'OK'
  621. }).then(function() {
  622. // Reload the page after the alert is dismissed
  623. location.reload();
  624. });
  625. },
  626. error: function (xhr, status, error) {
  627. console.error(xhr.responseText);
  628. alert("Error occurred while saving EbDetails.");
  629. }
  630. });
  631. });
  632. });
  633. document.getElementById('EBdetailsModal').addEventListener('hide.bs.modal', function () {
  634. // Clear the startingReading input field
  635. document.getElementById('startingReading').value = '';
  636. // Clear the startingReadingimage file input field
  637. document.getElementById('startingReadingimage').value = '';
  638. });
  639. </script>
  640. </body>
  641. </html>