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.
 
 
 
 
 

1221 lines
50 KiB

<script>
var mobileNumberForCancel = 0;
var cancelBookingId = 0;
var cancelBookingLogin = false;
var isLogin = false;
var disableBooking = false;
var isvalidUser = false;
var checkvalidation = true
var username = [[${userName != null}]];
if (username) {
isLogin = true;
document.getElementById("pds1").style.display = 'block';
document.getElementById("pds").style.display = 'none';
} else {
document.getElementById("pds1").style.display = 'none';
document.getElementById("pds").style.display = 'block';
}
function checkLoginedIn(url, hallId) { // Should print the actual hall ID value
if (isLogin == false) {
showloginpopup();
} else {
if (url == 'hallbookingform' || url == 'book') {
CheckBookingLimitation(function (success) {
if (success) {
if (hallId != undefined && hallId != '' && hallId != 0) {
// console.log('Navigating to hallbookingform with hallId:', hallId);
window.location.href = '/communityhall/hallbookingform?hallId=' + hallId;
} else {
window.location.href = '/communityhall/user/' + url;
}
}
});
} else {
if (url == 'viewhistory') {
window.location.href = '/communityhall/user/' + url;
}
}
}
return false;
}
// Function to show login popup and reset mobile number field
function showloginpopup() {
$('#loginModal').modal('show'); // Show the login modal
// Reset mobile number input field on login modal shown
$('#loginModal').on('shown.bs.modal', function () {
$('#mobileNumber').val(''); // Clear the mobile number input field
});
// Unbind the modal shown event after it has been triggered once
$('#loginModal').one('hide.bs.modal', function () {
$('#loginModal').off('shown.bs.modal'); // Unbind the shown.bs.modal event
});
}
// Function to redirect to sign up tab and reset register form fields
function redirectToSignUp() {
// Activate the Register tab
$('#loginTabs a[href="#register"]').tab('show');
// Reset the register form fields
$('#newform')[0].reset();
// Unbind modal shown event to prevent unnecessary resets when switching tabs
$('#loginModal').one('hide.bs.modal', function () {
$('#newform')[0].reset(); // Reset again if modal is closed while on Register tab
});
}
// Function to clear form fields if modal is closed without switching tabs
$('#loginModal').on('hide.bs.modal', function () {
$('#mobileNumber').val(''); // Clear mobile number input field
$('#newform')[0].reset(); // Reset the form fields
});
// Add an event listener to handle login popup
document.getElementById("loginpopup").addEventListener("click", function () {
showloginpopup(); // Call the showLoginPopup() function when login popup icon is clicked
});
// Add event listeners to handle switching tabs and resetting forms accordingly
$('#loginTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var targetTab = $(e.target).attr("href"); // Get the target tab href
// Reset form fields based on the tab shown
if (targetTab === "#login") {
$('#mobileNumber').val(''); // Reset mobile number field for login tab
} else if (targetTab === "#register") {
$('#newform')[0].reset(); // Reset register form fields
}
});
var verifyLogin = "";
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-23581568-13');
$(document).ready(function () {
// Function to show/hide fields based on the selected User Type
$("#userType").change(function () {
var selectedUserType = $(this).val();
document.getElementById('name').value = '';
document.getElementById('name').readOnly = false;
// Hide all fields initially
$("#employeeFields, #pensionerFields, #counsellorFields , #govtmentfields").hide();
if (selectedUserType === "GCC_EMPLOYEE") {
$("#employeeFields").show();
} else if (selectedUserType === "PENSIONER") {
$("#pensionerFields").show();
} else if (selectedUserType === "COUNCILLOR") {
$("#counsellorFields").show();
}
});
});
$('.otp-input').on('keyup', function (e) {
var $this = $(this);
if ($this.val().length === 1) {
$this.next('.otp-input').focus();
}
if ($this.val().length === 0) {
$this.prev('.otp-input').focus();
}
});
// Function to send OTP
function sendOTP(mobileNum) {
// Show a Swal loading dialog while processing the OTP
Swal.fire({
title: 'Processing OTP...',
text: 'Please wait while we send the OTP.',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading(); // Show the loading spinner
}
});
// Set a minimum display time for the loading dialog (e.g., 5 seconds)
let minDisplayTime = 5000; // 5 seconds
let startTime = new Date().getTime(); // Track the time when the request started
if (mobileNum != "" || mobileNum != undefined || mobileNum != null) {
mobileNo = mobileNum;
$("#mobilenotxt").html(mobileNo);
$.ajax({
type: "GET",
url: '/communityhall/user/api/sendOTP',
data: {'mobileNo': mobileNo, 'purpose': 'New User'},
success: function (bodyMessage) {
// Calculate the elapsed time since the request started
let elapsedTime = new Date().getTime() - startTime;
// Ensure the loading dialog stays on screen for at least the minimum display time
let delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
if (bodyMessage != "Error") {
// Show the OTP form if the OTP was sent successfully
$('#otpForm').modal({
backdrop: 'static',
keyboard: false
});
$('#otpForm').modal('show');
// Resend OTP Link function
var resendTimeout;
$("#resendlink").html('Please wait..<span id="countdown">60</span>s');
var countdown = $("#countdown");
function startCountdown() {
var timeleft = 60;
countdown.text(timeleft);
resendTimeout = setInterval(function () {
timeleft--;
countdown.text(timeleft);
if (timeleft <= 0) {
clearInterval(resendTimeout);
$("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP(mobileNo);">Resend OTP</a>');
}
}, 1000);
}
startCountdown(); // Start Resend OTP count
} else {
// Show error message if OTP sending failed
showErrorWithDelay('OTP Not Sent! No Internet Connection.');
}
}, delay); // Delay closing the loading dialog
},
error: function () {
// Handle error case if the AJAX request fails
let elapsedTime = new Date().getTime() - startTime;
let delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
// Show network error Swal
Swal.fire(
'Network Error!',
'Please try again later.',
'error'
);
}, delay); // Delay closing the loading dialog before showing the error
}
});
} else {
mobileNo = $("#mobileNumber").val();
$("#mobile").val(mobileNo);
$.ajax({
type: "GET",
url: '/communityhall/user/api/sendOTP',
data: {'mobileNo': mobileNo, 'purpose': 'New User'},
dataType: 'json',
success: function (bodyMessage) {
let elapsedTime = new Date().getTime() - startTime;
let delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
if (bodyMessage != "Error") {
// Show the OTP form if the OTP was sent successfully
$('#otpForm').modal({
backdrop: 'static',
keyboard: false
});
$('#otpForm').modal('show');
} else {
// Show error message if OTP sending failed
showErrorWithDelay('OTP Not Sent! No Internet Connection.');
}
}, delay); // Delay closing the loading dialog
},
error: function () {
let elapsedTime = new Date().getTime() - startTime;
let delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
// Show network error Swal
Swal.fire(
'Network Error!',
'Please try again later.',
'error'
);
}, delay); // Delay closing the loading dialog before showing the error
}
});
}
return false;
}
// Function to show error with a delay
function showErrorWithDelay(errorMessage) {
Swal.fire(
'Error!',
errorMessage,
'error'
);
}
function verifyOtp() {
// Show Swal loading dialog while processing OTP
Swal.fire({
title: 'Verifying OTP...',
text: 'Please wait while we verify the OTP.',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading(); // Show the loading spinner
}
});
// Set a minimum display time for the loading dialog (e.g., 2 seconds)
const minDisplayTime = 2000; // 2 seconds
const startTime = new Date().getTime(); // Track the time when the request started
var otpInputs = $('.otp-input');
var otpValue = '';
otpInputs.each(function () {
otpValue += $(this).val();
});
var mobileNoValue = 0;
if (verifyLogin === "new") {
mobileNoValue = $("#mobileno").val();
} else if (cancelBookingLogin) {
mobileNoValue = mobileNumberForCancel;
bookingId = cancelBookingId;
} else {
mobileNoValue = $("#mobileNumber").val(); // Add your logic to get the mobile number value here
}
$.ajax({
type: "GET",
url: '/communityhall/user/api/verifyOTP',
data: {
'otp': otpValue,
'mobileNo': mobileNoValue
},
dataType: 'text',
success: function (bodyMessage) {
// Calculate the elapsed time since the request started
const elapsedTime = new Date().getTime() - startTime;
// Ensure the loading dialog stays on screen for at least the minimum display time
const delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
if (bodyMessage.trim() === "Success") {
$('#otpForm').modal('hide'); // Hide OTP form modal
if (verifyLogin === "new") {
document.getElementById("newform").submit();
} else if (cancelBookingLogin) {
$.ajax({
type: "GET", // Changed to POST method to match Spring endpoint
url: '/communityhall/user/api/cancelBookingbyId', // Corrected endpoint URL
data: {
bookingId: bookingId,
status: 'CANCELED',
comments: 'user cancelled'
},
success: function (response) {
if (response) {
Swal.fire(
'Cancelled!',
'Your booking has been cancelled.',
'success'
).then(() => {
location.reload(); // Reload the page after the alert is closed
});
} else {
Swal.fire(
'Error!',
'Failed to cancel the booking. Please contact Admin.',
'error'
);
}
},
error: function (xhr, status, error) {
Swal.fire(
'Error!',
'Failed to cancel the booking. Please contact Admin.',
'error'
);
console.error(xhr.responseText);
}
});
} else {
if (isLogin === false) {
$.ajax({
type: "GET",
url: '/communityhall/user/api/getUsername',
success: function (response) {
// alert("user type: "+response.userType);
document.getElementById("pds").style.display = "none";
$("#userNameLogin").html(response.displayName);
document.getElementById("pds1").style.display = 'block';
document.getElementById("pds").style.display = 'none';
$('#loginModal').modal('hide');
console.log("user type: "+response.userType);
isLogin = true;
},
error: function (errortxt) {
console.error(errortxt);
}
});
} else {
window.location.reload();
}
}
// Enable the "Select Hall" button upon successful OTP verification
$('#selectHallButton').prop('disabled', false); // Change to false to enable
} else {
$("#otperror").html("OTP is Incorrect!!!");
Swal.fire(
'Error!',
'OTP is Incorrect!',
'error'
);
}
}, delay); // Delay closing the loading dialog
},
error: function (xhr, status, error) {
// Calculate the elapsed time since the request started
const elapsedTime = new Date().getTime() - startTime;
// Ensure the loading dialog stays on screen for at least the minimum display time
const delay = Math.max(0, minDisplayTime - elapsedTime);
setTimeout(function () {
Swal.close(); // Close the Swal loading dialog
Swal.fire({
title: 'No Internet Connection',
text: 'Please check your internet connection and try again.',
icon: 'error',
confirmButtonText: 'OK',
allowOutsideClick: false
}).then((result) => {
if (result.isConfirmed) {
// Reload the page when the user acknowledges the error
location.reload();
}
});
}, delay); // Delay closing the loading dialog before showing the error
}
});
return false;
}
// Verify OTP when the OTP form is submitted
/* $('#otpForm').submit(function (event) {
event.preventDefault();
verifyOtp();
});*/
function newPinCall() {
$('#otpForm').modal({
backdrop: 'static',
keyboard: false
});
$('#otpForm').modal('hide');
return false;
}
$('#otpForm').on('shown.bs.modal', function () {
$('.otp-input').val('');
$('#otperror').text('');
// $('#mobilenotxt').text('');
});
function resetOtpForm() {
$('#otpForm').find('.otp-input').val('');
$('#otperror').text('');
//$('#mobilenotxt').text('');
}
$("#sendOTPButton").click(function (event) {
event.preventDefault();
checkMobileNo(); // Call the checkMobileNo() function first
});
function validateUserType() {
var usertype = $("#userType").val();
if (usertype == "PUBLIC") {
validateNumber();
return false;
}
if (usertype === "GCC_EMPLOYEE") {
var employeeId = $("#employeeId").val();
if (!employeeId) {
Swal.fire(
'Error!',
'Employee ID is required.',
'error'
);
return false;
}
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkEmployee', // Ensure this URL matches your Spring controller's endpoint
data: {id: employeeId},
success: function (response) {
if (response.isRegistered) {
Swal.fire(
'Already Registered!',
'The Employee ID ' + employeeId + ' is already registered.',
'warning'
);
} else {
$.ajax({
type: "GET",
url: '/communityhall/user/api/gccemployee',
data: {id: employeeId},
success: function (response) {
if (!response.EmployeeDetailsResult || response.EmployeeDetailsResult.length === 0) {
Swal.fire({
title: "Oops",
html: "The Employee ID " + employeeId + " was not found!",
icon: "info",
showCancelButton: false,
confirmButtonText: "Ok"
});
return false;
} else {
var employeeDetails = response.EmployeeDetailsResult[0];
if (employeeDetails) {
$("#employeename").val(employeeDetails.name);
validateNumber();
}
}
},
error: function () {
Swal.fire(
'Error!',
'An error occurred while fetching employee details.',
'error'
);
}
});
}
},
error: function () {
Swal.fire(
'Error!',
'An error occurred while checking employee registration.',
'error'
);
}
});
return false;
} else if (usertype == "PENSIONER") {
var pensionerId = $("#pensionerId").val();
if (!pensionerId) {
Swal.fire(
'Error!',
'Pensioner ID is required.',
'error'
);
return false;
}
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkEmployee', // Ensure this URL matches your Spring controller's endpoint
data: {id: pensionerId},
success: function (response) {
if (response.isRegistered) {
Swal.fire(
'Already Registered!',
'The Pensioner ID ' + pensionerId + ' is already registered.',
'warning'
);
} else {
$.ajax({
type: "GET",
url: '/communityhall/user/api/PensionerDetails',
data: {'id': pensionerId},
success: function (response) {
if (response.mobileNo) {
$("#mobileno").val(response.mobileNo);
validateNumber(); // Call validateNumber() when mobile number is available
} else {
var alertMessage = "The Pensioner Id Not Found!";
const swalInstance = Swal.fire({
title: "Oops",
html: alertMessage,
icon: "info",
showCancelButton: false,
confirmButtonText: "Ok"
});
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
// Handle error here
}
});
}
},
error: function () {
Swal.fire(
'Error!',
'An error occurred while checking employee registration.',
'error'
);
}
});
return false;
} else if (usertype === "COUNCILLOR") {
var mobileno = $("#mobileno").val();
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkCounsellorMobileExits',
data: {'mobileno': mobileno},
success: function (response) {
// On success, populate the counselor's name
document.getElementById('name').value = response;
validateNumber();
},
error: function (xhr, status, error) {
if (xhr.status === 404) {
Swal.fire({
title: "COUNCILLOR Mobile Number Not Found",
html: "The entered mobile number does not exist!",
icon: "warning",
showCancelButton: false,
confirmButtonText: "Ok"
});
} else if (xhr.status === 409) {
Swal.fire({
title: "Mobile Number Existed",
html: "Your account is already linked to another mobile number. Multiple registrations are not allowed for one councillor.",
icon: "error",
showCancelButton: false,
confirmButtonText: "Ok"
});
} else {
console.error(xhr.responseText);
}
}
});
return false;
}
}
function validateNumber() {
var mobileNo = $("#mobileno").val();
//alert("validate number.."+mobileNo);
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkMobileExits',
data: {'mobileno': mobileNo},
success: function (bodyMessage) {
if (bodyMessage == "success") {
var alertMessage = "This Mobile Number Is Already Registered!</a>";
$('#otpForm').modal('hide'); // Hide OTP form modal
//$('#loginModal').modal('hide');
// Initialize SweetAlert instance with options
const swalInstance = Swal.fire({
title: "Mobile Number exist",
html: alertMessage,
icon: "info",
showCancelButton: false,
confirmButtonText: "Ok"
});
return false;
} else {
verifyLogin = "new";
;
sendOTP(mobileNo);
return false;
}
},
error: function (errortxt) {
console.error(errortxt);
}
});
return false;
}
function checkMobileNo() {
var mobileNo = $("#mobileNumber");
// Check if the mobile number is provided
if (mobileNo.val().length !== 10) {
// Set custom validity message for incorrect mobile number length
mobileNo[0].setCustomValidity("Please enter a 10-digit mobile number.");
// Report validity to trigger the validation UI
mobileNo[0].reportValidity();
return; // Exit the function to prevent the AJAX call
} else {
// Clear the custom validity message
mobileNo[0].setCustomValidity("");
}
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkuserstatus',
data: {mobileNo: mobileNo.val()},
success: function (statusResponse) {
if (statusResponse === "pending") {
// User status is pending, show SweetAlert
const swalInstance = Swal.fire({
title: "Account Approval Required",
text: "Please wait for the officer to approve your account.",
icon: "info",
showCancelButton: false,
confirmButtonText: "OK",
});
} else if (statusResponse === "deactive") {
// User status is pending, show SweetAlert
const swalInstance = Swal.fire({
title: "Account Deactivated",
text: "Please contact Admin to active.",
icon: "info",
showCancelButton: false,
confirmButtonText: "OK",
});
} else if (statusResponse === "checkmobileexist") {
// User status is not pending, proceed to check mobile number existence
$.ajax({
type: "GET",
url: '/communityhall/user/api/checkMobileExits',
data: {'mobileno': mobileNo.val()},
success: function (mobileResponse) {
if (mobileResponse === "success") {
sendOTP(mobileNo.val());
} else {
var alertMessage = "This Mobile Number Is Not Registered! Please register.";
$('#otpForm').modal('hide'); // Hide OTP form modal
//$('#loginModal').modal('hide');
const swalInstance = Swal.fire({
title: "Registration Required",
html: alertMessage,
icon: "info",
confirmButtonText: "Register",
showCancelButton: true,
customClass: {
container: 'custom-swal-container', // Add a custom class to the container
},
backdrop: true, // Enable backdrop to prevent clicks on the main popup
onOpen: function () {
// Append the SweetAlert container to the document body
$('.swal2-container').appendTo($('body'));
}
}).then((result) => {
if (result.isConfirmed) {
$('#loginTabs a[href="#register"]').tab('show');
}
});
}
},
error: function (errortxt) {
console.error(errortxt);
}
});
}
},
error: function (errortxt) {
console.error(errortxt);
}
});
}
// Ensure the function is called on a specific event
document.getElementById("mobileNumber").addEventListener('input', function () {
this.setCustomValidity(""); // Clear custom validity on input
});
function CheckBookingLimitation(callback) {
$.ajax({
type: "GET",
url: '/communityhall/user/api/bookingLimit',
success: function (response) {
if (response === "success") {
callback(true);
} else if (response === "pending") {
Swal.fire({
icon: 'error',
title: 'USER STATUS PENDING',
text: 'Waiting for Approval',
}).then((result) => {
if (result.isConfirmed) {
window.location.href = "/communityhall/user/logout";
}
});
callback(false);
} else if (response === "rejected") {
Swal.fire({
icon: 'error',
title: 'USER STATUS REJECTED',
text: 'Please change your user type to public in order to book, or contact the administrator for assistance.',
}).then((result) => {
if (result.isConfirmed) {
showProfileDetails();
}
});
callback(false);
} else {
Swal.fire({
icon: 'error',
title: 'Booking Limit Reached',
text: 'You have reached your booking limit.',
}).then((result) => {
if (result.isConfirmed) {
window.location.href = "/communityhall/user/viewhistory";
}
});
callback(false);
}
},
error: function (errortxt) {
console.error(errortxt);
callback(false);
}
});
}
function showprofilepopup() {
showProfileDetails();
}
function showProfileDetails() {
$.ajax({
url: '/communityhall/user/api/getUser',
type: 'GET',
data: {
'userId': 0
},
success: function (response) {
$("#profileModal").hide();
$('#p_userId').val(response.userId);
$('#p_name').val(response.name);
$('#p_email').val(response.email);
$('#p_mobnum').val(response.mobileNo);
$('#p_doornum').val(response.doorNo);
$('#p_area').val(response.area);
$('#p_location').val(response.location);
$('#p_pincode').val(response.pinCode);
$('#p_userstatus').val(response.userstatus);
$('#p_image').attr('src', response.profilephoto);
$('#p_usertype').val(response.usertype).prop('disabled', true); // Set usertype
if (response.userstatus.toLowerCase() === 'rejected') {
$('#rejectionReasonContainer').show();
$('#p_rejectionreason').val(response.rejectionReason);
// Make fields editable
$('#p_name').prop('readonly', false);
$('#p_doornum').prop('readonly', false);
$('#p_area').prop('readonly', false);
$('#p_location').prop('readonly', false);
$('#p_usertype').prop('disabled', false);
$('#p_usertype option[value="PENSIONER"]').prop('disabled', true);
$('#p_usertype option[value="COUNCILLOR"]').prop('disabled', true);
$('#p_usertype option[value="GCC_EMPLOYEE"]').prop('disabled', true);
$('#updateButton').show();
} else {
$('#rejectionReasonContainer').hide();
$('#usertypeContainer').hide();
$('#p_email').prop('readonly', false);
$('#p_doornum').prop('readonly', false);
$('#p_area').prop('readonly', false);
$('#p_location').prop('readonly', false);
$('#p_pincode').prop('readonly', false);
$('#updateButton').show();
}
$('#profileModal').modal('show');
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
}
});
}
function updateUserDetails() {
var userId = $('#p_userId').val();
var name = $('#p_name').val();
var doorNo = $('#p_doornum').val();
var area = $('#p_area').val();
var location = $('#p_location').val();
var userType = $('#p_usertype').val();
var pinCode = $('#p_pincode').val();
var email = $('#p_email').val();
var profilephoto = $('#fileInput')[0].files[0]; // Get the selected file
var formData = new FormData();
formData.append("userId", userId);
formData.append("name", name);
formData.append("doorNo", doorNo);
formData.append("area", area);
formData.append("location", location);
formData.append("usertype", userType);
formData.append("email", email);
formData.append("pinCode", pinCode);
if (profilephoto) {
formData.append("profilephoto", profilephoto);
}
Swal.fire({
title: 'Do you want to update this User Profile?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'YES',
denyButtonText: 'NO',
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: '/communityhall/user/api/updateUserDetails',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (response) {
if (response === 'success') {
Swal.fire(
'Done',
'Successfully updated user details',
'success'
).then(() => {
window.location.reload(); // Reload the page after successful update
});
} else {
Swal.fire(
'Error',
'Failed to update user details',
'error'
);
}
},
error: function (xhr, textStatus, errorThrown) {
Swal.fire(
'Error',
'Failed to update user details',
'error'
);
}
});
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info');
}
});
}
document.getElementById('p_image').addEventListener('click', function () {
// Trigger the file input click event
document.getElementById('fileInput').click();
});
// Listen for changes in the file input
document.getElementById('fileInput').addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
document.getElementById('p_image').src = e.target.result;
};
reader.readAsDataURL(file);
}
});
// Attach CSS styles for error messages dynamically
$('head').append('<style>.error-message { color: red; font-size: 12px; margin-top: 5px; }</style>');
//script for pensioner
document.getElementById('pensionerId').addEventListener('blur', function () {
var pensionerId = this.value;
if (pensionerId) {
fetchPensionerDetails(pensionerId);
}
});
function fetchPensionerDetails(pensionerId) {
fetch('/communityhall/user/api/PensionerDetail?pensionerId=' + pensionerId)
.then(response => response.json())
.then(data => {
if (data && data.PensionerDetailsResult && data.PensionerDetailsResult.length > 0) {
var pensionerDetails = data.PensionerDetailsResult[0];
document.getElementById('pendionerdepartment').value = pensionerDetails.Department;
document.getElementById('name').value = pensionerDetails.Name;
document.getElementById('governmentId').value = pensionerId;
document.getElementById('department').value = pensionerDetails.Department;
} else {
document.getElementById('validationResult').innerText = "No pensioner found with this ID";
}
})
.catch(error => console.error('Error fetching pensioner details:', error));
}
document.getElementById('employeeId').addEventListener('blur', function () {
var employeeId = this.value;
if (employeeId) {
fetchEmployeeDetails(employeeId);
}
});
function fetchEmployeeDetails(employeeId) {
fetch('/communityhall/user/api/EmployeeDetails?employeeId=' + employeeId)
.then(response => response.json())
.then(data => {
if (data && data.EmployeeDetailsResult && data.EmployeeDetailsResult.length > 0) {
var employeeDetails = data.EmployeeDetailsResult[0];
document.getElementById('name').value = employeeDetails.name;
document.getElementById('name').readOnly = true;
document.getElementById('employeedepartment').value = employeeDetails.department;
document.getElementById('governmentId').value = employeeId;
document.getElementById('department').value = employeeDetails.department;
} else {
document.getElementById('validationResult').innerText = "No Employee found with this ID";
}
})
.catch(error => console.error('Error fetching Employee details:', error));
}
//Script for triggering send otp button while pressing enter key from system
document.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// Prevent default form submission action
event.preventDefault();
}
});
let isCompressing = false;
// Attach the validation function to file input change event
$(document).on('change', '.profile-file-upload', function () {
validateFile(this);
});
function validateFile(fileInput) {
const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
const file = fileInput.files[0];
const filePath = fileInput.value;
let errorMessage = '';
// Clear any previous error message
clearError(fileInput);
if (!allowedExtensions.exec(filePath)) {
errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
fileInput.value = ''; // Clear the file input
displayError(fileInput, errorMessage);
} else if (file && file.size > 2097152) { // Check if file size exceeds 2 MB
//console.log('Starting image compression...');
isCompressing = true;
errorMessage = '';
compressImage(file).then(compressedFile => {
isCompressing = false;
//console.log('Image compression completed successfully.');
//console.log('Original file size:', file.size, 'bytes');
//console.log('Compressed file size:', compressedFile.size, 'bytes');
// Replace original file with compressed file
const dataTransfer = new DataTransfer();
dataTransfer.items.add(compressedFile);
fileInput.files = dataTransfer.files;
// Validate file size after compression if needed
validateFileSize(fileInput);
}).catch(error => {
console.error('Image compression error:', error);
isCompressing = false;
errorMessage = 'Error compressing image.';
displayError(fileInput, errorMessage);
});
return;
} else {
// File size is within limit, proceed with validation or other actions
//console.log('File size is within limit:', file.size, 'bytes');
// Clear any previous error message since the file is valid
clearError(fileInput);
}
}
function clearError(fileInput) {
const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
while (errorElements.length > 0) {
errorElements[0].remove();
}
}
// 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 with a new File object from the 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 displayError(fileInput, errorMessage) {
// Example implementation: show error message near the file input
let errorContainer = fileInput.nextElementSibling;
if (!errorContainer || !errorContainer.classList.contains('error-message')) {
errorContainer = document.createElement('div');
errorContainer.classList.add('error-message');
fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
}
errorContainer.textContent = errorMessage;
}
/*Newly added for counter login*/
// Add an event listener to handle login popup
document.getElementById("counterloginpopup").addEventListener("click", function () {
showcounterloginpopup(); // Call the showLoginPopup() function when login popup icon is clicked
});
// Function to show counter login popup
function showcounterloginpopup() {
$('#cloginModal').modal('show');
// Reset input field on login modal shown
$('#cloginModal').on('shown.bs.modal', function () {
$('#cusername').val('');
$('#cpassword').val('');
// $("#error").text("").removeClass("text-danger");
});
// Unbind the modal shown event after it has been triggered once
$('#cloginModal').one('hide.bs.modal', function () {
$('#cloginModal').off('shown.bs.modal'); // Unbind the shown.bs.modal event
$("#error").text("");
$('#cusername').val('');
$('#cpassword').val('');
});
}
function verifyCounterLogin() {
var username = $("#cusername");
var password = $("#cpassword");
console.log("username: ", username[0], "\npassword:", password[0]);
// Validate Username
if ($.trim(username.val()) === "") {
username[0].setCustomValidity("Please Enter user name.");
username[0].reportValidity();
return false;
} else {
username[0].setCustomValidity("");
}
// Validate Password
if ($.trim(password.val()) === "") {
password[0].setCustomValidity("Please enter password");
password[0].reportValidity();
return false;
} else {
password[0].setCustomValidity("");
}
// Send AJAX Request
$.ajax({
type: "GET",
url: "/communityhall/counter/verifyLogin",
data: {
username: username.val(), // Send actual values
password: password.val()
},
success: function (response) {
console.log("Response: ", response);
if (!response || response.userType.toLowerCase() === "error") {
$("#error").html("<p class='text-danger'>Invalid Username or Password!</p>");
username.val(""); // Clear input
password.val("");
return;
} else {
sessionStorage.setItem("jwtToken", response.token);
sessionStorage.setItem("userName", response.counterName);
$("#error").text("").removeClass("text-danger");
$('#cloginModal').modal('hide');
console.log("Successfully logged in as counter!!!"+ response.counterName);
// redirectToDashboard(response);
window.location.href = "/communityhall/user/dashboard";
}
},
error: function (jqXHR) {
if (jqXHR.status === 400 || jqXHR.status === 417) {
$("#error").html("<p class='text-danger'>" + jqXHR.responseText + "</p>");
} else {
console.error("AJAX Error: ", jqXHR);
}
}
});
return false;
}
</script>