|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"> <style>
</style></head>
<body>
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end --> <div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <!-- <i class="far fa-calendar-plus bg-blue"></i> --> <div class="d-inline"> <h5>Check Availability</h5> <span>Check Availability for Hall Allocation</span> </div> </div> </div>
</div> </div>
<div class="row">
<div class="col-md-12"> <div class="card" style="margin-top: 15px;">
<div class="card-body">
<input type="hidden" id="loginUserId" th:value="${loginUserId}">
<div class="form-group"> <div class="row">
<!-- Department -->
<div class="col-sm-12 col-md-6"> <label class="form-label" for="traininglist">Select traininglist <span class="text-danger">*</span> </label> <select class="form-control" id="traininglist" required> <option value=""> Select traininglist </option>
</select> </div> <!-- Office Name -->
</div> </div>
<div class="form-group text-center"> <button type="submit" class="btn btn-primary " id="createdBtn">Submit</button> <button type="reset" class="btn btn-secondary ml-2" id="resetBtn">Reset</button> </div> </div>
</div> </div> </div>
<!-- Batch List Table -->
<div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h3><b>All Centres</b></h3> </div>
<div class="card-body">
<table id="batchDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> <thead class="thead-dark"> <tr role="row"> <th class="text-center no-sort">S.No</th> <th class="text-center no-sort">AC Name</th> <th class="text-center no-sort">Center Name</th> <th class="text-center no-sort">Constituency Code</th> <th class="text-center no-sort">Allocated Count</th> <th class="text-center no-sort">Unallocated Count</th> <th class="text-center no-sort">Status</th> <th class="text-center no-sort">Action</th> </tr> </thead> <tbody style="text-align:center;">
</tbody>
</table>
</div>
</div> </div> </div> </div> </div> <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> <div style="position: relative; top: 50%; transform: translateY(-50%);"> <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> <span class="sr-only">Loading...</span> </div> <!-- Add the 'Please wait' text below the spinner --> <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> </div> </div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script type="text/javascript">
// ✅ Reset Button document.getElementById('resetBtn').addEventListener('click', function (e) { e.preventDefault(); location.reload(); });
var batchTable; // ✅ GLOBAL
$(document).ready(function () {
// ✅✅✅ SINGLE & CORRECT DataTable Initialization batchTable = $('#batchDatatable').DataTable({ dom: 'Bftip', autoWidth: false, responsive: false, scrollX: true, scrollY: '80vh', scrollCollapse: true, fixedHeader: false,
ordering: true, // keep ordering enabled, but disable per column
lengthMenu: [ [50, 100, 200, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ],
buttons: [ { extend: 'pageLength', className: 'btn btn-warning' }, { extend: 'copyHtml5', className: 'btn btn-secondary' }, { extend: 'excelHtml5', className: 'btn btn-secondary' }, { extend: 'csvHtml5', className: 'btn btn-secondary' }, { extend: 'pdfHtml5', className: 'btn btn-secondary' } ],
columns: [ { data: null, render: (d, t, r, m) => m.row + 1 }, { data: "ac_name" }, { data: "center_name" }, { data: "constcode" }, { data: "allocated_count" }, { data: "unallocated_count" }, { data: "message", render: function (data) { if (!data) return "";
const msg = data.toLowerCase();
// 🟢 GREEN — halls assigned if (msg.includes("assigned") && !msg.includes("not") && !msg.includes("partially")) { return `<span class="badge bg-success text-white px-3 py-2">${data}</span>`; }
// 🟡 YELLOW — halls partially assigned if (msg.includes("partially")) { return `<span style=" background:#ffc107; color:#fff; padding:6px 12px; border-radius:4px; font-weight:600;"> ${data} </span>`; }
// 🔴 RED — halls not assigned if (msg.includes("not")) { return `<span class="badge bg-danger text-white px-3 py-2">${data}</span>`; }
return data; } }, /* ---------- ACTION COLUMN ---------- */ { data: null, orderable: false, render: function (data, type, row) {
const msg = (row.message || "").toLowerCase();
// ✅ Show Proceed button ONLY for "halls assigned" if ( msg.includes("assigned") && !msg.includes("not") && !msg.includes("partially") ) { return ` <button class="btn btn-success btn-sm" onclick="proceedHallAllocation(${row.constcode})"> Proceed </button>`; }
return "-"; } } ],
columnDefs: [ { orderable: false, targets: "_all" } // 🔥 disables sorting ] });
// load training list $.ajax({ url: "/election/api/checkAvailability", method: "GET", success: function (response) {
let traininglist = $("#traininglist"); traininglist.empty().append('<option value="">-- Select Training --</option>');
if (response.status !== "success" || !response.data || response.data.length === 0) { return; }
response.data.forEach(training => { traininglist.append(` <option value="${training.id}" data-availability-url="${training.availability_url || ''}"> ${training.training_name} </option> `); }); }, error: function () { Swal.fire("Error", "Failed to load training list", "error"); } });
});
// ✅ Create Batch $("#createdBtn").click(function (e) { e.preventDefault();
const selectedOption = $("#traininglist option:selected"); const availabilityUrl = selectedOption.data("availability-url");
if (!availabilityUrl) { Swal.fire( "Validation Error", "Selected training does not have availability URL", "warning" ); batchTable.clear().draw(); batchTable.columns.adjust().draw(false); return; }
// ✅ Call selected availability URL $.ajax({ url: availabilityUrl, type: "GET", success: function (response) {
batchTable.clear();
if (response.data && response.data.length > 0) { batchTable.rows.add(response.data); } else { Swal.fire("No data found"); }
batchTable.draw(); batchTable.columns.adjust().draw(false); }, error: function () { Swal.fire("Error", "Failed to fetch availability data", "error"); batchTable.clear().draw(); batchTable.columns.adjust().draw(false); } }); });
</script>
</body>
</html>
|
