|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<style>
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
|
|
|
|
* {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100vh; /* Ensure full viewport height */
|
|
|
|
overflow: hidden; /* Prevent body scrolling */
|
|
|
|
}
|
|
|
|
.header {
|
|
|
|
height: 60px;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
border-bottom: 2px solid #F1F1F1;
|
|
|
|
background-color: #fff;
|
|
|
|
z-index: 1000; /* Ensure header stays on top */
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
width: 300px;
|
|
|
|
padding-left: 40px;
|
|
|
|
}
|
|
|
|
.logo span {
|
|
|
|
color: #5073FB;
|
|
|
|
}
|
|
|
|
.search--notification--profile {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
width: calc(100% - 300px);
|
|
|
|
padding: 0 40px;
|
|
|
|
}
|
|
|
|
.search {
|
|
|
|
margin-left: 500px;
|
|
|
|
background-color: #F1F4F8;
|
|
|
|
border-radius: 50px;
|
|
|
|
width: 400px;
|
|
|
|
padding: 5px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.search input {
|
|
|
|
background-color: transparent;
|
|
|
|
outline: none;
|
|
|
|
border: none;
|
|
|
|
text-indent: 15px;
|
|
|
|
width: 85%;
|
|
|
|
}
|
|
|
|
.search button {
|
|
|
|
outline: none;
|
|
|
|
border: none;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: #fff;
|
|
|
|
padding: 8px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.search button i {
|
|
|
|
font-size: 1.1rem;
|
|
|
|
color: #5073FB;
|
|
|
|
}
|
|
|
|
.notification--profile {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.picon {
|
|
|
|
margin-left: 20px;
|
|
|
|
font-size: 1.1rem;
|
|
|
|
padding: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
.lock {
|
|
|
|
color: #5073FB;
|
|
|
|
background-color: rgba(80, 115, 251, .2);
|
|
|
|
}
|
|
|
|
.bell {
|
|
|
|
color: #F1D243;
|
|
|
|
background-color: rgba(241, 210, 67, .2);
|
|
|
|
}
|
|
|
|
.chat {
|
|
|
|
color: #70D7A5;
|
|
|
|
background-color: rgba(112, 215, 165, .2);
|
|
|
|
}
|
|
|
|
.profile {
|
|
|
|
position: relative;
|
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
border-radius: 50%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.main {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: calc(100vh - 60px);
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
.sidebar {
|
|
|
|
position: fixed;
|
|
|
|
top: 60px; /* Start after header */
|
|
|
|
left: 0;
|
|
|
|
height: calc(100vh - 60px); /* Full height minus header */
|
|
|
|
width: 300px;
|
|
|
|
background-color: #fff;
|
|
|
|
padding: 30px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
border-right: 2px solid #F1F1F1;
|
|
|
|
transition: 0.3s;
|
|
|
|
z-index: 900; /* Ensure sidebar is below header */
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar.active {
|
|
|
|
width: 103px;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.sidebar.active .sidebar--item {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
li {
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
.sidebar--items a,
|
|
|
|
.sidebar--bottom-items a {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
font-size: 1.1rem;
|
|
|
|
color: #000;
|
|
|
|
padding: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.sidebar--items a:hover,
|
|
|
|
.sidebar--bottom-items a:hover {
|
|
|
|
background-color: #5073FB;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
#active--link {
|
|
|
|
background-color: #5073FB;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.sidebar--bottom-items li:last-child a {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.icon {
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
margin-right: 20px;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
}
|
|
|
|
.icon-0 {
|
|
|
|
color: #5073FB;
|
|
|
|
}
|
|
|
|
.icon-1 {
|
|
|
|
color: #C5BC58;
|
|
|
|
}
|
|
|
|
.icon-2 {
|
|
|
|
color: #A280E9;
|
|
|
|
}
|
|
|
|
.icon-3 {
|
|
|
|
color: #85ADE3;
|
|
|
|
}
|
|
|
|
.icon-4 {
|
|
|
|
color: #E36AC8;
|
|
|
|
}
|
|
|
|
.icon-5 {
|
|
|
|
color: #70D7A5;
|
|
|
|
}
|
|
|
|
.icon-6 {
|
|
|
|
color: #5F5CE0;
|
|
|
|
}
|
|
|
|
.icon-7 {
|
|
|
|
color: #E86786;
|
|
|
|
}
|
|
|
|
.icon-8 {
|
|
|
|
color: #F1D243;
|
|
|
|
}
|
|
|
|
|
|
|
|
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar {
|
|
|
|
width: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track {
|
|
|
|
background: #f1f1f1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
|
|
|
|
background: #888;
|
|
|
|
}
|
|
|
|
|
|
|
|
.main::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover {
|
|
|
|
background: #555;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<title>Dashboard</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section class="header">
|
|
|
|
<div class="logo">
|
|
|
|
<i class="ri-menu-line icon icon-0 menu"></i>
|
|
|
|
<h2><nobr>{{ first_name }} Dashboard</nobr></h2>
|
|
|
|
</div>
|
|
|
|
<div class="search--notification--profile">
|
|
|
|
<div class="search">
|
|
|
|
<input type="text" placeholder="Search">
|
|
|
|
<button><i class="ri-search-2-line"></i></button>
|
|
|
|
</div>
|
|
|
|
<div class="notification--profile">
|
|
|
|
<div class="picon bell">
|
|
|
|
<i class="ri-notification-2-line"></i>
|
|
|
|
</div>
|
|
|
|
<div class="picon chat">
|
|
|
|
<i class="ri-wechat-2-line"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="main">
|
|
|
|
<div class="sidebar">
|
|
|
|
<ul class="sidebar--items">
|
|
|
|
<li>
|
|
|
|
<a href="#" id="active--link">
|
|
|
|
<span class="icon icon-0"><i class="fas fa-tachometer-alt"></i></span>
|
|
|
|
<span class="sidebar--item">Dashboard</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#" id="newJobPosting" onclick="loadUserPage('/new_job_posting/', '{{ user_id }}');">
|
|
|
|
<span class="icon icon-3"><i class="far fa-calendar-alt"></i></span>
|
|
|
|
<span class="sidebar--item" style="white-space: nowrap;">New Jobs Postings</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<!-- <li>-->
|
|
|
|
<!-- <a href="#">-->
|
|
|
|
<!-- <span class="icon icon-4"><i class="fa-solid fa-address-card"></i></span>-->
|
|
|
|
<!-- <span class="sidebar--item"> Add Recruiter</span>-->
|
|
|
|
<!-- </a>-->
|
|
|
|
<!-- </li>-->
|
|
|
|
<!-- <li>-->
|
|
|
|
<!-- <a href="#">-->
|
|
|
|
<!-- <span class="icon icon-4"><i class="fa-solid fa-person"></i></span>-->
|
|
|
|
<!-- <span class="sidebar--item">Recruiter List</span>-->
|
|
|
|
<!-- </a>-->
|
|
|
|
<!-- </li>-->
|
|
|
|
<li>
|
|
|
|
<a href="#" id="allJobPosting" onclick="loadUserPage('/all_job_postings/', '{{ user_id }}');">
|
|
|
|
<span class="icon icon-2"><i class="far fa-calendar-alt"></i></span>
|
|
|
|
<span class="sidebar--item">All Jobs Postings</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#" id="Messages" onclick="loadUserPage('/messages/', '{{ user_id }}');">
|
|
|
|
<span class="icon icon-4"><i class="fas fa-envelope"></i></span>
|
|
|
|
<span class="sidebar--item">Messages</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#">
|
|
|
|
<span class="icon icon-4"><i class="fa-regular fa-clock"></i></span>
|
|
|
|
<span class="sidebar--item">Pending Process</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#">
|
|
|
|
<span class="icon icon-5"><i class="fa fa-paper-plane"></i></span>
|
|
|
|
<span class="sidebar--item">Submitted Resumes</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#">
|
|
|
|
<span class="icon icon-6"><i class="fa-solid fa-person"></i></span>
|
|
|
|
<span class="sidebar--item">Client Details</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#">
|
|
|
|
<span class="icon icon-6"><i class="fas fa-chart-bar"></i></span>
|
|
|
|
<span class="sidebar--item">Activity Report</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul class="sidebar--bottom-items">
|
|
|
|
<li>
|
|
|
|
<a href="#">
|
|
|
|
<span class="icon icon-7"><i class="fas fa-cog"></i></span>
|
|
|
|
<span class="sidebar--item">Settings</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="{% url 'logout' %}">
|
|
|
|
<span class="icon icon-8"><i class="fas fa-sign-out-alt"></i></span>
|
|
|
|
<span class="sidebar--item">Logout</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="dynamicContentContainer">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div id="hyperlinkContainer" style="display: none;">-->
|
|
|
|
<!-- <div class="hyperlink-content" id="customModal" style="background-color: red;margin-top: -500px; width: 400px; margin-left: 700px;">-->
|
|
|
|
<!-- <h5>Access Restricted</h5>-->
|
|
|
|
<!-- <p>You are assigned a band level below 5. You cannot access the job posting page.</p>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { //to show popup of job posting details for jobId in all job posting
|
|
|
|
document.addEventListener('click', function(event) {
|
|
|
|
if (event.target && event.target.matches('.jobId-link')) {
|
|
|
|
event.preventDefault();
|
|
|
|
const jobId = event.target.getAttribute('data-JobId');
|
|
|
|
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', `/get_jobPosting/?JobId=${encodeURIComponent(jobId)}`, true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
const details = JSON.parse(xhr.responseText);
|
|
|
|
console.log('Details received:', details);
|
|
|
|
showPopup(details);
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status:', xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function showPopup(data) {
|
|
|
|
const popup = document.getElementById('detailsModal2');
|
|
|
|
|
|
|
|
if (popup) {
|
|
|
|
// Fill in the popup with data
|
|
|
|
document.getElementById('Client').textContent = (data.Client || '');
|
|
|
|
document.getElementById('JobID').textContent = (data.JobID || '');
|
|
|
|
document.getElementById('Location').textContent = (data.Location || '');
|
|
|
|
document.getElementById('SPOC').textContent = (data.SPOC || '');
|
|
|
|
document.getElementById('SPOC2').textContent = (data.SPOC2 || '');
|
|
|
|
document.getElementById('NoOfPosting').textContent = (data.NoOfPosting || '');
|
|
|
|
document.getElementById('StartDate').textContent = (data.StartDate || '');
|
|
|
|
document.getElementById('CloseDate').textContent = (data.CloseDate || '');
|
|
|
|
document.getElementById('Experience_in_Yrs').textContent = (data.Experience_in_Yrs || '');
|
|
|
|
document.getElementById('BudgetMin').textContent = (data.BudgetMin || '');
|
|
|
|
document.getElementById('Qualification').textContent = (data.Qualification || '');
|
|
|
|
document.getElementById('Header').textContent = (data.Header || '');
|
|
|
|
document.getElementById('JobDescription').textContent = (data.JobDescription || '');
|
|
|
|
document.getElementById('SpecialInstructions').textContent = (data.SpecialInstructions || '');
|
|
|
|
|
|
|
|
// Attach the close button event listener each time the popup is shown
|
|
|
|
document.getElementById('closePopup2').addEventListener('click', function() {
|
|
|
|
popup.style.display = 'none';
|
|
|
|
});
|
|
|
|
|
|
|
|
// Display the popup
|
|
|
|
popup.style.display = 'block';
|
|
|
|
} else {
|
|
|
|
console.error('Popup element not found');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function validateSalary() {
|
|
|
|
var minSalary = parseInt(document.getElementById("minAmount").value);
|
|
|
|
var maxSalary = parseInt(document.getElementById("maxAmount").value);
|
|
|
|
|
|
|
|
if (maxSalary <= minSalary) {
|
|
|
|
alert("max salary must be greater than min salary.");
|
|
|
|
document.getElementById("maxAmount").value = "";
|
|
|
|
document.getElementById("maxAmount").focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('input', function (event) {
|
|
|
|
var target = event.target;
|
|
|
|
if (target && target.id === 'maxAmount') {
|
|
|
|
const amount = target.value.trim();
|
|
|
|
|
|
|
|
if (!amount.trim()) {
|
|
|
|
document.getElementById('Salary').textContent = '';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!/^\d+(\.\d+)?$/.test(amount) || parseFloat(amount) < 1) {
|
|
|
|
document.getElementById('Salary').textContent = 'Invalid input';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const num = parseFloat(amount.replace(/,/g, '')); // Remove commas and parse to a number
|
|
|
|
|
|
|
|
const formattedSalary = SalaryToWords(num);
|
|
|
|
document.getElementById('Salary').textContent = formattedSalary + ' rupees';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('input', function (event) {
|
|
|
|
var target = event.target;
|
|
|
|
if (target && target.id === 'minAmount') {
|
|
|
|
const amount = target.value.trim();
|
|
|
|
|
|
|
|
if (!amount.trim()) {
|
|
|
|
document.getElementById('Salary').textContent = '';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!/^\d+(\.\d+)?$/.test(amount) || parseFloat(amount) < 1) {
|
|
|
|
document.getElementById('Salary').textContent = 'Invalid input';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const num = parseFloat(amount.replace(/,/g, '')); // Remove commas and parse to a number
|
|
|
|
|
|
|
|
|
|
|
|
const formattedSalary = SalaryToWords(num);
|
|
|
|
document.getElementById('Salary').textContent = formattedSalary + ' rupees';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
window.SalaryToWords = function (num) {
|
|
|
|
const ones = [
|
|
|
|
'', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine',
|
|
|
|
'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen',
|
|
|
|
'seventeen', 'eighteen', 'nineteen',
|
|
|
|
];
|
|
|
|
|
|
|
|
const tens = [
|
|
|
|
'', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety',
|
|
|
|
];
|
|
|
|
|
|
|
|
const scales = ['crore', 'lakh', 'thousand', 'hundred', '']; // Indian number system
|
|
|
|
|
|
|
|
const scaleNumbers = [10000000, 100000, 1000, 100, 1];
|
|
|
|
|
|
|
|
if (num === 0) return 'zero';
|
|
|
|
|
|
|
|
let result = '';
|
|
|
|
let remainder = num;
|
|
|
|
|
|
|
|
for (let i = 0; i < scales.length; i++) {
|
|
|
|
const scaleValue = Math.floor(remainder / scaleNumbers[i]);
|
|
|
|
remainder %= scaleNumbers[i];
|
|
|
|
|
|
|
|
|
|
|
|
if (scaleValue > 0) {
|
|
|
|
if (scaleNumbers[i] >= 100) {
|
|
|
|
result += `${SalaryToWords(scaleValue)} ${scales[i]} `;
|
|
|
|
} else if (scaleValue < 20) {
|
|
|
|
result += `${ones[scaleValue]} `;
|
|
|
|
} else {
|
|
|
|
result += `${tens[Math.floor(scaleValue / 10)]} ${ones[scaleValue % 10]} `;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return result.trim(); // Remove extra spaces
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function toggleConditionalFields() {
|
|
|
|
const budgetDropdown = document.getElementById('BudgetMin');
|
|
|
|
const conditionalFields = document.getElementById('conditionalFields');
|
|
|
|
const minAmount = document.getElementById('minAmount');
|
|
|
|
const maxAmount = document.getElementById('maxAmount');
|
|
|
|
let industryText = document.getElementById('industryText');
|
|
|
|
const amountFields = document.getElementById('amountFields');
|
|
|
|
|
|
|
|
const minSalary = document.getElementById('Salary');
|
|
|
|
|
|
|
|
// Create and position the 'Please Select Salary' text if it doesn't already exist
|
|
|
|
if (!industryText) {
|
|
|
|
industryText = document.createElement('p');
|
|
|
|
industryText.id = 'industryText';
|
|
|
|
industryText.style.position = 'fixed';
|
|
|
|
industryText.style.marginLeft = '820px';
|
|
|
|
industryText.style.marginTop = '-325px';
|
|
|
|
document.body.appendChild(industryText);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (budgetDropdown.value === "Fixed") {
|
|
|
|
// Show fields for Fixed budget
|
|
|
|
conditionalFields.style.display = "block";
|
|
|
|
timePeriodWrapper.style.display = "flex";
|
|
|
|
industryText.style.marginTop = '-319px';
|
|
|
|
amountFields.style.marginLeft = '640px';
|
|
|
|
minAmount.style.marginLeft = '-100px';
|
|
|
|
maxAmount.style.marginLeft = '-100px';
|
|
|
|
minSalary.textContent = '';
|
|
|
|
minAmount.value = "";
|
|
|
|
maxAmount.value = "";
|
|
|
|
}
|
|
|
|
else if (budgetDropdown.value === "Industry Standard") {
|
|
|
|
// Show fields for Industry Standard
|
|
|
|
conditionalFields.style.display = "block";
|
|
|
|
timePeriodWrapper.style.display = "none";
|
|
|
|
industryText.style.marginTop = '-320px';
|
|
|
|
amountFields.style.marginLeft = '480px';
|
|
|
|
minAmount.style.marginLeft = '-160px';
|
|
|
|
maxAmount.style.marginLeft = '-100px';
|
|
|
|
minSalary.textContent = '';
|
|
|
|
minAmount.value = "";
|
|
|
|
maxAmount.value = "";
|
|
|
|
}else {
|
|
|
|
// Hide all fields for other options
|
|
|
|
conditionalFields.style.display = "none";
|
|
|
|
timePeriodWrapper.style.display = "none";
|
|
|
|
industryText.style.marginTop = '-100px';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Function to convert number to words
|
|
|
|
function numberToWords(num) {
|
|
|
|
const belowTen = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
|
|
|
|
const belowTwenty = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
|
|
|
|
const belowHundred = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
|
|
|
|
|
|
|
|
if (num === 0) return "Zero";
|
|
|
|
|
|
|
|
// Function for recursive processing
|
|
|
|
function convert(num) {
|
|
|
|
if (num < 10) return belowTen[num];
|
|
|
|
if (num < 20) return belowTwenty[num - 10];
|
|
|
|
if (num < 100) return belowHundred[Math.floor(num / 10)] + (num % 10 ? " " + belowTen[num % 10] : "");
|
|
|
|
if (num < 1000) return belowTen[Math.floor(num / 100)] + " Hundred" + (num % 100 ? " " + convert(num % 100) : "");
|
|
|
|
if (num < 1000000) return convert(Math.floor(num / 1000)) + " Thousand" + (num % 1000 ? " " + convert(num % 1000) : "");
|
|
|
|
if (num < 1000000000) return convert(Math.floor(num / 1000000)) + " Million" + (num % 1000000 ? " " + convert(num % 1000000) : "");
|
|
|
|
}
|
|
|
|
|
|
|
|
return convert(num);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Function to handle input change and convert numbers to words
|
|
|
|
function convertInputToWords(inputElement) {
|
|
|
|
let inputValue = inputElement.value;
|
|
|
|
const numericValue = parseInt(inputValue.replace(/[^0-9]/g, '')); // Remove non-numeric characters
|
|
|
|
|
|
|
|
if (!isNaN(numericValue)) {
|
|
|
|
const wordValue = numberToWords(numericValue);
|
|
|
|
inputElement.value = wordValue; // Update input value with the word
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
document.addEventListener('change', function(event) {
|
|
|
|
var target = event.target;
|
|
|
|
if (target && target.id === 'ClientDropdown') {
|
|
|
|
var parentCompany = target.value; // Get selected client
|
|
|
|
var subClientDropdown = target.closest('form').querySelector('#SubClientDropdown');
|
|
|
|
var formId = target.closest('form').id;
|
|
|
|
|
|
|
|
// Make an AJAX request to fetch sub-clients filtered by selected client
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', '/skyonnadmin/get_subclients/?parent_company=' + parentCompany, true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
|
|
|
|
subClientDropdown.innerHTML = '<option value="">Select SubClient</option>';
|
|
|
|
|
|
|
|
var subClients = JSON.parse(xhr.responseText);
|
|
|
|
subClients.forEach(function(subClient) {
|
|
|
|
var option = document.createElement('option');
|
|
|
|
option.value = subClient;
|
|
|
|
option.text = subClient;
|
|
|
|
subClientDropdown.appendChild(option);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status: ' + xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
function goBack() {
|
|
|
|
document.getElementById("addContactPopup").style.display = "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('newJobPosting').addEventListener('click', function () {
|
|
|
|
const main = document.getElementById('dynamicContentContainer');
|
|
|
|
main.style.display ='none';
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
const container = document.getElementById('jobPostingForm');
|
|
|
|
const restricted = document.getElementById('restrictedField').value;
|
|
|
|
console.log('Restricted value:', restricted);
|
|
|
|
|
|
|
|
if (restricted === 'True') { // Check against 'True', not 'true'
|
|
|
|
console.log('Access is restricted');
|
|
|
|
alert('You are assigned a level above 5. You cannot access New job posting page');
|
|
|
|
container.style.display='none';
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
main.style.display='block';
|
|
|
|
}
|
|
|
|
}, 100)
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function validateLength(input) {
|
|
|
|
const maxLength = 8;
|
|
|
|
if (input.value.length > maxLength) {
|
|
|
|
input.value = input.value.slice(0, maxLength);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('allJobPosting').addEventListener('click', function () {
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
const container = document.getElementById('AllJobPostingTable');
|
|
|
|
const restricted = document.getElementById('restrictedField').value;
|
|
|
|
console.log('Restricted value:', restricted);
|
|
|
|
|
|
|
|
if (restricted === 'True') {
|
|
|
|
console.log('Access is restricted');
|
|
|
|
alert('You are assigned a level below 5. You cannot access All job postings page');
|
|
|
|
container.style.display='none';
|
|
|
|
}
|
|
|
|
}, 100)
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let menu = document.querySelector('.menu')
|
|
|
|
let sidebar = document.querySelector('.sidebar')
|
|
|
|
let mainContent = document.querySelector('.main--content')
|
|
|
|
menu.onclick = function() {
|
|
|
|
sidebar.classList.toggle('active')
|
|
|
|
mainContent.classList.toggle('active')
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function loadUserPage(pageName, userId) {
|
|
|
|
var urlWithUserId = pageName + "?user_id=" + userId; // Append admin_id as query parameter
|
|
|
|
var xhttp = new XMLHttpRequest();
|
|
|
|
xhttp.onreadystatechange = function() {
|
|
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
|
|
document.getElementById("dynamicContentContainer").innerHTML = this.responseText;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhttp.open("GET", urlWithUserId, true);
|
|
|
|
xhttp.send();
|
|
|
|
}
|
|
|
|
|
|
|
|
<!-- function activateSidebarLink(clickedLink) {-->
|
|
|
|
<!-- // Remove 'active' class from all sidebar links-->
|
|
|
|
<!-- var sidebarLinks = document.querySelectorAll('.sidebar-link');-->
|
|
|
|
<!-- sidebarLinks.forEach(function(link) {-->
|
|
|
|
<!-- link.classList.remove('active');-->
|
|
|
|
<!-- });-->
|
|
|
|
|
|
|
|
<!-- // Add 'active' class to the clicked sidebar link-->
|
|
|
|
<!-- clickedLink.classList.add('active');-->
|
|
|
|
<!-- }-->
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { //to show popup for client details
|
|
|
|
document.addEventListener('click', function(event) {
|
|
|
|
if (event.target && event.target.matches('.client-link')) {
|
|
|
|
event.preventDefault();
|
|
|
|
const client = event.target.getAttribute('data-client');
|
|
|
|
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', `/get_client_details/?client=${encodeURIComponent(client)}`, true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
const details = JSON.parse(xhr.responseText);
|
|
|
|
console.log('Details received:', details);
|
|
|
|
showPopup(details);
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status:', xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function showPopup(data) {
|
|
|
|
const popup = document.getElementById('detailsModal');
|
|
|
|
console.log('Popup element:', popup); // Check if popup is found
|
|
|
|
|
|
|
|
if (popup) {
|
|
|
|
// Fill in the popup with data
|
|
|
|
document.getElementById('parentCompany').textContent = (data.parent_company || '');
|
|
|
|
document.getElementById('gstNo').textContent = (data.GST_No || '');
|
|
|
|
document.getElementById('locationId').textContent = (data.Location_Id || '');
|
|
|
|
document.getElementById('address1').textContent = (data.Address_1 || '');
|
|
|
|
document.getElementById('address2').textContent = (data.Address_2 || '');
|
|
|
|
document.getElementById('city').textContent = (data.City || '');
|
|
|
|
document.getElementById('state').textContent = (data.State || '');
|
|
|
|
document.getElementById('pincode').textContent = (data.Pincode || '');
|
|
|
|
document.getElementById('country').textContent = (data.Country || '');
|
|
|
|
|
|
|
|
// Attach the close button event listener each time the popup is shown
|
|
|
|
document.getElementById('closePopup').addEventListener('click', function() {
|
|
|
|
popup.style.display = 'none';
|
|
|
|
});
|
|
|
|
|
|
|
|
// Display the popup
|
|
|
|
popup.style.display = 'block';
|
|
|
|
} else {
|
|
|
|
console.error('Popup element not found');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
document.addEventListener('change', function(event) {
|
|
|
|
var target = event.target;
|
|
|
|
if (target && target.id === 'Client') {
|
|
|
|
var client = target.value; // Get selected client
|
|
|
|
let SPOC1 = document.getElementById('SPOC');
|
|
|
|
if (!SPOC1) return;
|
|
|
|
|
|
|
|
let SPOC2 = document.getElementById('SPOC2');
|
|
|
|
if (!SPOC2) return;
|
|
|
|
|
|
|
|
SPOC1.innerHTML = '<option value="">Select SPOC1</option>';
|
|
|
|
SPOC2.innerHTML = '<option value="">Select SPOC2</option>';
|
|
|
|
// Make AJAX request to get filtered data
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', '/get_contacts/?Client=' + client, true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
var spocData = JSON.parse(xhr.responseText);
|
|
|
|
|
|
|
|
spocData.forEach(function(contact) {
|
|
|
|
const option1 = document.createElement('option');
|
|
|
|
option1.value = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
option1.textContent = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
SPOC1.appendChild(option1);
|
|
|
|
|
|
|
|
const option2 = document.createElement('option');
|
|
|
|
option2.value = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
option2.textContent = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
SPOC2.appendChild(option2);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status: ' + xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.onerror = function() {
|
|
|
|
console.error('Request failed.');
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
document.addEventListener('change', function() {
|
|
|
|
const form = document.getElementById('AddSPOCform');
|
|
|
|
if (!form) return;
|
|
|
|
|
|
|
|
const emailInput = document.getElementById('Email');
|
|
|
|
const phoneNumberInput = document.getElementById('Phone_number');
|
|
|
|
const requiredFields = form.querySelectorAll('input[required], select[required]');
|
|
|
|
|
|
|
|
const validateField = (field) => {
|
|
|
|
if (!field.value.trim()) {
|
|
|
|
field.style.borderColor = '';
|
|
|
|
field.setCustomValidity('Please fill out this field.');
|
|
|
|
field.reportValidity();
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
field.style.borderColor = 'black';
|
|
|
|
field.setCustomValidity('');
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const clearValidation = (field) => {
|
|
|
|
field.setCustomValidity('');
|
|
|
|
field.style.borderColor = '';
|
|
|
|
};
|
|
|
|
|
|
|
|
emailInput.addEventListener('input', () => {
|
|
|
|
clearValidation(emailInput);
|
|
|
|
});
|
|
|
|
|
|
|
|
phoneNumberInput.addEventListener('input', () => {
|
|
|
|
clearValidation(phoneNumberInput);
|
|
|
|
});
|
|
|
|
|
|
|
|
emailInput.addEventListener('blur', () => {
|
|
|
|
if (emailInput.value.trim() && (!emailInput.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || emailInput.value.includes('..') || !emailInput.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/))) {
|
|
|
|
emailInput.style.borderColor = '';
|
|
|
|
emailInput.setCustomValidity('Invalid email format.');
|
|
|
|
emailInput.reportValidity();
|
|
|
|
} else {
|
|
|
|
clearValidation(emailInput);
|
|
|
|
if (emailInput.value.trim()) {
|
|
|
|
checkFieldExists('Email', emailInput);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
phoneNumberInput.addEventListener('blur', () => {
|
|
|
|
if (phoneNumberInput.value.trim() && !phoneNumberInput.value.match(/^[6-9]\d{9}$/)) {
|
|
|
|
phoneNumberInput.style.borderColor = '';
|
|
|
|
phoneNumberInput.setCustomValidity('Invalid phone number format.');
|
|
|
|
phoneNumberInput.reportValidity();
|
|
|
|
} else {
|
|
|
|
clearValidation(phoneNumberInput);
|
|
|
|
if (phoneNumberInput.value.trim()) {
|
|
|
|
checkFieldExists('Phone_number', phoneNumberInput);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function checkFieldExists(fieldName, field) {
|
|
|
|
const value = field.value.trim();
|
|
|
|
|
|
|
|
fetch(`/validate_field/?${fieldName}=${value}`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(data => {
|
|
|
|
if (data.exists) {
|
|
|
|
if (fieldName === 'Phone_number') {
|
|
|
|
field.setCustomValidity('Phone number already exists.');
|
|
|
|
} else {
|
|
|
|
field.setCustomValidity('Email already exists.');
|
|
|
|
}
|
|
|
|
field.style.borderColor = 'red';
|
|
|
|
field.reportValidity();
|
|
|
|
} else {
|
|
|
|
field.setCustomValidity('');
|
|
|
|
field.style.borderColor = 'black';
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error('Error:', error);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
window.saveAdd_SPOC = async function() {
|
|
|
|
|
|
|
|
const form = document.getElementById('AddSPOCform');
|
|
|
|
const requiredFields = form.querySelectorAll('input[required], select[required]');
|
|
|
|
const emailInput = document.getElementById('Email');
|
|
|
|
const phoneNumberInput = document.getElementById('Phone_number');
|
|
|
|
|
|
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(field => {
|
|
|
|
field.setCustomValidity('');
|
|
|
|
field.style.borderColor = '';
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
for (let field of requiredFields) {
|
|
|
|
if (!field.value.trim()) {
|
|
|
|
isValid = false;
|
|
|
|
field.setCustomValidity('Please fill out this field.');
|
|
|
|
field.reportValidity();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const validateEmail = (emailInput) => {
|
|
|
|
if (emailInput.value.trim() && (!emailInput.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || emailInput.value.includes('..') || !emailInput.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/))) {
|
|
|
|
isValid = false;
|
|
|
|
emailInput.style.borderColor = '';
|
|
|
|
emailInput.setCustomValidity('Please enter a valid Email address');
|
|
|
|
emailInput.reportValidity();
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
emailInput.setCustomValidity('');
|
|
|
|
emailInput.style.borderColor = 'black';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const checkValidity = (field,pattern,errorMsg) =>{
|
|
|
|
if (field.value.trim() && !field.value.match(pattern)) {
|
|
|
|
field.setCustomValidity(errorMsg);
|
|
|
|
field.reportValidity();
|
|
|
|
isValid=false;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
field.setCustomValidity('');
|
|
|
|
field.style.borderColor = 'black';
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
checkValidity(phoneNumberInput, /^[6-9]\d{9}$/, 'Invalid Phone number format.');
|
|
|
|
validateEmail(emailInput);
|
|
|
|
|
|
|
|
if (!isValid) {
|
|
|
|
console.log("Validation failed. Please fill out the required fields.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const checkFieldExists = (fieldName, field) => {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
|
|
const value = field.value.trim();
|
|
|
|
fetch(`/validate_field/?${fieldName}=${value}`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(data => {
|
|
|
|
if (data.exists) {
|
|
|
|
if (fieldName === 'Phone_number') {
|
|
|
|
field.setCustomValidity('Phone number already exists.');
|
|
|
|
} else {
|
|
|
|
field.setCustomValidity('Email already exists.');
|
|
|
|
}
|
|
|
|
field.style.borderColor = 'red';
|
|
|
|
field.reportValidity();
|
|
|
|
resolve(false);
|
|
|
|
} else {
|
|
|
|
field.setCustomValidity('');
|
|
|
|
field.style.borderColor = 'black';
|
|
|
|
resolve(true);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error('Error:', error);
|
|
|
|
reject(error);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const phoneNoValid = await checkFieldExists('Phone_number', phoneNumberInput);
|
|
|
|
const emailValid = await checkFieldExists('Email', emailInput);
|
|
|
|
|
|
|
|
isValid = isValid && phoneNoValid && emailValid;
|
|
|
|
|
|
|
|
if (!isValid) {
|
|
|
|
console.log("Validation failed. Please fill out the required fields.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const formData = new FormData(form);
|
|
|
|
const url = form.getAttribute('action');
|
|
|
|
|
|
|
|
console.log("Submitting form to:", url);
|
|
|
|
console.log("Form data:", [...formData.entries()]); // Log the form data
|
|
|
|
|
|
|
|
fetch(url, {
|
|
|
|
method: 'POST',
|
|
|
|
body: formData,
|
|
|
|
headers: {
|
|
|
|
'X-CSRFToken': '{{ csrf_token }}',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.then(response => {
|
|
|
|
if (!response.ok) {
|
|
|
|
throw new Error('Failed to save contact');
|
|
|
|
}
|
|
|
|
return response.json();
|
|
|
|
})
|
|
|
|
.then(data => {
|
|
|
|
console.log('Success:', data);
|
|
|
|
|
|
|
|
form.reset();
|
|
|
|
hidePopup();
|
|
|
|
showSuccessPopup();
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error('Error:', error);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function refreshSPOCs() { //to refresh SPOC when refresh button clicked
|
|
|
|
console.log('refreshing SPOCs');
|
|
|
|
let client = document.getElementById('Client').value;
|
|
|
|
let SPOC1 = document.getElementById('SPOC');
|
|
|
|
if (!SPOC1) return;
|
|
|
|
|
|
|
|
let SPOC2 = document.getElementById('SPOC2');
|
|
|
|
if (!SPOC2) return;
|
|
|
|
|
|
|
|
SPOC1.innerHTML = '<option value="">Select SPOC1</option>';
|
|
|
|
SPOC2.innerHTML = '<option value="">Select SPOC2</option>';
|
|
|
|
// Make AJAX request to get filtered data
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', '/get_contacts/?Client=' + client, true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
var spocData = JSON.parse(xhr.responseText);
|
|
|
|
|
|
|
|
spocData.forEach(function(contact) {
|
|
|
|
const option1 = document.createElement('option');
|
|
|
|
option1.value = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
option1.textContent = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
SPOC1.appendChild(option1);
|
|
|
|
|
|
|
|
const option2 = document.createElement('option');
|
|
|
|
option2.value = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
option2.textContent = `${contact.FirstName} ${contact.LastName}`;
|
|
|
|
SPOC2.appendChild(option2);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status: ' + xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.onerror = function() {
|
|
|
|
console.error('Request failed.');
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
}
|
|
|
|
|
|
|
|
function limitNumberOfPostings(input) {
|
|
|
|
var maxPostings = 100;
|
|
|
|
if (input.value > maxPostings) {
|
|
|
|
input.value = maxPostings; // Set the value to the maximum allowed
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateInputField() {
|
|
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
|
|
|
var selectedStates = [];
|
|
|
|
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
|
|
|
|
for (var i = 0; i < checkboxes.length; i++) {
|
|
|
|
selectedStates.push(checkboxes[i].value);
|
|
|
|
}
|
|
|
|
selectedStatesInput.value = selectedStates.join(", ");
|
|
|
|
// Close the dropdown after updating the input field
|
|
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
|
|
|
dropdownContent.style.display = "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
function toggleOtherInputField() {
|
|
|
|
var otherCheckbox = document.getElementById("OtherCheckbox");
|
|
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
|
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
|
|
|
if (otherCheckbox.checked) {
|
|
|
|
// Show the modal for adding a new location
|
|
|
|
showAddLocationModal();
|
|
|
|
dropdownContent.style.display = "none";
|
|
|
|
} else {
|
|
|
|
// If "Other" is unchecked, clear the input field, make it readonly again, and show dropdown content
|
|
|
|
selectedStatesInput.value = "";
|
|
|
|
selectedStatesInput.readOnly = true;
|
|
|
|
dropdownContent.style.display = "block";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function toggleDropdown() {
|
|
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
|
|
|
if (dropdownContent.style.display === "none") {
|
|
|
|
dropdownContent.style.display = "block";
|
|
|
|
} else {
|
|
|
|
dropdownContent.style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function showAddLocationModal() {
|
|
|
|
document.getElementById("addLocationModal").style.display = "block";
|
|
|
|
}
|
|
|
|
|
|
|
|
function closeAddLocationModal() {
|
|
|
|
document.getElementById("addLocationModal").style.display = "none";
|
|
|
|
document.getElementById("OtherCheckbox").checked = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
function saveNewLocation() {
|
|
|
|
var newLocation = document.getElementById("newLocationInput").value.trim();
|
|
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
|
|
|
|
|
|
|
if (newLocation) {
|
|
|
|
// Add new location to the dropdown
|
|
|
|
addLocationToDropdown(newLocation);
|
|
|
|
|
|
|
|
// Save new location to local storage
|
|
|
|
saveLocation(newLocation);
|
|
|
|
|
|
|
|
// Update the input field with the new location
|
|
|
|
var currentInput = selectedStatesInput.value;
|
|
|
|
selectedStatesInput.value = currentInput ? currentInput + ", " + newLocation : newLocation;
|
|
|
|
|
|
|
|
// Clear and reset the input field
|
|
|
|
document.getElementById("newLocationInput").value = "";
|
|
|
|
closeAddLocationModal();
|
|
|
|
} else {
|
|
|
|
alert("Please enter a location.");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function addLocationToDropdown(location) {
|
|
|
|
var checkboxContainer = document.getElementById("checkboxItems");
|
|
|
|
if (!checkboxContainer) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var newCheckbox = document.createElement("input");
|
|
|
|
newCheckbox.type = "checkbox";
|
|
|
|
newCheckbox.value = location;
|
|
|
|
newCheckbox.style.marginLeft = "-50px";
|
|
|
|
newCheckbox.id = "checkbox_" + location.replace(/\s+/g, '_');
|
|
|
|
newCheckbox.name = "checkbox_" + location.replace(/\s+/g, '_');
|
|
|
|
newCheckbox.onchange = updateInputField;
|
|
|
|
|
|
|
|
var newCheckboxLabel = document.createElement("label");
|
|
|
|
newCheckboxLabel.style.marginLeft = "-48px";
|
|
|
|
newCheckboxLabel.setAttribute("for", newCheckbox.id);
|
|
|
|
newCheckboxLabel.appendChild(document.createTextNode(" " + location));
|
|
|
|
|
|
|
|
checkboxContainer.appendChild(newCheckbox);
|
|
|
|
checkboxContainer.appendChild(newCheckboxLabel);
|
|
|
|
checkboxContainer.appendChild(document.createElement("br"));
|
|
|
|
}
|
|
|
|
|
|
|
|
function saveLocation(location) {
|
|
|
|
var locations = JSON.parse(localStorage.getItem('locations')) || [];
|
|
|
|
locations.push(location);
|
|
|
|
localStorage.setItem('locations', JSON.stringify(locations));
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadLocations() {
|
|
|
|
var locations = JSON.parse(localStorage.getItem('locations')) || [];
|
|
|
|
locations.forEach(function(location) {
|
|
|
|
addLocationToDropdown(location);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded',function() {
|
|
|
|
document.addEventListener('change',function(event) {
|
|
|
|
var target = event.target;
|
|
|
|
if (target && target.id === 'Client') {
|
|
|
|
var client = target.value;
|
|
|
|
|
|
|
|
let xhr= new XMLHttpRequest();
|
|
|
|
xhr.open('GET',`/get_locations/?Client=${client}`,true);
|
|
|
|
xhr.onload = function() {
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
const locations = JSON.parse(xhr.responseText);
|
|
|
|
|
|
|
|
updateCheckboxItems(locations);
|
|
|
|
} else {
|
|
|
|
console.error('Request failed. Status: ' + xhr.status);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send()
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateCheckboxItems(locations) {
|
|
|
|
const checkboxItems = document.getElementById('checkboxItems');
|
|
|
|
|
|
|
|
checkboxItems.innerHTML = `
|
|
|
|
<input type="checkbox" id="anyWhereCheckbox" name="anyWhereCheckbox" value="Anywhere" onchange="updateInputField()" style="margin-left: -50px;">
|
|
|
|
<label for="anyWhereCheckbox" style="margin-left: -50px;">Anywhere</label><br>
|
|
|
|
`;
|
|
|
|
|
|
|
|
locations.forEach(function(location) {
|
|
|
|
const existingLocation = checkboxItems.querySelector(`input[value="${location}"]`)
|
|
|
|
|
|
|
|
if (!existingLocation) {
|
|
|
|
// Create a checkbox and label for each location
|
|
|
|
const checkbox = document.createElement('input');
|
|
|
|
checkbox.type = 'checkbox';
|
|
|
|
checkbox.name = location;
|
|
|
|
checkbox.value = location;
|
|
|
|
checkbox.style.marginLeft = '-50px';
|
|
|
|
checkbox.onchange = updateInputField;
|
|
|
|
|
|
|
|
const label = document.createElement('label');
|
|
|
|
label.textContent = location;
|
|
|
|
label.style.marginLeft = '-45px';
|
|
|
|
label.htmlFor = location;
|
|
|
|
|
|
|
|
// Append checkbox and label to the container
|
|
|
|
checkboxItems.appendChild(checkbox);
|
|
|
|
checkboxItems.appendChild(label);
|
|
|
|
checkboxItems.appendChild(document.createElement('br'));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showPopup() {
|
|
|
|
document.getElementById('addContactPopup').style.display = 'flex';
|
|
|
|
}
|
|
|
|
|
|
|
|
function hidePopup() {
|
|
|
|
document.getElementById('addContactPopup').style.display = 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
function showSuccessPopup() {
|
|
|
|
document.getElementById('successPopup').style.display = 'flex';
|
|
|
|
}
|
|
|
|
|
|
|
|
function hideSuccessPopup() {
|
|
|
|
document.getElementById('successPopup').style.display = 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Function to validate the job posting form (to be implemented)
|
|
|
|
function saveJobPosting() {
|
|
|
|
// Add your form validation and submission logic here
|
|
|
|
alert('Job posting saved!');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function saveJobPosting() {
|
|
|
|
const form = document.getElementById('jobPostingForm');
|
|
|
|
const orderedFieldIds = [
|
|
|
|
'Client', 'JobID', 'selectedStatesInput', 'SPOC', 'SPOC2',
|
|
|
|
'NoOfPosting', 'StartDate', 'CloseDate', 'Type', 'Experience',
|
|
|
|
'BudgetMin', 'timePeriod','minAmount','maxAmount', 'Header', 'JobDescription', 'SpecialInstructions', 'JD'
|
|
|
|
];
|
|
|
|
|
|
|
|
const minSalary = document.getElementById('minSalary');
|
|
|
|
const maxSalary = document.getElementById('maxSalary');
|
|
|
|
const minAmount = document.getElementById('minAmount');
|
|
|
|
const maxAmount = document.getElementById('maxAmount');
|
|
|
|
|
|
|
|
let isValid = true;
|
|
|
|
let firstInvalidField = null;
|
|
|
|
|
|
|
|
// Clear any previous custom validation messages and reset border colors
|
|
|
|
orderedFieldIds.forEach(id => {
|
|
|
|
const field = document.getElementById(id);
|
|
|
|
if (field) {
|
|
|
|
field.setCustomValidity(''); // Clear previous validation message
|
|
|
|
field.style.borderColor = ''; // Reset border color
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Iterate over each field in the specified order to validate
|
|
|
|
for (let id of orderedFieldIds) {
|
|
|
|
const field = document.getElementById(id);
|
|
|
|
|
|
|
|
if (field && !field.value.trim() && field !== 'JD') {
|
|
|
|
isValid = false;
|
|
|
|
field.setCustomValidity('Please fill out this field.');
|
|
|
|
field.reportValidity();
|
|
|
|
|
|
|
|
// Focus the first invalid field
|
|
|
|
if (!firstInvalidField) {
|
|
|
|
firstInvalidField = field;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
if (field && field === 'JD' && !field.value.trim()) {
|
|
|
|
isValid = false;
|
|
|
|
field.setCustomValidity('Please upload a file');
|
|
|
|
field.reportValidity();
|
|
|
|
if (!firstInvalidField) {
|
|
|
|
firstInvalidField = field;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (minSalary && minSalary.textContent === 'Invalid input') {
|
|
|
|
isValid = false;
|
|
|
|
minAmount.setCustomValidity('Please enter correct salary amount.');
|
|
|
|
minAmount.reportValidity();
|
|
|
|
if (!firstInvalidField) {
|
|
|
|
firstInvalidField = minAmount;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!isValid) {
|
|
|
|
// Focus on the first invalid field according to the specified order
|
|
|
|
if (firstInvalidField) {
|
|
|
|
firstInvalidField.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log("Validation failed. Please fill out the required fields.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Proceed with saving data if all fields are valid
|
|
|
|
const formData = new FormData(form);
|
|
|
|
const url = form.getAttribute('action');
|
|
|
|
|
|
|
|
console.log("Submitting form to:", url);
|
|
|
|
console.log("Form data:", [...formData.entries()]); // Log the form data
|
|
|
|
|
|
|
|
fetch(url, {
|
|
|
|
method: 'POST',
|
|
|
|
body: formData,
|
|
|
|
headers: {
|
|
|
|
'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.then(response => {
|
|
|
|
if (!response.ok) {
|
|
|
|
throw new Error('Failed to save job posting.');
|
|
|
|
}
|
|
|
|
return response.json();
|
|
|
|
})
|
|
|
|
.then(data => {
|
|
|
|
console.log('Success:', data);
|
|
|
|
alert('Job saved successfully.');
|
|
|
|
document.getElementById('Salary').textContent = '';
|
|
|
|
document.getElementById('BudgetMin').value = '';
|
|
|
|
document.getElementById('conditionalFields').style.display = 'none';
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error('Error:', error);
|
|
|
|
alert('Error: ' + error.message);
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
// Clear all fields in the form whether success or error
|
|
|
|
form.reset();
|
|
|
|
|
|
|
|
// Reset field borders to their default state
|
|
|
|
orderedFieldIds.forEach(id => {
|
|
|
|
const field = document.getElementById(id);
|
|
|
|
if (field) {
|
|
|
|
field.style.borderColor = 'initial'; // Reset to default border color
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function validateDates() {
|
|
|
|
var startDate = new Date(document.getElementById("StartDate").value);
|
|
|
|
var closeDate = new Date(document.getElementById("CloseDate").value);
|
|
|
|
|
|
|
|
if (closeDate <= startDate) {
|
|
|
|
alert("Close Date must be greater than Start Date.");
|
|
|
|
document.getElementById("CloseDate").value = "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function validateAmount() {
|
|
|
|
// Get values for minAmount and maxAmount fields
|
|
|
|
var minAmount = parseInt(document.getElementById("minAmount").value);
|
|
|
|
var maxAmount = parseInt(document.getElementById("maxAmount").value);
|
|
|
|
console.log(minAmount,maxAmount);
|
|
|
|
|
|
|
|
// Get input elements and error popup elements
|
|
|
|
var minAmountInput = document.getElementById("minAmount");
|
|
|
|
var maxAmountInput = document.getElementById("maxAmount");
|
|
|
|
var maxAmountErrorPopup = document.getElementById("maxAmountErrorPopup");
|
|
|
|
|
|
|
|
<!-- // Check if minAmount is a valid number-->
|
|
|
|
<!-- if (isNaN(minAmount) || minAmount <= 0) {-->
|
|
|
|
<!-- maxAmountErrorPopup.textContent = "Min amount must be greater than zero.";-->
|
|
|
|
<!-- maxAmountErrorPopup.style.display = "block";-->
|
|
|
|
<!-- maxAmountErrorPopup.style.borderColor = "red"; // Optionally, visually indicate error-->
|
|
|
|
<!-- maxAmountErrorPopup.focus();-->
|
|
|
|
<!-- return; // Prevent further validation-->
|
|
|
|
<!-- } else {-->
|
|
|
|
<!-- minAmountErrorPopup.style.display = "none"; // Hide error popup-->
|
|
|
|
<!-- minAmountInput.style.borderColor = ""; // Reset border color-->
|
|
|
|
<!-- }-->
|
|
|
|
<!-- // Check if maxAmount is a valid number-->
|
|
|
|
<!-- if (isNaN(maxAmount) || maxAmount <= 0) {-->
|
|
|
|
<!-- alert("Max amount must be greater than zero.");-->
|
|
|
|
<!-- maxAmountErrorPopup.textContent = "Max amount must be greater than zero.";-->
|
|
|
|
<!-- maxAmountErrorPopup.style.display = "block";-->
|
|
|
|
<!-- maxAmountInput.style.borderColor = "red"; // Optionally, visually indicate error-->
|
|
|
|
<!-- maxAmountInput.focus();-->
|
|
|
|
<!-- return; // Prevent further validation-->
|
|
|
|
<!-- } else {-->
|
|
|
|
<!-- maxAmountErrorPopup.style.display = "none"; // Hide error popup-->
|
|
|
|
<!-- maxAmountInput.style.borderColor = ""; // Reset border color-->
|
|
|
|
<!-- }-->
|
|
|
|
|
|
|
|
// Check if maxAmount is less than or equal to minAmount
|
|
|
|
if (maxAmount <= minAmount) {
|
|
|
|
alert("Max amount must be greater than Min amount.");
|
|
|
|
maxAmountErrorPopup.textContent = "Max amount must be greater than Min amount.";
|
|
|
|
maxAmountErrorPopup.style.display = "block";
|
|
|
|
maxAmountInput.style.borderColor = "red"; // Optionally, visually indicate error
|
|
|
|
maxAmountInput.focus();
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
maxAmountErrorPopup.style.display = "none"; // Hide error popup
|
|
|
|
maxAmountInput.style.borderColor = ""; // Reset border color
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Attach the validation function to input and blur events for both fields
|
|
|
|
<!--document.getElementById("minAmount").addEventListener("input", validateAmount);-->
|
|
|
|
<!--document.getElementById("minAmount").addEventListener("blur", validateAmount);-->
|
|
|
|
document.getElementById("maxAmount").addEventListener("input", validateAmount);
|
|
|
|
document.getElementById("maxAmount").addEventListener("blur", validateAmount);
|
|
|
|
|
|
|
|
function searchJob() {
|
|
|
|
var input, filter, table, tr, i, txtValue;
|
|
|
|
input = document.getElementById("searchInput");
|
|
|
|
filter = input.value.toUpperCase();
|
|
|
|
table = document.querySelector("table");
|
|
|
|
tr = table.getElementsByTagName("tr");
|
|
|
|
|
|
|
|
for (i = 1; i < tr.length; i++) {
|
|
|
|
var found = false;
|
|
|
|
|
|
|
|
// Check Client Name (1st column)
|
|
|
|
var clientTd = tr[i].getElementsByTagName("td")[0];
|
|
|
|
if (clientTd) {
|
|
|
|
txtValue = clientTd.textContent || clientTd.innerText;
|
|
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
|
|
found = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Check JobID (2nd column)
|
|
|
|
var jobIdTd = tr[i].getElementsByTagName("td")[1];
|
|
|
|
if (jobIdTd) {
|
|
|
|
txtValue = jobIdTd.textContent || jobIdTd.innerText;
|
|
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
|
|
found = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Show or hide the row based on search results
|
|
|
|
tr[i].style.display = found ? "" : "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function validateExperience(input) {
|
|
|
|
// Convert the input value to a string and ensure only up to two digits
|
|
|
|
if (input.value.length > 2) {
|
|
|
|
input.value = input.value.slice(0, 2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function limitToThreeDigits(input) {
|
|
|
|
// Convert the input value to a string and ensure only up to two digits
|
|
|
|
if (input.value.length > 3) {
|
|
|
|
input.value = input.value.slice(0, 3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|