kanimozhi
/
communityhallv22
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
4 Commits
1 Branch
0 Tags
244 MiB
Tree: 50e6b8813e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '50e6b8813e'
${ noResults }
communityhallv22/src/main/resources/templates/user/dashboard.html

1474 lines
52 KiB
Raw Normal View History

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