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.
25 Commits
1 Branch
0 Tags
244 MiB
Tree: c1314e9f28
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c1314e9f28'
${ noResults }
communityhallv22/src/main/resources/templates/officer/gccblocking-new.html

1166 lines
61 KiB
Raw Normal View History

Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
​
​
​
​
​
​
​
​
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
​
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
​
​
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
​
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
Six month old transactions option created for HQ login and mail integration implemented.
3 months ago
Hall creation and Gcc Blocking(New) concept implemented in the Admin, HQ and officer login
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/head-officer :: head}"></head>
  5. <meta charset="UTF-8">
  6. <style>
  7. /* ── Multiselect ─────────────────────────────────────── */
  8. .multiselect {
  9. text-wrap: balance;
  10. }
  12. .selectBox {
  13. position: relative;
  14. }
  16. .selectBox select {
  17. width: 100%;
  18. }
  20. .overSelect {
  21. position: absolute;
  22. left: 0;
  23. right: 0;
  24. top: 0;
  25. bottom: 0;
  26. }
  28. .checkboxes {
  29. display: none;
  30. border: 0.5px #7c7c7c solid;
  31. background-color: #fff;
  32. max-height: 200px;
  33. overflow-y: auto;
  34. z-index: 9999;
  35. position: relative;
  36. }
  38. .checkboxes label {
  39. display: block;
  40. font-weight: normal;
  41. white-space: nowrap;
  42. min-height: 1.2em;
  43. padding: 0 2.25rem 0 .75rem;
  44. cursor: pointer;
  45. }
  47. .checkboxes label:hover {
  48. background-color: #1e90ff;
  49. color: #fff;
  50. }
  52. .multiselect .selectBox {
  53. min-width: 150px;
  54. max-width: 100%;
  55. overflow: hidden;
  56. border: 0.5px #7c7c7c solid;
  57. }
  59. .multiselect .selectBox select {
  60. height: auto;
  61. overflow: hidden;
  62. }
  64. /* ── Step badge ──────────────────────────────────────── */
  65. .step-badge {
  66. display: inline-block;
  67. width: 28px;
  68. height: 28px;
  69. line-height: 28px;
  70. border-radius: 50%;
  71. background: #0d6efd;
  72. color: #fff;
  73. font-weight: 700;
  74. font-size: 13px;
  75. text-align: center;
  76. margin-right: 6px;
  77. }
  79. /* ── Visibility helpers ──────────────────────────────── */
  80. #step2Section {
  81. display: none;
  82. }
  84. #blockActionCard {
  85. display: none;
  86. }
  88. #noConflictCard {
  89. display: none;
  90. }
  92. /* ── Conflict pill ───────────────────────────────────── */
  93. .conflict-pill {
  94. display: inline-block;
  95. border-radius: 20px;
  96. padding: 3px 10px;
  97. font-size: 12px;
  98. font-weight: 600;
  99. }
  101. .pill-blocked {
  102. background: #fde8e8;
  103. color: #dc3545;
  104. border: 1px solid #dc3545;
  105. }
  107. .pill-free {
  108. background: #e8f5e9;
  109. color: #198754;
  110. border: 1px solid #198754;
  111. }
  113. /* ── Decision card ───────────────────────────────────── */
  114. .decision-card {
  115. border: 2px solid #0d6efd;
  116. border-radius: 8px;
  117. padding: 16px 20px;
  118. background: #f0f6ff;
  119. }
  121. .btn-decision {
  122. min-width: 230px;
  123. }
  125. /* ── File hint ───────────────────────────────────────── */
  126. .file-hint {
  127. font-size: 11px;
  128. color: #6c757d;
  129. margin-top: 2px;
  130. }
  132. .req {
  133. color: #dc3545;
  134. }
  135. </style>
  137. <body>
  138. <div id="page-container"
  139. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  140. <!-- <aside th:replace="~{fragments/aside-right :: aside}"></aside> -->
  141. <nav th:replace="~{fragments/nav-officer :: nav}"></nav>
  142. <header th:replace="~{fragments/header-officer :: header}"></header>
  144. <main id="main-container">
  145. <div class="content">
  147. <!-- ═══════════════════════════════════════════════════════
  148. PANEL A – Currently Blocked Halls (loads on page open)
  149. ══════════════════════════════════════════════════════════ -->
  150. <div class="block block-rounded" id="blockedListSection">
  151. <div class="block-header block-header-default d-flex justify-content-between align-items-center">
  152. <h3 class="block-title mb-0">
  153. <i class="fa fa-lock text-danger me-2"></i>Currently Blocked Halls
  154. </h3>
  155. <button class="btn btn-sm btn-outline-secondary" onclick="loadCurrentlyBlockedHalls()">
  156. <i class="fa fa-refresh me-1"></i>Refresh
  157. </button>
  158. </div>
  159. <div class="block-content">
  160. <div id="blockedListMsg" class="text-muted fst-italic mb-2">Loading…</div>
  161. <div class="table-responsive">
  162. <table class="table table-bordered table-striped table-vcenter" id="blockedHallsTable"
  163. style="display:none;">
  164. <thead class="thead-light">
  165. <tr>
  166. <th class="text-center">#</th>
  167. <th class="text-center">Hall Name</th>
  168. <!-- <th class="text-center">Zone</th> -->
  169. <th class="text-center">Blocked From</th>
  170. <th class="text-center">Blocked To</th>
  171. <th class="text-center">Reason</th>
  172. <th class="text-center">Status</th>
  173. <th class="text-center">Action</th>
  174. </tr>
  175. </thead>
  176. <tbody id="blockedHallsBody"></tbody>
  177. </table>
  178. </div>
  179. </div>
  180. </div>
  182. <!-- ═══════════════════════════════════════════════════════
  183. STEP 1 – New Blocking Form
  184. ══════════════════════════════════════════════════════════ -->
  185. <div class="block block-rounded">
  186. <div class="block-header block-header-default">
  187. <h3 class="block-title">
  188. <span class="step-badge">1</span>
  189. New GCC Hall Blocking – Selection
  190. </h3>
  191. </div>
  192. <div class="block-content">
  193. <div class="row g-3">
  195. <!-- Zone -->
  196. <div class="col-md-6">
  197. <label class="fw-semibold">Zone <span class="req">*</span></label>
  198. <div id="zoneMultiselect" class="multiselect">
  199. <div id="zoneSelectLabel" class="selectBox"
  200. onclick="toggleDropdown('zoneSelectOptions')">
  201. <select class="form-select">
  202. <option>Select Zones</option>
  203. </select>
  204. <div class="overSelect"></div>
  205. </div>
  206. <div id="zoneSelectOptions" class="checkboxes"></div>
  207. </div>
  208. <!-- Shown only when officer has exactly 1 hall (prefilled, readonly) -->
  209. <input type="text" id="zonePrefilled" class="form-control" readonly
  210. style="display:none; background:#f8f9fa; cursor:default;">
  211. </div>
  213. <!-- Hall -->
  214. <div class="col-md-6">
  215. <label class="fw-semibold">Hall(s) <span class="req">*</span></label>
  216. <div id="hallMultiselect" class="multiselect">
  217. <div id="hallSelectLabel" class="selectBox"
  218. onclick="toggleDropdown('hallSelectOptions')">
  219. <select class="form-select" id="hallSelect">
  220. <option>Select Halls</option>
  221. </select>
  222. <div class="overSelect"></div>
  223. </div>
  224. <div id="hallSelectOptions" class="checkboxes"></div>
  225. </div>
  226. <!-- Shown only when officer has exactly 1 hall (prefilled, readonly) -->
  227. <input type="text" id="hallPrefilled" class="form-control" readonly
  228. style="display:none; background:#f8f9fa; cursor:default;">
  229. </div>
  231. <!-- From Date -->
  232. <div class="col-md-3">
  233. <label class="fw-semibold">From Date <span class="req">*</span></label>
  234. <input type="date" class="form-control" id="fromDate" onkeydown="return false;">
  235. </div>
  237. <!-- To Date -->
  238. <div class="col-md-3">
  239. <label class="fw-semibold">To Date <span class="req">*</span></label>
  240. <input type="date" class="form-control" id="toDate" onkeydown="return false;">
  241. </div>
  243. <!-- Reason -->
  244. <div class="col-md-6">
  245. <label class="fw-semibold">Reason for Blocking <span class="req">*</span></label>
  246. <input type="text" class="form-control" id="reasonforBlocking"
  247. placeholder="Enter reason for blocking" maxlength="300">
  248. </div>
  250. <!-- Document -->
  251. <div class="col-md-6">
  252. <label class="fw-semibold">
  253. Upload Document <span class="req">*</span>
  254. <small class="text-muted">(PDF only, max 2 MB)</small>
  255. </label>
  256. <input type="file" class="form-control" id="uploadDocument" name="document"
  257. accept=".pdf">
  258. <div class="file-hint">Only PDF files up to 2 MB are accepted.</div>
  259. </div>
  261. <!-- Document Description -->
  262. <div class="col-md-6">
  263. <label class="fw-semibold">Document Description</label>
  264. <input type="text" class="form-control" id="documentDescription"
  265. placeholder="Optional description">
  266. </div>
  268. </div><!-- /row -->
  270. <!-- Per-hall conflict alert -->
  271. <div id="conflictAlertBox" class="mt-3" style="display:none;">
  272. <div class="alert alert-danger">
  273. <strong><i class="fa fa-exclamation-circle me-1"></i>Blocking Conflict Detected</strong>
  274. <div id="conflictDetails" class="mt-2"></div>
  275. <hr class="my-2">
  276. <p class="mb-0 text-danger fw-semibold">
  277. Blocking cannot proceed because one or more halls are already blocked for the
  278. selected period.
  279. Please choose different dates or unblock the existing entry first.
  280. </p>
  281. </div>
  282. </div>
  284. <div class="row mt-3">
  285. <div class="col text-center">
  286. <button type="button" class="btn btn-primary px-5" id="viewButton"
  287. onclick="loadBookings()">
  288. <i class="fa fa-search me-1"></i> View Bookings &amp; Check Availability
  289. </button>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  295. <!-- ═══════════════════════════════════════════════════════
  296. STEP 2 – Bookings Preview + Decision
  297. ══════════════════════════════════════════════════════════ -->
  298. <div id="step2Section">
  300. <!-- Booking Table -->
  301. <div class="block block-rounded">
  302. <div class="block-header block-header-default">
  303. <h3 class="block-title">
  304. <span class="step-badge">2</span>
  305. Existing Bookings in Selected Date Range
  306. </h3>
  307. </div>
  308. <div class="block-content">
  309. <div id="noBookingsMsg" class="alert alert-success" style="display:none;">
  310. <i class="fa fa-check-circle me-1"></i>
  311. No existing bookings found for the selected halls and dates.
  312. </div>
  313. <div id="bookingsFoundMsg" class="alert alert-warning" style="display:none;">
  314. <i class="fa fa-exclamation-triangle me-1"></i>
  315. <strong>Attention:</strong> The following bookings exist within the selected date range.
  316. Choose how to proceed below.
  317. </div>
  318. <!-- Today-booking warning -->
  319. <div id="todayBookingWarning" class="alert alert-danger mt-2" style="display:none;">
  320. <i class="fa fa-exclamation-circle me-1"></i>
  321. <strong>Note:</strong> One or more bookings are for <strong>today's date</strong> and
  322. <strong>cannot be cancelled</strong>.
  323. Use <em>Block Without Cancelling Bookings</em> to block dates without affecting any
  324. bookings.
  325. </div>
  326. <div class="table-responsive" id="bookingTableWrapper" style="display:none;">
  327. <table class="table table-bordered table-striped table-vcenter">
  328. <thead class="thead-light">
  329. <tr>
  330. <th class="text-center">
  331. <input type="checkbox" id="selectAllBookings"
  332. title="Select / Deselect all cancellable bookings">
  333. &nbsp;Select All
  334. </th>
  335. <th class="text-center">#</th>
  336. <th class="text-center">Hall Name</th>
  337. <th class="text-center">Zone</th>
  338. <th class="text-center">Division</th>
  339. <th class="text-center">Reason</th>
  340. <th class="text-center">Days</th>
  341. <th class="text-center">Amount (&#x20B9;)</th>
  342. <th class="text-center">From</th>
  343. <th class="text-center">To</th>
  344. <th class="text-center">Status</th>
  345. </tr>
  346. </thead>
  347. <tbody id="bookingTableBody"></tbody>
  348. </table>
  349. </div>
  350. </div>
  351. </div>
  353. <!-- Decision (bookings exist) -->
  354. <div class="block block-rounded" id="blockActionCard">
  355. <div class="block-header block-header-default">
  356. <h3 class="block-title">
  357. <span class="step-badge">3</span> Choose Blocking Action
  358. </h3>
  359. </div>
  360. <div class="block-content">
  361. <div class="decision-card">
  362. <p class="mb-3 fw-semibold">How would you like to proceed?</p>
  363. <div class="d-flex flex-wrap gap-3">
  364. <button type="button" class="btn btn-danger btn-decision" id="cancelAndBlockBtn"
  365. onclick="proceedCancelAndBlock()">
  366. <i class="fa fa-ban me-2"></i>Cancel Bookings &amp; Block Dates
  367. </button>
  368. <button type="button" class="btn btn-warning btn-decision text-dark"
  369. onclick="proceedBlockOnly()">
  370. <i class="fa fa-lock me-2"></i>Block Without Cancelling Bookings
  371. </button>
  372. </div>
  373. <p class="mt-3 mb-0 text-muted small">
  374. <strong>Cancel &amp; Block</strong> — marks existing bookings as GCC-blocked and
  375. initiates refund.&nbsp;|&nbsp;
  376. <strong>Block Only</strong> — marks dates as blocked; existing bookings remain
  377. untouched.
  378. </p>
  379. </div>
  380. </div>
  381. </div>
  383. <!-- Confirm (no bookings) -->
  384. <div class="block block-rounded" id="noConflictCard">
  385. <div class="block-content text-center py-3">
  386. <p class="text-muted mb-3">No booking conflicts found. You can safely block the selected
  387. dates.</p>
  388. <button type="button" class="btn btn-success px-5" onclick="proceedBlockOnly()">
  389. <i class="fa fa-check me-2"></i> Confirm &amp; Block Dates
  390. </button>
  391. </div>
  392. </div>
  394. </div><!-- /#step2Section -->
  396. </div><!-- /content -->
  397. </main>
  399. <div th:replace="~{fragments/resetpassword :: div}"></div>
  400. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  401. </div>
  403. <script th:replace="~{fragments/loginscript :: script}"></script>
  404. <script th:inline="javascript">
  405. /* ═══════════════════════════════════════════════════════════════
  406. CONSTANTS (Officer namespace)
  407. ═══════════════════════════════════════════════════════════════ */
  408. const ADMIN_BASE = '/communityhall/api/officer';
  409. const CANCEL_ALL_URL = ADMIN_BASE + '/cancelAll';
  410. const BLOCK_ONLY_URL = ADMIN_BASE + '/blockWithoutCancel';
  411. const FILTER_URL = ADMIN_BASE + '/filter';
  412. const UNBLOCK_URL = ADMIN_BASE + '/cancelByid';
  413. const BLOCKED_URL = ADMIN_BASE + '/blockedevents';
  414. const ZONE_URL = '/communityhall/user/api/getZone';
  415. const HALLS_URL = '/communityhall/user/api/hallsbyzone';
  416. // No zones param → returns all halls (reuses same endpoint)
  417. const ALL_HALLS_URL = '/communityhall/user/api/hallsbyzone';
  418. const MAX_FILE_BYTES = 2 * 1024 * 1024;
  420. /* ── Officer's allocated hall IDs & zone (injected from session via Thymeleaf) ── */
  421. const OFFICER_HALL_IDS = new Set(
  422. /*[[${hallIds}]]*/[]
  423. );
  424. const OFFICER_ZONE = /*[[${zone}]]*/ null;
  426. /* ═══════════════════════════════════════════════════════════════
  427. PAGE INIT
  428. ═══════════════════════════════════════════════════════════════ */
  429. document.addEventListener('DOMContentLoaded', function () {
  430. const today = new Date();
  431. const pad = n => String(n).padStart(2, '0');
  432. const todayStr = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
  433. document.getElementById('fromDate').min = todayStr;
  434. document.getElementById('toDate').min = todayStr;
  436. document.getElementById('fromDate').addEventListener('change', function () {
  437. const toEl = document.getElementById('toDate');
  438. toEl.min = this.value;
  439. toEl.value = '';
  440. });
  442. document.getElementById('uploadDocument').addEventListener('change', function () {
  443. const file = this.files[0];
  444. if (!file) return;
  445. if (file.type !== 'application/pdf') {
  446. Swal.fire('Invalid File', 'Only PDF files are accepted.', 'error');
  447. this.value = ''; return;
  448. }
  449. if (file.size > MAX_FILE_BYTES) {
  450. Swal.fire('File Too Large', 'Document must be 2 MB or smaller.', 'error');
  451. this.value = '';
  452. }
  453. });
  455. window.addEventListener('click', function (e) {
  456. let t = e.target;
  457. while (t) {
  458. if (t === document.getElementById('zoneMultiselect') ||
  459. t === document.getElementById('hallMultiselect')) return;
  460. t = t.parentNode;
  461. }
  462. closeDropdown('zoneSelectOptions');
  463. closeDropdown('hallSelectOptions');
  464. });
  466. loadOfficerHalls();
  467. loadCurrentlyBlockedHalls();
  468. });
  470. /* ═══════════════════════════════════════════════════════════════
  471. LOAD CURRENTLY BLOCKED HALLS
  472. ═══════════════════════════════════════════════════════════════ */
  473. /* ── Format a java.util.Date JSON value (epoch ms or ISO string)
  474. to a yyyy-MM-dd string using LOCAL date (no timezone shift) ── */
  475. function fmtDate(val) {
  476. if (!val) return '-';
  477. var d = new Date(val);
  478. if (isNaN(d.getTime())) return String(val).substring(0, 10);
  479. var y = d.getFullYear();
  480. var m = String(d.getMonth() + 1).padStart(2, '0');
  481. var day = String(d.getDate()).padStart(2, '0');
  482. return y + '-' + m + '-' + day;
  483. }
  485. function loadCurrentlyBlockedHalls() {
  486. $('#blockedListMsg').text('Loading currently blocked halls…').show();
  487. $('#blockedHallsTable').hide();
  489. const today = new Date();
  490. // Use 5 years in the PAST as fromDate so blocks that started before
  491. // today are still returned by the backend and shown correctly.
  492. const past = new Date(today.getFullYear() - 5, 0, 1);
  493. const far = new Date(today.getFullYear() + 5, 11, 31);
  494. const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  496. // ── Fetch all halls, then scope to officer's allocated hall IDs ──
  497. $.get(ALL_HALLS_URL)
  498. .done(function (allHalls) {
  499. // Build hallMap for ALL halls (needed to resolve names from blocked entries)
  500. const hallMap = {};
  501. (allHalls || []).forEach(h => {
  502. const id = h.hallId || h.hall_id;
  503. const name = h.hallName || h.hall_name || ('Hall#' + id);
  504. hallMap[String(id)] = name;
  505. });
  507. // Filter to only officer's allocated halls
  508. const officerHalls = (allHalls || []).filter(h => {
  509. const id = h.hallId || h.hall_id;
  510. return OFFICER_HALL_IDS.size === 0 || OFFICER_HALL_IDS.has(id) || OFFICER_HALL_IDS.has(String(id));
  511. });
  513. if (!officerHalls.length) {
  514. $('#blockedListMsg').text('No allocated halls found.').show();
  515. return;
  516. }
  518. const officerHallIdSet = new Set(officerHalls.map(h => String(h.hallId || h.hall_id)));
  520. $.ajax({
  521. url: BLOCKED_URL,
  522. type: 'GET',
  523. success: function (blocked) {
  524. // Filter blocked entries to only those involving the officer's halls
  525. const list = (blocked || []).filter(function (item) {
  526. const ids = (item.hallId || '').split(',').map(s => s.trim()).filter(Boolean);
  527. return ids.some(id => officerHallIdSet.has(id));
  528. });
  530. if (!list.length) {
  531. $('#blockedListMsg').text('No halls are currently blocked.').show();
  532. $('#blockedHallsTable').hide();
  533. return;
  534. }
  536. $('#blockedListMsg').hide();
  537. const tbody = document.getElementById('blockedHallsBody');
  538. tbody.innerHTML = '';
  540. const seen = new Set();
  541. let rowNum = 0;
  542. list.forEach(function (item) {
  543. if (seen.has(item.blockingId)) return;
  544. seen.add(item.blockingId);
  545. rowNum++;
  547. const hallIds = (item.hallId || '').split(',').map(s => s.trim()).filter(Boolean);
  548. const hallNames = hallIds.map(id => hallMap[id] || ('Hall#' + id)).join(', ');
  549. // Use fmtDate() to correctly parse java.util.Date JSON values
  550. const startDate = fmtDate(item.startDate);
  551. const endDate = fmtDate(item.endDate);
  553. const tr = document.createElement('tr');
  554. tr.innerHTML = `
  555. <td class="text-center">${rowNum}</td>
  556. <td class="text-center">${escHtml(hallNames)}</td>
  557. <td class="text-center">${startDate}</td>
  558. <td class="text-center">${endDate}</td>
  559. <td class="text-center">${escHtml(item.blockingReason || '-')}</td>
  560. <td class="text-center"><span class="badge bg-danger">BLOCKED</span></td>
  561. <td class="text-center">
  562. <button class="btn btn-sm btn-outline-success"
  563. onclick="unblockEntry(${item.blockingId}, '${startDate}', '${endDate}')">
  564. <i class="fa fa-unlock me-1"></i>Unblock
  565. </button>
  566. </td>
  567. `;
  568. tbody.appendChild(tr);
  569. });
  571. // ── Init / reinit DataTable ──────────────────────────────────────
  572. if ($.fn.DataTable.isDataTable('#blockedHallsTable')) {
  573. $('#blockedHallsTable').DataTable().destroy();
  574. }
  575. $('#blockedHallsTable').show();
  576. $('#blockedHallsTable').DataTable({
  577. pageLength: 10,
  578. lengthChange: false,
  579. order: [],
  580. dom: 'Bfrtip',
  581. buttons: [
  582. {
  583. extend: 'excelHtml5',
  584. text: '<i class="fa fa-file-excel-o me-1"></i>Excel',
  585. className: 'btn btn-sm btn-success me-1',
  586. title: 'Currently Blocked Halls'
  587. },
  588. {
  589. extend: 'pdfHtml5',
  590. text: '<i class="fa fa-file-pdf-o me-1"></i>PDF',
  591. className: 'btn btn-sm btn-danger',
  592. title: 'Currently Blocked Halls',
  593. orientation: 'landscape',
  594. pageSize: 'A4'
  595. }
  596. ]
  597. });
  598. },
  599. error: function () { $('#blockedListMsg').text('Failed to load blocked halls. Please refresh.'); }
  600. });
  601. })
  602. .fail(function () { $('#blockedListMsg').text('Failed to load hall list.'); });
  603. }
  605. /* ═══════════════════════════════════════════════════════════════
  606. UNBLOCK
  607. ═══════════════════════════════════════════════════════════════ */
  608. function unblockEntry(blockingId, fromDate, endDate) {
  609. Swal.fire({
  610. title: 'Unblock these dates?',
  611. html: `This will unblock <strong>${fromDate}</strong> to <strong>${endDate}</strong> (ID: ${blockingId}).<br>
  612. Existing bookings will be restored to active status.`,
  613. icon: 'question',
  614. showCancelButton: true,
  615. confirmButtonColor: '#198754',
  616. cancelButtonColor: '#6c757d',
  617. confirmButtonText: '<i class="fa fa-unlock me-1"></i> Yes, Unblock',
  618. cancelButtonText: 'Cancel'
  619. }).then(result => {
  620. if (!result.isConfirmed) return;
  621. Swal.fire({ title: 'Processing…', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
  622. $.ajax({
  623. url: UNBLOCK_URL, type: 'GET',
  624. data: { blockingId: blockingId, fromDate: fromDate, endDate: endDate },
  625. success: function () {
  626. Swal.fire({ icon: 'success', title: 'Unblocked', text: 'The halls have been unblocked successfully.' })
  627. .then(() => {
  628. location.reload();
  629. });
  630. },
  631. error: function (xhr) {
  632. Swal.fire({
  633. icon: 'error', title: 'Unblock Failed',
  634. text: xhr.responseText || 'An error occurred.'
  635. });
  636. }
  637. });
  638. });
  639. }
  641. /* ═══════════════════════════════════════════════════════════════
  642. HELPERS
  643. ═══════════════════════════════════════════════════════════════ */
  644. function getSelectedZones() {
  645. return Array.from(document.querySelectorAll('#zoneSelectOptions input:checked'))
  646. .map(cb => cb.value).filter(v => v && v !== 'All Zones');
  647. }
  648. function getSelectedHalls() {
  649. return Array.from(document.querySelectorAll('#hallSelectOptions input:checked'))
  650. .map(cb => ({ id: cb.value, name: cb.dataset.name || cb.value }))
  651. .filter(h => !isNaN(h.id) && h.id !== '');
  652. }
  654. function validateForm() {
  655. const zones = getSelectedZones();
  656. const halls = getSelectedHalls();
  657. const from = document.getElementById('fromDate').value;
  658. const to = document.getElementById('toDate').value;
  659. const reason = document.getElementById('reasonforBlocking').value.trim();
  660. const fileEl = document.getElementById('uploadDocument');
  662. if (!zones.length) { Swal.fire('Validation', 'Please select at least one Zone.', 'error'); return false; }
  663. if (!halls.length) { Swal.fire('Validation', 'Please select at least one Hall.', 'error'); return false; }
  664. if (!from) { Swal.fire('Validation', 'From Date is required.', 'error'); return false; }
  665. if (!to) { Swal.fire('Validation', 'To Date is required.', 'error'); return false; }
  666. if (new Date(to) < new Date(from)) {
  667. Swal.fire('Validation', 'To Date cannot be earlier than From Date.', 'error'); return false;
  668. }
  669. if (!reason) { Swal.fire('Validation', 'Reason for Blocking is mandatory.', 'error'); return false; }
  670. if (!fileEl.files || !fileEl.files[0]) {
  671. Swal.fire('Validation', 'Please upload a supporting document (PDF, max 2 MB).', 'error'); return false;
  672. }
  673. const file = fileEl.files[0];
  674. if (file.type !== 'application/pdf') {
  675. Swal.fire('Invalid File', 'Only PDF files are allowed.', 'error'); fileEl.value = ''; return false;
  676. }
  677. if (file.size > MAX_FILE_BYTES) {
  678. Swal.fire('File Too Large', 'Document must be 2 MB or smaller.', 'error'); fileEl.value = ''; return false;
  679. }
  680. return true;
  681. }
  683. /* ═══════════════════════════════════════════════════════════════
  684. STEP 1 – VIEW BOOKINGS (per-hall conflict check)
  685. ═══════════════════════════════════════════════════════════════ */
  686. function loadBookings() {
  687. if (!validateForm()) return;
  689. $('#step2Section').hide();
  690. $('#conflictAlertBox').hide();
  691. $('#conflictDetails').html('');
  693. const halls = getSelectedHalls();
  694. const from = document.getElementById('fromDate').value;
  695. const to = document.getElementById('toDate').value;
  696. const hallIds = halls.map(h => h.id);
  698. $.ajax({
  699. url: FILTER_URL, type: 'GET',
  700. data: { hallIds: hallIds.join(','), fromDate: from, toDate: to },
  701. success: function (response) {
  702. const bookings = response.bookings || [];
  703. const blockedEvents = response.blockedEvents || [];
  705. if (blockedEvents && blockedEvents.length > 0) {
  706. // Build per-hall conflict list
  707. const conflictHallIds = new Set();
  708. blockedEvents.forEach(ev => {
  709. (ev.hallId || '').split(',').forEach(id => conflictHallIds.add(id.trim()));
  710. });
  712. let html = '<ul class="mb-0">';
  713. halls.forEach(function (h) {
  714. if (conflictHallIds.has(String(h.id))) {
  715. html += `<li>
  716. <span class="conflict-pill pill-blocked">&#128274; ${escHtml(h.name)}</span>
  717. is <strong>already blocked</strong> for <strong>${from}</strong> to <strong>${to}</strong>.
  718. Please unblock it first or choose different dates.
  719. </li>`;
  720. }
  721. });
  722. html += '</ul>';
  724. $('#conflictDetails').html(html);
  725. $('#conflictAlertBox').show();
  726. document.getElementById('conflictAlertBox').scrollIntoView({ behavior: 'smooth' });
  727. return; // stop – do not show blocking actions
  728. }
  730. renderBookingsTable(bookings);
  731. $('#step2Section').show();
  733. if (bookings.length === 0) {
  734. $('#noBookingsMsg').show();
  735. $('#bookingsFoundMsg').hide();
  736. $('#bookingTableWrapper').hide();
  737. $('#blockActionCard').hide();
  738. $('#noConflictCard').show();
  739. } else {
  740. $('#noBookingsMsg').hide();
  741. $('#bookingsFoundMsg').show();
  742. $('#bookingTableWrapper').show();
  743. $('#blockActionCard').show();
  744. $('#noConflictCard').hide();
  745. }
  746. document.getElementById('step2Section').scrollIntoView({ behavior: 'smooth' });
  747. },
  748. error: function (xhr) {
  749. console.error('Filter error:', xhr.responseText);
  750. Swal.fire('Error', 'Failed to check hall availability. Please try again.', 'error');
  751. }
  752. });
  753. }
  755. function renderBookingsTable(bookings) {
  756. const tbody = document.getElementById('bookingTableBody');
  757. tbody.innerHTML = '';
  758. $('#todayBookingWarning').hide();
  759. $('#selectAllBookings').prop('checked', true);
  761. const todayStr = (() => {
  762. const d = new Date();
  763. return d.getFullYear() + '-'
  764. + String(d.getMonth() + 1).padStart(2, '0') + '-'
  765. + String(d.getDate()).padStart(2, '0');
  766. })();
  768. let hasTodayBooking = false;
  769. let allToday = true;
  771. bookings.forEach(function (b, idx) {
  772. const bStart = (b.startDate || '').slice(0, 10);
  773. const isToday = (bStart === todayStr);
  774. if (isToday) hasTodayBooking = true;
  775. else allToday = false;
  777. const cbDisabled = isToday ? 'disabled title="Cannot cancel today&#39;s active booking"' : '';
  778. const cbChecked = isToday ? '' : 'checked';
  779. const statusBadge = isToday
  780. ? '<span class="badge bg-warning text-dark">Today – Cannot Cancel</span>'
  781. : '<span class="badge bg-primary">User Booked</span>';
  783. const tr = document.createElement('tr');
  784. tr.setAttribute('data-booking-id', b.bookingId || '');
  785. tr.innerHTML = `
  786. <td class="text-center">
  787. <input type="checkbox" class="booking-cb" data-booking-id="${b.bookingId || ''}"
  788. ${cbChecked} ${cbDisabled}>
  789. </td>
  790. <td class="text-center">${idx + 1}</td>
  791. <td class="text-center">${escHtml(b.hallDetails ? b.hallDetails.hallName : '-')}</td>
  792. <td class="text-center">${escHtml(b.hallDetails ? b.hallDetails.zone : '-')}</td>
  793. <td class="text-center">${escHtml(b.hallDetails ? b.hallDetails.division : '-')}</td>
  794. <td class="text-center">${escHtml(b.reason || '-')}</td>
  795. <td class="text-center">${b.noOfDays || '-'}</td>
  796. <td class="text-center">${b.hallAmount || '-'}</td>
  797. <td class="text-center">${escHtml(b.startDate || '-')}</td>
  798. <td class="text-center">${escHtml(b.endDate || '-')}</td>
  799. <td class="text-center">${statusBadge}</td>
  800. `;
  801. tbody.appendChild(tr);
  802. });
  804. // Wire select-all checkbox
  805. const selAll = document.getElementById('selectAllBookings');
  806. if (selAll) {
  807. // Select All → toggle every enabled row checkbox
  808. selAll.onchange = function () {
  809. document.querySelectorAll('.booking-cb:not(:disabled)')
  810. .forEach(cb => { cb.checked = selAll.checked; });
  811. };
  813. // Individual row checkboxes → sync Select All state
  814. document.querySelectorAll('.booking-cb:not(:disabled)').forEach(cb => {
  815. cb.addEventListener('change', function () {
  816. const total = document.querySelectorAll('.booking-cb:not(:disabled)').length;
  817. const checked = document.querySelectorAll('.booking-cb:not(:disabled):checked').length;
  818. selAll.checked = (total > 0 && checked === total);
  819. });
  820. });
  821. }
  823. if (hasTodayBooking) {
  824. $('#todayBookingWarning').show();
  825. }
  827. // Disable Cancel & Block button if ALL bookings are today's
  828. if (allToday && bookings.length > 0) {
  829. $('#cancelAndBlockBtn')
  830. .prop('disabled', true)
  831. .attr('title', 'Cannot cancel — all conflicting bookings are for today. Use Block Without Cancelling instead.');
  832. } else {
  833. $('#cancelAndBlockBtn').prop('disabled', false).removeAttr('title');
  834. }
  835. }
  837. /* ═══════════════════════════════════════════════════════════════
  838. STEP 3A – Cancel bookings THEN block
  839. ═══════════════════════════════════════════════════════════════ */
  840. function proceedCancelAndBlock() {
  841. // Collect enabled + checked booking IDs
  842. const selectedIds = [];
  843. document.querySelectorAll('.booking-cb:not(:disabled):checked')
  844. .forEach(cb => { if (cb.dataset.bookingId) selectedIds.push(cb.dataset.bookingId); });
  846. if (selectedIds.length === 0) {
  847. Swal.fire({
  848. icon: 'warning',
  849. title: 'No Bookings Selected',
  850. html: 'Please tick at least one booking to cancel, or use <em>Block Without Cancelling Bookings</em>.'
  851. });
  852. return;
  853. }
  855. const todayCount = document.querySelectorAll('.booking-cb:disabled').length;
  856. const extraNote = todayCount > 0
  857. ? `<br><small class="text-warning">&#9888; ${todayCount} today's booking(s) will be skipped and remain active.</small>`
  858. : '';
  860. Swal.fire({
  861. title: 'Cancel Bookings & Block?',
  862. html: `This will <strong>cancel ${selectedIds.length} selected booking(s)</strong> and block the halls.<br><br>
  863. <span class="text-danger fw-bold">This action cannot be undone.</span>${extraNote}`,
  864. icon: 'warning',
  865. showCancelButton: true,
  866. confirmButtonColor: '#dc3545',
  867. cancelButtonColor: '#6c757d',
  868. confirmButtonText: '<i class="fa fa-ban me-1"></i> Yes, Cancel & Block',
  869. cancelButtonText: 'Go Back'
  870. }).then(result => {
  871. if (result.isConfirmed) submitBlockRequest(true);
  872. });
  873. }
  875. /* ═══════════════════════════════════════════════════════════════
  876. STEP 3B – Block ONLY (no booking cancellation)
  877. ═══════════════════════════════════════════════════════════════ */
  878. function proceedBlockOnly() {
  879. Swal.fire({
  880. title: 'Block Dates?',
  881. html: `The selected halls will be blocked for the chosen period.<br>
  882. <strong>Existing bookings will NOT be cancelled.</strong>`,
  883. icon: 'info',
  884. showCancelButton: true,
  885. confirmButtonColor: '#ffc107',
  886. cancelButtonColor: '#6c757d',
  887. confirmButtonText: '<i class="fa fa-lock me-1"></i> Yes, Block',
  888. cancelButtonText: 'Go Back'
  889. }).then(result => {
  890. if (result.isConfirmed) submitBlockOnlyRequest();
  891. });
  892. }
  894. /* ═══════════════════════════════════════════════════════════════
  895. SUBMIT (Cancel & Block)
  896. ═══════════════════════════════════════════════════════════════ */
  897. function submitBlockRequest(cancelExisting) {
  898. const halls = getSelectedHalls();
  899. const from = document.getElementById('fromDate').value;
  900. const to = document.getElementById('toDate').value;
  901. const reason = document.getElementById('reasonforBlocking').value.trim();
  902. const desc = document.getElementById('documentDescription').value.trim();
  903. const fileEl = document.getElementById('uploadDocument');
  905. let selectedBookings = [];
  906. if (cancelExisting) {
  907. // Only collect IDs from checked & enabled checkboxes (skips today's bookings)
  908. document.querySelectorAll('.booking-cb:not(:disabled):checked')
  909. .forEach(cb => { if (cb.dataset.bookingId) selectedBookings.push(cb.dataset.bookingId); });
  910. }
  912. console.log("selectedBookings...." + selectedBookings);
  914. const fd = new FormData();
  915. fd.append('fromDate', from);
  916. fd.append('toDate', to);
  917. fd.append('hallID', halls.map(h => h.id).join(','));
  918. fd.append('reasonforblocking', reason);
  919. if (desc) fd.append('description', desc);
  920. if (fileEl.files && fileEl.files[0]) fd.append('document', fileEl.files[0]);
  921. if (selectedBookings.length) fd.append('selectedBookings', selectedBookings.join(','));
  924. Swal.fire({ title: 'Processing…', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
  926. $.ajax({
  927. url: CANCEL_ALL_URL, type: 'POST',
  928. data: fd, processData: false, contentType: false,
  929. success: function () {
  930. Swal.fire({
  931. icon: 'success', title: 'Success',
  932. text: 'Bookings have been cancelled and the dates are now blocked.'
  933. }).then(() => location.reload());
  934. },
  935. error: function (xhr) {
  936. Swal.fire({
  937. icon: 'error', title: 'Request Failed',
  938. text: 'Something went wrong. Please try again.'
  939. });
  940. }
  941. });
  942. }
  944. /* ═══════════════════════════════════════════════════════════════
  945. SUBMIT (Block Without Cancelling) — calls smart endpoint
  946. ═══════════════════════════════════════════════════════════════ */
  947. function submitBlockOnlyRequest() {
  948. const halls = getSelectedHalls();
  949. const from = document.getElementById('fromDate').value;
  950. const to = document.getElementById('toDate').value;
  951. const reason = document.getElementById('reasonforBlocking').value.trim();
  952. const desc = document.getElementById('documentDescription').value.trim();
  953. const fileEl = document.getElementById('uploadDocument');
  955. const fd = new FormData();
  956. fd.append('fromDate', from);
  957. fd.append('toDate', to);
  958. fd.append('hallID', halls.map(h => h.id).join(','));
  959. fd.append('reasonforblocking', reason);
  960. if (desc) fd.append('description', desc);
  961. if (fileEl.files && fileEl.files[0]) fd.append('document', fileEl.files[0]);
  963. Swal.fire({ title: 'Processing…', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
  965. $.ajax({
  966. url: BLOCK_ONLY_URL, type: 'POST',
  967. data: fd, processData: false, contentType: false,
  968. success: function () {
  969. Swal.fire({
  970. icon: 'success', title: 'Success',
  971. text: 'The selected dates have been blocked. Existing bookings were not affected.'
  972. }).then(() => location.reload());
  973. },
  974. error: function (xhr) {
  975. Swal.fire({
  976. icon: 'error', title: 'Request Failed',
  977. text: 'Something went wrong. Please try again.'
  978. });
  979. }
  980. });
  981. }
  983. /* ═══════════════════════════════════════════════════════════════
  984. ZONE / HALL MULTISELECT – Officer variant
  985. Loads the zone and hall fields pre-filled with the officer's
  986. allocated zone (from session) and their assigned halls.
  988. Key facts from the backend:
  989. • OFFICER_ZONE – injected by Thymeleaf from session "zone"
  990. • OFFICER_HALL_IDS – injected by Thymeleaf from session "hall_ids"
  991. • HALLS_URL (/hallsbyzone?zones=X) returns { hallId, hallName }
  992. (getAllHalls SQL has NO zone column, so zone must come from session)
  993. ═══════════════════════════════════════════════════════════════ */
  994. function loadOfficerHalls() {
  995. if (!OFFICER_ZONE) {
  996. document.getElementById('zoneSelectOptions').innerHTML =
  997. '<label class="text-danger px-2">Zone not assigned to this account.</label>';
  998. return;
  999. }
  1001. // Fetch halls for the officer's zone → returns { hallId, hallName }
  1002. $.get(HALLS_URL, { zones: OFFICER_ZONE }).done(function (hallsInZone) {
  1004. // Keep only the officer's allocated hall IDs
  1005. const myHalls = (hallsInZone || []).filter(function (h) {
  1006. const id = h.hallId || h.hall_id;
  1007. return OFFICER_HALL_IDS.size === 0 ||
  1008. OFFICER_HALL_IDS.has(id) ||
  1009. OFFICER_HALL_IDS.has(Number(id)) ||
  1010. OFFICER_HALL_IDS.has(String(id));
  1011. });
  1013. if (!myHalls.length) {
  1014. document.getElementById('zoneSelectOptions').innerHTML =
  1015. '<label class="text-danger px-2">No allocated halls found for zone: ' + OFFICER_ZONE + '</label>';
  1016. return;
  1017. }
  1019. /* ── SINGLE HALL: show readonly prefilled inputs ── */
  1020. if (myHalls.length === 1) {
  1021. const hall = myHalls[0];
  1022. const zone = OFFICER_ZONE;
  1023. const hallName = (hall.hallName || hall.hall_name || '').trim().replace(/^, */, '');
  1024. const hallId = String(hall.hallId || hall.hall_id);
  1026. // Zone – hide multiselect, show readonly text input
  1027. document.getElementById('zoneMultiselect').style.display = 'none';
  1028. const zonePrefilled = document.getElementById('zonePrefilled');
  1029. zonePrefilled.value = zone;
  1030. zonePrefilled.style.display = '';
  1032. // Inject hidden checked checkbox so getSelectedZones() works
  1033. const zoneMenu = document.getElementById('zoneSelectOptions');
  1034. zoneMenu.innerHTML = '';
  1035. const zCb = document.createElement('input');
  1036. zCb.type = 'checkbox'; zCb.value = zone; zCb.checked = true;
  1037. zCb.style.display = 'none';
  1038. zoneMenu.appendChild(zCb);
  1040. // Hall – hide multiselect, show readonly text input
  1041. document.getElementById('hallMultiselect').style.display = 'none';
  1042. const hallPrefilled = document.getElementById('hallPrefilled');
  1043. hallPrefilled.value = hallName;
  1044. hallPrefilled.style.display = '';
  1046. // Inject hidden checked checkbox so getSelectedHalls() works
  1047. const hallMenu = document.getElementById('hallSelectOptions');
  1048. hallMenu.innerHTML = '';
  1049. const hCb = document.createElement('input');
  1050. hCb.type = 'checkbox'; hCb.value = hallId; hCb.checked = true;
  1051. hCb.dataset.name = hallName;
  1052. hCb.style.display = 'none';
  1053. hallMenu.appendChild(hCb);
  1055. return; // done
  1056. }
  1058. /* ── MULTIPLE HALLS: populate dropdowns ── */
  1059. // Zone dropdown – officer always belongs to one zone
  1060. const zoneMenu = document.getElementById('zoneSelectOptions');
  1061. zoneMenu.innerHTML = '';
  1062. appendCheckbox(zoneMenu, 'zone_' + OFFICER_ZONE, OFFICER_ZONE, OFFICER_ZONE, null, function () {
  1063. updateLabel('zoneSelectOptions', 'zoneSelectLabel');
  1064. });
  1065. const zoneCb = document.querySelector('#zoneSelectOptions input');
  1066. if (zoneCb) { zoneCb.checked = true; }
  1067. updateLabel('zoneSelectOptions', 'zoneSelectLabel');
  1069. // Hall dropdown – all allocated halls
  1070. populateHallDropdown(myHalls);
  1072. }).fail(function () {
  1073. document.getElementById('zoneSelectOptions').innerHTML =
  1074. '<label class="text-danger px-2">Failed to load halls. Please refresh.</label>';
  1075. });
  1076. }
  1078. function toggleAllZones(checked, myHalls) {
  1079. document.querySelectorAll('#zoneSelectOptions input').forEach(cb => { cb.checked = checked; });
  1080. loadHallsForSelectedZones(myHalls);
  1081. updateLabel('zoneSelectOptions', 'zoneSelectLabel');
  1082. }
  1084. function loadHallsForSelectedZones(myHalls) {
  1085. const selected = getSelectedZones();
  1086. const menu = document.getElementById('hallSelectOptions');
  1087. if (!selected.length) {
  1088. // No zone selected — show all officer's halls
  1089. populateHallDropdown(myHalls);
  1090. return;
  1091. }
  1092. // Show only halls from selected zones
  1093. const filtered = myHalls.filter(h => selected.includes(h.zone || h.zoneName));
  1094. populateHallDropdown(filtered);
  1095. }
  1097. function populateHallDropdown(halls) {
  1098. const menu = document.getElementById('hallSelectOptions');
  1099. menu.innerHTML = '';
  1100. if (!halls.length) return;
  1101. appendCheckbox(menu, 'allHallsCb', 'All Halls', '', null,
  1102. checked => toggleAllHalls(checked));
  1103. halls.forEach(hall => {
  1104. const name = (hall.hallName || '').trim().replace(/^, */, '');
  1105. appendCheckbox(menu, `hall_${hall.hallId}`, name, hall.hallId, name, () => {
  1106. updateLabel('hallSelectOptions', 'hallSelectLabel');
  1107. });
  1108. });
  1109. }
  1111. /* Legacy alias — kept for safety in case any other code calls getZone() */
  1112. function getZone() { loadOfficerHalls(); }
  1113. /* Legacy alias — kept for safety */
  1114. function loadHallsbyzone() {
  1115. $.get(ALL_HALLS_URL).done(function (allHalls) {
  1116. const myHalls = (allHalls || []).filter(h => {
  1117. const id = h.hallId || h.hall_id;
  1118. return OFFICER_HALL_IDS.size === 0 || OFFICER_HALL_IDS.has(id) || OFFICER_HALL_IDS.has(String(id));
  1119. });
  1120. loadHallsForSelectedZones(myHalls);
  1121. });
  1122. }
  1123. function appendCheckbox(parent, id, text, value, dataName, onChange) {
  1124. const label = document.createElement('label');
  1125. const cb = document.createElement('input');
  1126. cb.type = 'checkbox'; cb.id = id; cb.value = value;
  1127. if (dataName) cb.dataset.name = dataName;
  1128. cb.addEventListener('change', function () { onChange(this.checked); });
  1129. label.textContent = text; label.prepend(cb);
  1130. parent.appendChild(label);
  1131. }
  1132. function toggleAllHalls(checked) {
  1133. document.querySelectorAll('#hallSelectOptions input').forEach(cb => { cb.checked = checked; });
  1134. updateLabel('hallSelectOptions', 'hallSelectLabel');
  1135. }
  1136. function updateLabel(optId, labelId) {
  1137. const opt0 = document.getElementById(labelId).getElementsByTagName('option')[0];
  1138. const names = Array.from(document.querySelectorAll(`#${optId} input:checked`))
  1139. .map(cb => cb.dataset.name || cb.value).filter(v => v && v !== 'All Zones' && v !== '');
  1140. opt0.innerText = names.length ? names.join(', ') : 'Nothing selected';
  1141. }
  1142. function toggleDropdown(id) {
  1143. const el = document.getElementById(id);
  1144. el.style.display = el.style.display === 'block' ? 'none' : 'block';
  1145. }
  1146. function closeDropdown(id) { document.getElementById(id).style.display = 'none'; }
  1147. function escHtml(str) {
  1148. if (!str) return '';
  1149. return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;')
  1150. .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  1151. }
  1152. </script>
  1154. <!-- DataTables 1.13 + Buttons extension (Excel / PDF) -->
  1155. <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
  1156. <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
  1157. <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  1158. <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
  1159. <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
  1160. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
  1161. <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  1162. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  1163. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
  1164. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
  1165. </body>
  1167. </html>