|
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-admin :: head}"></head>
<body><!-- Page Container --><div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark"> <!-- Side Overlay aside (right)--> <aside th:replace="~{fragments/aside-right :: aside}"></aside> <!-- END Side Overlay (right)-->
<!-- Sidebar Nav--> <nav th:replace="~{fragments/nav-admin :: nav}"></nav> <!-- END Sidebar -->
<!-- Header --> <header th:replace="~{fragments/header-admin :: header}"></header> <!-- END Header -->
<!-- Main Container --> <main id="main-container">
<!-- END Hero --> <!-- Page Content --> <div class="content"> <div class="block block-rounded"> <div class="block-header block-header-default"> <h3 class="block-title"> List of Halls</h3> <div class="block-options"> <button type="button" class="btn-block-option" id="addButton" onclick="addnewhall()"><i class="far fa-plus-square"></i> Add New Hall </button> </div> </div> <div class="block-content p-0"> <div class="p-sm-4 p-0"> <div class="table-responsive"> <table id="halldetailsList" class="table table-bordered table-striped table-vcenter js-dataTable-responsive"> <thead class="thead-light"> <tr class="table-bordered"> <th class="text-center no-sort">S.No</th> <th class="text-center" width="20%">Hallname</th> <th class="text-center">Zone</th> <th class="text-center">Division</th> <th class="text-center">Status</th> <th class="text-center">Hall Images</th> <th class="text-center">Action</th> </tr> </thead> <tbody> <!-- Use Thymeleaf to loop through the bookingList --> <tr th:each="list, i : ${halllist}" class="${halllist}" id="hallRow"> <td th:text="${i.count}">0</td> <td class="text-center" th:text="${list.hallName}"></td> <td class="text-center" th:text="${list.zone}"></td> <td class="text-center" th:text="${list.division}"></td> <td class="text-center"> <span class="badge bg-success" th:if="${list.isActive}">Active</span> <span class="badge bg-danger" th:unless="${list.isActive}">Deactivated</span> </td> <td class="text-center"> <a class="view-button"> <span class="badge bg-primary" style="cursor: pointer;" th:onclick="viewHallImages([[${list.hallId}]])">View</span> </a> <a href="javascript:void(0);" th:onclick="return hallimageEdit([[${list.hallId}]]);" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="Edit Hall Image"><i class="fas fa-edit" style="font-size: 18px;"></i></a> </td> <td class="text-center"> <a href="javascript:void(0);" th:onclick="return callview([[${list.hallId}]],0);" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="View Hall info"><i class="fa fa-eye" style="font-size: 18px;"></i></a> <a href="javascript:void(0);" th:onclick="return callview([[${list.hallId}]],1);" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="Edit Hall Info"><i class="fas fa-edit" style="font-size: 18px;"></i></a>
</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- END Page Content --> </main> <!-- END Main Container --> <footer th:replace="~{fragments/footer2 :: footer}"></footer> <!-- END Footer --></div>
<!-- END Page Container --><div class="modal fade backdrop" id="infoForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title" id="mtitle1">Hall Information</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content row">
<input type="hidden" class="form-control text-center" name="id" id="id" disabled/> <!-- <div class="col-sm-4">
<label class="form-label" for="val-digits">Pet ID:<span class="text-danger">*</span></label> <input type="hidden" class="form-control text-center" name="uniqid" id="uniqid" disabled /> </div> --> <div class="col-sm-4"> <label class="form-label" for="hallName">Hall Name:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="hallName" id="hallName" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="zone">Zone:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="zones" id="zones" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="division">Division:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="divisions" id="divisions" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="doorNo">Address:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="doorNo" id="doorNo" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="pincode">Pincode:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="pincode" id="pincode" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="caretakerNo">Hall Incharge MobileNumber:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="hallInchargeMobno" id="hallInchargeMobno" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="caretakerNo">Hall Incharge Name:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="InchargeName" id="InchargeName" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="landmark">Landmark:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="landmark" id="landmark" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="latitude">Latitude:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="latitude" id="latitude" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="longitude">Longitude:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="longitude" id="longitude" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="depositAmount">Full Day Deposit Amount:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="depositAmount" id="depositAmount" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="halfDepositAmount" id="halfDepositAmount" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="fullDayAmount">FullDayAmount:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmount" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="halfDayAmount">HalfDayAmount:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmount" disabled/> </div> <div class="col-sm-4"> <label class="form-label" for="seatingCapacity">ParkingCapacity:<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="parkingCapacity" id="parkingCapacity" disabled/> </div>
<!--<div class="mb-4">
<label class="form-label" for="reason">Reason:<span class="text-danger"></span></label> <textarea class="form-control " name="reason" id="reason" disabled ></textarea> </div>--> </div> </div> <div class="block-content block-content-full text-end bg-body" id="mbutton1"> <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div></div>
<!-- Edit Form --><div class="modal fade backdrop" id="editForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form id="ownform" onsubmit="return editsubmit();"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title" id="mtitle">Hall Information Edit Form</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content row"> <input type="hidden" class="form-control text-center" name="id" id="idd" disabled/> <div class="col-sm-4"> <label class="form-label" for="hallName">Hall Name:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="hallName" id="hallNam" required/> </div> <div class="col-sm-4"> <label class="form-label" for="zone">Zone:*<span class="text-danger"></span></label> <select class="form-select" name="zone2" id="zone2" required="" onchange="getDiv2(this);"> <option value="">---Select Zone---</option> </select> </div> <div class="col-sm-4"> <label class="form-label" for="division">Division:*<span class="text-danger"></span></label> <select class="form-select" name="division2" id="division2" required=""> <option value="">---Select Div---</option> </select> </div> <div class="col-sm-4"> <label class="form-label" for="doorNo">Address:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="doorNo" id="doornoo" required/> </div> <div class="col-sm-4"> <label class="form-label" for="street">Street:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="street" id="street" required/> </div> <div class="col-sm-4"> <label class="form-label" for="pincode">Pincode:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="pincode" id="pincod" minlength="6" maxlength="6" pattern="[0-9]{6}" required/> </div> <div class="col-sm-4"> <label class="form-label" for="area">Area:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="area" id="area" required/> </div> <div class="col-sm-4"> <label class="form-label" for="InchargeMobno">Hall Incharge Mobile Number:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="InchargeMobno" id="InchargeMobno" minlength="10" maxlength="10" pattern="[0-9]{10}" required/> </div> <div class="col-sm-4"> <label class="form-label" for="InchargeNamehall">Hall Incharge Name:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="InchargeNamehall" id="InchargeNamehall" required/> </div> <div class="col-sm-4"> <label class="form-label" for="landmark">Landmark:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="landmark" id="landmar" required/> </div> <div class="col-sm-4"> <label class="form-label" for="latitude">Latitude:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="latitude" id="latitu" required oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/> </div> <div class="col-sm-4"> <label class="form-label" for="longitude">Longitude:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="longitude" id="longitu" required oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/> </div> <div class="col-sm-4"> <label class="form-label" for="depositAmount">Full Day Deposit Amount:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="depositAmount" id="depositAmo" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="halfDepositAmount" id="halfDepositAmo" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="fullDayAmount">Full Day Amount:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmo" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="halfDayAmount">Half Day Amount:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmo" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="parkingCapacity">Parking Capacity:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="parkingCapacity" id="parkingCapaci" required inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="seatingCapaci">Seating Capacity:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="seatingCapaci" id="seatingCapaci" required inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="ebNumber">Consumer Number:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="ebNumber" id="ebNumber" required minlength="9" maxlength="12" pattern="^[0-9-+*#]{9,12}$"/> </div> <div class="col-sm-4"> <label class="form-label" for="ebCostPerUnit">EB Cost Per Unit:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="ebCostPerUnit" id="ebCostPerUnit" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/> </div> <div class="col-sm-4"> <label class="form-label" for="city">City:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="city" id="city" required/> </div> <div class="col-sm-4"> <label class="form-label" for="gst">GST in %:*<span class="text-danger"></span></label> <input type="text" class="form-control text-center" name="gst" id="updatedgstpercentage" required/> </div> <div class="col-sm-4"> <label class="form-label" for="hallStatus">Hall Status:*<span class="text-danger"></span></label> <select class="form-select" name="hallStatus" id="hallStatus" required=""> <option value="1">Activate</option> <option value="0">Deactivate</option> </select> </div> </div> <div class="block-content block-content-full text-end bg-body" id="mbutton"> <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close </button> <button type="submit" class="btn btn-sm btn-primary">Update</button> </div> </div> </form> </div> </div></div>
<!-- End of Edit form --><div class="modal fade backdrop" id="hallDetailsModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <form action="/victoriahallbooking/admin/saveHallDetails" id="hallform" method="post" enctype="multipart/form-data"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title" id="mtitle">Add New Hall</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content row"> <div class="col-md-4"> <div class="form-group"> <label class="form-check-label" for="zone1">Select Zone*</label> <select class="form-select" name="zone1" id="zone1" required="" onchange="getDiv(this);"> <option val="">---Select Zone---</option> </select> </div> <input type="hidden" class="form-control text-center" name="zone" id="zone" value="0"/> </div>
<div class="col-md-4"> <div class="form-group"> <label class="form-check-label" for="division">Select Division*</label> <select class="form-select" name="division" id="division" required=""> <option value="">---Select Div---</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="hallName">Hall Name:*</label> <input type="text" class="form-control" id="hallName" name="hallName" placeholder="Hall Name" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="hallArea">Hall Area (in square feet):*</label> <input type="text" class="form-control" id="hallArea" name="hallArea" placeholder="Hall Area" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="doorNo">Door No:*</label> <input type="text" class="form-control" id="doorNo" name="doorNo" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');" placeholder="Door No" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="street">Street:*</label> <input type="text" class="form-control" id="street" name="street" placeholder="Street" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="area">Area:*</label> <input type="text" class="form-control" id="area" name="area" placeholder="Area" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="city">City:*</label> <input type="text" class="form-control" id="city" name="city" placeholder="City" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="pinCode">Pincode:*</label> <input type="text" class="form-control" id="pinCode" name="pinCode" placeholder="Pincode" required minlength="6" maxlength="6" pattern="[0-9]{6}" onkeypress="return event.charCode >= 48 && event.charCode <= 57"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="hallInchargeName">Caretaker Name:*</label> <input type="text" class="form-control" id="hallInchargeName" name="hallInchargeName" placeholder="Caretaker Name" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="hallInchargeNo">Caretaker Number:*</label> <input type="text" class="form-control" id="hallInchargeNo" name="hallInchargeNo" placeholder="Caretaker Number" minlength="10" maxlength="10" pattern="[0-9]{10}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="landmark">Landmark:*</label> <input type="text" class="form-control" id="landMark" name="landMark" placeholder="Landmark" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="latitude">Latitude:*</label> <input type="text" class="form-control" id="latitude" name="latitude" placeholder="Latitude" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="longitude">Longitude:*</label> <input type="text" class="form-control" id="longitude" name="longitude" placeholder="Longitude" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="parkingCapacity">Parking Capacity:*</label> <input type="text" class="form-control" id="parkingCapacity" name="parkingCapacity" placeholder="Parking Capacity" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="seatingCapacity">Seating Capacity:*</label> <input type="text" class="form-control" id="seatingCapacity" name="seatingCapacity" placeholder="Seating Capacity" pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="ednumber">Consumer Number:*</label> <input type="text" class="form-control" id="ebNumber" name="ebNumber" placeholder="Consumer Number" minlength="9" maxlength="12" pattern="^[0-9-+*#]{9,12}$" required> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="ebCostPerUnit">EB Cost Per Unit:*</label> <input type="text" class="form-control" id="ebCostPerUnit" name="ebCostPerUnit" placeholder="EB Cost Per Unit" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="gst">GST in %:*</label> <input type="text" class="form-control" id="gst" name="gst" placeholder="GST" required> </div> </div>
<br> <br> <br> <div class="row"> <div class="col"> <p class="p1 text-center"><strong>PAYMENT DETAILS</strong></p> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="depositAmount">Full Day Deposit Amount:*</label> <input type="text" class="form-control" id="depositAmount" name="depositAmount" placeholder="Deposit Amount" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="halfdepositAmt">Half Day Deposit Amount:*</label> <input type="text" class="form-control" id="halfdepositAmt" name="halfdepositAmt" placeholder="Deposit Amount" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="fullDayAmt">Full Day Amount:*</label> <input type="text" class="form-control" id="fullDayAmt" name="fullDayAmt" placeholder="Full Day Amount" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="halfDayAmt">Half Day Amount:*</label> <input type="text" class="form-control" id="halfDayAmt" name="halfDayAmt" placeholder="Half Day Amount" required oninput="this.value = this.value.replace(/[^0-9]/g, '');"> </div> </div> <br> <br> <br> <div class="row"> <div class="col"> <p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p> </div> </div> <div class="row" id="photoInputs"> <div class="col-md-3"> <div class="form-group"> <label for="photo1">Photo 1:* Only .JPEG, .JPG, .PDF </label> <input type="file" class="form-control hall-image" id="photo1" name="hallImages" accept="image/jpeg, image/jpg, image/pdf" required> <small class="text-danger file-size-message"></small> </div> </div> </div> <div class="row mt-3"> <div class="col"> <button type="button" class="btn btn-primary" id="addPhoto">Add Photo </button> </div> </div> </div> </div> <div class="block-content block-content-full text-end bg-body" id="mbutton"> <button type="button" class="btn btn-danger" onclick="fieldsreset()" name="reset">Reset</button> <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close </button> <button type="submit" class="btn btn-sm btn-primary" onclick="submitForm()">Submit</button> </div> </form> </div> </div></div>
<!-- Modal for Editing Hall Images --><!-- Modal for Editing Hall Images --><div class="modal fade" id="hallImageEditModal" tabindex="-1" role="dialog" aria-labelledby="hallImageEditModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="hallImageEditModalLabel">Edit Hall Images</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="hallImageEditForm"> <div id="currentImages" class="mb-3"> <!-- Current images will be loaded here dynamically --> </div> <div id="newImagesContainer" class="mb-3"> <!-- Placeholder for new image upload fields --> </div> <button type="button" class="btn btn-primary" id="addImageButton"> <i class="bi bi-plus-circle"></i> Add New Image </button>
<button type="button" class="btn btn-primary" onclick="saveHallImages()" style="display:none" id="savenewimage">Save new Image </button> <input type="hidden" id="hallId" name="hallId"> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div></div>
<!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" style="max-width: 800px;"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Hall Image</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <!-- Slides will be dynamically inserted here --> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <div class="modal-footer"> <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>--> </div> </div> </div></div><div th:replace="~{fragments/resetpassword :: div}"></div><script th:replace="~{fragments/loginscript :: script}"></script><script type="text/javascript"> getZoneNo(); $(document).ready(function () { // Load zones when the document is ready getZoneNo2(); });
let isCompressing = false; // Attach the validation function to file input change event $(document).on('change', '.hall-image', function () { validateFile(this); });
function validateFile(fileInput) { const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i; const file = fileInput.files[0]; const filePath = fileInput.value; let errorMessage = '';
// Validate file type if (!allowedExtensions.exec(filePath)) { errorMessage = 'Only JPG, JPEG, and PDF files are allowed.'; fileInput.value = ''; // Clear the file input displayError(fileInput, errorMessage); } else { // If the file type is valid, clear any previous error message clearError(fileInput);
// Handle image files separately if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) { compressImage(file).then(compressedFile => { const dataTransfer = new DataTransfer(); dataTransfer.items.add(compressedFile); fileInput.files = dataTransfer.files;
// Validate file size after compression validateFileSize(fileInput); }).catch(error => { errorMessage = 'Error compressing image.'; displayError(fileInput, errorMessage); }); } else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) { errorMessage = 'PDF file size exceeds the 2MB limit.'; fileInput.value = ''; // Clear the file input displayError(fileInput, errorMessage); } else { // console.log('File size is within limit:', file.size, 'bytes'); } } }
// Function to clear error messages function clearError(fileInput) { const errorContainer = fileInput.nextElementSibling; if (errorContainer && errorContainer.classList.contains('fileerror-message')) { errorContainer.style.display = 'none'; errorContainer.textContent = ''; // Clear the error message text } }
// Function to compress image using canvas function compressImage(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function (event) { const img = new Image(); img.onload = function () { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const maxSize = 2097152; // 2MB in bytes let scale = 1; if (file.size > maxSize) { scale = Math.sqrt(maxSize / file.size); } canvas.width = img.width * scale; canvas.height = img.height * scale; ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Convert canvas content to blob canvas.toBlob(blob => { resolve(new File([blob], file.name, {type: 'image/jpeg', lastModified: Date.now()})); }, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality) }; img.src = event.target.result; }; reader.readAsDataURL(file); }); }
// Function to validate file size after compression function validateFileSize(fileInput) { const file = fileInput.files[0]; if (file && file.size > 2097152) { //console.log('File size is still greater than 2MB after compression.'); // Handle the situation where the file size is still greater than 2MB displayError(fileInput, 'File size is still greater than 2MB after compression.'); fileInput.value = ''; // Clear the file input } else { //console.log('File size is within limit after compression.'); // Handle the situation where the file size is within the limit } }
// Function to display error messages // Function to display error messages function displayError(fileInput, errorMessage) { let errorContainer = fileInput.nextElementSibling; if (!errorContainer || !errorContainer.classList.contains('fileerror-message')) { errorContainer = document.createElement('div'); errorContainer.classList.add('fileerror-message'); fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling); } errorContainer.textContent = errorMessage; errorContainer.style.display = 'block'; // Ensure the error message is visible }
callAdd = function () { window.location.href = '/victoriahallbooking/officer/hall-details'; } document.addEventListener('DOMContentLoaded', function () { let imageCount = 0; // Counter to keep track of the number of image fields
// Event listener for the "Add New Image" button document.getElementById('addImageButton').addEventListener('click', function () { imageCount++; $('#savenewimage').show(); // Create a new file input field and add it to the container const newFileInput = document.createElement('div'); newFileInput.className = 'mb-2'; newFileInput.innerHTML = ` <div class="d-flex align-items-center"> <input type="file" name="newHallImages" class="form-control mt-2 hall-image">    <button type="button" class="btn btn-danger btn-sm ml-2 remove-image"> <i class="fas fa-minus-circle"></i> </button> </div> `;
document.getElementById('newImagesContainer').appendChild(newFileInput); });
// Event delegation for dynamically added "minus" buttons document.getElementById('newImagesContainer').addEventListener('click', function (event) { if (event.target.classList.contains('remove-image') || event.target.parentNode.classList.contains('remove-image')) { // Find the parent div with class 'mb-2' and remove it const fileInputDiv = event.target.closest('.mb-2'); if (fileInputDiv) { fileInputDiv.remove(); } } }); }); // Clear file input fields when the modal is shown $('#hallImageEditModal').on('show.bs.modal', function () { $('#hallImageEditForm')[0].reset(); // Reset the form to clear previous inputs $('#newImagesContainer').empty(); // Clear new images
// Clear any file input fields in the form $('#hallImageEditForm').find('input[type="file"]').val(''); });
function hallimageEdit(hallId) { $.ajax({ type: "GET", url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId, success: function (response) { //console.log(response); $('#hallId').val(response.hallId);
// Clear current images $('#currentImages').empty();
// Load current images with update option if (response.hallImagesList && response.hallImagesList.length > 0) { response.hallImagesList.forEach(function (image, index) { let deleteButton = '';
// If it's not the first (primary) image, show the delete button if (index > 0) { deleteButton = `<button type="button" class="btn btn-danger btn-sm ml-2 mt-2" onclick="deleteHallImage(${image.hallImageId})">Delete</button>`; }
$('#currentImages').append(` <div class="mb-2" id="image-${image.hallImageId}"> <img src="${image.hallImage}" alt="Hall Image" class="img-thumbnail" width="100"> <input type="file" class="form-control mt-2 hall-image" id="newImage-${image.hallImageId}"> <button type="button" class="btn btn-primary btn-sm mt-2" onclick="updateHallImage(${image.hallImageId})">Update</button> ${deleteButton} </div> `); }); }
// Show the modal $('#hallImageEditModal').modal('show'); }, error: function (xhr, status, error) { console.error(xhr.responseText); // Handle error here } }); }
function updateHallImage(hallImageId) { const fileInput = document.getElementById('newImage-' + hallImageId); const file = fileInput.files[0];
if (!file) { Swal.fire({ icon: 'warning', title: 'No Image Selected', text: 'Please select an image to update.', }); return; }
const formData = new FormData(); formData.append('hallImage', file);
$.ajax({ type: "PUT", url: '/victoriahallbooking/admin/api/updateHallImage/' + hallImageId, data: formData, processData: false, contentType: false, success: function (response) { //console.log(response); // Optionally update the UI with the new image $('#image-' + hallImageId + ' img').attr('src', response.newImageUrl);
Swal.fire({ icon: 'success', title: 'Updated!', text: 'Image updated successfully.', timer: 2000, // Optional: Auto-close after 2 seconds showConfirmButton: false }) }, error: function (xhr, status, error) { console.error(xhr.responseText); Swal.fire({ icon: 'error', title: 'Update Failed', text: 'There was an issue updating the image.', timer: 2000, // Optional: Auto-close after 2 seconds showConfirmButton: false }); } }); }
function saveHallImages() { var formData = new FormData(); var fileInputs = $('#hallImageEditForm').find('input[type="file"]'); var hasValidFile = false;
// Append hallId to formData var hallId = $('#hallId').val(); if (hallId) { formData.append('hallId', hallId); } else { Swal.fire({ icon: 'error', title: 'Error', text: 'Hall ID is missing.', }); return; }
// Iterate over all file inputs fileInputs.each(function () { if (this.files.length > 0) { // Add non-empty files to FormData for (var i = 0; i < this.files.length; i++) { formData.append(this.name, this.files[i]); } hasValidFile = true; } });
if (!hasValidFile) { Swal.fire({ icon: 'warning', title: 'No Images Selected', text: 'Please upload at least one new image.', }); return; }
$.ajax({ type: "POST", url: '/victoriahallbooking/admin/api/savenewHallImages', data: formData, contentType: false, processData: false, success: function (response) { // Handle success - reload or update the UI accordingly $('#hallImageEditModal').modal('hide'); Swal.fire({ icon: 'success', title: 'Success', text: 'Hall images updated successfully!', }).then(() => { // Reload the page after the success message window.location.reload(); }); }, error: function (xhr, status, error) { console.error(xhr.responseText); Swal.fire({ icon: 'error', title: 'Error', text: 'An error occurred while updating hall images.', }); } }); }
function deleteHallImage(hallImageId) { Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'Cancel' }).then((result) => { if (result.isConfirmed) { $.ajax({ type: "DELETE", url: '/victoriahallbooking/admin/api/deleteHallImage/' + hallImageId, success: function (response) { //console.log(response); // Remove the image from the UI $('#image-' + hallImageId).remove(); Swal.fire({ icon: 'success', title: 'Deleted!', text: 'Your image has been deleted.', timer: 2000, // Optional: Auto-close after 2 seconds showConfirmButton: false }) }, error: function (xhr, status, error) { //console.error(xhr.responseText); Swal.fire( 'Error!', 'There was an issue deleting the image.', 'error' ); } }); } }); }
function callview(hallId, i) { $.ajax({ type: "GET", url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId, success: function (response) { if (i === 0) { showHallInfo(response); } else if (i === 1) { getZoneNo2().then(function () { edit(response); }).catch(function (error) { console.error("Failed to load zones.", error); }); } }, error: function (xhr, status, error) { console.error(xhr.responseText); // Handle error here } }); }
function showHallInfo(list) { $('#infoForm').modal({ backdrop: 'static', keyboard: false });
document.getElementById("id").value = list.hallId; document.getElementById("hallName").value = list.hallName; document.getElementById("zones").value = list.zone; document.getElementById("divisions").value = list.division; document.getElementById("doorNo").value = list.doorNo; document.getElementById("pincode").value = list.pinCode; document.getElementById("hallInchargeMobno").value = list.hallInchargeMobno; document.getElementById("InchargeName").value = list.hallInchargeName; document.getElementById("landmark").value = list.landMark; document.getElementById("latitude").value = list.latitude; document.getElementById("longitude").value = list.longitude; document.getElementById("depositAmount").value = list.depositAmount; document.getElementById("halfDepositAmount").value = list.halfDepositAmount; document.getElementById("fullDayAmount").value = list.fullDayRent; document.getElementById("halfDayAmount").value = list.halfDayRent; document.getElementById("parkingCapacity").value = list.parkingCapacity;
$('#infoForm').modal('show'); return false; }
function edit(list) { $('#editForm').modal({ backdrop: 'static', keyboard: false }); // Populate form fields with data $('#idd').val(list.hallId); $('#hallNam').val(list.hallName); $('#zone2 option').each(function () { if ($(this).text().trim() === list.zone) { $('#zone2').val($(this).val()); } }); $('#street').val(list.street); getDiv2({value: $('#zone2').val()}).then(function () { $('#division2 option').each(function () { if ($(this).text().trim() === list.division) { $('#division2').val($(this).val()); } }); }).catch(function (error) { console.error("Failed to load divisions.", error); }); $('#doornoo').val(list.doorNo); $('#pincod').val(list.pinCode); $('#area').val(list.area); $('#InchargeMobno').val(list.hallInchargeMobno); $('#InchargeNamehall').val(list.hallInchargeName); $('#landmar').val(list.landMark); $('#latitu').val(list.latitude); $('#longitu').val(list.longitude); $('#depositAmo').val(list.depositAmount); $('#halfDepositAmo').val(list.halfDepositAmount); $('#fullDayAmo').val(list.fullDayRent); $('#halfDayAmo').val(list.halfDayRent); $('#parkingCapaci').val(list.parkingCapacity); $('#seatingCapaci').val(list.seatingCapacity); $('#ebNumber').val(list.ebNumber); $('#ebCostPerUnit').val(list.ebCostPerUnit); $('#city').val(list.city); $('#updatedgstpercentage').val(list.gst); $('#hallStatus').val(list.active ? '1' : '0'); // Display existing images //document.getElementById("photo1image").src = "data:image/jpeg;base64," + list.hallImagesList.photo1;
$('#editForm').modal('show');
}
function editsubmit() { var hallId = document.getElementById("idd").value; var hallName = document.getElementById("hallNam").value; if (hallName.trim() === '' || hallName === undefined) { return false; } var zoneLabel = $('#zone2 option:selected').text(); var divisionLabel = $('#division2 option:selected').text(); var doorNo = document.getElementById("doornoo").value; var street = document.getElementById("street").value; var pinCode = document.getElementById("pincod").value; var area = document.getElementById("area").value; var hallInchargeMobno = document.getElementById("InchargeMobno").value; var hallInchargeName = document.getElementById("InchargeNamehall").value; var landMark = document.getElementById("landmar").value; var latitude = document.getElementById("latitu").value; var longitude = document.getElementById("longitu").value; var depositamount = document.getElementById("depositAmo").value; var halfDepositamount = document.getElementById("halfDepositAmo").value; var fullday = document.getElementById("fullDayAmo").value; var halfday = document.getElementById("halfDayAmo").value; var parkingCapacity = document.getElementById("parkingCapaci").value; var seatingCapacity = document.getElementById("seatingCapaci").value; var ebNumber = document.getElementById("ebNumber").value; var ebCostPerUnit = document.getElementById("ebCostPerUnit").value; var city = document.getElementById("city").value; var gst = document.getElementById("updatedgstpercentage").value; var isActive = document.getElementById("hallStatus").value;
var formData = new FormData(); formData.append("hallId", hallId); formData.append("hallName", hallName); formData.append("zone", zoneLabel); formData.append("division", divisionLabel); formData.append("doorNo", doorNo); formData.append("street", street); formData.append("pinCode", pinCode); formData.append("area", area); formData.append("hallInchargeMobno", hallInchargeMobno); formData.append("hallInchargeName", hallInchargeName); formData.append("landMark", landMark); formData.append("latitude", latitude); formData.append("longitude", longitude); formData.append("depositAmount", parseFloat(depositamount)); formData.append("halfDepositAmount", parseFloat(halfDepositamount)); formData.append("fullDayRent", parseFloat(fullday)); formData.append("halfDayRent", parseFloat(halfday)); formData.append("parkingCapacity", parkingCapacity); formData.append("seatingCapacity", parseInt(seatingCapacity)); formData.append("ebNumber", ebNumber); formData.append("ebCostPerUnit", ebCostPerUnit); formData.append("city", city); formData.append("gst", gst); formData.append("isActive", isActive);
$.ajax({
type: "POST", url: '/victoriahallbooking/admin/api/updateHallDetails', contentType: false, processData: false, data: formData, dataType: 'text', success: function (bodyMessage) {
if (bodyMessage.trim() == "Success") { Swal.fire( 'Success!', 'Successfully updated.', 'success' ).then(() => { location.reload(); }); } else { Swal.fire( 'Error!', 'An error occurred while updating hall details.', 'error' ); } }, error: function () { Swal.fire( 'Error!', 'An error occurred while updating hall details.', 'error' ); } });
return false; }
function addnewhall() { $('#hallDetailsModal').modal('show'); }
// Function to close the modal when the user clicks outside of it window.onclick = function (event) { var modal = document.getElementById("hallDetailsModal"); if (event.target == modal) { modal.style.display = "none"; } }; $(document).ready(function () {
// Add photo input $('#addPhoto').click(function () { var lastPhotoInput = $('#photoInputs').children().last(); var newPhotoInput = lastPhotoInput.clone(); var photoCount = $('#photoInputs').children().length + 1;
// Clear the value of the cloned input field newPhotoInput.find('.hall-image').val('');
newPhotoInput.find('.hall-image').attr('id', 'photo' + photoCount); newPhotoInput.find('label').attr('for', 'photo' + photoCount).text('Photo ' + photoCount + ':');
// Check if delete button already exists before appending if (!newPhotoInput.find('.delete-photo').length) { newPhotoInput.append('<div class="input-group-append"><button type="button" class="btn btn-danger delete-photo"><i class="fas fa-trash"></i></button></div>'); } $('#photoInputs').append(newPhotoInput); });
// Delete photo input $(document).on('click', '.delete-photo', function () { $(this).closest('.col-md-3').remove(); // Update photo labels after deletion $('#photoInputs .col-md-3').each(function (index) { $(this).find('label').text('Photo ' + (index + 1) + ':'); $(this).find('.hall-image').attr('id', 'photo' + (index + 1)); }); });
});
function viewHallImages(hallId) { $.ajax({ type: "GET", url: '/victoriahallbooking/admin/api/getImageById', data: { 'hallId': hallId }, success: function (res) { if (res && res.length > 0) { getHallImagesById(res); } else { console.error('No images found for hallId:', hallId); } }, error: function (xhr, status, error) { console.error('Error fetching images:', error); } }); }
function getHallImagesById(images) { const modalSlidesContainer = document.querySelector('.carousel-inner'); modalSlidesContainer.innerHTML = ''; // Clear existing slides
images.forEach((image, index) => { const slide = document.createElement('div'); slide.classList.add('carousel-item'); if (index === 0) { slide.classList.add('active'); } const img = document.createElement('img'); img.src = image.hallImage; // img.alt = Slide ${image.hallImageId}; img.alt = `Slide ${image.hallImageId}`; img.style.maxHeight = '550px'; // Adjust image size img.style.width = 'auto'; // Maintain aspect ratio slide.appendChild(img); modalSlidesContainer.appendChild(slide); });
$('#exampleModal').modal('show'); // Show Bootstrap modal }
//Getting Zone No function getZoneNo() {
$.ajax({ type: "GET", url: '/victoriahallbooking/user/api/getZoneNo', dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['ZoneDetailsResult']; //alert("tempJson---:"+tempJson); for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['ZoneId']; //var tempJsonValue = tempJson[i]['ZoneName'].replace('N', ''); var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', ''); $('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } }, error: function (e, ts, et) { // alert(ts) }
}); }
//Getting Div function getDiv($this) {
$('#division option:not(:first)').remove(); var zoneId = $this.value; var zone = $this.value; //alert("zone---:"+zone); $.ajax({ type: "GET", url: '/victoriahallbooking/user/api/getDiv', data: {'zoneId': zoneId}, dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['DivisionDetailsResult']; for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['DivisionName'].replace('N', ''); //var tempJsonValue = tempJson[i]['DivisionId']; var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', ''); $('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } }, error: function (e, ts, et) { // alert(ts) }
}); }
function submitForm() { var selectedZone = document.getElementById("zone1"); var selectedZoneValue = selectedZone.value;
// Check if a zone is selected if (selectedZoneValue === "" || selectedZoneValue === "---Select Zone---") { selectedZone.setCustomValidity("Please select a zone."); selectedZone.reportValidity(); return false; // Prevent form submission } else { selectedZone.setCustomValidity(""); // Clear any previous error message }
// Set the hidden zone field value document.getElementById("zone").value = selectedZone.options[selectedZone.selectedIndex].innerHTML;
// Form is valid, allow submission return true; }
$(document).ready( function () { var buttons = [{ extend: 'pageLength', className: 'btn btn-primary' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-primary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-primary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-primary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-primary', id: 'pdfBtn' },
]; $('#halldetailsList').DataTable( { dom: 'Bftip', columnDefs: [{ targets: 'no-sort', orderable: false }], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [buttons], responsive: true, searching: true, // Enable search select: false, processing: false, });
// Link the search input to DataTable $('#searchInput').on('keyup', function () { dataTable.search(this.value).draw(); });
});
function fieldsreset() { // Select the form element var form = document.getElementById('hallform');
// Check if form exists if (form) { // Clear all input fields $(form).find('input').val(''); $(form).find('textarea').val(''); $(form).find('select').prop('selectedIndex', 0);
// Remove any dynamically added error messages and classes $('.error-message').remove(); $('.file-upload-field').removeClass('error');
// Remove any dynamically added photo inputs $('#photoInputs .hall-image').not(':first').parent().parent().remove(); } else { console.error('Form not found'); } }
$('#hallDetailsModal').on('hidden.bs.modal', function () { fieldsreset(); // Call resetFormFields function });
function getZoneNo2() { return new Promise(function (resolve, reject) { $.ajax({ type: "GET", url: '/victoriahallbooking/user/api/getZoneNo', dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['ZoneDetailsResult']; $('#zone2').empty().append("<option value=''>---Select Zone---</option>"); for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['ZoneId']; var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', ''); //console.log("Appending option - value:", tempJsonValue, "label:", tempJsonLabel); $('#zone2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } resolve(); }, error: function (e, ts, et) { console.error(ts); reject(); } }); }); }
function getDiv2($this) { return new Promise(function (resolve, reject) { $('#division2 option:not(:first)').remove(); var zoneId = $this.value; $.ajax({ type: "GET", url: '/victoriahallbooking/user/api/getDiv', data: {'zoneId': zoneId}, dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['DivisionDetailsResult']; for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['DivisionId']; // Assuming DivisionId is used for value var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', ''); //console.log("Appending division option - value:", tempJsonValue, "label:", tempJsonLabel); $('#division2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } resolve(); }, error: function (e, ts, et) { console.error(ts); reject(); } }); }); }</script></body>
</html>
|