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.
430 lines
15 KiB
430 lines
15 KiB
<!DOCTYPE html>
|
|
<html lang="en" dir="">
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/modules/base/head :: head}">
|
|
<style>
|
|
label {
|
|
font-weight: 700;
|
|
color: #2d5263;
|
|
}
|
|
|
|
|
|
|
|
.checkbox-label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
.custom-file-upload {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #d9dde4;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
background-color: #f9fafb;
|
|
cursor: pointer;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.custom-file-upload input[type="file"] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-file-upload label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.upload-icon i {
|
|
color: #a6adb5;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.file-name {
|
|
margin-left: 10px;
|
|
color: #414f69;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#upload-text {
|
|
color: #a7adb5;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
<div class="wrapper">
|
|
<!-- header top menu Start -->
|
|
<header th:replace="~{fragments/modules/base/header :: header}"></header>
|
|
<!-- header top menu end -->
|
|
|
|
<div class="page-wrap">
|
|
<!--=============== Left Menu side Start ================-->
|
|
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
|
|
<!--=============== Left side End ================-->
|
|
<div class="main-content">
|
|
<div class="container-fluid">
|
|
<div class="page-header">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-6">
|
|
<div class="page-header-title">
|
|
<i class="ik ik-thumbs-up bg-blue"></i>
|
|
<div class="d-inline">
|
|
<h5>NULM STAFF</h5>
|
|
<span>Staff Enrollment</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<nav class="breadcrumb-container" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="/index"><i class="ik ik-home"></i></a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">Staff Enrollment</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<div class="row align-items-center justify-content-center"
|
|
style="color: white;background-color:#414f69 ;padding: 10px;">
|
|
<h3 class="title resizable-content">Staff Enrollment</h3>
|
|
</div>
|
|
<!-- Add the resizable-content class to the card sections -->
|
|
<div class="card mb-3 mt-4 resizable-content">
|
|
<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
|
|
</div>-->
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<select id="selfHelpGroupDropdown" class="form-control" style="font-size: large; margin-bottom: 15px;">
|
|
<option value="">Select Group</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Gender:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<select id="gender-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
|
|
<option value="">Select Gender</option>
|
|
<option value="1">Male</option>
|
|
<option value="2">Female</option>
|
|
<option value="3">Transgender</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Date Of Birth:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<input type="date" id="dob-input" class="form-control" style="font-size: large;margin-bottom: 15px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Address:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<input type="text" id="address-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Phone number:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<input type="text" id="phone-number-input" class="form-control" placeholder="Enter the Phone Number..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update other input fields similarly -->
|
|
<div class="row">
|
|
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large; font-weight: 700; color: #414f69;">Education
|
|
Qualification:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<select id="educationQualification" class="form-control" style="font-size: large;margin-bottom: 15px;">
|
|
<option value="">Select Qualification</option>
|
|
<option value="8th">8th</option>
|
|
<option value="9th">9th</option>
|
|
<option value="10th">10th</option>
|
|
<option value="11th">11th</option>
|
|
<option value="12th">12th</option>
|
|
<option value="UG">UG</option>
|
|
<option value="PG">PG</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between align-items-center">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Additional Skills:</label>
|
|
<div class="col-md-6" style="margin-right: 32%;">
|
|
<select id="skills-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
|
|
<option value="">Select Additional Skills</option>
|
|
<option value="typing">Typing</option>
|
|
<option value="shorthand">ShortHand</option>
|
|
<option value="dataentry">DataEntry</option>
|
|
<option value="others">Others</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label style="font-size: large;font-weight: 700;color: #414f69;">Proof
|
|
Documents:</label>
|
|
<div class="row">
|
|
|
|
|
|
<!-- First File Upload -->
|
|
<div class="col-md-4">
|
|
<div class="custom-file-upload">
|
|
<input type="file" id="file-upload-1" class="form-control"
|
|
onchange="displayFileName('file-upload-1', 'file-name-1')">
|
|
<label for="file-upload-1" id="file-label-1">
|
|
<span class="upload-text" id="upload-text">Upload Aadhar Card</span>
|
|
<span class="upload-icon">
|
|
<i class="fas fa-file-upload"></i>
|
|
</span>
|
|
</label>
|
|
<span id="file-name-1" class="file-name"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second File Upload -->
|
|
<div class="col-md-4">
|
|
<div class="custom-file-upload">
|
|
<input type="file" id="file-upload-2" class="form-control"
|
|
onchange="displayFileName('file-upload-2', 'file-name-2')">
|
|
<label for="file-upload-2" id="file-label-2">
|
|
<span class="upload-text" id="upload-text">Upload Bank
|
|
Passbook</span>
|
|
<span class="upload-icon">
|
|
<i class="fas fa-file-upload"></i>
|
|
</span>
|
|
</label>
|
|
<span id="file-name-2" class="file-name"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Third File Upload -->
|
|
<div class="col-md-4">
|
|
<div class="custom-file-upload">
|
|
<input type="file" id="file-upload-3" class="form-control"
|
|
onchange="displayFileName('file-upload-3', 'file-name-3')">
|
|
<label for="file-upload-3" id="file-label-3">
|
|
<span class="upload-text" id="upload-text">Upload Ration Card</span>
|
|
<span class="upload-icon">
|
|
<i class="fas fa-file-upload"></i>
|
|
</span>
|
|
</label>
|
|
<span id="file-name-3" class="file-name"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fourth File Upload -->
|
|
<div class="col-md-4">
|
|
<div class="custom-file-upload">
|
|
<input type="file" id="file-upload-4" class="form-control"
|
|
onchange="displayFileName('file-upload-4', 'file-name-4')">
|
|
<label for="file-upload-4" id="file-label-4">
|
|
<span class="upload-text" id="upload-text">Upload Staff Photo</span>
|
|
<span class="upload-icon">
|
|
<i class="fas fa-file-upload"></i>
|
|
</span>
|
|
</label>
|
|
<span id="file-name-4" class="file-name"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center">
|
|
<button class="btn"
|
|
style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
|
|
id="staffenroll">
|
|
Enroll Staff
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
</div>
|
|
</div>
|
|
<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
|
|
|
|
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
|
|
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
|
|
<script th:inline="javascript">
|
|
function displayFileName(inputId, outputId) {
|
|
const fileInput = document.getElementById(inputId);
|
|
const fileNameSpan = document.getElementById(outputId);
|
|
const fileName = fileInput.files[0]?.name || 'No file chosen';
|
|
fileNameSpan.textContent = fileName;
|
|
}
|
|
|
|
function isValidAge(dob) {
|
|
const today = new Date();
|
|
const birthDate = new Date(dob);
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
const monthDifference = today.getMonth() - birthDate.getMonth();
|
|
|
|
// Adjust age if the birth date hasn't occurred yet this year
|
|
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
|
|
age--;
|
|
}
|
|
|
|
// Age should be at least 18
|
|
return age >= 18;
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('#staffenroll').click(function () {
|
|
const dob = document.getElementById('dob-input').value;
|
|
|
|
if (!isValidAge(dob)) {
|
|
Swal.fire({
|
|
title: 'Invalid Date of Birth',
|
|
text: 'Age must be at least 18 years old.',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK',
|
|
background: '#f5f5f5',
|
|
confirmButtonColor: '#414f69'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
const staffData = {
|
|
name: document.getElementById('staff-name-input').value,
|
|
phoneNumber: document.getElementById('phone-number-input').value,
|
|
gender: document.getElementById('gender-select').value,
|
|
dateOfBirth: dob,
|
|
educationQualification: document.getElementById('educationQualification').value,
|
|
additionalSkills: document.getElementById('skills-select').value,
|
|
aadharCardUrl: document.getElementById('file-name-1').textContent,
|
|
rationCardUrl: document.getElementById('file-name-3').textContent,
|
|
bankPassbookUrl: document.getElementById('file-name-2').textContent,
|
|
staffPhotoUrl: document.getElementById('file-name-4').textContent,
|
|
address: document.getElementById('address-input').value, // Ensure this is included
|
|
groupId: document.getElementById('selfHelpGroupDropdown').value,
|
|
};
|
|
|
|
console.log(staffData); // Debug log
|
|
|
|
$.ajax({
|
|
url: '/gcc/api/nulm/saveStaff',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(staffData),
|
|
success: function (response) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success',
|
|
text: response,
|
|
}).then(function () {
|
|
location.reload();
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Error saving staff details: ' + xhr.responseText,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
document.getElementById('educationQualification').addEventListener('change', function () {
|
|
var selectedValue = this.value;
|
|
var courseNameField = document.getElementById('courseNameField');
|
|
|
|
if (selectedValue === 'UG' || selectedValue === 'PG') {
|
|
courseNameField.style.display = 'block';
|
|
} else {
|
|
courseNameField.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
function loadSchemeGroupNames() {
|
|
$.ajax({
|
|
url: '/gcc/api/nulm/getAllSchemeGroupNames',
|
|
method: 'GET',
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
var $dropdown = $('#selfHelpGroupDropdown');
|
|
$dropdown.empty();
|
|
$dropdown.append('<option value="">Select Scheme Group</option>');
|
|
$.each(data, function (index, group) {
|
|
$dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching scheme group names:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadSchemeGroupNames();
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|