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.
1591 lines
79 KiB
1591 lines
79 KiB
<!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="/communityhall/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 = '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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: '/communityhall/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>
|