Victoria Hall Booking for Events
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.

1590 lines
79 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-admin :: head}"></head>
  4. <body>
  5. <!-- Page Container -->
  6. <div id="page-container"
  7. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  8. <!-- Side Overlay aside (right)-->
  9. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  10. <!-- END Side Overlay (right)-->
  11. <!-- Sidebar Nav-->
  12. <nav th:replace="~{fragments/nav-admin :: nav}"></nav>
  13. <!-- END Sidebar -->
  14. <!-- Header -->
  15. <header th:replace="~{fragments/header-admin :: header}"></header>
  16. <!-- END Header -->
  17. <!-- Main Container -->
  18. <main id="main-container">
  19. <!-- END Hero -->
  20. <!-- Page Content -->
  21. <div class="content">
  22. <div class="block block-rounded">
  23. <div class="block-header block-header-default">
  24. <h3 class="block-title"> List of Halls</h3>
  25. <div class="block-options">
  26. <button type="button" class="btn-block-option" id="addButton" onclick="addnewhall()"><i
  27. class="far fa-plus-square"></i> Add New Hall
  28. </button>
  29. </div>
  30. </div>
  31. <div class="block-content p-0">
  32. <div class="p-sm-4 p-0">
  33. <div class="table-responsive">
  34. <table id="halldetailsList"
  35. class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
  36. <thead class="thead-light">
  37. <tr class="table-bordered">
  38. <th class="text-center no-sort">S.No</th>
  39. <th class="text-center" width="20%">Hallname</th>
  40. <th class="text-center">Zone</th>
  41. <th class="text-center">Division</th>
  42. <th class="text-center">Status</th>
  43. <th class="text-center">Hall Images</th>
  44. <th class="text-center">Action</th>
  45. </tr>
  46. </thead>
  47. <tbody>
  48. <!-- Use Thymeleaf to loop through the bookingList -->
  49. <tr th:each="list, i : ${halllist}" class="${halllist}" id="hallRow">
  50. <td th:text="${i.count}">0</td>
  51. <td class="text-center" th:text="${list.hallName}"></td>
  52. <td class="text-center" th:text="${list.zone}"></td>
  53. <td class="text-center" th:text="${list.division}"></td>
  54. <td class="text-center">
  55. <span class="badge bg-success" th:if="${list.isActive}">Active</span>
  56. <span class="badge bg-danger"
  57. th:unless="${list.isActive}">Deactivated</span>
  58. </td>
  59. <td class="text-center">
  60. <a class="view-button">
  61. <span class="badge bg-primary" style="cursor: pointer;"
  62. th:onclick="viewHallImages([[${list.hallId}]])">View</span>
  63. </a>
  64. <a href="javascript:void(0);"
  65. th:onclick="return hallimageEdit([[${list.hallId}]]);"
  66. data-bs-toggle="tooltip" data-bs-animation="true"
  67. data-bs-placement="top" title="Edit Hall Image"><i
  68. class="fas fa-edit" style="font-size: 18px;"></i></a>
  69. </td>
  70. <td class="text-center">
  71. <a href="javascript:void(0);"
  72. th:onclick="return callview([[${list.hallId}]],0);"
  73. data-bs-toggle="tooltip" data-bs-animation="true"
  74. data-bs-placement="top" title="View Hall info"><i class="fa fa-eye"
  75. style="font-size: 18px;"></i></a>
  76. <a href="javascript:void(0);"
  77. th:onclick="return callview([[${list.hallId}]],1);"
  78. data-bs-toggle="tooltip" data-bs-animation="true"
  79. data-bs-placement="top" title="Edit Hall Info"><i
  80. class="fas fa-edit" style="font-size: 18px;"></i></a>
  81. </td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <!-- END Page Content -->
  91. </main>
  92. <!-- END Main Container -->
  93. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  94. <!-- END Footer -->
  95. </div>
  96. <!-- END Page Container -->
  97. <div class="modal fade backdrop" id="infoForm" data-backdrop="static" tabindex="-1" role="dialog"
  98. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  99. <div class="modal-dialog modal-lg" role="document">
  100. <div class="modal-content">
  101. <div class="block block-rounded block-themed block-transparent mb-0">
  102. <div class="block-header bg-primary-dark">
  103. <h3 class="block-title" id="mtitle1">Hall Information</h3>
  104. <div class="block-options">
  105. <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
  106. <i class="fa fa-fw fa-times"></i>
  107. </button>
  108. </div>
  109. </div>
  110. <div class="block-content row">
  111. <input type="hidden" class="form-control text-center" name="id" id="id" disabled/>
  112. <!-- <div class="col-sm-4">
  113. <label class="form-label" for="val-digits">Pet ID:<span class="text-danger">*</span></label>
  114. <input type="hidden" class="form-control text-center" name="uniqid" id="uniqid" disabled />
  115. </div> -->
  116. <div class="col-sm-4">
  117. <label class="form-label" for="hallName">Hall Name:<span class="text-danger"></span></label>
  118. <input type="text" class="form-control text-center" name="hallName" id="hallName"
  119. disabled/>
  120. </div>
  121. <div class="col-sm-4">
  122. <label class="form-label" for="zone">Zone:<span class="text-danger"></span></label>
  123. <input type="text" class="form-control text-center" name="zones" id="zones" disabled/>
  124. </div>
  125. <div class="col-sm-4">
  126. <label class="form-label" for="division">Division:<span class="text-danger"></span></label>
  127. <input type="text" class="form-control text-center" name="divisions" id="divisions"
  128. disabled/>
  129. </div>
  130. <div class="col-sm-4">
  131. <label class="form-label" for="doorNo">Address:<span class="text-danger"></span></label>
  132. <input type="text" class="form-control text-center" name="doorNo" id="doorNo" disabled/>
  133. </div>
  134. <div class="col-sm-4">
  135. <label class="form-label" for="pincode">Pincode:<span class="text-danger"></span></label>
  136. <input type="text" class="form-control text-center" name="pincode" id="pincode" disabled/>
  137. </div>
  138. <div class="col-sm-4">
  139. <label class="form-label" for="caretakerNo">Hall Incharge MobileNumber:<span
  140. class="text-danger"></span></label>
  141. <input type="text" class="form-control text-center" name="hallInchargeMobno"
  142. id="hallInchargeMobno" disabled/>
  143. </div>
  144. <div class="col-sm-4">
  145. <label class="form-label" for="caretakerNo">Hall Incharge Name:<span
  146. class="text-danger"></span></label>
  147. <input type="text" class="form-control text-center" name="InchargeName" id="InchargeName"
  148. disabled/>
  149. </div>
  150. <div class="col-sm-4">
  151. <label class="form-label" for="landmark">Landmark:<span class="text-danger"></span></label>
  152. <input type="text" class="form-control text-center" name="landmark" id="landmark"
  153. disabled/>
  154. </div>
  155. <div class="col-sm-4">
  156. <label class="form-label" for="latitude">Latitude:<span class="text-danger"></span></label>
  157. <input type="text" class="form-control text-center" name="latitude" id="latitude"
  158. disabled/>
  159. </div>
  160. <div class="col-sm-4">
  161. <label class="form-label" for="longitude">Longitude:<span
  162. class="text-danger"></span></label>
  163. <input type="text" class="form-control text-center" name="longitude" id="longitude"
  164. disabled/>
  165. </div>
  166. <div class="col-sm-4">
  167. <label class="form-label" for="depositAmount">Full Day Deposit Amount:<span
  168. class="text-danger"></span></label>
  169. <input type="text" class="form-control text-center" name="depositAmount" id="depositAmount"
  170. disabled/>
  171. </div>
  172. <div class="col-sm-4">
  173. <label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:<span
  174. class="text-danger"></span></label>
  175. <input type="text" class="form-control text-center" name="halfDepositAmount"
  176. id="halfDepositAmount"
  177. disabled/>
  178. </div>
  179. <div class="col-sm-4">
  180. <label class="form-label" for="fullDayAmount">FullDayAmount:<span
  181. class="text-danger"></span></label>
  182. <input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmount"
  183. disabled/>
  184. </div>
  185. <div class="col-sm-4">
  186. <label class="form-label" for="halfDayAmount">HalfDayAmount:<span
  187. class="text-danger"></span></label>
  188. <input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmount"
  189. disabled/>
  190. </div>
  191. <div class="col-sm-4">
  192. <label class="form-label" for="seatingCapacity">ParkingCapacity:<span
  193. class="text-danger"></span></label>
  194. <input type="text" class="form-control text-center" name="parkingCapacity"
  195. id="parkingCapacity" disabled/>
  196. </div>
  197. <!--<div class="mb-4">
  198. <label class="form-label" for="reason">Reason:<span class="text-danger"></span></label>
  199. <textarea class="form-control " name="reason" id="reason" disabled ></textarea>
  200. </div>-->
  201. </div>
  202. </div>
  203. <div class="block-content block-content-full text-end bg-body" id="mbutton1">
  204. <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <!-- Edit Form -->
  210. <div class="modal fade backdrop" id="editForm" data-backdrop="static" tabindex="-1" role="dialog"
  211. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  212. <div class="modal-dialog modal-lg" role="document">
  213. <div class="modal-content">
  214. <form id="ownform" onsubmit="return editsubmit();">
  215. <div class="block block-rounded block-themed block-transparent mb-0">
  216. <div class="block-header bg-primary-dark">
  217. <h3 class="block-title" id="mtitle">Hall Information Edit Form</h3>
  218. <div class="block-options">
  219. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  220. aria-label="Close">
  221. <i class="fa fa-fw fa-times"></i>
  222. </button>
  223. </div>
  224. </div>
  225. <div class="block-content row">
  226. <input type="hidden" class="form-control text-center" name="id" id="idd" disabled/>
  227. <div class="col-sm-4">
  228. <label class="form-label" for="hallName">Hall Name:*<span
  229. class="text-danger"></span></label>
  230. <input type="text" class="form-control text-center" name="hallName" id="hallNam"
  231. required/>
  232. </div>
  233. <div class="col-sm-4">
  234. <label class="form-label" for="zone">Zone:*<span class="text-danger"></span></label>
  235. <select class="form-select" name="zone2" id="zone2" required=""
  236. onchange="getDiv2(this);">
  237. <option value="">---Select Zone---</option>
  238. </select>
  239. </div>
  240. <div class="col-sm-4">
  241. <label class="form-label" for="division">Division:*<span
  242. class="text-danger"></span></label>
  243. <select class="form-select" name="division2" id="division2" required="">
  244. <option value="">---Select Div---</option>
  245. </select>
  246. </div>
  247. <div class="col-sm-4">
  248. <label class="form-label" for="doorNo">Address:*<span
  249. class="text-danger"></span></label>
  250. <input type="text" class="form-control text-center" name="doorNo" id="doornoo"
  251. required/>
  252. </div>
  253. <div class="col-sm-4">
  254. <label class="form-label" for="street">Street:*<span class="text-danger"></span></label>
  255. <input type="text" class="form-control text-center" name="street" id="street"
  256. required/>
  257. </div>
  258. <div class="col-sm-4">
  259. <label class="form-label" for="pincode">Pincode:*<span
  260. class="text-danger"></span></label>
  261. <input type="text" class="form-control text-center" name="pincode" id="pincod"
  262. minlength="6" maxlength="6" pattern="[0-9]{6}" required/>
  263. </div>
  264. <div class="col-sm-4">
  265. <label class="form-label" for="area">Area:*<span class="text-danger"></span></label>
  266. <input type="text" class="form-control text-center" name="area" id="area" required/>
  267. </div>
  268. <div class="col-sm-4">
  269. <label class="form-label" for="InchargeMobno">Hall Incharge Mobile Number:*<span
  270. class="text-danger"></span></label>
  271. <input type="text" class="form-control text-center" name="InchargeMobno"
  272. id="InchargeMobno" minlength="10" maxlength="10" pattern="[0-9]{10}" required/>
  273. </div>
  274. <div class="col-sm-4">
  275. <label class="form-label" for="InchargeNamehall">Hall Incharge Name:*<span
  276. class="text-danger"></span></label>
  277. <input type="text" class="form-control text-center" name="InchargeNamehall"
  278. id="InchargeNamehall" required/>
  279. </div>
  280. <div class="col-sm-4">
  281. <label class="form-label" for="landmark">Landmark:*<span
  282. class="text-danger"></span></label>
  283. <input type="text" class="form-control text-center" name="landmark" id="landmar"
  284. required/>
  285. </div>
  286. <div class="col-sm-4">
  287. <label class="form-label" for="latitude">Latitude:*<span
  288. class="text-danger"></span></label>
  289. <input type="text" class="form-control text-center" name="latitude" id="latitu" required
  290. oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/>
  291. </div>
  292. <div class="col-sm-4">
  293. <label class="form-label" for="longitude">Longitude:*<span
  294. class="text-danger"></span></label>
  295. <input type="text" class="form-control text-center" name="longitude" id="longitu"
  296. required
  297. oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/>
  298. </div>
  299. <div class="col-sm-4">
  300. <label class="form-label" for="depositAmount">Full Day Deposit Amount:*<span
  301. class="text-danger"></span></label>
  302. <input type="text" class="form-control text-center" name="depositAmount" id="depositAmo"
  303. required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  304. </div>
  305. <div class="col-sm-4">
  306. <label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:*<span
  307. class="text-danger"></span></label>
  308. <input type="text" class="form-control text-center" name="halfDepositAmount"
  309. id="halfDepositAmo"
  310. required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  311. </div>
  312. <div class="col-sm-4">
  313. <label class="form-label" for="fullDayAmount">Full Day Amount:*<span
  314. class="text-danger"></span></label>
  315. <input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmo"
  316. required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  317. </div>
  318. <div class="col-sm-4">
  319. <label class="form-label" for="halfDayAmount">Half Day Amount:*<span
  320. class="text-danger"></span></label>
  321. <input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmo"
  322. required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  323. </div>
  324. <div class="col-sm-4">
  325. <label class="form-label" for="parkingCapacity">Parking Capacity:*<span
  326. class="text-danger"></span></label>
  327. <input type="text" class="form-control text-center" name="parkingCapacity"
  328. id="parkingCapaci" required inputmode="numeric"
  329. oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  330. </div>
  331. <div class="col-sm-4">
  332. <label class="form-label" for="seatingCapaci">Seating Capacity:*<span
  333. class="text-danger"></span></label>
  334. <input type="text" class="form-control text-center" name="seatingCapaci"
  335. id="seatingCapaci" required inputmode="numeric"
  336. oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  337. </div>
  338. <div class="col-sm-4">
  339. <label class="form-label" for="ebNumber">Consumer Number:*<span
  340. class="text-danger"></span></label>
  341. <input type="text" class="form-control text-center" name="ebNumber" id="ebNumber"
  342. required minlength="9" maxlength="12" pattern="^[0-9-+*#]{9,12}$"/>
  343. </div>
  344. <div class="col-sm-4">
  345. <label class="form-label" for="ebCostPerUnit">EB Cost Per Unit:*<span
  346. class="text-danger"></span></label>
  347. <input type="text" class="form-control text-center" name="ebCostPerUnit"
  348. id="ebCostPerUnit" required
  349. oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
  350. </div>
  351. <div class="col-sm-4">
  352. <label class="form-label" for="city">City:*<span class="text-danger"></span></label>
  353. <input type="text" class="form-control text-center" name="city" id="city" required/>
  354. </div>
  355. <div class="col-sm-4">
  356. <label class="form-label" for="gst">GST in %:*<span class="text-danger"></span></label>
  357. <input type="text" class="form-control text-center" name="gst" id="updatedgstpercentage"
  358. required/>
  359. </div>
  360. <div class="col-sm-4">
  361. <label class="form-label" for="hallStatus">Hall Status:*<span
  362. class="text-danger"></span></label>
  363. <select class="form-select" name="hallStatus" id="hallStatus" required="">
  364. <option value="1">Activate</option>
  365. <option value="0">Deactivate</option>
  366. </select>
  367. </div>
  368. </div>
  369. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  370. <button type="button" class="btn btn-sm btn-alt-secondary"
  371. data-bs-dismiss="modal">Close
  372. </button>
  373. <button type="submit" class="btn btn-sm btn-primary">Update</button>
  374. </div>
  375. </div>
  376. </form>
  377. </div>
  378. </div>
  379. </div>
  380. <!-- End of Edit form -->
  381. <div class="modal fade backdrop" id="hallDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
  382. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  383. <div class="modal-dialog modal-xl" role="document">
  384. <div class="modal-content">
  385. <form action="/victoriahallbooking/admin/saveHallDetails" id="hallform" method="post"
  386. enctype="multipart/form-data">
  387. <div class="block block-rounded block-themed block-transparent mb-0">
  388. <div class="block-header bg-primary-dark">
  389. <h3 class="block-title" id="mtitle">Add New Hall</h3>
  390. <div class="block-options">
  391. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  392. aria-label="Close">
  393. <i class="fa fa-fw fa-times"></i>
  394. </button>
  395. </div>
  396. </div>
  397. <div class="block-content row">
  398. <div class="col-md-4">
  399. <div class="form-group">
  400. <label class="form-check-label" for="zone1">Select Zone*</label>
  401. <select class="form-select" name="zone1" id="zone1" required=""
  402. onchange="getDiv(this);">
  403. <option val="">---Select Zone---</option>
  404. </select>
  405. </div>
  406. <input type="hidden" class="form-control text-center" name="zone" id="zone" value="0"/>
  407. </div>
  408. <div class="col-md-4">
  409. <div class="form-group">
  410. <label class="form-check-label" for="division">Select Division*</label>
  411. <select class="form-select" name="division" id="division" required="">
  412. <option value="">---Select Div---</option>
  413. </select>
  414. </div>
  415. </div>
  416. <div class="col-md-4">
  417. <div class="form-group">
  418. <label for="hallName">Hall Name:*</label> <input type="text" class="form-control"
  419. id="hallName" name="hallName"
  420. placeholder="Hall Name" required>
  421. </div>
  422. </div>
  423. <div class="col-md-4">
  424. <div class="form-group">
  425. <label for="hallArea">Hall Area (in square feet):*</label> <input type="text"
  426. class="form-control"
  427. id="hallArea"
  428. name="hallArea"
  429. placeholder="Hall Area"
  430. pattern="\d*"
  431. inputmode="numeric"
  432. oninput="this.value = this.value.replace(/[^0-9]/g, '');"
  433. required>
  434. </div>
  435. </div>
  436. <div class="col-md-4">
  437. <div class="form-group">
  438. <label for="doorNo">Door No:*</label>
  439. <input type="text" class="form-control" id="doorNo" name="doorNo" pattern="\d*"
  440. inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
  441. placeholder="Door No" required>
  442. </div>
  443. </div>
  444. <div class="col-md-4">
  445. <div class="form-group">
  446. <label for="street">Street:*</label> <input type="text" class="form-control"
  447. id="street" name="street"
  448. placeholder="Street" required>
  449. </div>
  450. </div>
  451. <div class="col-md-4">
  452. <div class="form-group">
  453. <label for="area">Area:*</label> <input type="text" class="form-control" id="area"
  454. name="area" placeholder="Area" required>
  455. </div>
  456. </div>
  457. <div class="col-md-4">
  458. <div class="form-group">
  459. <label for="city">City:*</label>
  460. <input type="text" class="form-control" id="city" name="city" placeholder="City"
  461. required>
  462. </div>
  463. </div>
  464. <div class="col-md-4">
  465. <div class="form-group">
  466. <label for="pinCode">Pincode:*</label>
  467. <input type="text" class="form-control" id="pinCode" name="pinCode"
  468. placeholder="Pincode" required minlength="6" maxlength="6" pattern="[0-9]{6}"
  469. onkeypress="return event.charCode >= 48 && event.charCode <= 57">
  470. </div>
  471. </div>
  472. <div class="col-md-4">
  473. <div class="form-group">
  474. <label for="hallInchargeName">Caretaker Name:*</label>
  475. <input type="text" class="form-control" id="hallInchargeName"
  476. name="hallInchargeName" placeholder="Caretaker Name" required>
  477. </div>
  478. </div>
  479. <div class="col-md-4">
  480. <div class="form-group">
  481. <label for="hallInchargeNo">Caretaker Number:*</label>
  482. <input type="text" class="form-control" id="hallInchargeNo" name="hallInchargeNo"
  483. placeholder="Caretaker Number" minlength="10" maxlength="10" pattern="[0-9]{10}"
  484. onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
  485. </div>
  486. </div>
  487. <div class="col-md-4">
  488. <div class="form-group">
  489. <label for="landmark">Landmark:*</label>
  490. <input type="text" class="form-control" id="landMark" name="landMark"
  491. placeholder="Landmark" required>
  492. </div>
  493. </div>
  494. <div class="col-md-4">
  495. <div class="form-group">
  496. <label for="latitude">Latitude:*</label>
  497. <input type="text" class="form-control" id="latitude" name="latitude"
  498. placeholder="Latitude" pattern="\d*" inputmode="numeric"
  499. oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"
  500. required>
  501. </div>
  502. </div>
  503. <div class="col-md-4">
  504. <div class="form-group">
  505. <label for="longitude">Longitude:*</label>
  506. <input type="text" class="form-control" id="longitude" name="longitude"
  507. placeholder="Longitude" pattern="\d*" inputmode="numeric"
  508. oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"
  509. required>
  510. </div>
  511. </div>
  512. <div class="col-md-4">
  513. <div class="form-group">
  514. <label for="parkingCapacity">Parking Capacity:*</label> <input type="text"
  515. class="form-control"
  516. id="parkingCapacity"
  517. name="parkingCapacity"
  518. placeholder="Parking Capacity"
  519. pattern="\d*"
  520. inputmode="numeric"
  521. oninput="this.value = this.value.replace(/[^0-9]/g, '');"
  522. required>
  523. </div>
  524. </div>
  525. <div class="col-md-4">
  526. <div class="form-group">
  527. <label for="seatingCapacity">Seating Capacity:*</label> <input type="text"
  528. class="form-control"
  529. id="seatingCapacity"
  530. name="seatingCapacity"
  531. placeholder="Seating Capacity"
  532. pattern="\d*"
  533. inputmode="numeric"
  534. oninput="this.value = this.value.replace(/[^0-9]/g, '');"
  535. required>
  536. </div>
  537. </div>
  538. <div class="col-md-4">
  539. <div class="form-group">
  540. <label for="ednumber">Consumer Number:*</label> <input type="text"
  541. class="form-control"
  542. id="ebNumber" name="ebNumber"
  543. placeholder="Consumer Number"
  544. minlength="9" maxlength="12"
  545. pattern="^[0-9-+*#]{9,12}$"
  546. required>
  547. </div>
  548. </div>
  549. <div class="col-md-4">
  550. <div class="form-group">
  551. <label for="ebCostPerUnit">EB Cost Per Unit:*</label> <input type="text"
  552. class="form-control"
  553. id="ebCostPerUnit"
  554. name="ebCostPerUnit"
  555. placeholder="EB Cost Per Unit"
  556. required
  557. oninput="this.value = this.value.replace(/[^0-9]/g, '');">
  558. </div>
  559. </div>
  560. <div class="col-md-4">
  561. <div class="form-group">
  562. <label for="gst">GST in %:*</label> <input type="text" class="form-control" id="gst"
  563. name="gst" placeholder="GST" required>
  564. </div>
  565. </div>
  566. <br>
  567. <br>
  568. <br>
  569. <div class="row">
  570. <div class="col">
  571. <p class="p1 text-center"><strong>PAYMENT DETAILS</strong></p>
  572. </div>
  573. </div>
  574. <div class="col-md-4">
  575. <div class="form-group">
  576. <label for="depositAmount">Full Day Deposit Amount:*</label>
  577. <input type="text" class="form-control" id="depositAmount" name="depositAmount"
  578. placeholder="Deposit Amount" required
  579. oninput="this.value = this.value.replace(/[^0-9]/g, '');">
  580. </div>
  581. </div>
  582. <div class="col-md-4">
  583. <div class="form-group">
  584. <label for="halfdepositAmt">Half Day Deposit Amount:*</label>
  585. <input type="text" class="form-control" id="halfdepositAmt" name="halfdepositAmt"
  586. placeholder="Deposit Amount" required
  587. oninput="this.value = this.value.replace(/[^0-9]/g, '');">
  588. </div>
  589. </div>
  590. <div class="col-md-4">
  591. <div class="form-group">
  592. <label for="fullDayAmt">Full Day Amount:*</label>
  593. <input type="text" class="form-control" id="fullDayAmt" name="fullDayAmt"
  594. placeholder="Full Day Amount" required
  595. oninput="this.value = this.value.replace(/[^0-9]/g, '');">
  596. </div>
  597. </div>
  598. <div class="col-md-4">
  599. <div class="form-group">
  600. <label for="halfDayAmt">Half Day Amount:*</label> <input type="text"
  601. class="form-control"
  602. id="halfDayAmt"
  603. name="halfDayAmt"
  604. placeholder="Half Day Amount"
  605. required
  606. oninput="this.value = this.value.replace(/[^0-9]/g, '');">
  607. </div>
  608. </div>
  609. <br>
  610. <br>
  611. <br>
  612. <div class="row">
  613. <div class="col">
  614. <p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
  615. </div>
  616. </div>
  617. <div class="row" id="photoInputs">
  618. <div class="col-md-3">
  619. <div class="form-group">
  620. <label for="photo1">Photo 1:* Only .JPEG, .JPG, .PDF </label>
  621. <input type="file" class="form-control hall-image" id="photo1" name="hallImages"
  622. accept="image/jpeg, image/jpg, image/pdf" required>
  623. <small class="text-danger file-size-message"></small>
  624. </div>
  625. </div>
  626. </div>
  627. <div class="row mt-3">
  628. <div class="col">
  629. <button type="button" class="btn btn-primary" id="addPhoto">Add
  630. Photo
  631. </button>
  632. </div>
  633. </div>
  634. </div>
  635. </div>
  636. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  637. <button type="button" class="btn btn-danger" onclick="fieldsreset()" name="reset">Reset</button>
  638. <button type="button" class="btn btn-sm btn-alt-secondary"
  639. data-bs-dismiss="modal">Close
  640. </button>
  641. <button type="submit" class="btn btn-sm btn-primary" onclick="submitForm()">Submit</button>
  642. </div>
  643. </form>
  644. </div>
  645. </div>
  646. </div>
  647. <!-- Modal for Editing Hall Images -->
  648. <!-- Modal for Editing Hall Images -->
  649. <div class="modal fade" id="hallImageEditModal" tabindex="-1" role="dialog"
  650. aria-labelledby="hallImageEditModalLabel" aria-hidden="true">
  651. <div class="modal-dialog" role="document">
  652. <div class="modal-content">
  653. <div class="modal-header">
  654. <h5 class="modal-title" id="hallImageEditModalLabel">Edit Hall Images</h5>
  655. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  656. <span aria-hidden="true">&times;</span>
  657. </button>
  658. </div>
  659. <div class="modal-body">
  660. <form id="hallImageEditForm">
  661. <div id="currentImages" class="mb-3">
  662. <!-- Current images will be loaded here dynamically -->
  663. </div>
  664. <div id="newImagesContainer" class="mb-3">
  665. <!-- Placeholder for new image upload fields -->
  666. </div>
  667. <button type="button" class="btn btn-primary" id="addImageButton">
  668. <i class="bi bi-plus-circle"></i> Add New Image
  669. </button>
  670. <button type="button" class="btn btn-primary" onclick="saveHallImages()" style="display:none"
  671. id="savenewimage">Save new Image
  672. </button>
  673. <input type="hidden" id="hallId" name="hallId">
  674. </form>
  675. </div>
  676. <div class="modal-footer">
  677. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  678. </div>
  679. </div>
  680. </div>
  681. </div>
  682. <!-- Modal -->
  683. <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  684. <div class="modal-dialog" style="max-width: 800px;">
  685. <div class="modal-content">
  686. <div class="modal-header">
  687. <h5 class="modal-title" id="exampleModalLabel">Hall Image</h5>
  688. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  689. </div>
  690. <div class="modal-body">
  691. <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  692. <div class="carousel-inner">
  693. <!-- Slides will be dynamically inserted here -->
  694. </div>
  695. <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
  696. data-bs-slide="prev">
  697. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  698. <span class="visually-hidden">Previous</span>
  699. </button>
  700. <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
  701. data-bs-slide="next">
  702. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  703. <span class="visually-hidden">Next</span>
  704. </button>
  705. </div>
  706. </div>
  707. <div class="modal-footer">
  708. <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
  709. </div>
  710. </div>
  711. </div>
  712. </div>
  713. <div th:replace="~{fragments/resetpassword :: div}"></div>
  714. <script th:replace="~{fragments/loginscript :: script}"></script>
  715. <script type="text/javascript">
  716. getZoneNo();
  717. $(document).ready(function () {
  718. // Load zones when the document is ready
  719. getZoneNo2();
  720. });
  721. let isCompressing = false;
  722. // Attach the validation function to file input change event
  723. $(document).on('change', '.hall-image', function () {
  724. validateFile(this);
  725. });
  726. function validateFile(fileInput) {
  727. const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
  728. const file = fileInput.files[0];
  729. const filePath = fileInput.value;
  730. let errorMessage = '';
  731. // Validate file type
  732. if (!allowedExtensions.exec(filePath)) {
  733. errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
  734. fileInput.value = ''; // Clear the file input
  735. displayError(fileInput, errorMessage);
  736. } else {
  737. // If the file type is valid, clear any previous error message
  738. clearError(fileInput);
  739. // Handle image files separately
  740. if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
  741. compressImage(file).then(compressedFile => {
  742. const dataTransfer = new DataTransfer();
  743. dataTransfer.items.add(compressedFile);
  744. fileInput.files = dataTransfer.files;
  745. // Validate file size after compression
  746. validateFileSize(fileInput);
  747. }).catch(error => {
  748. errorMessage = 'Error compressing image.';
  749. displayError(fileInput, errorMessage);
  750. });
  751. } else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
  752. errorMessage = 'PDF file size exceeds the 2MB limit.';
  753. fileInput.value = ''; // Clear the file input
  754. displayError(fileInput, errorMessage);
  755. } else {
  756. // console.log('File size is within limit:', file.size, 'bytes');
  757. }
  758. }
  759. }
  760. // Function to clear error messages
  761. function clearError(fileInput) {
  762. const errorContainer = fileInput.nextElementSibling;
  763. if (errorContainer && errorContainer.classList.contains('fileerror-message')) {
  764. errorContainer.style.display = 'none';
  765. errorContainer.textContent = ''; // Clear the error message text
  766. }
  767. }
  768. // Function to compress image using canvas
  769. function compressImage(file) {
  770. return new Promise((resolve, reject) => {
  771. const reader = new FileReader();
  772. reader.onload = function (event) {
  773. const img = new Image();
  774. img.onload = function () {
  775. const canvas = document.createElement('canvas');
  776. const ctx = canvas.getContext('2d');
  777. const maxSize = 2097152; // 2MB in bytes
  778. let scale = 1;
  779. if (file.size > maxSize) {
  780. scale = Math.sqrt(maxSize / file.size);
  781. }
  782. canvas.width = img.width * scale;
  783. canvas.height = img.height * scale;
  784. ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  785. // Convert canvas content to blob
  786. canvas.toBlob(blob => {
  787. resolve(new File([blob], file.name, {type: 'image/jpeg', lastModified: Date.now()}));
  788. }, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
  789. };
  790. img.src = event.target.result;
  791. };
  792. reader.readAsDataURL(file);
  793. });
  794. }
  795. // Function to validate file size after compression
  796. function validateFileSize(fileInput) {
  797. const file = fileInput.files[0];
  798. if (file && file.size > 2097152) {
  799. //console.log('File size is still greater than 2MB after compression.');
  800. // Handle the situation where the file size is still greater than 2MB
  801. displayError(fileInput, 'File size is still greater than 2MB after compression.');
  802. fileInput.value = ''; // Clear the file input
  803. } else {
  804. //console.log('File size is within limit after compression.');
  805. // Handle the situation where the file size is within the limit
  806. }
  807. }
  808. // Function to display error messages
  809. // Function to display error messages
  810. function displayError(fileInput, errorMessage) {
  811. let errorContainer = fileInput.nextElementSibling;
  812. if (!errorContainer || !errorContainer.classList.contains('fileerror-message')) {
  813. errorContainer = document.createElement('div');
  814. errorContainer.classList.add('fileerror-message');
  815. fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
  816. }
  817. errorContainer.textContent = errorMessage;
  818. errorContainer.style.display = 'block'; // Ensure the error message is visible
  819. }
  820. callAdd = function () {
  821. window.location.href = '/victoriahallbooking/officer/hall-details';
  822. }
  823. document.addEventListener('DOMContentLoaded', function () {
  824. let imageCount = 0; // Counter to keep track of the number of image fields
  825. // Event listener for the "Add New Image" button
  826. document.getElementById('addImageButton').addEventListener('click', function () {
  827. imageCount++;
  828. $('#savenewimage').show();
  829. // Create a new file input field and add it to the container
  830. const newFileInput = document.createElement('div');
  831. newFileInput.className = 'mb-2';
  832. newFileInput.innerHTML = `
  833. <div class="d-flex align-items-center">
  834. <input type="file" name="newHallImages" class="form-control mt-2 hall-image">&nbsp&nbsp&nbsp
  835. <button type="button" class="btn btn-danger btn-sm ml-2 remove-image">
  836. <i class="fas fa-minus-circle"></i>
  837. </button>
  838. </div>
  839. `;
  840. document.getElementById('newImagesContainer').appendChild(newFileInput);
  841. });
  842. // Event delegation for dynamically added "minus" buttons
  843. document.getElementById('newImagesContainer').addEventListener('click', function (event) {
  844. if (event.target.classList.contains('remove-image') || event.target.parentNode.classList.contains('remove-image')) {
  845. // Find the parent div with class 'mb-2' and remove it
  846. const fileInputDiv = event.target.closest('.mb-2');
  847. if (fileInputDiv) {
  848. fileInputDiv.remove();
  849. }
  850. }
  851. });
  852. });
  853. // Clear file input fields when the modal is shown
  854. $('#hallImageEditModal').on('show.bs.modal', function () {
  855. $('#hallImageEditForm')[0].reset(); // Reset the form to clear previous inputs
  856. $('#newImagesContainer').empty(); // Clear new images
  857. // Clear any file input fields in the form
  858. $('#hallImageEditForm').find('input[type="file"]').val('');
  859. });
  860. function hallimageEdit(hallId) {
  861. $.ajax({
  862. type: "GET",
  863. url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId,
  864. success: function (response) {
  865. //console.log(response);
  866. $('#hallId').val(response.hallId);
  867. // Clear current images
  868. $('#currentImages').empty();
  869. // Load current images with update option
  870. if (response.hallImagesList && response.hallImagesList.length > 0) {
  871. response.hallImagesList.forEach(function (image, index) {
  872. let deleteButton = '';
  873. // If it's not the first (primary) image, show the delete button
  874. if (index > 0) {
  875. deleteButton = `<button type="button" class="btn btn-danger btn-sm ml-2 mt-2" onclick="deleteHallImage(${image.hallImageId})">Delete</button>`;
  876. }
  877. $('#currentImages').append(`
  878. <div class="mb-2" id="image-${image.hallImageId}">
  879. <img src="${image.hallImage}" alt="Hall Image" class="img-thumbnail" width="100">
  880. <input type="file" class="form-control mt-2 hall-image" id="newImage-${image.hallImageId}">
  881. <button type="button" class="btn btn-primary btn-sm mt-2" onclick="updateHallImage(${image.hallImageId})">Update</button>
  882. ${deleteButton}
  883. </div>
  884. `);
  885. });
  886. }
  887. // Show the modal
  888. $('#hallImageEditModal').modal('show');
  889. },
  890. error: function (xhr, status, error) {
  891. console.error(xhr.responseText);
  892. // Handle error here
  893. }
  894. });
  895. }
  896. function updateHallImage(hallImageId) {
  897. const fileInput = document.getElementById('newImage-' + hallImageId);
  898. const file = fileInput.files[0];
  899. if (!file) {
  900. Swal.fire({
  901. icon: 'warning',
  902. title: 'No Image Selected',
  903. text: 'Please select an image to update.',
  904. });
  905. return;
  906. }
  907. const formData = new FormData();
  908. formData.append('hallImage', file);
  909. $.ajax({
  910. type: "PUT",
  911. url: '/victoriahallbooking/admin/api/updateHallImage/' + hallImageId,
  912. data: formData,
  913. processData: false,
  914. contentType: false,
  915. success: function (response) {
  916. //console.log(response);
  917. // Optionally update the UI with the new image
  918. $('#image-' + hallImageId + ' img').attr('src', response.newImageUrl);
  919. Swal.fire({
  920. icon: 'success',
  921. title: 'Updated!',
  922. text: 'Image updated successfully.',
  923. timer: 2000, // Optional: Auto-close after 2 seconds
  924. showConfirmButton: false
  925. })
  926. },
  927. error: function (xhr, status, error) {
  928. console.error(xhr.responseText);
  929. Swal.fire({
  930. icon: 'error',
  931. title: 'Update Failed',
  932. text: 'There was an issue updating the image.',
  933. timer: 2000, // Optional: Auto-close after 2 seconds
  934. showConfirmButton: false
  935. });
  936. }
  937. });
  938. }
  939. function saveHallImages() {
  940. var formData = new FormData();
  941. var fileInputs = $('#hallImageEditForm').find('input[type="file"]');
  942. var hasValidFile = false;
  943. // Append hallId to formData
  944. var hallId = $('#hallId').val();
  945. if (hallId) {
  946. formData.append('hallId', hallId);
  947. } else {
  948. Swal.fire({
  949. icon: 'error',
  950. title: 'Error',
  951. text: 'Hall ID is missing.',
  952. });
  953. return;
  954. }
  955. // Iterate over all file inputs
  956. fileInputs.each(function () {
  957. if (this.files.length > 0) {
  958. // Add non-empty files to FormData
  959. for (var i = 0; i < this.files.length; i++) {
  960. formData.append(this.name, this.files[i]);
  961. }
  962. hasValidFile = true;
  963. }
  964. });
  965. if (!hasValidFile) {
  966. Swal.fire({
  967. icon: 'warning',
  968. title: 'No Images Selected',
  969. text: 'Please upload at least one new image.',
  970. });
  971. return;
  972. }
  973. $.ajax({
  974. type: "POST",
  975. url: '/victoriahallbooking/admin/api/savenewHallImages',
  976. data: formData,
  977. contentType: false,
  978. processData: false,
  979. success: function (response) {
  980. // Handle success - reload or update the UI accordingly
  981. $('#hallImageEditModal').modal('hide');
  982. Swal.fire({
  983. icon: 'success',
  984. title: 'Success',
  985. text: 'Hall images updated successfully!',
  986. }).then(() => {
  987. // Reload the page after the success message
  988. window.location.reload();
  989. });
  990. },
  991. error: function (xhr, status, error) {
  992. console.error(xhr.responseText);
  993. Swal.fire({
  994. icon: 'error',
  995. title: 'Error',
  996. text: 'An error occurred while updating hall images.',
  997. });
  998. }
  999. });
  1000. }
  1001. function deleteHallImage(hallImageId) {
  1002. Swal.fire({
  1003. title: 'Are you sure?',
  1004. text: "You won't be able to revert this!",
  1005. icon: 'warning',
  1006. showCancelButton: true,
  1007. confirmButtonColor: '#3085d6',
  1008. cancelButtonColor: '#d33',
  1009. confirmButtonText: 'Yes, delete it!',
  1010. cancelButtonText: 'Cancel'
  1011. }).then((result) => {
  1012. if (result.isConfirmed) {
  1013. $.ajax({
  1014. type: "DELETE",
  1015. url: '/victoriahallbooking/admin/api/deleteHallImage/' + hallImageId,
  1016. success: function (response) {
  1017. //console.log(response);
  1018. // Remove the image from the UI
  1019. $('#image-' + hallImageId).remove();
  1020. Swal.fire({
  1021. icon: 'success',
  1022. title: 'Deleted!',
  1023. text: 'Your image has been deleted.',
  1024. timer: 2000, // Optional: Auto-close after 2 seconds
  1025. showConfirmButton: false
  1026. })
  1027. },
  1028. error: function (xhr, status, error) {
  1029. //console.error(xhr.responseText);
  1030. Swal.fire(
  1031. 'Error!',
  1032. 'There was an issue deleting the image.',
  1033. 'error'
  1034. );
  1035. }
  1036. });
  1037. }
  1038. });
  1039. }
  1040. function callview(hallId, i) {
  1041. $.ajax({
  1042. type: "GET",
  1043. url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId,
  1044. success: function (response) {
  1045. if (i === 0) {
  1046. showHallInfo(response);
  1047. } else if (i === 1) {
  1048. getZoneNo2().then(function () {
  1049. edit(response);
  1050. }).catch(function (error) {
  1051. console.error("Failed to load zones.", error);
  1052. });
  1053. }
  1054. },
  1055. error: function (xhr, status, error) {
  1056. console.error(xhr.responseText);
  1057. // Handle error here
  1058. }
  1059. });
  1060. }
  1061. function showHallInfo(list) {
  1062. $('#infoForm').modal({
  1063. backdrop: 'static',
  1064. keyboard: false
  1065. });
  1066. document.getElementById("id").value = list.hallId;
  1067. document.getElementById("hallName").value = list.hallName;
  1068. document.getElementById("zones").value = list.zone;
  1069. document.getElementById("divisions").value = list.division;
  1070. document.getElementById("doorNo").value = list.doorNo;
  1071. document.getElementById("pincode").value = list.pinCode;
  1072. document.getElementById("hallInchargeMobno").value = list.hallInchargeMobno;
  1073. document.getElementById("InchargeName").value = list.hallInchargeName;
  1074. document.getElementById("landmark").value = list.landMark;
  1075. document.getElementById("latitude").value = list.latitude;
  1076. document.getElementById("longitude").value = list.longitude;
  1077. document.getElementById("depositAmount").value = list.depositAmount;
  1078. document.getElementById("halfDepositAmount").value = list.halfDepositAmount;
  1079. document.getElementById("fullDayAmount").value = list.fullDayRent;
  1080. document.getElementById("halfDayAmount").value = list.halfDayRent;
  1081. document.getElementById("parkingCapacity").value = list.parkingCapacity;
  1082. $('#infoForm').modal('show');
  1083. return false;
  1084. }
  1085. function edit(list) {
  1086. $('#editForm').modal({
  1087. backdrop: 'static',
  1088. keyboard: false
  1089. });
  1090. // Populate form fields with data
  1091. $('#idd').val(list.hallId);
  1092. $('#hallNam').val(list.hallName);
  1093. $('#zone2 option').each(function () {
  1094. if ($(this).text().trim() === list.zone) {
  1095. $('#zone2').val($(this).val());
  1096. }
  1097. });
  1098. $('#street').val(list.street);
  1099. getDiv2({value: $('#zone2').val()}).then(function () {
  1100. $('#division2 option').each(function () {
  1101. if ($(this).text().trim() === list.division) {
  1102. $('#division2').val($(this).val());
  1103. }
  1104. });
  1105. }).catch(function (error) {
  1106. console.error("Failed to load divisions.", error);
  1107. });
  1108. $('#doornoo').val(list.doorNo);
  1109. $('#pincod').val(list.pinCode);
  1110. $('#area').val(list.area);
  1111. $('#InchargeMobno').val(list.hallInchargeMobno);
  1112. $('#InchargeNamehall').val(list.hallInchargeName);
  1113. $('#landmar').val(list.landMark);
  1114. $('#latitu').val(list.latitude);
  1115. $('#longitu').val(list.longitude);
  1116. $('#depositAmo').val(list.depositAmount);
  1117. $('#halfDepositAmo').val(list.halfDepositAmount);
  1118. $('#fullDayAmo').val(list.fullDayRent);
  1119. $('#halfDayAmo').val(list.halfDayRent);
  1120. $('#parkingCapaci').val(list.parkingCapacity);
  1121. $('#seatingCapaci').val(list.seatingCapacity);
  1122. $('#ebNumber').val(list.ebNumber);
  1123. $('#ebCostPerUnit').val(list.ebCostPerUnit);
  1124. $('#city').val(list.city);
  1125. $('#updatedgstpercentage').val(list.gst);
  1126. $('#hallStatus').val(list.active ? '1' : '0');
  1127. // Display existing images
  1128. //document.getElementById("photo1image").src = "data:image/jpeg;base64," + list.hallImagesList.photo1;
  1129. $('#editForm').modal('show');
  1130. }
  1131. function editsubmit() {
  1132. var hallId = document.getElementById("idd").value;
  1133. var hallName = document.getElementById("hallNam").value;
  1134. if (hallName.trim() === '' || hallName === undefined) {
  1135. return false;
  1136. }
  1137. var zoneLabel = $('#zone2 option:selected').text();
  1138. var divisionLabel = $('#division2 option:selected').text();
  1139. var doorNo = document.getElementById("doornoo").value;
  1140. var street = document.getElementById("street").value;
  1141. var pinCode = document.getElementById("pincod").value;
  1142. var area = document.getElementById("area").value;
  1143. var hallInchargeMobno = document.getElementById("InchargeMobno").value;
  1144. var hallInchargeName = document.getElementById("InchargeNamehall").value;
  1145. var landMark = document.getElementById("landmar").value;
  1146. var latitude = document.getElementById("latitu").value;
  1147. var longitude = document.getElementById("longitu").value;
  1148. var depositamount = document.getElementById("depositAmo").value;
  1149. var halfDepositamount = document.getElementById("halfDepositAmo").value;
  1150. var fullday = document.getElementById("fullDayAmo").value;
  1151. var halfday = document.getElementById("halfDayAmo").value;
  1152. var parkingCapacity = document.getElementById("parkingCapaci").value;
  1153. var seatingCapacity = document.getElementById("seatingCapaci").value;
  1154. var ebNumber = document.getElementById("ebNumber").value;
  1155. var ebCostPerUnit = document.getElementById("ebCostPerUnit").value;
  1156. var city = document.getElementById("city").value;
  1157. var gst = document.getElementById("updatedgstpercentage").value;
  1158. var isActive = document.getElementById("hallStatus").value;
  1159. var formData = new FormData();
  1160. formData.append("hallId", hallId);
  1161. formData.append("hallName", hallName);
  1162. formData.append("zone", zoneLabel);
  1163. formData.append("division", divisionLabel);
  1164. formData.append("doorNo", doorNo);
  1165. formData.append("street", street);
  1166. formData.append("pinCode", pinCode);
  1167. formData.append("area", area);
  1168. formData.append("hallInchargeMobno", hallInchargeMobno);
  1169. formData.append("hallInchargeName", hallInchargeName);
  1170. formData.append("landMark", landMark);
  1171. formData.append("latitude", latitude);
  1172. formData.append("longitude", longitude);
  1173. formData.append("depositAmount", parseFloat(depositamount));
  1174. formData.append("halfDepositAmount", parseFloat(halfDepositamount));
  1175. formData.append("fullDayRent", parseFloat(fullday));
  1176. formData.append("halfDayRent", parseFloat(halfday));
  1177. formData.append("parkingCapacity", parkingCapacity);
  1178. formData.append("seatingCapacity", parseInt(seatingCapacity));
  1179. formData.append("ebNumber", ebNumber);
  1180. formData.append("ebCostPerUnit", ebCostPerUnit);
  1181. formData.append("city", city);
  1182. formData.append("gst", gst);
  1183. formData.append("isActive", isActive);
  1184. $.ajax({
  1185. type: "POST",
  1186. url: '/victoriahallbooking/admin/api/updateHallDetails',
  1187. contentType: false,
  1188. processData: false,
  1189. data: formData,
  1190. dataType: 'text',
  1191. success: function (bodyMessage) {
  1192. if (bodyMessage.trim() == "Success") {
  1193. Swal.fire(
  1194. 'Success!',
  1195. 'Successfully updated.',
  1196. 'success'
  1197. ).then(() => {
  1198. location.reload();
  1199. });
  1200. } else {
  1201. Swal.fire(
  1202. 'Error!',
  1203. 'An error occurred while updating hall details.',
  1204. 'error'
  1205. );
  1206. }
  1207. },
  1208. error: function () {
  1209. Swal.fire(
  1210. 'Error!',
  1211. 'An error occurred while updating hall details.',
  1212. 'error'
  1213. );
  1214. }
  1215. });
  1216. return false;
  1217. }
  1218. function addnewhall() {
  1219. $('#hallDetailsModal').modal('show');
  1220. }
  1221. // Function to close the modal when the user clicks outside of it
  1222. window.onclick = function (event) {
  1223. var modal = document.getElementById("hallDetailsModal");
  1224. if (event.target == modal) {
  1225. modal.style.display = "none";
  1226. }
  1227. };
  1228. $(document).ready(function () {
  1229. // Add photo input
  1230. $('#addPhoto').click(function () {
  1231. var lastPhotoInput = $('#photoInputs').children().last();
  1232. var newPhotoInput = lastPhotoInput.clone();
  1233. var photoCount = $('#photoInputs').children().length + 1;
  1234. // Clear the value of the cloned input field
  1235. newPhotoInput.find('.hall-image').val('');
  1236. newPhotoInput.find('.hall-image').attr('id', 'photo' + photoCount);
  1237. newPhotoInput.find('label').attr('for', 'photo' + photoCount).text('Photo ' + photoCount + ':');
  1238. // Check if delete button already exists before appending
  1239. if (!newPhotoInput.find('.delete-photo').length) {
  1240. newPhotoInput.append('<div class="input-group-append"><button type="button" class="btn btn-danger delete-photo"><i class="fas fa-trash"></i></button></div>');
  1241. }
  1242. $('#photoInputs').append(newPhotoInput);
  1243. });
  1244. // Delete photo input
  1245. $(document).on('click', '.delete-photo', function () {
  1246. $(this).closest('.col-md-3').remove();
  1247. // Update photo labels after deletion
  1248. $('#photoInputs .col-md-3').each(function (index) {
  1249. $(this).find('label').text('Photo ' + (index + 1) + ':');
  1250. $(this).find('.hall-image').attr('id', 'photo' + (index + 1));
  1251. });
  1252. });
  1253. });
  1254. function viewHallImages(hallId) {
  1255. $.ajax({
  1256. type: "GET",
  1257. url: '/victoriahallbooking/admin/api/getImageById',
  1258. data: {
  1259. 'hallId': hallId
  1260. },
  1261. success: function (res) {
  1262. if (res && res.length > 0) {
  1263. getHallImagesById(res);
  1264. } else {
  1265. console.error('No images found for hallId:', hallId);
  1266. }
  1267. },
  1268. error: function (xhr, status, error) {
  1269. console.error('Error fetching images:', error);
  1270. }
  1271. });
  1272. }
  1273. function getHallImagesById(images) {
  1274. const modalSlidesContainer = document.querySelector('.carousel-inner');
  1275. modalSlidesContainer.innerHTML = ''; // Clear existing slides
  1276. images.forEach((image, index) => {
  1277. const slide = document.createElement('div');
  1278. slide.classList.add('carousel-item');
  1279. if (index === 0) {
  1280. slide.classList.add('active');
  1281. }
  1282. const img = document.createElement('img');
  1283. img.src = image.hallImage;
  1284. // img.alt = Slide ${image.hallImageId};
  1285. img.alt = `Slide ${image.hallImageId}`;
  1286. img.style.maxHeight = '550px'; // Adjust image size
  1287. img.style.width = 'auto'; // Maintain aspect ratio
  1288. slide.appendChild(img);
  1289. modalSlidesContainer.appendChild(slide);
  1290. });
  1291. $('#exampleModal').modal('show'); // Show Bootstrap modal
  1292. }
  1293. //Getting Zone No
  1294. function getZoneNo() {
  1295. $.ajax({
  1296. type: "GET",
  1297. url: '/victoriahallbooking/user/api/getZoneNo',
  1298. dataType: 'json',
  1299. success: function (bodyMessage) {
  1300. var tempJson = bodyMessage['ZoneDetailsResult'];
  1301. //alert("tempJson---:"+tempJson);
  1302. for (var i = 0; i < tempJson.length; i++) {
  1303. var tempJsonValue = tempJson[i]['ZoneId'];
  1304. //var tempJsonValue = tempJson[i]['ZoneName'].replace('N', '');
  1305. var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
  1306. $('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  1307. }
  1308. }, error: function (e, ts, et) {
  1309. // alert(ts)
  1310. }
  1311. });
  1312. }
  1313. //Getting Div
  1314. function getDiv($this) {
  1315. $('#division option:not(:first)').remove();
  1316. var zoneId = $this.value;
  1317. var zone = $this.value;
  1318. //alert("zone---:"+zone);
  1319. $.ajax({
  1320. type: "GET",
  1321. url: '/victoriahallbooking/user/api/getDiv',
  1322. data: {'zoneId': zoneId},
  1323. dataType: 'json',
  1324. success: function (bodyMessage) {
  1325. var tempJson = bodyMessage['DivisionDetailsResult'];
  1326. for (var i = 0; i < tempJson.length; i++) {
  1327. var tempJsonValue = tempJson[i]['DivisionName'].replace('N', '');
  1328. //var tempJsonValue = tempJson[i]['DivisionId'];
  1329. var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', '');
  1330. $('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  1331. }
  1332. }, error: function (e, ts, et) {
  1333. // alert(ts)
  1334. }
  1335. });
  1336. }
  1337. function submitForm() {
  1338. var selectedZone = document.getElementById("zone1");
  1339. var selectedZoneValue = selectedZone.value;
  1340. // Check if a zone is selected
  1341. if (selectedZoneValue === "" || selectedZoneValue === "---Select Zone---") {
  1342. selectedZone.setCustomValidity("Please select a zone.");
  1343. selectedZone.reportValidity();
  1344. return false; // Prevent form submission
  1345. } else {
  1346. selectedZone.setCustomValidity(""); // Clear any previous error message
  1347. }
  1348. // Set the hidden zone field value
  1349. document.getElementById("zone").value = selectedZone.options[selectedZone.selectedIndex].innerHTML;
  1350. // Form is valid, allow submission
  1351. return true;
  1352. }
  1353. $(document).ready(
  1354. function () {
  1355. var buttons = [{
  1356. extend: 'pageLength',
  1357. className: 'btn btn-primary'
  1358. }, {
  1359. title: 'Data export',
  1360. extend: 'copyHtml5',
  1361. text: 'Copy',
  1362. className: 'btn btn-primary',
  1363. id: 'copyBtn'
  1364. }, {
  1365. extend: 'excelHtml5',
  1366. text: 'Excel',
  1367. className: 'btn btn-primary',
  1368. id: 'excelBtn'
  1369. }, {
  1370. extend: 'csvHtml5',
  1371. text: 'CSV',
  1372. className: 'btn btn-primary',
  1373. id: 'csvBtn'
  1374. }, {
  1375. extend: 'pdfHtml5',
  1376. text: 'PDF',
  1377. className: 'btn btn-primary',
  1378. id: 'pdfBtn'
  1379. },
  1380. ];
  1381. $('#halldetailsList').DataTable(
  1382. {
  1383. dom: 'Bftip',
  1384. columnDefs: [{
  1385. targets: 'no-sort',
  1386. orderable: false
  1387. }],
  1388. lengthMenu: [
  1389. [50, 100, 200, 500, -1],
  1390. ['50 rows', '100 rows', '200 rows',
  1391. '500 rows', 'Show all']],
  1392. scrollY: '50vh',
  1393. fixedColumns: {
  1394. left: 1,
  1395. right: 1
  1396. },
  1397. buttons: [buttons],
  1398. responsive: true,
  1399. searching: true, // Enable search
  1400. select: false,
  1401. processing: false,
  1402. });
  1403. // Link the search input to DataTable
  1404. $('#searchInput').on('keyup', function () {
  1405. dataTable.search(this.value).draw();
  1406. });
  1407. });
  1408. function fieldsreset() {
  1409. // Select the form element
  1410. var form = document.getElementById('hallform');
  1411. // Check if form exists
  1412. if (form) {
  1413. // Clear all input fields
  1414. $(form).find('input').val('');
  1415. $(form).find('textarea').val('');
  1416. $(form).find('select').prop('selectedIndex', 0);
  1417. // Remove any dynamically added error messages and classes
  1418. $('.error-message').remove();
  1419. $('.file-upload-field').removeClass('error');
  1420. // Remove any dynamically added photo inputs
  1421. $('#photoInputs .hall-image').not(':first').parent().parent().remove();
  1422. } else {
  1423. console.error('Form not found');
  1424. }
  1425. }
  1426. $('#hallDetailsModal').on('hidden.bs.modal', function () {
  1427. fieldsreset(); // Call resetFormFields function
  1428. });
  1429. function getZoneNo2() {
  1430. return new Promise(function (resolve, reject) {
  1431. $.ajax({
  1432. type: "GET",
  1433. url: '/victoriahallbooking/user/api/getZoneNo',
  1434. dataType: 'json',
  1435. success: function (bodyMessage) {
  1436. var tempJson = bodyMessage['ZoneDetailsResult'];
  1437. $('#zone2').empty().append("<option value=''>---Select Zone---</option>");
  1438. for (var i = 0; i < tempJson.length; i++) {
  1439. var tempJsonValue = tempJson[i]['ZoneId'];
  1440. var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
  1441. //console.log("Appending option - value:", tempJsonValue, "label:", tempJsonLabel);
  1442. $('#zone2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  1443. }
  1444. resolve();
  1445. },
  1446. error: function (e, ts, et) {
  1447. console.error(ts);
  1448. reject();
  1449. }
  1450. });
  1451. });
  1452. }
  1453. function getDiv2($this) {
  1454. return new Promise(function (resolve, reject) {
  1455. $('#division2 option:not(:first)').remove();
  1456. var zoneId = $this.value;
  1457. $.ajax({
  1458. type: "GET",
  1459. url: '/victoriahallbooking/user/api/getDiv',
  1460. data: {'zoneId': zoneId},
  1461. dataType: 'json',
  1462. success: function (bodyMessage) {
  1463. var tempJson = bodyMessage['DivisionDetailsResult'];
  1464. for (var i = 0; i < tempJson.length; i++) {
  1465. var tempJsonValue = tempJson[i]['DivisionId']; // Assuming DivisionId is used for value
  1466. var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', '');
  1467. //console.log("Appending division option - value:", tempJsonValue, "label:", tempJsonLabel);
  1468. $('#division2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
  1469. }
  1470. resolve();
  1471. },
  1472. error: function (e, ts, et) {
  1473. console.error(ts);
  1474. reject();
  1475. }
  1476. });
  1477. });
  1478. }
  1479. </script>
  1480. </body>
  1481. </html>