Browse Source

added session and changes in page design

master
yoganandhank 1 year ago
parent
commit
c466078c99
  1. 853
      src/main/resources/templates/modules/crslogspages/birthanddeath.html
  2. 102
      src/main/resources/templates/modules/crslogspages/loginpage.html

853
src/main/resources/templates/modules/crslogspages/birthanddeath.html

@ -10,11 +10,18 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap Icons CDN in <head> if not already --> <!-- Include Bootstrap Icons CDN in <head> if not already -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- <link th:href="@{/styles/birthanddeath.css}" rel="stylesheet" /> -->
</head>
<style> <style>
.form-check { .form-check {
display: flex; display: flex;
align-items: center; align-items: center;
@ -405,7 +412,7 @@ body {
@media (min-width: 769px) { @media (min-width: 769px) {
.mobile-username, .mobile-username,
.mobile-logout { .mobile-logout {
display: none;
display: block;
} }
.header .center-text{ .header .center-text{
@ -417,7 +424,7 @@ body {
</style> </style>
</head>
<body style="background-color: #ebf1fa;"> <body style="background-color: #ebf1fa;">
@ -557,16 +564,16 @@ body {
id="mothername"> id="mothername">
</div> </div>
<div class="col-md-5 mt-3">
<label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
<div class="d-flex align-items-center">
<div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('birth')">↻</button>
</div>
<input type="text" id="birth-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" />
</div>
<div class="col-md-5 mt-3">
<label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
<div class="d-flex align-items-center">
<div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('birth')">↻</button>
</div>
<input type="text" id="birth-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" />
</div>
</div> </div>
@ -652,15 +659,15 @@ body {
</div> </div>
<div class="col-md-5 mt-3"> <div class="col-md-5 mt-3">
<label for="death-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
<div class="d-flex align-items-center">
<div id="death-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('death')">↻</button>
</div>
<input type="text" id="death-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" />
</div>
<label for="death-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
<div class="d-flex align-items-center">
<div id="death-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('death')">↻</button>
</div>
<input type="text" id="death-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" />
</div>
</div> </div>
@ -742,452 +749,452 @@ body {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Your custom script
<script th:src="@{/script/birthanddeath.js}"></script> -->
<script>
<script>
// Redirect after 60 seconds (1 minute) of inactivity
let timeoutDuration = 10 * 60 * 1000; // 60 seconds
// Redirect after 60 seconds (1 minute) of inactivity
let timeoutDuration = 10 * 60 * 1000; // 60 seconds
let timeout;
let timeout;
function resetTimeout() {
clearTimeout(timeout);
timeout = setTimeout(() => {
// Optionally check if session is still active via an API
window.location.href = "/crs/loginpage";
}, timeoutDuration);
}
function resetTimeout() {
clearTimeout(timeout);
timeout = setTimeout(() => {
// Optionally check if session is still active via an API
window.location.href = "/crs/loginpage";
}, timeoutDuration);
}
// Reset timeout on user interaction
['click', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(evt => {
document.addEventListener(evt, resetTimeout, false);
});
// Reset timeout on user interaction
['click', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(evt => {
document.addEventListener(evt, resetTimeout, false);
});
// Start timer initially
resetTimeout();
$(document).ready(function () {
// Start timer initially
resetTimeout();
$('#birthModal, #deathModal').on('hidden.bs.modal', function () {
window.location.reload();
});
});
$(document).ready(function () {
function resetFields(cardId) {
// Clear all input fields inside the given card
$(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val('');
$(`#${cardId} input[type="radio"]`).prop('checked', false);
}
$('#birth-link').on('click', function () {
resetFields('birth-card');
});
$('#death-link').on('click', function () {
resetFields('death-card');
});
});
$(document).ready(function () {
$('#birthModal, #deathModal').on('hidden.bs.modal', function () {
window.location.reload();
});
});
document.addEventListener("DOMContentLoaded", function () {
const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
document.getElementById("dateofbirth").setAttribute("max", today);
document.getElementById("dateofdeath").setAttribute("max", today);
});
document.addEventListener("DOMContentLoaded", function () {
const userName = localStorage.getItem("userName");
console.log("userName ",userName);
if (userName) {
// Mobile
const mobileName = document.getElementById("loggedUserNameMobile");
const mobileWrapper = document.querySelector(".mobile-username .user-name-wrapper");
if (mobileName) mobileName.textContent = userName;
if (mobileWrapper) mobileWrapper.title = "Logged in as " + userName;
// Desktop
const desktopName = document.getElementById("loggedUserNameDesktop");
const desktopNameCopy = document.getElementById("loggedUserNameCopy");
const desktopWrapper = document.querySelector(".user-info .user-name-wrapper");
if (desktopName) desktopName.textContent = userName;
if (desktopNameCopy) desktopNameCopy.textContent = userName;
if (desktopWrapper) desktopWrapper.title = "Logged in as " + userName;
}
$('#logoutBtn').click(function (e) {
e.stopPropagation();
Swal.fire({
title: "Are you sure?",
text: "Do you really want to logout?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, logout",
cancelButtonText: "Cancel"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "/crs/logout",
method: "GET",
success: function () {
localStorage.clear(); // Clear frontend storage
window.location.href = "/crs/loginpage"; // Redirect to login page
},
error: function () {
Swal.fire("Error", "Logout failed. Try again.", "error");
}
});
}
});
});
});
$(document).ready(function () {
function resetFields(cardId) {
// Clear all input fields inside the given card
$(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val('');
$(`#${cardId} input[type="radio"]`).prop('checked', false);
}
$('#birth-link').on('click', function () {
resetFields('birth-card');
});
$('#death-link').on('click', function () {
resetFields('death-card');
});
});
const links = document.querySelectorAll('.nav-link');
links.forEach(link => {
if (window.location.href.includes(link.getAttribute('href'))) {
link.classList.add('active');
}
});
/* card display script */
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const birthLink = document.getElementById("birth-link");
const deathLink = document.getElementById("death-link");
const birthCard = document.getElementById("birth-card");
const deathCard = document.getElementById("death-card");
function showCard(selectedLink, selectedCard, otherLink, otherCard) {
selectedCard.style.display = "block";
otherCard.style.display = "none";
selectedLink.classList.add("active");
otherLink.classList.remove("active");
const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
document.getElementById("dateofbirth").setAttribute("max", today);
document.getElementById("dateofdeath").setAttribute("max", today);
});
document.addEventListener("DOMContentLoaded", function () {
const userName = localStorage.getItem("userName");
//console.log("userName ",userName);
if (userName) {
// Mobile
const mobileName = document.getElementById("loggedUserNameMobile");
const mobileWrapper = document.querySelector(".mobile-username .user-name-wrapper");
if (mobileName) mobileName.textContent = userName;
if (mobileWrapper) mobileWrapper.title = "Logged in as " + userName;
// Desktop
const desktopName = document.getElementById("loggedUserNameDesktop");
const desktopNameCopy = document.getElementById("loggedUserNameCopy");
const desktopWrapper = document.querySelector(".user-info .user-name-wrapper");
if (desktopName) desktopName.textContent = userName;
if (desktopNameCopy) desktopNameCopy.textContent = userName;
if (desktopWrapper) desktopWrapper.title = "Logged in as " + userName;
} }
birthLink.addEventListener("click", function () {
showCard(birthLink, birthCard, deathLink, deathCard);
});
deathLink.addEventListener("click", function () {
showCard(deathLink, deathCard, birthLink, birthCard);
$('#logoutBtn,#logoutBtnMobile').click(function () {
Swal.fire({
title: "Are you sure?",
text: "Do you really want to logout?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, logout",
cancelButtonText: "Cancel"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "/crs/logout",
method: "GET",
success: function () {
localStorage.clear(); // Clear frontend storage
window.location.href = "/crs/loginpage"; // Redirect to login page
},
error: function () {
Swal.fire("Error", "Logout failed. Try again.", "error");
}
});
}
});
}); });
});
const links = document.querySelectorAll('.nav-link');
links.forEach(link => {
if (window.location.href.includes(link.getAttribute('href'))) {
link.classList.add('active');
}
}); });
//////////////////////////////////////////////
/* card display script */
document.addEventListener("DOMContentLoaded", function () {
const birthLink = document.getElementById("birth-link");
const deathLink = document.getElementById("death-link");
const birthCard = document.getElementById("birth-card");
const deathCard = document.getElementById("death-card");
function showCard(selectedLink, selectedCard, otherLink, otherCard) {
selectedCard.style.display = "block";
otherCard.style.display = "none";
selectedLink.classList.add("active");
otherLink.classList.remove("active");
}
birthLink.addEventListener("click", function () {
showCard(birthLink, birthCard, deathLink, deathCard);
});
deathLink.addEventListener("click", function () {
showCard(deathLink, deathCard, birthLink, birthCard);
});
});
//////////////////////////////////////////////
function generateCaptcha(type) { function generateCaptcha(type) {
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
let captcha = "";
for (let i = 0; i < 6; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
let captcha = "";
for (let i = 0; i < 6; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
const targetId = `${type}-captcha`; // FIXED: match HTML ID
const element = document.getElementById(targetId);
if (element) {
element.textContent = captcha;
// Styling for obscurity
element.style.fontSize = "18px";
element.style.letterSpacing = "3px";
element.style.fontWeight = "bold";
element.style.backgroundColor = "#f0f0f0";
element.style.border = "1px solid #ccc";
element.style.padding = "5px";
element.style.userSelect = "none";
}
}
const targetId = `${type}-captcha`; // FIXED: match HTML ID
const element = document.getElementById(targetId);
if (element) {
element.textContent = captcha;
// Styling for obscurity
element.style.fontSize = "18px";
element.style.letterSpacing = "3px";
element.style.fontWeight = "bold";
element.style.backgroundColor = "#f0f0f0";
element.style.border = "1px solid #ccc";
element.style.padding = "5px";
element.style.userSelect = "none";
}
}
function validateCaptcha(type) { function validateCaptcha(type) {
const generated = document.getElementById(`${type}-captcha`).textContent.trim();
const entered = document.getElementById(`${type}-captcha-input`).value.trim();
if (!entered) {
Swal.fire({
icon: 'warning',
title: 'CAPTCHA Required',
text: 'Please enter the CAPTCHA before submitting.'
});
//inputField.focus();
return false;
}
if (generated !== entered) {
const generated = document.getElementById(`${type}-captcha`).textContent.trim();
const entered = document.getElementById(`${type}-captcha-input`).value.trim();
if (!entered) {
Swal.fire({ Swal.fire({
icon: 'error',
title: 'Invalid CAPTCHA',
text: 'The entered CAPTCHA is incorrect. Please try again.'
icon: 'warning',
title: 'CAPTCHA Required',
text: 'Please enter the CAPTCHA before submitting.'
}); });
generateCaptcha(type);
//inputField.focus();
return false; return false;
} }
if (generated !== entered) {
Swal.fire({
icon: 'error',
title: 'Invalid CAPTCHA',
text: 'The entered CAPTCHA is incorrect. Please try again.'
});
generateCaptcha(type);
return false;
}
return true;
}
return true;
}
document.addEventListener("DOMContentLoaded", function () {
generateCaptcha("birth");
generateCaptcha("death");
});
document.addEventListener("DOMContentLoaded", function () {
generateCaptcha("birth");
generateCaptcha("death");
});
function fetchBirthData() { function fetchBirthData() {
const dob = document.getElementById('dateofbirth').value;
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const captchaInput = document.getElementById('birth-captcha-input');
console.log("gender:", gender);
// Validate Date of Birth
if (!dob) {
Swal.fire({
icon: 'warning',
title: 'Missing Date of Birth',
text: 'Please enter your Date of Birth.'
});
return;
}
// Validate Gender
if (!gender) {
Swal.fire({
icon: 'warning',
title: 'Missing Gender Selection',
text: 'Please select a gender.'
});
return;
}
// CAPTCHA validation first
// Validate CAPTCHA
if (!validateCaptcha('birth')) {
//captchaInput.classList.add('is-invalid');
//captchaInput.focus();
return;
} else {
captchaInput.classList.remove('is-invalid');
}
const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
console.log("dob:", formattedDob);
$('#pageLoader').show();
$.ajax({
url: '/crs/api/birth-details',
method: 'GET',
data: {
dob: formattedDob,
sex: gender.charAt(0).toUpperCase()
},
success: function (response) {
$('#pageLoader').hide();
if (response && response.BIRTH && response.BIRTH.length > 0) {
let html = `
<table id="birthDataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>S.No</th>
<th>Reg No</th>
<th>Child Name</th>
<th>Father</th>
<th>Mother</th>
<th>DOB</th>
<th>Certificate Link</th>
</tr>
</thead>
<tbody>`;
response.BIRTH.forEach((row, index) => {
html += `<tr>
<td>${index + 1}</td>
<td>${row.REGNO}</td>
<td>${row.CHILDNAME}</td>
<td>${row.FATHERNAME}</td>
<td>${row.MOTHERNAME}</td>
<td>${row.DOB}</td>
<td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
onclick="saveCertificateLog('${row.REGNO}', '${row.DOB}', '${row.ENGLISHURL}', 'Birth')">View</a>` : 'N/A'}</td>
</tr>`;
});
html += `</tbody></table>`;
$('#birthModalBody').html(html);
setTimeout(() => {
$('#birthDataTable').DataTable({
responsive: true,
pagingType: "full_numbers", // Buttons for pagination
language: {
search: "🔍 Search: ",
emptyTable: "No records found",
paginate: {
previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
}
},
columnDefs: [
{ orderable: false, targets: 0 } // Disable sorting on S.No
]
});
}, 100);
}
else {
$('#birthModalBody').html('<p class="text-danger">No birth records found.</p>');
}
const dob = document.getElementById('dateofbirth').value;
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const captchaInput = document.getElementById('birth-captcha-input');
//console.log("gender:", gender);
// Validate Date of Birth
if (!dob) {
Swal.fire({
icon: 'warning',
title: 'Missing Date of Birth',
text: 'Please enter your Date of Birth.'
});
return;
}
// Validate Gender
if (!gender) {
Swal.fire({
icon: 'warning',
title: 'Missing Gender Selection',
text: 'Please select a gender.'
});
return;
}
// CAPTCHA validation first
// Validate CAPTCHA
if (!validateCaptcha('birth')) {
//captchaInput.classList.add('is-invalid');
//captchaInput.focus();
return;
} else {
captchaInput.classList.remove('is-invalid');
}
const modal = new bootstrap.Modal(document.getElementById('birthModal'));
modal.show();
},
error: function (xhr) {
$('#pageLoader').hide();
let message = "Something went wrong.";
if (xhr.responseJSON && xhr.responseJSON.message) {
message = xhr.responseJSON.message;
}
alert("Error: " + message);
const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
//console.log("dob:", formattedDob);
$('#pageLoader').show();
$.ajax({
url: '/crs/api/birth-details',
method: 'GET',
data: {
dob: formattedDob,
sex: gender.charAt(0).toUpperCase()
},
success: function (response) {
$('#pageLoader').hide();
if (response && response.BIRTH && response.BIRTH.length > 0) {
let html = `
<table id="birthDataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>S.No</th>
<th>Reg No</th>
<th>Child Name</th>
<th>Father</th>
<th>Mother</th>
<th>DOB</th>
<th>Certificate Link</th>
</tr>
</thead>
<tbody>`;
response.BIRTH.forEach((row, index) => {
html += `<tr>
<td>${index + 1}</td>
<td>${row.REGNO}</td>
<td>${row.CHILDNAME}</td>
<td>${row.FATHERNAME}</td>
<td>${row.MOTHERNAME}</td>
<td>${row.DOB}</td>
<td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
onclick="saveCertificateLog('${row.REGNO}', '${row.DOB}', '${row.ENGLISHURL}', 'Birth')">View</a>` : 'N/A'}</td>
</tr>`;
});
html += `</tbody></table>`;
$('#birthModalBody').html(html);
setTimeout(() => {
$('#birthDataTable').DataTable({
responsive: true,
pagingType: "full_numbers", // Buttons for pagination
language: {
search: "🔍 Search: ",
emptyTable: "No records found",
paginate: {
previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
}
},
columnDefs: [
{ orderable: false, targets: 0 } // Disable sorting on S.No
]
});
}, 100);
}
else {
$('#birthModalBody').html('<p class="text-danger">No birth records found.</p>');
} }
});
const modal = new bootstrap.Modal(document.getElementById('birthModal'));
modal.show();
},
error: function (xhr) {
$('#pageLoader').hide();
let message = "Something went wrong.";
if (xhr.responseJSON && xhr.responseJSON.message) {
message = xhr.responseJSON.message;
}
alert("Error: " + message);
}
});
} }
function fetchDeathData() { function fetchDeathData() {
const dod = document.getElementById('dateofdeath').value;
const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
const captchaInput = document.getElementById('death-captcha-input');
const dod = document.getElementById('dateofdeath').value;
const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
const captchaInput = document.getElementById('death-captcha-input');
// console.log("gender:", gender);
// Validate Date of Birth
if (!dod) {
Swal.fire({
icon: 'warning',
title: 'Missing Date of Birth',
text: 'Please enter your Date of Birth.'
});
return;
}
console.log("gender:", gender);
// Validate Gender
if (!gender) {
Swal.fire({
icon: 'warning',
title: 'Missing Gender Selection',
text: 'Please select a gender.'
});
return;
}
// Validate Date of Birth
if (!dod) {
Swal.fire({
icon: 'warning',
title: 'Missing Date of Birth',
text: 'Please enter your Date of Birth.'
});
return;
}
// Validate Gender
if (!gender) {
Swal.fire({
icon: 'warning',
title: 'Missing Gender Selection',
text: 'Please select a gender.'
});
return;
}
if (!validateCaptcha('death')) {
//captchaInput.classList.add('is-invalid');
//captchaInput.focus();
return;
} else {
captchaInput.classList.remove('is-invalid');
}
const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
console.log("dod:", formattedDod);
$('#pageLoader').show();
$.ajax({
url: '/crs/api/death-details',
method: 'GET',
data: {
dod: formattedDod,
sex: gender.charAt(0).toUpperCase()
},
success: function (response) {
$('#pageLoader').hide();
if (response && response.DEATH && response.DEATH.length > 0) {
let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' +
'<th>S.No</th><th>Reg No</th><th>Person Name</th>' +
'<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
response.DEATH.forEach((row ,index) => {
html += `<tr>
<td>${index + 1}</td>
<td>${row.REGNO}</td>
<td>${row.DEATHPERSONNAME}</td>
<td>${row.FATHERNAME}</td>
<td>${row.MOTHERNAME}</td>
<td>${row.DOD}</td>
<td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
onclick="saveCertificateLog('${row.REGNO}', '${row.DOD}', '${row.ENGLISHURL}', 'Death')">View</a>` : 'N/A'}</td> </tr>`;
});
if (!validateCaptcha('death')) {
//captchaInput.classList.add('is-invalid');
//captchaInput.focus();
return;
} else {
captchaInput.classList.remove('is-invalid');
}
html += '</tbody></table>';
$('#deathModalBody').html(html);
// Delay initialization to ensure DOM is ready
setTimeout(() => {
$('#deathDataTable').DataTable({
responsive: true,
pagingType: "full_numbers", // Buttons for pagination
language: {
search: "🔍 Search: ",
emptyTable: "No records found",
paginate: {
previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
}
},
columnDefs: [
{ orderable: false, targets: 0 } // Disable sorting on S.No
]
});
}, 100);
} else {
$('#deathModalBody').html('<p class="text-danger">No deathrecords found.</p>');
}
const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
// console.log("dod:", formattedDod);
$('#pageLoader').show();
$.ajax({
url: '/crs/api/death-details',
method: 'GET',
data: {
dod: formattedDod,
sex: gender.charAt(0).toUpperCase()
},
success: function (response) {
$('#pageLoader').hide();
if (response && response.DEATH && response.DEATH.length > 0) {
let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' +
'<th>S.No</th><th>Reg No</th><th>Person Name</th>' +
'<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
response.DEATH.forEach((row ,index) => {
html += `<tr>
<td>${index + 1}</td>
<td>${row.REGNO}</td>
<td>${row.DEATHPERSONNAME}</td>
<td>${row.FATHERNAME}</td>
<td>${row.MOTHERNAME}</td>
<td>${row.DOD}</td>
<td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
onclick="saveCertificateLog('${row.REGNO}', '${row.DOD}', '${row.ENGLISHURL}', 'Death')">View</a>` : 'N/A'}</td> </tr>`;
});
html += '</tbody></table>';
$('#deathModalBody').html(html);
// Delay initialization to ensure DOM is ready
setTimeout(() => {
$('#deathDataTable').DataTable({
responsive: true,
pagingType: "full_numbers", // Buttons for pagination
language: {
search: "🔍 Search: ",
emptyTable: "No records found",
paginate: {
previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
}
},
columnDefs: [
{ orderable: false, targets: 0 } // Disable sorting on S.No
]
});
}, 100);
} else {
$('#deathModalBody').html('<p class="text-danger">No deathrecords found.</p>');
}
const modal = new bootstrap.Modal(document.getElementById('deathModal'));
modal.show();
},
error: function (xhr) {
$('#pageLoader').hide();
let message = "Something went wrong.";
if (xhr.responseJSON && xhr.responseJSON.message) {
message = xhr.responseJSON.message;
}
alert("Error: " + message);
const modal = new bootstrap.Modal(document.getElementById('deathModal'));
modal.show();
},
error: function (xhr) {
$('#pageLoader').hide();
let message = "Something went wrong.";
if (xhr.responseJSON && xhr.responseJSON.message) {
message = xhr.responseJSON.message;
} }
});
alert("Error: " + message);
}
});
} }
@ -1195,27 +1202,27 @@ function fetchDeathData() {
function saveCertificateLog(regNo, eventDate, url, service){ function saveCertificateLog(regNo, eventDate, url, service){
$.ajax({
url: '/crs/api/saveCertificateLogs',
type: 'POST',
data: {
regNo: regNo,
eventDate: eventDate,
Url: url,
service: service
},
success: function() {
console.log('View logged successfully');
},
error: function(xhr, status, error) {
console.error('Logging failed:', error);
}
});
$.ajax({
url: '/crs/api/saveCertificateLogs',
type: 'POST',
data: {
regNo: regNo,
eventDate: eventDate,
Url: url,
service: service
},
success: function() {
//console.log('View logged successfully');
},
error: function(xhr, status, error) {
console.error('Logging failed:', error);
}
});
} }
</script>
</script>
</body> </body>
</html> </html>

102
src/main/resources/templates/modules/crslogspages/loginpage.html

@ -3,29 +3,18 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GCC - Birth & Death</title>
<title>GCC - Birth And Death</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap Icons CDN in <head> if not already --> <!-- Include Bootstrap Icons CDN in <head> if not already -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- jQuery (Only load it once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS (optional if you plan to use it) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
<style> <style>
/* Header Styling */ /* Header Styling */
.header { .header {
background-color: #134356; background-color: #134356;
@ -173,6 +162,7 @@
width: 150px; /* optional: set fixed width */ width: 150px; /* optional: set fixed width */
} }
</style> </style>
</head> </head>
<body style="background-color: #ebf1fa;"> <body style="background-color: #ebf1fa;">
@ -269,7 +259,7 @@
<span class="text-danger">*</span> <span class="text-danger">*</span>
<input type="text" <input type="text"
id="phoneNumber" class="form-control" id="phoneNumber" class="form-control"
placeholder="Enter Mobile number"
placeholder="Enter Registered Mobile number"
oninput="validatePhoneNumber(this)"> oninput="validatePhoneNumber(this)">
</div> </div>
@ -362,8 +352,24 @@
<script>
<!-- jQuery (Only load it once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS (optional if you plan to use it) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script th:src="@{/script/loginpage.js}"></script> -->
<script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
@ -428,40 +434,37 @@ $(document).ready(function () {
}); });
function validatePhoneNumber(input) {
// Remove non-numeric characters
let value = input.value.replace(/[^0-9]/g, '');
// Prevent input if first digit is 0
if (value.length === 1 && value[0] === '0') {
value = '';
}
// phone number validation
/* function validatePhoneNumber(input) {
// Remove any non-numeric characters using regex
input.value = input.value.replace(/[^0-9]/g, '');
// Limit the input to 10 digits
if (input.value.length > 10) {
input.value = input.value.slice(0, 10);
}
} */
function validatePhoneNumber(input) {
// Remove non-numeric characters
let value = input.value.replace(/[^0-9]/g, '');
// Prevent first digit from being 0
if (value.startsWith('0')) {
value = value.substring(1);
}
// Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
if (value.length > 10) {
value = value.slice(0, 10);
}
// Limit to 10 digits
if (value.length > 10) {
value = value.slice(0, 10);
}
// Update input value
input.value = value;
input.value = value;
}
// Optional: check for invalid numbers starting with digits other than 6-9
if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
Swal.fire({
title: "Invalid Mobile Number",
text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
icon: "error",
confirmButtonText: "OK",
allowOutsideClick: false
});
input.value = "";
}
}
$('#registersubmit').click(function (event) { $('#registersubmit').click(function (event) {
event.preventDefault(); event.preventDefault();
@ -635,7 +638,7 @@ $(document).ready(function () {
setTimeout(function () { setTimeout(function () {
Swal.close(); Swal.close();
console.log("OTP sent response:", response);
//console.log("OTP sent response:", response);
$('#mobilenotxt').html(mobileNumber); $('#mobilenotxt').html(mobileNumber);
$('#otpForm').modal({ $('#otpForm').modal({
@ -690,7 +693,7 @@ $(document).ready(function () {
dataType: 'json', dataType: 'json',
success: function (response) { success: function (response) {
console.log("response...",response);
//console.log("response...",response);
if (response.userName) { if (response.userName) {
localStorage.setItem("userName", response.userName); localStorage.setItem("userName", response.userName);
} }
@ -701,7 +704,7 @@ $(document).ready(function () {
Swal.close(); Swal.close();
if (response.status === "Success") { if (response.status === "Success") {
//alert("inside line 890 " + response.userName); //alert("inside line 890 " + response.userName);
console.log("Welcome, " , response.userName);
//console.log("Welcome, " , response.userName);
Swal.fire({ Swal.fire({
title: "OTP Verified!", title: "OTP Verified!",
text: "Your OTP has been successfully verified.", text: "Your OTP has been successfully verified.",
@ -832,5 +835,6 @@ $(document).ready(function () {
</script> </script>
</body> </body>
</html> </html>
Loading…
Cancel
Save