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.
345 lines
12 KiB
345 lines
12 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/head-admin :: head}">
|
|
<meta charset="ISO-8859-1">
|
|
<!-- Include DataTables CSS -->
|
|
</head>
|
|
<style>
|
|
.block-content {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.small-input {
|
|
width: 150px;
|
|
/* Adjust the width as needed */
|
|
}
|
|
|
|
.small-table th,
|
|
.small-table td {
|
|
font-size: 14px;
|
|
/* Adjust font size as needed */
|
|
}
|
|
|
|
/* Reduce padding for table cells */
|
|
.small-table td,
|
|
.small-table th {
|
|
padding: 5px;
|
|
/* Adjust padding as needed */
|
|
}
|
|
</style>
|
|
|
|
<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">
|
|
<!-- Page Content -->
|
|
<div class="content">
|
|
<div class="block block-rounded">
|
|
<form id="userdetailsform">
|
|
<div class="block-header bg-primary text-white">
|
|
<h3 class="block-title">User Details</h3>
|
|
</div>
|
|
<div class="block-content">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<label class="form-label" for="mobileNO">Mobile NO:<span
|
|
class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" name="mobileNO" id="mobileNO"
|
|
placeholder="Mobile Number" required="required" minlength="10" maxlength="10"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" />
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<br>
|
|
<button type="submit" class="btn btn-sm btn-primary" name="submit"
|
|
id="submit">Submit</button>
|
|
<button class="btn btn-danger" onclick="resetDate()" name="reset"
|
|
type="reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- User Details Card Container -->
|
|
<!-- User Details Card Container -->
|
|
<div id="userDetailsCardContainer" style="display: none;">
|
|
<div class="card">
|
|
<div class="block-header bg-primary text-white">
|
|
<h3 class="block-title">User Details</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="block-content row">
|
|
<input type="hidden" class="form-control text-center" name="userId" id="userId"
|
|
disabled />
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Name:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="name" id="userName"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Mobile No:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="mobile" id="userMobile"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">E-Mail ID:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="email" id="userEmail"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Street:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="street" id="userStreet"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Area:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="area" id="userArea"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Location:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="location"
|
|
id="userLocation" disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">Pincode:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="pincode" id="userPincode"
|
|
disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">UserType:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="usertype"
|
|
id="userUsertype" disabled />
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label class="form-label">User Status:<span class="text-danger"></span></label>
|
|
<input type="text" class="form-control text-center" name="userstatus"
|
|
id="userUserstatus" disabled />
|
|
</div>
|
|
<div class="col-12 d-flex justify-content-center mt-3">
|
|
<button id="viewAllBookingBtn" class="btn btn-primary mx-2">View All
|
|
Booking</button>
|
|
<button id="activateDeactivateBtn" class="btn mx-2">Activate/Deactivate</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Booking Table Card Container -->
|
|
<div id="bookingTableCardContainer" class="card" style="display: none;">
|
|
<div class="block-header bg-primary text-white">
|
|
<h3 class="block-title">Booking Table</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table id="requestTable1" class="table table-striped table-bordered table-hover dataTable"
|
|
role="grid" width="99.5%">
|
|
<thead class="thead-dark">
|
|
<tr role="row">
|
|
<th>S.No</th>
|
|
<th>Hall Name</th>
|
|
<th>Booking Date</th>
|
|
<th>Starting Date</th>
|
|
<th>Ending Date</th>
|
|
<th>Starting Slot</th>
|
|
<th>Ending Slot</th>
|
|
<th>No of Days</th>
|
|
<th>Reason for Booking</th>
|
|
<th>BookingStatus</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="bookingTableBody">
|
|
<!-- Table rows will be populated dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
|
|
</div>
|
|
<div th:replace="~{fragments/resetpassword :: div}"></div>
|
|
<script th:replace="~{fragments/loginscript :: script}"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script>
|
|
|
|
function activateDeactivateUser(userId, isActive) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/communityhall/api/officer/toggleStatus",
|
|
data: {
|
|
userId: userId,
|
|
active: isActive
|
|
},
|
|
success: function (response) {
|
|
//console.log(response);
|
|
// Refresh user details after activation/deactivation
|
|
var mobileNo = $('#userMobile').val();
|
|
fetchUserDetails(mobileNo);
|
|
location.reload();
|
|
},
|
|
error: function (error) {
|
|
//console.error('Error activating/deactivating user:', error);
|
|
}
|
|
});
|
|
}
|
|
var userId = ''; // Global variable to store userId
|
|
|
|
function fetchUserDetails(mobileNo) {
|
|
var userType = $('#usertype').val(); // Assuming this retrieves the current user's usertype
|
|
|
|
// Validate if mobileNo is provided and is exactly 10 digits
|
|
if (!mobileNo || mobileNo.length !== 10 || !/^\d{10}$/.test(mobileNo)) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Invalid Mobile Number',
|
|
text: 'Please enter a valid 10-digit mobile number.',
|
|
}).then(() => {
|
|
location.reload(); // Reload the page after the alert is closed
|
|
});
|
|
return; // Exit function if mobile number is invalid
|
|
}
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/communityhall/user/api/getuserDetailsbymobileno",
|
|
data: {
|
|
'mobileNo': mobileNo
|
|
},
|
|
success: function (data) {
|
|
// Check if data is empty or null
|
|
if (!data || Object.keys(data).length === 0) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Mobile Number Not Found',
|
|
text: 'The provided mobile number does not exist in the database.',
|
|
}).then(() => {
|
|
location.reload(); // Reload the page after the alert is closed
|
|
});
|
|
return; // Exit function if mobile number is not found
|
|
}
|
|
|
|
// Set global userId variable
|
|
userId = data.userId;
|
|
|
|
// Update UI with user details
|
|
$('#userId').val(data.id);
|
|
$('#userName').val(data.name);
|
|
$('#userMobile').val(data.mobileNo);
|
|
$('#userEmail').val(data.email);
|
|
$('#userStreet').val(data.street);
|
|
$('#userArea').val(data.area);
|
|
$('#userLocation').val(data.location);
|
|
$('#userPincode').val(data.pinCode);
|
|
$('#userUsertype').val(data.usertype);
|
|
$('#userUserstatus').val(data.userstatus);
|
|
|
|
// Determine button text and class based on user's active status
|
|
var isActive = data.active;
|
|
var buttonText = isActive ? 'Deactivate User' : 'Activate User';
|
|
var buttonClass = isActive ? 'btn-danger' : 'btn-success';
|
|
|
|
// Update button text and class
|
|
$('#activateDeactivateBtn')
|
|
.text(buttonText)
|
|
.removeClass('btn-success btn-danger')
|
|
.addClass(buttonClass)
|
|
.show();
|
|
|
|
$('#userDetailsCardContainer').show(); // Show user details container
|
|
},
|
|
error: function (error) {
|
|
console.error('Error fetching user details:', error);
|
|
// Handle error (optional): display a message or take appropriate action
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error Fetching User Details',
|
|
text: 'An error occurred while fetching user details. Please try again later.',
|
|
}).then(() => {
|
|
location.reload(); // Reload the page after the alert is closed
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
$('#userdetailsform').submit(function (event) {
|
|
event.preventDefault();
|
|
var mobileNo = $('#mobileNO').val();
|
|
fetchUserDetails(mobileNo);
|
|
$('#bookingTableCardContainer').hide();
|
|
});
|
|
|
|
// Click event for activate/deactivate button
|
|
$('#activateDeactivateBtn').click(function () {
|
|
// Use the global userId variable
|
|
var action = $(this).text().includes('Deactivate') ? false : true; // Corrected logic
|
|
|
|
activateDeactivateUser(userId, action);
|
|
});
|
|
$('#viewAllBookingBtn').click(function () {
|
|
showBookingDetailsByUserId(userId);
|
|
});
|
|
});
|
|
|
|
function showBookingDetailsByUserId(userId) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/communityhall/admin/api/bookingdetailsByuserId",
|
|
data: {
|
|
userId: userId
|
|
},
|
|
success: function (response) {
|
|
//console.log('Data retrieved successfully', response);
|
|
// Clear existing table rows
|
|
$('#requestTable1 tbody').empty();
|
|
|
|
// Populate the table with new data
|
|
$.each(response, function (index, booking) {
|
|
var row = `
|
|
<tr>
|
|
<td>${index + 1}</td>
|
|
<td>${booking.hallDetails.hallName}</td>
|
|
<td>${booking.bookingDate}</td>
|
|
<td>${booking.startDate}</td>
|
|
<td>${booking.endDate}</td>
|
|
<td>${booking.startingSlot}</td>
|
|
<td>${booking.endingSlot}</td>
|
|
<td>${booking.noOfDays}</td>
|
|
<td>${booking.reason}</td>
|
|
<td>${booking.bookingStatus}</td>
|
|
</tr>`;
|
|
$('#requestTable1 tbody').append(row);
|
|
});
|
|
|
|
// Show the booking details container
|
|
$('#bookingTableCardContainer').show();
|
|
},
|
|
error: function (error) {
|
|
//console.error('Error retrieving booking details:', error);
|
|
}
|
|
});
|
|
}
|
|
function resetDate() {
|
|
$('#bookingTableCardContainer').hide();
|
|
$('#userDetailsCardContainer').hide();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|