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.

1484 lines
53 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  3. <head th:replace="~{fragments/head :: head}"></head>
  4. <!--<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  5. <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  6. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
  7. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
  8. <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>-->
  9. <!--datatables-->
  10. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  11. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
  12. <!-- Stylesheets -->
  13. <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" />
  14. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" />
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />-->
  16. <!-- JavaScript -->
  17. <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>-->
  19. <!-- Stylesheets -->
  20. <link rel="stylesheet" type="text/css" href="css\MarkerCluster.css">
  21. <link rel="stylesheet" type="text/css" href="css\MarkerCluster.Default.css">
  22. <link rel="stylesheet" type="text/css" href="css\leaflet.css">
  23. <!-- JavaScript -->
  24. <script type="text/javascript" src="js\leaflet.js"></script>
  25. <script type="text/javascript" src="js\leaflet.markercluster.js"></script>
  26. <style>
  27. /* Hide button and div2 on small screens */
  28. @media only screen and (max-width: 768px) {
  29. #toggleButton {
  30. display: none;
  31. }
  32. #div2 {
  33. display: none;
  34. }
  35. .table-container {
  36. height: 300px;
  37. /* Adjust height as needed */
  38. overflow-y: auto;
  39. }
  40. }
  41. /* Optional CSS styling */
  42. .thumbnail {
  43. cursor: pointer;
  44. }
  45. .modal-dialog {
  46. margin: 30px auto;
  47. }
  48. .carousel-item img {
  49. width: 100%;
  50. height: auto;
  51. }
  52. /* Custom CSS to change the color of carousel controls */
  53. .carousel-control-prev,
  54. .carousel-control-next {
  55. color: black;
  56. }
  57. #enteredDetails {
  58. display: none
  59. }
  60. .card {
  61. max-height: 75%;
  62. }
  63. #scrollToTopBtn {
  64. display: none;
  65. position: fixed;
  66. bottom: 20px;
  67. right: 30px;
  68. height: 45px;
  69. width: 45px;
  70. z-index: 99;
  71. border: none;
  72. outline: none;
  73. background-color: #FA7F08;
  74. color: white;
  75. cursor: pointer;
  76. padding: 15px;
  77. border-radius: 50%;
  78. opacity: 50%;
  79. }
  80. #scrollToTopBtn:hover {
  81. background-color: #22BABB;
  82. opacity: 100%;
  83. }
  84. .required-field {
  85. color: red;
  86. }
  87. #amounttable {
  88. border-collapse: separate;
  89. border-spacing: 5px;
  90. /* Set cell spacing */
  91. margin-bottom: 5px;
  92. /* margin-left:30px; */
  93. }
  94. #amounttable th {
  95. padding: 2px;
  96. /* Set cell padding */
  97. border: none;
  98. text-align: center;
  99. padding: 0px 1px;
  100. width: 65%;
  101. font-size: 12px;
  102. }
  103. #amounttable td {
  104. padding: 2px;
  105. /* Set cell padding */
  106. border: none;
  107. text-align: left;
  108. width: 35%;
  109. font-size: 12px;
  110. }
  111. .swal2-container {
  112. z-index: 9999999999999 !important;
  113. /* Adjust this value if needed */
  114. }
  115. .image-container {
  116. overflow: hidden;
  117. white-space: nowrap;
  118. }
  119. .image-container img {
  120. display: inline-block;
  121. margin-right: 10px;
  122. /* Adjust as needed */
  123. animation: scrollImages 5s linear infinite;
  124. /* Adjust duration and timing function as needed */
  125. }
  126. @keyframes scrollImages {
  127. 0% {
  128. transform: translateX(0);
  129. }
  130. 100% {
  131. transform: translateX(-100%);
  132. }
  133. }
  134. #map {
  135. height: 700px;
  136. /* Adjust height as needed */
  137. width: 100%;
  138. position: relative;
  139. overflow: hidden;
  140. max-width: 100%;
  141. /* Ensure the map doesn't overflow its container */
  142. }
  143. .border-primary {
  144. border-left: white;
  145. }
  146. .swal2-container {
  147. z-index: 9999999999999 !important;
  148. /* Adjust this value if needed */
  149. }
  150. .carousel-inner img {
  151. object-fit: cover; /* Ensures images scale uniformly */
  152. height: 250px; /* Fixed height */
  153. width: 300px; /* Fixed width */
  154. margin: auto; /* Centers the image */
  155. margin-top: 20px;
  156. }
  157. .carousel {
  158. display: flex;
  159. justify-content: center; /* Center the carousel itself */
  160. }
  161. .carousel-image {
  162. max-height: 300px;
  163. /* Adjust height as needed */
  164. width: auto;
  165. margin: 0 auto;
  166. /* Center the image horizontally */
  167. }
  168. </style>
  169. <body>
  170. <!-- Pre-loader start -->
  171. <div class="theme-loader">
  172. <div class="ball-scale">
  173. <div class='contain'>
  174. <div class="ring">
  175. <div class="frame"></div>
  176. </div>
  177. <div class="ring">
  178. <div class="frame"></div>
  179. </div>
  180. <div class="ring">
  181. <div class="frame"></div>
  182. </div>
  183. <div class="ring">
  184. <div class="frame"></div>
  185. </div>
  186. <div class="ring">
  187. <div class="frame"></div>
  188. </div>
  189. <div class="ring">
  190. <div class="frame"></div>
  191. </div>
  192. <div class="ring">
  193. <div class="frame"></div>
  194. </div>
  195. <div class="ring">
  196. <div class="frame"></div>
  197. </div>
  198. <div class="ring">
  199. <div class="frame"></div>
  200. </div>
  201. <div class="ring">
  202. <div class="frame"></div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <!-- Pre-loader end -->
  208. <div id="pcoded" class="pcoded">
  209. <div class="pcoded-container">
  210. <!-- Menu header start -->
  211. <nav th:replace="~{fragments/nav-user :: nav}"></nav>
  212. <!-- Menu header end -->
  213. <div class="pcoded-main-container">
  214. <nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
  215. <div class="pcoded-wrapper">
  216. <div class="pcoded-content">
  217. <div class="pcoded-inner-content">
  218. <!-- Main-body start -->
  219. <div class="main-body">
  220. <div class="page-wrapper">
  221. <!-- Page body start -->
  222. <div class="page-body" style="padding-top: 3%;">
  223. <div id="map" style="display:none;"><br></div>
  224. <div th:if="${newnotification != null && !newnotification.isEmpty()}" id="notification">
  225. <marquee
  226. width="100%"
  227. direction="left"
  228. height="auto"
  229. style="color:red"
  230. onmouseover="this.stop();"
  231. onmouseout="this.start();">
  232. <i class="fas fa-bell"></i> * <span th:text="${newnotification}"></span> *
  233. </marquee>
  234. </div>
  235. <div class="row" id="dashboardbody">
  236. <div class="col-sm-12">
  237. <div class="card">
  238. <!--Check Availability Start-->
  239. <div class="z-depth-0">
  240. <div class="card border-dark mb-3">
  241. <div class="card-body">
  242. <div class="form-row col-sm-12 col-md-12 col-lg-12"
  243. id="formrow">
  244. <div class="col-sm-2">
  245. <label for="fromdate">From Date:<span
  246. class="required-field">*</span></label>
  247. <input class="form-control"
  248. th:value="${fromDate}" name="fromdate"
  249. type="date" id="fromdate"
  250. placeholder="dd-mm-yyyy">
  251. </div>
  252. <div class="col-sm-2">
  253. <label for="todate">To Date:<span
  254. class="required-field">*</span></label>
  255. <select class="form-control" name="todate"
  256. id="todate">
  257. <option th:value="${toDate}"
  258. th:text="${toDate}" selected></option>
  259. </select>
  260. </div>
  261. <div class="col-sm-2">
  262. <label for="startingslot">Starting Slot:<span
  263. class="required-field">*</span></label>
  264. <select class="form-control" id="startingslot"
  265. name="startingslot"
  266. aria-label="Starting Slot">
  267. <option value="0"
  268. th:selected="${startingSlot == 'Select'}">
  269. Select</option>
  270. <option value="1"
  271. th:selected="${startingSlot == 'Morning'}">
  272. Morning</option>
  273. <option value="2"
  274. th:selected="${startingSlot == 'Evening'}">
  275. Evening</option>
  276. </select>
  277. </div>
  278. <div class="col-sm-2">
  279. <label for="endingslot">Ending Slot:<span
  280. class="required-field">*</span></label>
  281. <select class="form-control" id="endingslot"
  282. name="endingslot" aria-label="Ending Slot">
  283. <option value="0"
  284. th:selected="${endingSlot == 'Select'}">
  285. Select</option>
  286. <option value="1"
  287. th:selected="${endingSlot == 'Morning'}">
  288. Morning</option>
  289. <option value="2"
  290. th:selected="${endingSlot == 'Evening'}">
  291. Evening</option>
  292. </select>
  293. </div>
  294. <div style="margin-top: 29px;">
  295. <div class="input-group-append">
  296. <button class="btn btn-outline-secondary"
  297. type="button" id="filterIcon">
  298. <i class="fas fa-filter"></i>
  299. </button>
  300. </div>
  301. </div>
  302. <div style="padding-top: 28px;display:none;margin-left:9px;" id="resetbutton">
  303. <button type="button" class="btn btn-grd-danger"
  304. onclick="resetDate()">Reset</button>
  305. </div>
  306. <div class="col-sm-2" style="padding-top: 28px;">
  307. <button type="button"
  308. class="btn btn-grd-primary"
  309. onclick="displayHallDetails()">Check
  310. Now</button>
  311. </div>
  312. <div class="col-sm-10" style="padding-top:28px;">
  313. <a
  314. href="javascript:initializeMapAndFetchCoordinates()">
  315. <i class="fas fa-map-marker-alt"></i> Click
  316. here to view Map Centers
  317. </a>
  318. </div><br><br>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. <button id="toggleButton"
  325. class="btn btn-inverse btn-outline-inverse btn-icon">
  326. <i class="icofont icofont-exchange" data-toggle="tooltip"
  327. data-placement="left" title="Table/Grid View"></i>
  328. </button>
  329. <br>
  330. <!-- Toggle button end-->
  331. <!--Grid View start-->
  332. <br>
  333. <div id="div1">
  334. <div class="row" style="align-items: flex-start;margin-right:0">
  335. <div th:each="hall : ${halls}"
  336. class="col-lg-3 col-md-6 default-grid-item">
  337. <div class="card">
  338. <div class="masonry-media">
  339. <!--<div style="height:250px;width:300px"
  340. id="hallImagesCarousel" class="carousel slide"
  341. data-ride="carousel">
  342. <div class="carousel-inner">
  343. <img th:if="${hall.hallImagesList != null && !hall.hallImagesList.isEmpty()}"
  344. th:src="@{${hall.hallImagesList[0].hallImage}}"
  345. th:onclick="viewHallImages([[${hall.hallId}]])"
  346. class="d-block w-100 carousel-image"
  347. alt="Hall Image">
  348. </div>
  349. </div>-->
  350. <div style="height:250px;width:300px" id="hallImagesCarousel" class="carousel slide" data-ride="carousel">
  351. <div class="carousel-inner">
  352. <img th:if="${hall.hallImagesList != null && !hall.hallImagesList.isEmpty()}"
  353. th:src="@{${hall.hallImagesList[0].hallImage}}"
  354. th:onclick="viewHallImages([[${hall.hallId}]])"
  355. class="d-block carousel-image"
  356. alt="Hall Image">
  357. </div>
  358. </div>
  359. </div>
  360. <div class="card-block" id="cardblock">
  361. <h6 class="job-card-desc"><span
  362. th:text="${hall.hallName}"></span></h6>
  363. <table id="amounttable">
  364. <tr>
  365. <th class="text-muted">Full day Rent:</th>
  366. <td th:text="${hall.fullDayRent}"
  367. class="text-muted"></td>
  368. </tr>
  369. <tr>
  370. <th class="text-muted">Half day Rent:</th>
  371. <td th:text="${hall.halfDayRent}"
  372. class="text-muted"></td>
  373. </tr>
  374. <tr>
  375. <th class="text-muted">Full Day Security Deposit:
  376. </th>
  377. <td th:text="${hall.depositAmount}"
  378. class="text-muted"></td>
  379. </tr>
  380. <tr>
  381. <th class="text-muted">Half Day Security Deposit:
  382. </th>
  383. <td th:text="${hall.halfDepositAmount}"
  384. class="text-muted"></td>
  385. </tr>
  386. </table>
  387. <div class="job-meta-data"><i
  388. class="icofont icofont-location-arrow"></i>
  389. <a th:attr="data-latitude=${hall.latitude}, data-longitude=${hall.longitude}"
  390. th:onclick="showHall(this)"
  391. style="cursor: pointer;">
  392. <span th:text="${hall.doorNo}"></span>,
  393. <span th:text="${hall.street}"></span>,
  394. <span th:text="${hall.area}"></span>,
  395. <br>
  396. <span th:text="${hall.city}"></span> -
  397. <span th:text="${hall.pinCode}"></span>
  398. </a>
  399. </div>
  400. <div class="job-meta-data"><i
  401. class="icofont icofont-university"></i>Capacity:
  402. <span th:text="${hall.seatingCapacity}"></span>
  403. </div>
  404. </div>
  405. <div class="row">
  406. <div class="col-md-6">
  407. <a href="javascript:void(0);"
  408. class="btn btn-primary book-button"
  409. th:onclick="return checkLoginedIn('book',[[${hall.hallId}]]);">
  410. Book
  411. </a>
  412. </div>
  413. <div class="col-md-6">
  414. <a th:href="'/communityhall/viewhallform?hallId=' + ${hall.hallId}"
  415. class="btn btn-primary book-button">View</a>
  416. </div>
  417. </div>
  418. </div>
  419. </div>
  420. <br>
  421. </div>
  422. </div>
  423. <div id="div2" style="display: none;">
  424. <!-- Zero config.table start -->
  425. <div class="card">
  426. <div class="card-header">
  427. <h5>Community Hall Details</h5>
  428. </div>
  429. <div class="card-block">
  430. <div class="block-content p-0">
  431. <div class="p-sm-4 p-0">
  432. <div class="table-responsive">
  433. <table
  434. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  435. id="simpletable">
  436. <thead class="thead-light responsive"
  437. style="background-color: rgb(21,69,93);color: white;">
  438. <tr class="table-bordered ">
  439. <th class="text-center no-sort"
  440. width="10%">S.No</th>
  441. <th class="text-center" width="10%">
  442. Hall
  443. Name
  444. </th>
  445. <th class="text-center" width="10%">
  446. Address
  447. </th>
  448. <th class="text-center" width="10%">
  449. Landmark</th>
  450. <th class="text-center" width="10%">
  451. Seating
  452. Capacity
  453. </th>
  454. <th class="text-center" width="10%">
  455. Deposit
  456. Amount
  457. </th>
  458. <th class="text-center" width="10%">
  459. Full Day
  460. Amount
  461. </th>
  462. <th class="text-center" width="10%">
  463. Half Day
  464. Amount
  465. </th>
  466. <th>View Images</th>
  467. <th>Book Now</th>
  468. </tr>
  469. </thead>
  470. <tbody>
  471. <tr th:each="hall, i : ${halls}"
  472. class="${halls}">
  473. <td th:text="${i.count}"></td>
  474. <td th:text="${hall.hallName}"></td>
  475. <td th:text="${hall.area}"></td>
  476. <td th:text="${hall.city}"></td>
  477. <td
  478. th:text="${hall.seatingCapacity}">
  479. </td>
  480. <td th:text="${hall.depositAmount}">
  481. </td>
  482. <td th:text="${hall.fullDayRent}">
  483. </td>
  484. <td th:text="${hall.halfDayRent}">
  485. </td>
  486. <td>
  487. <a class="view-button"><span
  488. class="badge bg-primary"
  489. style="cursor: pointer;"
  490. th:onclick="viewHallImages([[${hall.hallId}]])">View</span></a>
  491. </td>
  492. <td><a href="javascript:void(0);"><span
  493. class="badge bg-success"
  494. th:onclick="return checkLoginedIn('book',[[${hall.hallId}]]);"
  495. style="cursor: pointer;">Book</span></a>
  496. </td>
  497. </tr>
  498. </tbody>
  499. </table>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. <!-- Zero config.table end -->
  508. <div class="modal fade" id="exampleModal" tabindex="-1"
  509. aria-labelledby="exampleModalLabel" aria-hidden="true">
  510. <div class="modal-dialog" style="width:auto;">
  511. <div class="modal-content">
  512. <div class="modal-header">
  513. <h5 class="modal-title" id="exampleModalLabel">Hall Image
  514. </h5>
  515. <button type="button" class="btn-close"
  516. data-bs-dismiss="modal" aria-label="Close"></button>
  517. </div>
  518. <div class="modal-body"
  519. style="height: 350px; overflow: hidden;">
  520. <div id="carouselExample" class="carousel slide"
  521. data-bs-ride="carousel1">
  522. <div class="carousel-inner1"
  523. style="height:auto; width:auto;">
  524. <!-- Slides will be dynamically inserted here -->
  525. </div>
  526. </div>
  527. </div>
  528. <div class="modal-footer">
  529. <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
  530. </div>
  531. </div>
  532. </div>
  533. </div>
  534. <!--Image view model END-->
  535. </div>
  536. </div>
  537. </div>
  538. </div>
  539. </div>
  540. <a onclick="topFunction()" id="scrollToTopBtn" title="Go to top"><i
  541. class="icofont icofont-circled-up"></i></a>
  542. <footer th:replace="~{fragments/footer :: footer}"></footer>
  543. </div>
  544. </div>
  545. </div>
  546. </div>
  547. <input type="hidden" id="serverDate" th:value=${serverDate}>
  548. <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  549. aria-hidden="true">
  550. <div class="modal-dialog modal-lg" role="document">
  551. <div class="modal-content">
  552. <div class="modal-header">
  553. <h5 class="modal-title" id="exampleModalLabel">Filter Options</h5>
  554. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="color:black">
  555. <span aria-hidden="true">&times;</span>
  556. </button>
  557. </div>
  558. <div class="modal-body">
  559. <div class="row">
  560. <div class="col-sm-6">
  561. <label for="selectedStartDate">Selected Start Date:<span
  562. class="required-field">*</span></label>
  563. <input type="date" class="form-control" id="selectedStartDate">
  564. </div>
  565. <div class="col-sm-6">
  566. <label for="selectedEndDate">Selected End Date:<span
  567. class="required-field">*</span></label>
  568. <select class="form-control" id="selectedEndDate"></select>
  569. </div>
  570. <div class="col-sm-6">
  571. <label for="selectedMorningSlot">Selected Starting Slot:<span
  572. class="required-field">*</span></label>
  573. <select class="form-control" id="selectedMorningSlot">
  574. <option value="0">Select</option>
  575. <option value="1">Morning</option>
  576. <option value="2">Evening</option>
  577. </select>
  578. </div>
  579. <div class="col-sm-6">
  580. <label for="selectedEveningSlot">Selected Ending Slot:<span
  581. class="required-field">*</span></label>
  582. <select class="form-control" id="selectedEveningSlot">
  583. <option value="0">Select</option>
  584. <option value="1">Morning</option>
  585. <option value="2">Evening</option>
  586. </select>
  587. </div>
  588. <div class="col-sm-6">
  589. <label for="zone">Zone:</label>
  590. <select class="form-control" id="zone" name="zone" placeholder="zone"
  591. onclick="getDivision(this),loadHallsbyzone(this)" aria-label="Select Zone">
  592. <option value="">Select a Zone</option>
  593. </select>
  594. </div>
  595. <div class="col-sm-6">
  596. <label for="zone">Division:</label>
  597. <select class="form-control" id="division" name="division"
  598. onchange="loadHallsbydivision(this)" placeholder="division"
  599. aria-label="Select Division">
  600. <option value="">Select a Division</option>
  601. </select>
  602. </div>
  603. <div class="col-sm-6">
  604. <label for="selecthall">Select Hall:</label>
  605. <select class="form-control" id="selecthall" name="selecthall" aria-label="Select Hall">
  606. <option value="">Select a Hall</option>
  607. </select>
  608. </div>
  609. </div>
  610. </div>
  611. <div class="modal-footer">
  612. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  613. <button type="button" class="btn btn-primary" onclick="displayHallDetailswithFilters()">Apply
  614. Filters</button>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. <!-- MOdel for Map-->
  620. <div class="modal fade" id="hallDetailsModal" tabindex="-1" aria-labelledby="hallDetailsModalLabel"
  621. aria-hidden="true">
  622. <div class="modal-dialog modal-md">
  623. <div class="modal-content">
  624. <div class="modal-header">
  625. <h5 class="modal-title" id="hallDetailsModalLabel">Hall Details</h5>
  626. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  627. style="color:black">
  628. <span aria-hidden="true">&times;</span>
  629. </button>
  630. </div>
  631. <div class="modal-body">
  632. <div id="modalContent"></div>
  633. </div>
  634. <div class="modal-footer">
  635. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  636. <button type="button" class="btn btn-primary booknow">Book Now</button>
  637. </div>
  638. </div>
  639. </div>
  640. </div><!-- end of Model Map-->
  641. </div>
  642. <div th:replace="~{fragments/loginreg :: div}"></div>
  643. <script th:replace="~{fragments/script :: script}"></script>
  644. <script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
  645. <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  646. <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  647. <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  648. <script>
  649. $('.carousel').carousel({
  650. interval: 6000
  651. })
  652. </script>
  653. <script>
  654. $(document).ready(function () {
  655. $('#simpletable').DataTable({
  656. responsive: true,
  657. pageLength: 10,
  658. ordering: true,
  659. columnDefs: [{
  660. targets: 'no-sort',
  661. orderable: false
  662. }],
  663. dom: 'Bfrtip',
  664. buttons: [
  665. {
  666. extend: 'excelHtml5',
  667. text: 'Export to Excel',
  668. className: 'btn btn-primary'
  669. }
  670. ]
  671. });
  672. });
  673. </script>
  674. <!--Model Script End-->
  675. <!--script to show next seven days from selected from from date-->
  676. <script>
  677. $(document).ready(function () {
  678. const serverDate =new Date($("#serverDate").val() + "T00:00:00")
  679. // console.log("serverDate:", serverDate);
  680. // Get today's date
  681. var today = serverDate;
  682. var sixMonthsFromNow = new Date(serverDate);
  683. sixMonthsFromNow.setMonth(serverDate.getMonth() + 6);
  684. // console.log("sixMonthsFromNow:", sixMonthsFromNow);
  685. const day = serverDate.getDate();
  686. // If the new month has fewer days, adjust the date
  687. if (sixMonthsFromNow.getDate() !== day) {
  688. sixMonthsFromNow.setDate(0); // Moves to the last valid day of the previous month
  689. }
  690. // Set the 'min' and 'max' attributes for input fields
  691. const minDateStr = formatDateForValue(serverDate); // YYYY-MM-DD format
  692. const maxDateStr = formatDateForValue(sixMonthsFromNow);
  693. // console.log("minDateStr:", minDateStr);
  694. // console.log("maxDateStr:", maxDateStr);
  695. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("min", minDateStr);
  696. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("max", maxDateStr);
  697. // Populate 'todate' options based on 'fromdate'
  698. // Function to format date as dd-mm-yyyy
  699. function formatDateForText(date) {
  700. var day = ("0" + date.getDate()).slice(-2);
  701. var month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero-based
  702. var year = date.getFullYear();
  703. return day + '-' + month + '-' + year;
  704. }
  705. // Function to format date as yyyy-mm-dd
  706. function formatDateForValue(date) {
  707. var day = ("0" + date.getDate()).slice(-2);
  708. var month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero-based
  709. var year = date.getFullYear();
  710. return year + '-' + month + '-' + day;
  711. }
  712. // Handle change event for #fromdate
  713. $('#fromdate').change(function () {
  714. var fromDate = new Date($(this).val());
  715. var toDateSelect = $('#todate');
  716. toDateSelect.empty();
  717. for (var i = 0; i <= 1; i++) {
  718. var toDate = new Date(fromDate);
  719. toDate.setDate(fromDate.getDate() + i);
  720. var dateText = formatDateForText(toDate);
  721. var dateValue = formatDateForValue(toDate);
  722. toDateSelect.append($('<option>', {
  723. value: dateValue,
  724. text: dateText
  725. }));
  726. }
  727. });
  728. // Handle change event for #selectedStartDate
  729. $('#selectedStartDate').change(function () {
  730. var selectedStartDate = new Date($(this).val());
  731. var selectedEndDateSelect = $('#selectedEndDate');
  732. selectedEndDateSelect.empty();
  733. for (var i = 0; i <= 1; i++) {
  734. var selectedEndDate = new Date(selectedStartDate);
  735. selectedEndDate.setDate(selectedStartDate.getDate() + i);
  736. var dateText = formatDateForText(selectedEndDate);
  737. var dateValue = formatDateForValue(selectedEndDate);
  738. selectedEndDateSelect.append($('<option>', {
  739. value: dateValue,
  740. text: dateText
  741. }));
  742. }
  743. });
  744. // Show modal with selected values
  745. $('#filterIcon').click(function () {
  746. getZone();
  747. var fromDate = $('#fromdate').val();
  748. var toDate = $('#todate').val();
  749. var startingSlot = $('#startingslot option:selected').val();
  750. var endingSlot = $('#endingslot option:selected').val();
  751. $('#selectedStartDate').val(fromDate);
  752. // Here, we need to manually trigger the change event to ensure selectedEndDate options are populated
  753. $('#selectedStartDate').trigger('change');
  754. // Setting the selected end date after options are populated
  755. setTimeout(() => {
  756. $('#selectedEndDate').val(toDate);
  757. }, 100);
  758. $('#selectedMorningSlot').val(startingSlot);
  759. $('#selectedEveningSlot').val(endingSlot);
  760. $('#filterModal').modal({
  761. backdrop: 'static',
  762. keyboard: false
  763. });
  764. $('#filterModal').modal('show');
  765. });
  766. });
  767. function toggleButtonClicked() {
  768. var div1 = document.getElementById('div1');
  769. var div2 = document.getElementById('div2');
  770. if (div1.style.display === 'none') {
  771. div1.style.display = 'block';
  772. div2.style.display = 'none';
  773. } else {
  774. div1.style.display = 'none';
  775. div2.style.display = 'block';
  776. }
  777. }
  778. document.getElementById('toggleButton').addEventListener('click', toggleButtonClicked);
  779. </script>
  780. <script>
  781. window.dataLayer = window.dataLayer || [];
  782. function gtag() {dataLayer.push(arguments);}
  783. gtag('js', new Date());
  784. gtag('config', 'UA-23581568-13');
  785. /*const serverDate =new Date($("#serverDate").val() + "T00:00:00")
  786. console.log("serverDate:", serverDate);
  787. // Get today's date
  788. var today = serverDate;
  789. var sixMonthsFromNow = new Date(serverDate);
  790. sixMonthsFromNow.setMonth(serverDate.getMonth() + 6);
  791. console.log("sixMonthsFromNow:", sixMonthsFromNow);
  792. const day = serverDate.getDate();
  793. // If the new month has fewer days, adjust the date
  794. if (sixMonthsFromNow.getDate() !== day) {
  795. sixMonthsFromNow.setDate(0); // Moves to the last valid day of the previous month
  796. }
  797. // Set the 'min' and 'max' attributes for input fields
  798. const minDateStr = serverDate.toISOString().split('T')[0]; // YYYY-MM-DD format
  799. const maxDateStr = sixMonthsFromNow.toISOString().split('T')[0];
  800. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("min", minDateStr);
  801. $("#fromdate, #todate, #selectedStartDate, #selectedEndDate").attr("max", maxDateStr);*/
  802. // Calculate the date 6 months from now
  803. // var sixMonthsFromNow = new Date(today.getFullYear(), today.getMonth() + 6, today.getDate()+1);
  804. // Set the 'min' and 'max' attributes of the input fields to limit the date selection
  805. /*document.getElementById("fromdate").setAttribute("min", today.toISOString().split('T')[0]);
  806. document.getElementById("fromdate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  807. document.getElementById("todate").setAttribute("min", today.toISOString().split('T')[0]);
  808. document.getElementById("todate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  809. document.getElementById("selectedStartDate").setAttribute("min", today.toISOString().split('T')[0]);
  810. document.getElementById("selectedStartDate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);
  811. document.getElementById("selectedEndDate").setAttribute("min", today.toISOString().split('T')[0]);
  812. document.getElementById("selectedEndDate").setAttribute("max", sixMonthsFromNow.toISOString().split('T')[0]);*/
  813. //Function for toggle button
  814. function toggleButtonClicked() {
  815. var hallDetailsVisible = document.getElementById('hallDetails').style.display !== 'none';
  816. // Toggle visibility of hallDetails and div4
  817. document.getElementById('hallDetails').style.display = hallDetailsVisible ? 'none' : 'block';
  818. document.getElementById('div4').style.display = hallDetailsVisible ? 'block' : 'none';
  819. }
  820. // Function to display hall details
  821. function displayHallDetails() {
  822. var fromdate = $("#fromdate").val();
  823. var todate = $("#todate").val();
  824. var startingSlot = $("#startingslot").val();
  825. var endingSlot = $("#endingslot").val();
  826. var hallId = $("#selecthall").val();
  827. if (fromdate == "" || fromdate == undefined || todate == "" || todate == undefined || startingSlot == "0" || endingSlot == "0") {
  828. Swal.fire({
  829. icon: 'error',
  830. title: 'Missing Information',
  831. text: 'Please ensure that all date and slot fields are selected.',
  832. });
  833. }
  834. else {
  835. window.location.href = '/communityhall/user/checkAvail?fromDate=' + fromdate + '&toDate=' + todate + '&starting=' + startingSlot + '&ending=' + endingSlot;
  836. $("#notification").css("display", "none");
  837. }
  838. }
  839. function checkResetButtonVisibility() {
  840. // Get the current URL
  841. var currentUrl = window.location.pathname; // Use pathname to get the path only
  842. var urlPattern = "/communityhall/user/dashboard";
  843. // Check if the current URL is exactly the pattern
  844. if (currentUrl === urlPattern) {
  845. // Hide the resetButton if the URL matches the pattern exactly
  846. document.getElementById("resetbutton").style.display = "none";
  847. } else {
  848. // Show the resetButton if the URL does not match the pattern exactly
  849. document.getElementById("resetbutton").style.display = "block";
  850. }
  851. }
  852. // Call the function on page load
  853. window.onload = checkResetButtonVisibility;
  854. function displayHallDetailswithFilters() {
  855. var fromdate = $("#selectedStartDate").val();
  856. var todate = $("#selectedEndDate").val();
  857. var startingSlot = $("#selectedMorningSlot").val();
  858. var endingSlot = $("#selectedEveningSlot").val();
  859. var zone = $("#zone").val();
  860. var division = $("#division").val();
  861. var hallId = $("#selecthall").val();
  862. if (fromdate == "" || fromdate == undefined || todate == "" || todate == undefined || startingSlot == "0" || endingSlot == "0") {
  863. Swal.fire({
  864. icon: 'error',
  865. title: 'Missing Information',
  866. text: 'Please ensure that all date and slot fields are selected.',
  867. });
  868. }
  869. else {
  870. window.location.href = '/communityhall/user/checkAvail?fromDate=' + fromdate + '&toDate=' + todate + '&starting=' + startingSlot + '&ending=' + endingSlot + '&hallId=' + hallId + '&zone=' + zone;
  871. }
  872. }
  873. function viewHallImages(hallId) {
  874. $.ajax({
  875. type: "GET",
  876. url: '/communityhall/admin/api/getImageById',
  877. data: {
  878. 'hallId': hallId
  879. },
  880. success: function (res) {
  881. getHallImagesById(res);
  882. }
  883. });
  884. }
  885. function getHallImagesById(images) {
  886. const modalSlidesContainer = document.querySelector('.carousel-inner1');
  887. modalSlidesContainer.innerHTML = '';
  888. // Loop through the images and create thumbnail elements dynamically
  889. images.forEach((image, index) => {
  890. const slide = document.createElement('div');
  891. slide.classList.add('carousel-item');
  892. if (index === 0) {
  893. slide.classList.add('active');
  894. }
  895. const img = document.createElement('img');
  896. img.src = image.hallImage;
  897. img.alt = `Slide ${image.hallImageId}`; // Corrected this line to properly set the alt text
  898. slide.appendChild(img);
  899. modalSlidesContainer.appendChild(slide);
  900. });
  901. $('#exampleModal').modal('show'); // Show Bootstrap modal
  902. }
  903. function loadHallsbydivision(x) {
  904. var division = x.value;
  905. // Make an AJAX request to fetch halls based on the selected zone and division
  906. $.ajax({
  907. url: '/communityhall/user/api/hallsbydivision', // Replace 'backend_url' with the actual backend endpoint
  908. method: 'GET',
  909. data: {division: division},
  910. success: function (response) {
  911. // Clear existing options
  912. $('#selecthall').empty();
  913. var selectHallDropdown = $('#selecthall'); // Select the select hall dropdown
  914. selectHallDropdown.empty(); // Clear existing options
  915. // Add the default "Select Hall" option
  916. selectHallDropdown.append('<option value="" selected>Select Hall</option>');
  917. response.forEach(function (hall) {
  918. $('#selecthall').append('<option value="' + hall.hallId + '">' + hall.hallName + '</option>');
  919. });
  920. },
  921. error: function (xhr, status, error) {
  922. console.error('Error loading halls:', error);
  923. }
  924. });
  925. }
  926. function loadHallsbyzone(x) {
  927. var zone = x.value;
  928. // Make an AJAX request to fetch halls based on the selected zone and division
  929. $.ajax({
  930. url: '/communityhall/user/api/findhallsbyzone', // Replace 'backend_url' with the actual backend endpoint
  931. method: 'GET',
  932. data: {zone: zone},
  933. success: function (response) {
  934. // Clear existing options
  935. $('#selecthall').empty();
  936. var selectHallDropdown = $('#selecthall'); // Select the select hall dropdown
  937. selectHallDropdown.empty(); // Clear existing options
  938. // Add the default "Select Hall" option
  939. selectHallDropdown.append('<option value="" selected>Select Hall</option>');
  940. response.forEach(function (hall) {
  941. $('#selecthall').append('<option value="' + hall.hallId + '">' + hall.hallName + '</option>');
  942. });
  943. },
  944. error: function (xhr, status, error) {
  945. console.error('Error loading halls:', error);
  946. }
  947. });
  948. }
  949. window.onscroll = function () {scrollFunction()};
  950. function scrollFunction() {
  951. if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  952. document.getElementById("scrollToTopBtn").style.display = "block";
  953. } else {
  954. document.getElementById("scrollToTopBtn").style.display = "none";
  955. }
  956. }
  957. // When the user clicks on the button, scroll to the top of the document
  958. function topFunction() {
  959. document.body.scrollTop = 0;
  960. document.documentElement.scrollTop = 0;
  961. }
  962. //Filter option date block
  963. function setMinDate() {
  964. var today = new Date();
  965. var dd = String(today.getDate()).padStart(2, '0');
  966. var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
  967. var yyyy = today.getFullYear();
  968. today = yyyy + '-' + mm + '-' + dd;
  969. document.getElementById("selectedStartDate").setAttribute("min", today);
  970. }
  971. document.addEventListener("DOMContentLoaded", function () {
  972. setMinDate(); // Set minimum date for selectedStartDate input on page load
  973. document.getElementById('filterIcon').addEventListener('click', function () {
  974. // Populate selectedStartDate and selectedEndDate inputs with values from regular form
  975. document.getElementById('selectedStartDate').value = document.getElementById('fromdate').value;
  976. document.getElementById('selectedEndDate').value = document.getElementById('todate').value;
  977. document.getElementById('selectedMorningSlot').value = document.getElementById('startingslot').value;
  978. document.getElementById('selectedEveningSlot').value = document.getElementById('endingslot').value;
  979. $('#filterModal').modal({
  980. backdrop: 'static',
  981. keyboard: false
  982. });
  983. $('#filterModal').modal('show');
  984. });
  985. document.getElementById('selectedStartDate').addEventListener('change', function () {
  986. var selectedStartDate = new Date($(this).val());
  987. var selectedEndDate = document.getElementById('selectedEndDate');
  988. selectedEndDate.innerHTML = ''; // Clear previous options
  989. for (var i = 1; i <= 7; i++) {
  990. var endDate = new Date(selectedStartDate);
  991. endDate.setDate(selectedStartDate.getDate() + i);
  992. var dateString = endDate.toISOString().split('T')[0];
  993. selectedEndDate.innerHTML += '<option value="' + dateString + '">' + dateString + '</option>';
  994. }
  995. });
  996. });
  997. //filter option date end
  998. var zoneAndDivision;
  999. function getZone() {
  1000. $.ajax({
  1001. type: "GET",
  1002. url: '/communityhall/user/api/getZone',
  1003. success: function (data) {
  1004. zoneAndDivision = data;
  1005. const uniqueZones = [...new Set(data.map(item => item.zone))];
  1006. // Get the select element
  1007. const selectElement = document.getElementById('zone');
  1008. // Populate the select element with options
  1009. uniqueZones.forEach(zone => {
  1010. const option = document.createElement('option');
  1011. option.value = zone;
  1012. option.textContent = zone;
  1013. selectElement.appendChild(option);
  1014. });
  1015. //alert(reszone);
  1016. //$('#zone').val(reszone.zone);
  1017. }
  1018. });
  1019. }
  1020. function getDivision(x) {
  1021. const selectedZone = x.value;
  1022. const divisionSelect = document.getElementById('division');
  1023. // Clear existing options in division select
  1024. divisionSelect.innerHTML = '';
  1025. // Add the default "Select Division" option
  1026. const defaultOption = document.createElement('option');
  1027. defaultOption.value = '';
  1028. defaultOption.textContent = 'Select Division';
  1029. divisionSelect.appendChild(defaultOption);
  1030. // Filter data to get divisions for the selected zone
  1031. const divisions = [...new Set(zoneAndDivision.filter(item => item.zone === selectedZone).map(item => item.division))];
  1032. // Populate the division select element with options
  1033. divisions.forEach(division => {
  1034. const option = document.createElement('option');
  1035. option.value = division;
  1036. option.textContent = division;
  1037. divisionSelect.appendChild(option);
  1038. });
  1039. }
  1040. document.getElementById('fromdate').addEventListener('change', checkDates);
  1041. document.getElementById('todate').addEventListener('change', checkDates);
  1042. document.getElementById('startingslot').addEventListener('change', checkSlots);
  1043. document.getElementById('selectedStartDate').addEventListener('change', checkfilterDates);
  1044. document.getElementById('selectedEndDate').addEventListener('change', checkfilterDates);
  1045. document.getElementById('selectedMorningSlot').addEventListener('change', checkfilterSlots);
  1046. function checkDates() {
  1047. var fromDate = document.getElementById('fromdate').value;
  1048. var toDate = document.getElementById('todate').value;
  1049. var endingSlot = document.getElementById('endingslot');
  1050. if (fromDate && toDate && fromDate === toDate) {
  1051. var startingSlot = document.getElementById('startingslot').value;
  1052. if (startingSlot === '2') { // Evening
  1053. endingSlot.value = '2'; // Set Ending Slot to Evening
  1054. document.getElementById('endingslot').disabled = true;
  1055. endingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1056. } else {
  1057. document.getElementById('endingslot').disabled = false;
  1058. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1059. }
  1060. } else {
  1061. document.getElementById('endingslot').disabled = false;
  1062. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1063. }
  1064. }
  1065. function checkfilterDates() {
  1066. var filterfromDate = document.getElementById('selectedStartDate').value;
  1067. var filtertoDate = document.getElementById('selectedEndDate').value;
  1068. var filterendingSlot = document.getElementById('selectedEveningSlot');
  1069. if (filterfromDate && filtertoDate && filterfromDate === filtertoDate) {
  1070. var filterstartingSlot = document.getElementById('selectedMorningSlot').value;
  1071. if (filterstartingSlot === '2') { // Evening
  1072. filterendingSlot.value = '2'; // Set Ending Slot to Evening
  1073. document.getElementById('selectedEveningSlot').disabled = true;
  1074. filterendingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1075. } else {
  1076. document.getElementById('selectedEveningSlot').disabled = false;
  1077. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1078. }
  1079. } else {
  1080. document.getElementById('selectedEveningSlot').disabled = false;
  1081. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1082. }
  1083. }
  1084. function checkfilterSlots() {
  1085. var filterfromDate = document.getElementById('selectedStartDate').value;
  1086. var filtertoDate = document.getElementById('selectedEndDate').value;
  1087. var filterendingSlot = document.getElementById('selectedEveningSlot');
  1088. var filterstartingSlot = document.getElementById('selectedMorningSlot').value;
  1089. if (filterfromDate && filtertoDate && filterfromDate === filtertoDate) {
  1090. if (filterstartingSlot === '2') { // Evening
  1091. filterendingSlot.value = '2'; // Set Ending Slot to Evening
  1092. document.getElementById('selectedEveningSlot').disabled = true;
  1093. filterendingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1094. } else {
  1095. document.getElementById('selectedEveningSlot').disabled = false;
  1096. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1097. }
  1098. } else {
  1099. document.getElementById('selectedEveningSlot').disabled = false;
  1100. filterendingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1101. }
  1102. }
  1103. function checkSlots() {
  1104. var fromDate = document.getElementById('fromdate').value;
  1105. var toDate = document.getElementById('todate').value;
  1106. var startingSlot = document.getElementById('startingslot').value;
  1107. var endingSlot = document.getElementById('endingslot');
  1108. if (fromDate && toDate && fromDate === toDate) {
  1109. if (startingSlot === '2') { // Evening
  1110. endingSlot.value = '2'; // Set Ending Slot to Evening
  1111. document.getElementById('endingslot').disabled = true;
  1112. endingSlot.getElementsByTagName('option')[1].disabled = true; // Disable Morning option
  1113. } else {
  1114. document.getElementById('endingslot').disabled = false;
  1115. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1116. }
  1117. } else {
  1118. document.getElementById('endingslot').disabled = false;
  1119. endingSlot.getElementsByTagName('option')[1].disabled = false; // Enable Morning option
  1120. }
  1121. }
  1122. var map;
  1123. var mapInitialized = false;
  1124. function initializeMapAndFetchCoordinates() {
  1125. var mapElement = document.getElementById("map");
  1126. var dashboardBody = document.getElementById("dashboardbody");
  1127. if (mapElement.style.display === "none") {
  1128. mapElement.style.display = "block";
  1129. dashboardBody.style.display = "none";
  1130. } else {
  1131. mapElement.style.display = "none";
  1132. dashboardBody.style.display = "block";
  1133. }
  1134. mapElement.style.display = 'block';
  1135. if (!mapInitialized) {
  1136. mapInitialized = true;
  1137. setTimeout(() => {
  1138. map = L.map('map', {attributionControl: false}).setView([13.0827, 80.2707], 9);
  1139. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  1140. attributionControl: false,
  1141. maxZoom: 19
  1142. }).addTo(map);
  1143. var markers = L.markerClusterGroup();
  1144. $.ajax({
  1145. url: '/communityhall/user/api/getallhallcoordinates',
  1146. type: 'GET',
  1147. success: function (data) {
  1148. if (data.length === 0) {
  1149. console.warn('No data returned from the API');
  1150. return;
  1151. }
  1152. data.forEach(function (coord) {
  1153. var marker = L.marker([parseFloat(coord.latitude), parseFloat(coord.longitude)], /{icon: customIcon}/);
  1154. var hallImageHtml = '';
  1155. if (coord.hallImage && Array.isArray(coord.hallImage) && coord.hallImage.length > 0) {
  1156. hallImageHtml = `
  1157. <div id="hallImageCarousel" class="carousel slide" data-ride="carousel">
  1158. <div class="carousel-inner">
  1159. ${coord.hallImage.map((image, index) => `
  1160. <div class="carousel-item ${index === 0 ? 'active' : ''}">
  1161. <img src="${image.hallImage}" class="d-block w-100 fixed-size-image" alt="Hall Image">
  1162. </div>
  1163. `).join('')}
  1164. </div>
  1165. <a class="carousel-control-prev" href="#hallImageCarousel" role="button" data-slide="prev">
  1166. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1167. <span class="sr-only">Previous</span>
  1168. </a>
  1169. <a class="carousel-control-next" href="#hallImageCarousel" role="button" data-slide="next">
  1170. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1171. <span class="sr-only">Next</span>
  1172. </a>
  1173. </div>
  1174. `;
  1175. } else {
  1176. console.warn('coord.hallImage is either undefined, not an array, or empty.');
  1177. }
  1178. //console.log(hallImageHtml); // Log the final HTML for debugging purposes
  1179. var modalContent = `
  1180. <div class="card border-primary">
  1181. <div class="imagecontainer">${hallImageHtml}</div>
  1182. <div class="card-body bg-light" style="text-align:left">
  1183. <p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>
  1184. <p class="card-text">Address: <strong>${coord.doorNo}, ${coord.area}, ${coord.street}, ${coord.landMark}</strong></p>
  1185. <p class="card-text">Seating Capacity: <strong>${coord.seatingCapacity}</strong></p>
  1186. <p class="card-text">Parking Capacity: <strong>${coord.parkingCapacity}</strong></p>
  1187. <p class="card-text">Deposit Amount: <strong>Rs. ${coord.depositAmount}</strong></p>
  1188. <p class="card-text">Full Day Rent: <strong>Rs. ${coord.fullDayRent}</strong></p>
  1189. <p class="card-text">Half Day Rent: <strong>Rs. ${coord.halfDayRent}</strong></p>
  1190. <p class="card-text">Hall Area: <strong>${coord.hallArea} (sq.ft)</strong></p>
  1191. </div>
  1192. </div>`;
  1193. marker.on('click', function () {
  1194. $('#modalContent').html(modalContent);
  1195. $('#hallDetailsModal').modal('show');
  1196. $('#hallDetailsModal').on('click', '.booknow', function () {
  1197. redirectToPage(coord.hallId);
  1198. });
  1199. });
  1200. var tooltipContent = `<p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>`;
  1201. marker.bindTooltip(tooltipContent, {
  1202. direction: 'top',
  1203. permanent: false,
  1204. className: 'custom-tooltip'
  1205. });
  1206. markers.addLayer(marker);
  1207. });
  1208. map.addLayer(markers);
  1209. },
  1210. error: function (xhr, status, error) {
  1211. console.error('Error fetching locations:', error);
  1212. }
  1213. });
  1214. }, 100); // Delay to ensure the map container is rendered
  1215. }
  1216. // Call anotherFunction after the map is shown
  1217. anotherFunction();
  1218. }
  1219. function redirectToPage(hallId) {
  1220. alert(hallId);
  1221. window.location.href = '/communityhall/hallbookingform?hallId=' + hallId;
  1222. }
  1223. function anotherFunction() {
  1224. //console.log('Another function called');
  1225. }
  1226. function resetDate() {
  1227. window.location.href = "/communityhall/user/dashboard";
  1228. }
  1229. function showHall(element) {
  1230. const latitude = element.getAttribute('data-latitude');
  1231. const longitude = element.getAttribute('data-longitude');
  1232. var mapElement = document.getElementById("map");
  1233. var dashboardBody = document.getElementById("dashboardbody");
  1234. if (mapElement.style.display === "none") {
  1235. mapElement.style.display = "block";
  1236. dashboardBody.style.display = "none";
  1237. } else {
  1238. mapElement.style.display = "none";
  1239. dashboardBody.style.display = "block";
  1240. }
  1241. mapElement.style.display = 'block';
  1242. //console.log('Map container made visible');
  1243. if (!mapInitialized) {
  1244. mapInitialized = true;
  1245. setTimeout(() => {
  1246. map = L.map('map', {attributionControl: false}).setView([latitude, longitude], 18);
  1247. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  1248. attributionControl: false,
  1249. maxZoom: 19
  1250. }).addTo(map);
  1251. var markers = L.markerClusterGroup();
  1252. $.ajax({
  1253. url: '/communityhall/user/api/getallhallcoordinates',
  1254. type: 'GET',
  1255. success: function (data) {
  1256. if (data.length === 0) {
  1257. console.warn('No data returned from the API');
  1258. return;
  1259. }
  1260. data.forEach(function (coord) {
  1261. var marker = L.marker([parseFloat(coord.latitude), parseFloat(coord.longitude)], /{icon: customIcon}/);
  1262. if (coord.hallImage && Array.isArray(coord.hallImage) && coord.hallImage.length > 0) {
  1263. hallImageHtml = `
  1264. <div id="hallImageCarousel" class="carousel slide" data-ride="carousel">
  1265. <div class="carousel-inner">
  1266. ${coord.hallImage.map((image, index) => `
  1267. <div class="carousel-item ${index === 0 ? 'active' : ''}">
  1268. <img src="${image.hallImage}" class="d-block w-100 fixed-size-image" alt="Hall Image">
  1269. </div>
  1270. `).join('')}
  1271. </div>
  1272. <a class="carousel-control-prev" href="#hallImageCarousel" role="button" data-slide="prev">
  1273. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1274. <span class="sr-only">Previous</span>
  1275. </a>
  1276. <a class="carousel-control-next" href="#hallImageCarousel" role="button" data-slide="next">
  1277. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1278. <span class="sr-only">Next</span>
  1279. </a>
  1280. </div>
  1281. `;
  1282. } else {
  1283. console.warn('coord.hallImage is either undefined, not an array, or empty.');
  1284. }
  1285. var modalContent = `
  1286. <div class="card border-primary">
  1287. <div class="imagecontainer">${hallImageHtml}</div>
  1288. <div class="card-body bg-light" style="text-align:left">
  1289. <p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>
  1290. <p class="card-text">Address: <strong>${coord.doorNo}, ${coord.area}, ${coord.street}, ${coord.landMark}</strong></p>
  1291. <p class="card-text">Seating Capacity: <strong>${coord.seatingCapacity}</strong></p>
  1292. <p class="card-text">Parking Capacity: <strong>${coord.parkingCapacity}</strong></p>
  1293. <p class="card-text">Deposit Amount: <strong>Rs. ${coord.depositAmount}</strong></p>
  1294. <p class="card-text">Full Day Rent: <strong>Rs. ${coord.fullDayRent}</strong></p>
  1295. <p class="card-text">Half Day Rent: <strong>Rs. ${coord.halfDayRent}</strong></p>
  1296. <p class="card-text">Hall Area: <strong>${coord.hallArea} (sq.ft)</strong></p>
  1297. </div>
  1298. </div>`;
  1299. marker.on('click', function () {
  1300. $('#modalContent').html(modalContent);
  1301. $('#hallDetailsModal').modal('show');
  1302. $('#hallDetailsModal').on('click', '.booknow', function () {
  1303. redirectToPage(coord.hallId);
  1304. });
  1305. });
  1306. var tooltipContent = `<p class="card-text">Hall Name: <strong>${coord.hallName}</strong></p>`;
  1307. marker.bindTooltip(tooltipContent, {
  1308. direction: 'top',
  1309. permanent: false,
  1310. className: 'custom-tooltip'
  1311. });
  1312. markers.addLayer(marker);
  1313. });
  1314. map.addLayer(markers);
  1315. },
  1316. error: function (xhr, status, error) {
  1317. console.error('Error fetching locations:', error);
  1318. }
  1319. });
  1320. }, 100); // Delay to ensure the map container is rendered
  1321. }
  1322. }
  1323. </script>
  1324. </body>
  1325. </html>