<!DOCTYPE html>
< html lang = "en" xmlns = "http://www.w3.org/1999/html" >
< 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.0.0-beta3/css/all.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 >
#arminta-logo {
display: block; /* Initially visible */
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
:root {
--background-color1: #fafaff;
--background-color2: #ffffff;
--background-color3: #ededed;
--background-color4: #cad7fda4;
--primary-color: #4b49ac;
--secondary-color: #0c007d;
--Border-color: #3f0097;
--one-use-color: #3f0097;
--two-use-color: #5500cb;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #D9D9D9;
font-size: 1.0rem; /* Decrease the base font size */
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 60px;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid white;
font-size: 1.0rem;
background-color: #ACC7D2;
display: flex;
justify-content: space-between;
align-items: center;
}
.search--notification--profile {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 100px);
padding: 0 40px;
margin-left: -10px;
}
.sidebar-link img {
filter: brightness(0) invert(1);
}
.search {
background-color: #F1F4F8;
border-radius: 50px;
width: 400px;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left:230px;
}
.search-container {
display: flex;
align-items: center;
border: 1px solid black;
border-radius: 5px;
padding: 0 5px;
}
.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;
}
.main {
position: relative;
width: 100%;
height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
}
.search button i {
font-size: 1.1rem;
color: #5073FB;
}
/* Sidebar Styling */
.sidebar {
position: fixed;
left: 0;
height: 100vh;
width: 263.5px; /* Expanded width */
background-color: #054560;
padding: 30px;
transition: width 0.3s ease-in-out; /* Smooth transition for width change */
overflow: hidden;
z-index:1000;
transition: all 0.5s ease;}
#sidebar.collapsed {
width: 0; /* Collapsed state */
}
.sidebar.active {
width: 80px; /* Collapsed width */
}
.sidebar--items {
list-style: none;
padding: 0;
}
.sidebar--item {
display: inline-block;
margin-left: 15px;
}
.sidebar.active .sidebar--item {
display: none; /* Hide labels when sidebar is collapsed */
}
.icon {
display: inline-block;
width: 30px;
margin-left: -8px; /* Adjust as needed for better positioning */
transition: margin-left 0.3s ease; /
}
.sidebar-link {
text-decoration: none;
color: white;
display: flex;
align-items: center;
padding: 10px;
width: 220px; /* Default width */
transition: width 0.3s ease, transform 0.3s ease, background 0.3s ease;
position: relative;
}
.sidebar-link:hover {
width: 280px; /* Expanded width */
background: #009FC1;
transform: translateX(-20px); /* Move left by 20px */
transition: width 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
/* Toggle Menu Icon */
.fa-bars, .fa-ellipsis-vertical {
cursor: pointer;
font-size: 30px;
color: red;
margin-left:100px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
li a span{
margin-left:-7px;
}
.sidebar--items a,
.sidebar--bottom-items a {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 1.0rem;
color: white;
padding: 10px;
border-radius: 10px;
}
.sidebar--items a:hover,
.sidebar--bottom-items a:hover {
color: #054560;
background: #ACC7D2;
}
.sidebar--items a.active {
color: #054560; /* Match hover color for active link */
font-weight: bold; /* Optional: Bold font for active link */
background: #ACC7D2;
}
.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;
}
#clientDetailsContainer{
body {
font-family: Arial, sans-serif;
}
.container {
width: 45rem;
margin: auto;
padding: 20px;
border-radius: 10px;
}
.two-col {
display: flex;
white-space: nowrap;
}
.three-col .col1,
.three-col .col2 {
flex: 0 0 22%;
}
.two-col .form-group {
margin-bottom: 15px;
}
.two-col input,
.two-col select {
width: calc(100% - 50px);
padding: 10px;
border-radius: 10px;
border: 1px solid #ccc;
}
label.required::after {
content: "*";
color: red;
margin-left: 5px;
}
ul {
list-style-type: none;
padding: 0;
margin-bottom: 20px;
margin-left: 300px;
}
li {
float:left;
margin-bottom: 20px;
margin-left: -10px;
}
li a {
display: block;
color: black;
text-align: center;
padding: 1px;
text-decoration: underline;
margin-top: 20px;
margin-left: 60px;
}
a:hover {
color:red;
}
.container1 {
margin-left: 100px;
width: 900px;
}
.nav a.active {
color: red; /* Change the color to your desired color */
font-weight: bold; /* Make the font bold, if desired */
/* Add any other styling for the active link */
}
.icon img:hover {
background:#009FC1
}
.fa-ellipsis-vertical {
margin-left:-100px;
color:red;
}
}
< / style >
< title > Admin Dashboard< / title >
< / head >
< body >
< div class = "wrapper" >
< section class = "header" >
{% load static %}
< li >
< a id = "menu-icon" class = "fa-solid fa-bars" onclick = "toggleSidebar()"
style="cursor: pointer; font-size: 25px; color: black; margin-left:40px; margin-top: -100px;">< / a >
< / li >
< li >
< img id = "arminta-logo" src = "{% static 'images/Arminta_Logo_1.svg' %}" alt = "Logo"
style=" margin-left:20px; margin-bottom:15px;">
< / li >
< div class = "search--notification--profile" >
< div class = "search" >
< input type = "text" placeholder = "Search" >
< button > < i class = "ri-search-2-line" style = "color:#054560" > < / i > < / button >
< / div >
< h3 style = "margin-left:0px;" > Skyonn Technologies< / h3 >
< / div >
< div class = "bell" style = "margin-right: 30px; color:#054560" >
< i class = "fa-solid fa-bell" > < / i >
< / div >
< div class = "profile" style = "margin-right: 30px;" >
< div class = "profile-content" style = "display: flex;align-items: center;" >
< div class = "profile-picture" style = "position: relative; width: 60px; height: 60px;" >
{% if picture %}
< img id = "profileImage" src = "{{picture.url}}" alt = "Profile Picture" class = "profile-img" style = "width: 50px ;
height: 50px;border-radius: 50%;object-fit: cover;margin-top: 5px;" data-admin-id="{{ admin_id }}">
{% endif %}
< / div >
< / div >
< / div >
< h3 style = "margin-right: 40px; color:#054560" > {{first_name}}< / h3 >
< a href = "{% url 'admin_logout' %}" style = "margin-right: 50px; color: red; font-size: larger; text-decoration: underline;" > LogOut< / a >
< / section >
< section class = "main" >
< div class = "sidebar" id = "sidebar" >
< ul class = "sidebar--items" >
{% load static %}
< li >
< a href = "#" class = "sidebar-link" onclick = "showClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Client Details (3).svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Client Details< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "activateLink(this); loadPage('/skyonnadmin/Internal_team_details/','{{admin_id}}'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Internal team Details (1).svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Internal Team Details< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "loadPage('//'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Messages.svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Messages< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "loadPage('//'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Pending process.svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Pending Process< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "loadPage('//'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/submited Resumes.svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Submitted Resumes< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "loadPage('//'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Add A New SPOC.svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Add a New SPOC< / span >
< / a >
< / li >
< li >
< a href = "#" class = "sidebar-link" onclick = "loadPage('/new_job_postings/'); hideClientDetails(); activateSidebarLink(this)" >
< span class = "icon" > < img src = "{% static 'images/Activity Report.svg' %}" > < / span >
< span class = "sidebar--item" style = "margin-left:20px" > Activity Report< / span >
< / a >
< / li >
< / ul >
< / div >
< div id = "clientDetailsContainer" style = "display: none;" >
< ul >
< h4 style = "margin-left:280px; margin-top:10px; text-decoration:underline; color:#054560;" > Client Details< / h4 >
< div class = "nav" style = "margin-left:-60px;" >
< li > < a href = "#" class = "btn" onclick = "activateLink(this); loadPage('/skyonnadmin/add_client/','{{admin_id}}')" > Add New Client< / a > < / li >
< li > < a href = "#" class = "btn" onclick = "activateLink(this); loadPage('/skyonnadmin/add_subclient/','{{admin_id}}')" > Add Sub Clients/Locations< / a > < / li >
< li > < a href = "#" class = "btn" onclick = "activateLink(this); loadPage('/skyonnadmin/add_new_contact/','{{admin_id}}')" > Add New Contact< / a > < / li >
< li > < a href = "#" class = "btn" onclick = "activateLink(this); loadPage('/skyonnadmin/existing_client/','{{admin_id}}')" > Existing Client< / a > < / li >
< / div >
< / ul >
< / div >
< div id = "dynamicContentContainer" >
< / div >
< div id = "AdminDetailsModal" class = "modal" style = "position: fixed;top: 60px;right: 0;width: 30%;height: 80%;border: 1px black;display: none;background-color: white; border:2px solid black; box-shadow: -2px 0px 5px rgba(0,0,0,0.2);z-index:1000;" >
< div class = "modal-content" style = "padding: 40px;height: 100%;" >
< a href = "#" onclick = "closeModal()" style = "font-size: 24px; margin-left: 360px; color:red;" >
< i class = "fa fa-times" > < / i >
< / a >
< div class = "profile-picture-container" style = "text-align: center; margin-bottom: 40px;" >
< img id = "profile_picture" src = "{{picture.url}}" alt = "Profile Picture" style = "width: 150px; margin-top:-50px; height: 150px; border-radius: 50%; object-fit: cover; border: 2px solid #ddd;" >
< / div >
< div class = "data" style = "margin-left:1px" >
< p > < strong style = "color:#054560" > FirstName:< / strong > < span style = "margin-left:50px;" id = "first_name" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > LastName:< / strong > < span style = "margin-left:50px;" id = "last_name" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > PhoneNo1:< / strong > < span style = "margin-left:50px;" id = "phone" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > PhoneNo2:< / strong > < span style = "margin-left:50px;" id = "phone_number_2" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > Company Email:< / strong > < span style = "margin-left:13px;" id = "company_email" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > Personal Email:< / strong > < span style = "margin-left:15px;" id = "personal_email" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > Address:< / strong > < span style = "margin-left:65px;" id = "address" > < / span > < / p > < br >
< p > < strong style = "color:#054560" > Work Location:< / strong > < span style = "margin-left:22px;" id = "work_location" > < / span > < / p > < br >
< / div >
< / div >
< script >
function changeGST() {
var gstInput = document.getElementById("GSTNo");
var button = document.getElementById("changeButton");
// If input is disabled, enable it to allow editing
if (gstInput.disabled) {
gstInput.disabled = false; // Enable the input
gstInput.focus(); // Set focus on the input field
button.textContent = "Save"; // Change the button text to "Save"
} else {
// If input is enabled, disable it and save the new value
gstInput.disabled = true;
button.textContent = "Change"; // Change the button text back to "Change"
// Handle saving logic here if needed (e.g., sending the updated value to the server)
var updatedGST = gstInput.value;
console.log("Updated GST No:", updatedGST); // You can replace this with actual saving logic
}
}
function searchEmployee() {
var input, filter, table, tr, i, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("employeeTableBody"); // Use the table body
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length ; i + + ) {
var found = false;
// Check relevant columns (FirstName, LastName, Designation, Department, etc.)
var tds = tr[i].getElementsByTagName("td");
// Check all relevant columns (adjust indexes as necessary)
for (var j = 0; j < tds.length ; j + + ) {
if (tds[j]) {
txtValue = tds[j].textContent || tds[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
found = true;
break; // No need to check further columns if a match is found
}
}
}
// Show or hide the row based on search results
tr[i].style.display = found ? "" : "none";
}
}
function closeModal() {
const modal = document.getElementById('AdminDetailsModal');
if (modal) {
modal.style.display = 'none';
// Clear all modal data fields
document.getElementById('first_name').innerText = '';
document.getElementById('last_name').innerText = '';
document.getElementById('phone').innerText = '';
document.getElementById('phone_number_2').innerText = '';
document.getElementById('company_email').innerText = '';
document.getElementById('personal_email').innerText = '';
document.getElementById('address').innerText = '';
document.getElementById('work_location').innerText = '';
}
}
// Add event listener after DOM content is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Handle profile image click to load admin details
document.addEventListener('click', function(event) {
if (event.target & & event.target.id === 'profileImage') {
const adminId = event.target.dataset.adminId;
const popup = document.getElementById('AdminDetailsModal');
// Toggle popup visibility
if (popup.style.display === 'block') {
closeModal();
return;
}
// Fetch admin details via AJAX
let xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/get_admin_details/?admin_id=${adminId}`, true);
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
const adminDetails = response.admin_data;
showAdminDetails(adminDetails);
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
// Close modal when clicking outside of it or on the close button
document.addEventListener('click', function(event) {
const modal = document.getElementById('AdminDetailsModal');
if (modal & & modal.style.display === 'block' & & !modal.contains(event.target) & & event.target.id !== 'profileImage') {
closeModal();
}
}, true);
});
function showAdminDetails(adminDetails) {
const popup = document.getElementById('AdminDetailsModal');
if (popup) {
document.getElementById('first_name').innerText = adminDetails.first_name;
document.getElementById('last_name').innerText = adminDetails.last_name;
document.getElementById('phone').innerText = adminDetails.phone;
document.getElementById('phone_number_2').innerText = adminDetails.phone_number_2;
document.getElementById('company_email').innerText = adminDetails.company_email;
document.getElementById('personal_email').innerText = adminDetails.personal_email;
document.getElementById('address').innerText = adminDetails.address;
document.getElementById('work_location').innerText = adminDetails.work_location;
// Display the popup
popup.style.display = 'block';
}
}
function toggleSidebar() {
var sidebar = document.getElementById('sidebar');
var menuIcon = document.getElementById('menu-icon');
if (sidebar & & menuIcon) {
// Toggle the sidebar's active state on click
sidebar.classList.toggle('active');
// Toggle between menu bar and cross icons based on sidebar active state
if (sidebar.classList.contains('active')) {
// When the sidebar is active (open), show the cross icon
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-times'); // Show cross icon
} else {
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
}
} else {
console.error("Sidebar or Menu Icon not found");
}
}
// No automatic mouse enter or leave events for sidebar; menu icon is handled only on click
document.addEventListener('DOMContentLoaded', () => {
// Sidebar will only be controlled via the menu icon click
});
var sidebarTimeout;
function handleSidebarMouseEvents() {
var sidebar = document.getElementById('sidebar');
var body = document.querySelector('body');
if (sidebar & & body) {
// When mouse enters the sidebar, close it
sidebar.addEventListener('mouseenter', () => {
clearTimeout(sidebarTimeout);
if (sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
}
});
sidebar.addEventListener('mouseleave', () => {
clearTimeout(sidebarTimeout);
sidebarTimeout = setTimeout(() => {
if (!sidebar.classList.contains('active')) {
sidebar.classList.add('active');
}
}, 300);
});
}
}
// Initialize event listeners on DOM load
document.addEventListener('DOMContentLoaded', () => {
handleSidebarMouseEvents(); // Set up the mouse enter/leave events
});
<!-- document.addEventListener('click', function (event) { -->
<!-- if(event.target && event.target.id === 'Existing_employeeLink') { -->
<!-- const form = document.getElementById('Existing_employeeLink'); -->
<!-- fetch('/skyonnadmin/existing_employee/') -->
<!-- .then(response => response.json()) -->
<!-- .then(data => { -->
<!-- const employees = data.employees; -->
<!-- console.log(employees); -->
<!-- const employeeTableBody = document.getElementById('employeeTableBody'); -->
<!-- employeeTableBody.innerHTML = ''; // Clear previous data -->
<!-- if(employees.length > 0) { -->
<!-- employees.forEach(emp => { -->
<!-- const row = ` -->
<!-- <tr> -->
<!-- <td>${emp.FirstName}</td> -->
<!-- <td>${emp.LastName}</td> -->
<!-- <td>${emp.Designation}</td> -->
<!-- <td>${emp.Department}</td> -->
<!-- <td>${emp.PhoneNo1}</td> -->
<!-- <td>${emp.LandNumber}</td> -->
<!-- <td>${emp.Email1}</td> -->
<!-- <td>${emp.Email2}</td> -->
<!-- <td>${emp.Level}</td> -->
<!-- </tr>`; -->
<!-- employeeTableBody.insertAdjacentHTML('beforeend', row); -->
<!-- }); -->
<!-- } -->
<!-- }) -->
<!-- .catch(error => { -->
<!-- console.error('Error fetching employee data:', error); -->
<!-- }) -->
<!-- } -->
<!-- }); -->
document.addEventListener('click', function (event) {
if(event.target & & event.target.id === 'Existing_employeeLink') {
const form = document.getElementById('Existing_employeeLink');
fetch('/skyonnadmin/existing_employee/')
.then(response => response.json())
.then(data => {
const employees = data.employees;
console.log(employees);
const employeeTableBody = document.getElementById('employeeTableBody');
employeeTableBody.innerHTML = ''; // Clear previous data
if(employees.length > 0) {
employees.forEach(emp => {
const row = `
< tr >
< td contentEditable = 'false' data-key = "FirstName" style = "color: blue" > < a href = "#" class = "FirstName-link" data-FirstName = "${emp.FirstName}" > ${emp.FirstName}< / td >
< td contentEditable = 'false' data-key = "LastName" style = "color: blue" > < a href = "#" class = "LastName-link" data-LastName = "${emp.LastName}" > ${emp.LastName}< / td >
< td contentEditable = 'false' data-key = "Designation" > ${emp.Designation}< / td >
< td contentEditable = 'false' data-key = "Department" > ${emp.Department}< / td >
< td contentEditable = 'false' data-key = "PhoneNo1" > ${emp.PhoneNo1}< / td >
< td contentEditable = 'false' data-key = "LandNumber" > ${emp.LandNumber}< / td >
< td contentEditable = 'false' class = 'non-editable' data-email = "${emp.Email1}" > ${emp.Email1}< / td >
< td contentEditable = 'false' data-key = "Email2" > ${emp.Email2}< / td >
< td contentEditable = 'false' data-key = "Level" > ${emp.Level}< / td >
< td style = "width: 150px;" >
< button class = "edit-internalTeam" style = "font-size: 20px; margin-left; -50px;" > Edit< / button >
< button class = "delete-internalTeam" style = "font-size: 20px;" > Delete< / button >
< button class = "print-internalTeam" style = "font-size: 20px;" > Print< / button >
< / td >
< / tr > `;
employeeTableBody.insertAdjacentHTML('beforeend', row);
});
AddEditDelete();
}
})
.catch(error => {
console.error('Error fetching employee data:', error);
})
}
function enforceMaxLength(event) {
const cell = event.target
const maxLengths = {'PhoneNo1':10 , 'LandNumber':20 , 'Pincode':6}
const field = cell.getAttribute('data-key');
const maxLength = maxLengths[field]
if(maxLength & & cell.textContent.length > maxLength) {
cell.textContent = cell.textContent.slice(0,maxLength);
const range = document.createRange();
const selection = window.getSelection();
range.setStart(cell.childNodes[0], cell.textContent.length); //makes cursor stay at end of text when it reaches max length
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
const employeeTableBody = document.getElementById('employeeTableBody');
if (!employeeTableBody) return;
employeeTableBody.addEventListener('input',enforceMaxLength);
});
document.addEventListener('DOMContentLoaded', function() { //to show popup for client details
document.addEventListener('click', function(event) {
if (event.target & & (event.target.matches('.FirstName-link') || event.target.matches('.LastName-link'))) {
event.preventDefault();
const firstName = event.target.getAttribute('data-FirstName') || '';
console.log(firstName);
const lastName = event.target.getAttribute('data-LastName') || '';
console.log(lastName);
const row = event.target.closest('tr');
const email = row.querySelector('[data-email]').getAttribute('data-email') || '';
const params = new URLSearchParams();
if (firstName) params.append('firstName',firstName);
if (lastName) params.append('lastName',lastName);
if (email) params.append('Email1',email);
let xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/get_employee/?${params.toString()}`, 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();
}
});
document.addEventListener('click', function(event) {
const popup = document.getElementById('detailsModal');
if (popup & & popup.style.display === 'block' & & !popup.contains(event.target) & & !event.target.matches('.FirstName-link, .LastName-link')) {
popup.style.display = 'none';
}
}, true);
})
function showPopup(data) {
const popup = document.getElementById('detailsModal');
if (popup) {
// Fill in the popup with data
document.getElementById('FirstName_1').textContent = (data.FirstName || '');
document.getElementById('LastName_1').textContent = (data.LastName || '');
document.getElementById('Designation_1').textContent = (data.Designation || '');
document.getElementById('Department_1').textContent = (data.Department || '');
document.getElementById('Address_1_1').textContent = (data.Address_1 || '');
document.getElementById('Address_2_1').textContent = (data.Address_2 || '');
document.getElementById('City_1').textContent = (data.City || '');
document.getElementById('State_1').textContent = (data.State || '');
document.getElementById('Pincode_1').textContent = (data.Pincode || '');
document.getElementById('Country_1').textContent = (data.Country || '');
document.getElementById('PhoneNo1_1').textContent = (data.PhoneNo1 || '');
document.getElementById('LandNumber_1').textContent = (data.LandNumber || '');
document.getElementById('Email1_1').textContent = (data.Email1 || '');
document.getElementById('Email2_1').textContent = (data.Email2 || '');
document.getElementById('Level_1').textContent = (data.Level || '');
// 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');
}
}
function AddEditDelete() {
document.querySelectorAll('.edit-internalTeam').forEach(button => {
button.addEventListener('click', editInternalTeam);
});
document.querySelectorAll('.delete-internalTeam').forEach(button => {
button.addEventListener('click', deleteInternalTeam);
});
document.querySelectorAll('.print-internalTeam').forEach(button => {
button.addEventListener('click', printInternalTeam);
});
}
function editInternalTeam(event) {
event.preventDefault();
const button = event.target;
let row = button.closest('tr');
console.log('editing Internal Team');
if (button.textContent === 'Edit') {
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) { / / Exclude the last cell ( actions cell )
const isEditable = cell.getAttribute('data-editable') !== 'true' & & !cell.classList.contains('non-editable');
console.log(isEditable);
if (isEditable) {
cell.contentEditable = true;
cell.style.backgroundColor = '';
cell.removeEventListener('blur', validateInternalTeam);
cell.addEventListener('blur', validateInternalTeam);
} else {
cell.contentEditable = false;
cell.style.backgroundColor = '#e0e0e0'; // Set background color for non-editable cells
}
}
});
button.setAttribute('data-original-firstname', row.cells[0].textContent.trim());
button.setAttribute('data-original-lastname', row.cells[1].textContent.trim());
button.textContent = 'Save';
}
else if (button.textContent === 'Save') {
let isValid = true;
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) {
const isEditable = cell.getAttribute('data-editable') !== 'true' & & !cell.classList.contains('non-editable');
if(isEditable) {
if (!validateInternalTeam({ target: cell })) {
isValid = false;
}
}
}
});
if (!isValid) {
alert("Validation failed. Please fill out the required fields.");
return; // If validation fails, do not proceed to save
}
const updatedData = {
FirstName: row.cells[0].textContent,
LastName: row.cells[1].textContent,
Designation: row.cells[2].textContent,
Department: row.cells[3].textContent,
PhoneNo1: row.cells[4].textContent,
LandNumber: row.cells[5].textContent,
Email1: row.cells[6].textContent,
Email2: row.cells[7].textContent,
Level: row.cells[8].textContent
};
Array.from(row.cells).forEach((cell, index) => {
cell.contentEditable = false;
cell.style.backgroundColor = '';
});
button.textContent = 'Edit';
fetch(`/skyonnadmin/edit_internalTeam/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{csrf_token}}'
},
body: JSON.stringify(updatedData)
})
.then(response => {
if (response.ok) {
console.log('Data saved successfully.');
alert('Data saved successfully!');
const originalFirstName = button.getAttribute('data-original-firstname');
console.log(originalFirstName);
const originalLastName = button.getAttribute('data-original-lastname');
console.log(originalLastName);
if (updatedData.FirstName !== originalFirstName || updatedData.LastName !== originalLastName) {
fetch('/skyonnadmin/existing_employee/')
.then(response => response.json())
.then(data => {
const employees = data.employees;
console.log(employees);
const employeeTableBody = document.getElementById('employeeTableBody');
employeeTableBody.innerHTML = ''; // Clear previous data
if(employees.length > 0) {
employees.forEach(emp => {
const row = `
< tr >
< td contentEditable = 'false' data-key = "FirstName" style = "color: blue" > < a href = "#" class = "FirstName-link" data-FirstName = "${emp.FirstName}" > ${emp.FirstName}< / td >
< td contentEditable = 'false' data-key = "LastName" style = "color: blue" > < a href = "#" class = "LastName-link" data-LastName = "${emp.LastName}" > ${emp.LastName}< / td >
< td contentEditable = 'false' data-key = "Designation" > ${emp.Designation}< / td >
< td contentEditable = 'false' data-key = "Department" > ${emp.Department}< / td >
< td contentEditable = 'false' data-key = "PhoneNo1" > ${emp.PhoneNo1}< / td >
< td contentEditable = 'false' data-key = "LandNumber" > ${emp.LandNumber}< / td >
< td contentEditable = 'false' class = 'non-editable' data-email = "${emp.Email1}" > ${emp.Email1}< / td >
< td contentEditable = 'false' data-key = "Email2" > ${emp.Email2}< / td >
< td contentEditable = 'false' data-key = "Level" > ${emp.Level}< / td >
< td style = "width: 150px;" >
< button class = "edit-internalTeam" style = "font-size: 20px; margin-left; -50px;" > Edit< / button >
< button class = "delete-internalTeam" style = "font-size: 20px;" > Delete< / button >
< button class = "print-internalTeam" style = "font-size: 20px;" > Print< / button >
< / td >
< / tr > `;
employeeTableBody.insertAdjacentHTML('beforeend', row);
});
AddEditDelete();
}
})
.catch(error => {
console.error('Error fetching employee data:', error);
})
}
} else {
console.error('Failed to save data.');
alert('Failed to save data.');
}
})
.catch(error => {
console.error('Error saving employee data:', error);
});
}
}
function validateInternalTeam(event) {
const cell = event.target;
const row = cell.closest('tr');
const field = cell.getAttribute('data-key');
const emailCell = row.querySelector('[data-email]')
const email1 = emailCell.getAttribute('data-email');
let value = cell.textContent.trim();
let alertShown = cell.getAttribute('data-alert-shown') === 'true';
let isValid = true;
let hasEmailError = false;
let hasPhoneError = false;
const pincodePattern = /^[1-9][0-9]{5}$/;
value = cell.textContent.trim(); // Get updated value when the user finishes editing
if ((field === 'FirstName' || field === 'LastName' || field === 'Designation' || field === 'Department' || field === 'Level') & & value === '') {
if (!alertShown) {
alert(`${field} field cannot be empty`);
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC";
cell.focus();
isValid = false;
} else {
cell.setAttribute('data-alert-shown', 'false');
cell.style.backgroundColor = ""; // Reset background color
}
// Email Validation
if (field === 'Email2' & & value !=='') {
const emailPattern = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
const emailPattern2 = /^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/;
if (!value.match(emailPattern) || value.includes('..') || !value.match(emailPattern2)) {
if (!alertShown) {
alert('Invalid Email Address format');
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC"; // Highlight error
isValid = false;
cell.focus(); // Keep focus on the email field
} else {
const emailExists = checkEmailExists(value,email1);
console.log('emailExists:',emailExists);
if (emailExists) {
if (!alertShown) {
alert('Email already exists. Please use a different email.');
cell.setAttribute('data-alert-shown', 'true'); // Prevent multiple alerts
}
cell.style.backgroundColor = "#FFCCCC"; // Highlight error
isValid = false;
hasEmailError = true;
cell.focus();
} else {
cell.style.backgroundColor = ""; // Reset background color
hasEmailError = false; // No email error
cell.setAttribute('data-alert-shown', 'false'); // Reset alert
}
}
}
if (field === 'PhoneNo1' & & value !== '') {
const phonePattern = /^[6-9]\d{9}$/;
if (!value.match(phonePattern)) {
if (!alertShown) {
alert('Invalid phone number format');
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC";
isValid = false;
cell.focus(); // Keep focus on the phone field
} else {
const phoneExists = checkPhoneNumberExists(value,email1);
console.log('phoneExists:',phoneExists);
if (phoneExists) {
if (!alertShown) {
alert('phone number already exists. Please use a different number.');
cell.setAttribute('data-alert-shown', 'true'); // Prevent multiple alerts
}
cell.style.backgroundColor = "#FFCCCC";
isValid = false;
hasPhoneError = true;
cell.focus();
} else {
cell.style.backgroundColor = ""; // Reset background color
hasPhoneError = false; // No phone error
console.log('hasPhoneError:',hasPhoneError);
cell.setAttribute('data-alert-shown', 'false'); // Reset alert
}
}
}
if (field === 'LandNumber' & & value !== '') {
const phonePattern = /^(\+91[-\s]?)?[0]?\d{2,5}[-\s]?\d{3,4}[-\s]?\d{4}$/;
if (!value.match(phonePattern)) {
if (!alertShown) {
alert('Invalid phone number format');
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC";
isValid = false;
cell.focus(); // Keep focus on the phone field
} else {
const phoneExists = checkPhoneNumberExists(value,email1);
console.log('phoneExists:',phoneExists);
if (phoneExists) {
if (!alertShown) {
alert('Landline number already exists. Please use a different number.');
cell.setAttribute('data-alert-shown', 'true'); // Prevent multiple alerts
}
cell.style.backgroundColor = "#FFCCCC";
isValid = false;
hasPhoneError = true;
cell.focus();
} else {
cell.style.backgroundColor = ""; // Reset background color
hasPhoneError = false; // No phone error
console.log('hasPhoneError:',hasPhoneError);
cell.setAttribute('data-alert-shown', 'false'); // Reset alert
}
}
}
const phoneCell =row.querySelector('[data-key="PhoneNo1"]');
const landNumberCell =row.querySelector('[data-key="LandNumber"]');
const phoneNo1Value = phoneCell ? phoneCell.textContent.trim() : '';
const landNumberValue = landNumberCell ? landNumberCell.textContent.trim() : '';
const focusField = cell.getAttribute('data-key') === 'PhoneNo1' ? landNumberCell : phoneCell;
if (field === 'PhoneNo1' || field === 'LandNumber' ) {
if(phoneNo1Value === '' & & landNumberValue === '') {
if (!alertShown) {
alert(`Both Phonenumber and Landnumber fields cannot be empty.Please fill atleast one`);
cell.setAttribute('data-alert-shown', 'true');
if (focusField) {
focusField.focus();
}
}
isValid = false;
}
} else {
cell.setAttribute('data-alert-shown', 'false');
}
return isValid;
}
function checkEmailExists(email2,email1) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/validate_existingEmployee/?Email2=${encodeURIComponent(email2)}& Email1=${encodeURIComponent(email1)}`, false); // Synchronous request with email and contact_id
xhr.send();
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
return response.email_exists;
} else {
console.error('Error checking email.');
return false;
}
}
function checkPhoneNumberExists(phoneNumber,email1) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/validate_existingEmployee/?PhoneNo1=${encodeURIComponent(phoneNumber)}& LandNumber=${encodeURIComponent(phoneNumber)}& Email1=${encodeURIComponent(email1)}`, false); // Synchronous request with phone number and contact_id
xhr.send();
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
return response.phone_exists; // Return true if phone number exists
} else {
console.error('Error checking phone number.');
return false;
}
}
function deleteInternalTeam(event) {
event.preventDefault();
const button = event.target;
const row = button.closest('tr'); // Get the row to delete
const emailCell = row.querySelector('[data-email]');
const email = emailCell.getAttribute('data-email');
console.log('Deleting row with Email:', email);
if (confirm(`Are you sure you want to delete data?`)) {
return fetch(`/skyonnadmin/delete_internalTeam/?Email1=${encodeURIComponent(email)}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}' // Properly include the CSRF token
}
})
.then(response => {
if (response.ok) {
row.remove();
console.log('Data deleted successfully');
alert('Data deleted successfully');
} else {
console.error('Failed to delete Internal Team details');
}
})
.catch(error => {
console.error('Network error during data deletion:', error);
});
}
}
function printInternalTeam(event) {
event.preventDefault();
console.log('Print clicked');
const row = event.target.closest('tr');
const emailCell = row.querySelector('[data-email]');
const email = emailCell.getAttribute('data-email');
console.log(`Email: ${email}`);
// Make a POST request to the server for fetching additional details
fetch(`/skyonnadmin/print_internalTeam/?Email1=${encodeURIComponent(email)}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{csrf_token}}',
},
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch employee data');
}
return response.json(); // Return the parsed JSON
})
.then(data => {
console.log('Data received from server:', data);
// Create printable content from received data
const printContent = `
< h1 > Internal Team Details< / h1 >
< p > < strong > FirstName:< / strong > ${data.FirstName}< / p >
< p > < strong > LastName:< / strong > ${data.LastName}< / p >
< p > < strong > Designation:< / strong > ${data.Designation}< / p >
< p > < strong > Department:< / strong > ${data.Department}< / p >
< p > < strong > PhoneNo1:< / strong > ${data.PhoneNo1}< / p >
< p > < strong > LandNumber:< / strong > ${data.LandNumber}< / p >
< p > < strong > Email1:< / strong > ${data.Email1}< / p >
< p > < strong > Email2:< / strong > ${data.Email2}< / p >
< p > < strong > Level:< / strong > ${data.Level}< / p >
`;
// Open a new window and display the printable content
const printWindow = window.open('');
printWindow.document.write(`
< html >
< head >
< title > Company: Skyonn Technologies< / title >
< style >
body { font-family: Arial, sans-serif; margin: 0;}
h1 { text-align: center; }
p { margin: 10px 0; }
}
< / style >
< / head >
< body onload = "window.print(); window.close();" >
${printContent}
< / body >
< / html >
`);
printWindow.document.close();
})
.catch(error => {
console.error('Error fetching employee data:', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
window.UploadExcel=function() {
console.log('file uploaded');
const excel_file = document.getElementById('excelFile').files[0];
if (!excel_file) {
alert("Please select an Excel file.");
return;
}
const formData = new FormData();
formData.append('excelFile', excel_file);
// Initial fetch to get the row count from the server
fetch("/skyonnadmin/get_row_count/", {
method: "POST",
body: formData,
headers: {
"X-CSRFToken": '{{ csrf_token }}'
}
})
.then(response => response.json())
.then(data => {
if (data.error) {
console.error("Error fetching row count:", data.error);
alert("An error occurred while processing the file. Please try again.");
return;
}
const rowCount = data.row_count;
if (confirm(`This Excel file contains ${rowCount} rows. Do you want to upload it?`)) {
const formData = new FormData();
formData.append('excelFile',excel_file);
fetch("/skyonnadmin/load_excel_data/", {
method: "POST",
body: formData,
headers: {
"X-CSRFToken": '{{ csrf_token}}'
}
})
.then(response => response.json())
.then(data => {
console.log('data:',data);
if (data.error) {
console.log(data.error);
// Display error for specific fields, including missing PhoneNo1 and LandNumber
if (data.empty_fields) {
console.log(data.empty_fields);
const errors = [];
for (const field in data.empty_fields) {
if (field === 'Contact') {
errors.push(`Empty data in both PhoneNo1 and LandNumber column`);
}
if (field !== 'PhoneNo1' & & field !== 'LandNumber' & & field !== 'Contact') {
errors.push(`Empty data in column '${field}' in provided excel sheet`);
}
}
console.log(errors);
if (errors.length > 0) {
alert(errors);
}
}
return;
}
console.log(data.data);
excelRows = data.data;
console.log('excelRows:',excelRows);
let currentRowIndex = 0;
function processRow(rowData) {
console.log(`processing row is: ${currentRowIndex}`);
for (const header in rowData) {
const field = document.getElementById(header);
const value = rowData[header];
if (field) {
if (header === 'Level') {
field.value = `Level ${value}`;
}
else {
field.value = value;
}
}
else {
console.warn(`No form field found with ID: ${header}`);
}
}
}
window.saveInternal_team_details = async function() {
const form = document.getElementById('internal-team');
const orderedFieldIds = [
'FirstName', 'LastName', 'Designation', 'Department', 'Address_1', 'City', 'State', 'Pincode', 'Country',
'PhoneNo1','LandNumber','Email1','Email2','Level'
];
const phoneNumberInput1 = document.getElementById('PhoneNo1');
const phoneNumberInput2 = document.getElementById('LandNumber');
if(!phoneNumberInput1.value.trim() & & !phoneNumberInput2.value.trim()) {
alert('please fill atleast one phone number: PhoneNo or Landline');
return;
}
const validateField = (field, pattern = null, errorMsg = '') => {
const fieldValue = field.value.trim();
if (!fieldValue & & (field.id === 'PhoneNo1' || field.id === 'LandNumber')) {
field.setCustomValidity('');
return true; // Skip validation for these fields if they are empty
}
if (!fieldValue) {
field.setCustomValidity('This field cannot be empty.');
field.reportValidity();
return false;
}
if (pattern & & !pattern.test(fieldValue)) {
field.setCustomValidity(errorMsg || 'Invalid input format.');
field.reportValidity();
return false;
}
field.setCustomValidity('');
return true;
};
const getTabIndexFields = () => {
return orderedFieldIds
.map(id => {
const field = document.getElementById(id);
// Check if the field exists and log its tabindex
if (field) {
const tabindex = parseInt(field.getAttribute('tabindex'), 10) || 0;
<!-- console.log(`Field ID: ${id}, Tabindex: ${tabindex}`); -->
return { field, tabindex };
} else {
console.warn(`Field with ID: ${id} not found`);
return null;
}
})
};
const validateFieldInOrder= async () => {
let isValid =true;
const fields = getTabIndexFields().sort((a, b) => a.tabindex - b.tabindex);
for (let { field,tabindex } of fields) {
let valid;
// Specific validations based on field type
if (field.id === 'PhoneNo1') {
valid = validateField(field, /^[6-9]\d{9}$/, 'Please enter a valid Phone number.');
}
else if (field.id === 'Email1') {
valid = validateField(field, !field.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || field.value.includes('..') || !field.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/),
'Please enter a valid Email address.');
}
else if (field.id === 'LandNumber') {
valid = validateField(field, /^(\+91[-\s]?)?[0]?\d{2,5}[-\s]?\d{3,4}[-\s]?\d{4}$/, 'Please enter a valid Landline number.');
}
else if (field.id === 'Email2') {
valid = validateField(field, !field.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || field.value.includes('..') || !field.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/),
'Please enter a valid Email address.'); }
else if (field.id === 'Pincode') {
valid = validateField(field, /^[1-9][0-9]{5}$/, 'Please enter a valid Pincode.');
}
else {
valid = validateField(field); // General non-empty check
}
if(!valid) {
console.log(`Validation error at tabindex: ${tabindex}`);
isValid = false;
field.focus();
break;
}
if (field.id === 'PhoneNo1' || field.id === 'LandNumber' || field.id === 'Email1' || field.id === 'Email2') {
const exists = await checkFieldExists(field.id, field);
if (!exists) {
field.focus();
isValid = false;
break;
}
}
}
return isValid;
};
const checkFieldExists = (fieldName, field) => {
return new Promise((resolve) => {
const value = field.value.trim();
fetch(`/skyonnadmin/validate_internal_team/?${fieldName}=${value}`)
.then(response => response.json())
.then(data => {
if (data.exists) {
field.setCustomValidity(`${fieldName} already exists.`);
field.reportValidity();
resolve(false);
} else {
field.setCustomValidity('');
resolve(true);
}
})
.catch(error => {
console.error('Error:', error);
resolve(false);
});
});
};
const isValid = await validateFieldInOrder();
if (!isValid) {
console.log("Validation failed. Please correct the highlighted errors.");
return;
}
// Proceed with saving if valid
const formData = new FormData(form);
const url = form.getAttribute('action');
try{
const response = await fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}',
},
})
if (!response.ok) throw new Error('Failed to save internal team details.');
const data = await response.json();
console.log('Row saved:',data);
form.reset();
currentRowIndex++;
if (currentRowIndex < excelRows.length ) {
processRow(excelRows[currentRowIndex]);
}
return true;
} catch (error) {
console.error('Error saving row:', error);
return false;
}
}
async function processRowsSequentially() {
while (currentRowIndex < excelRows.length ) {
processRow(excelRows[currentRowIndex]);
const saved = await saveInternal_team_details();
if (!saved){
console.log("Error at the row", currentRowIndex);
return;
}
console.log('Row saved successfully:', currentRowIndex);
}
if (currentRowIndex === excelRows.length) {
alert(`All ${excelRows.length} rows have been processed successfully`);
}
}
processRowsSequentially();
})
.catch(error => console.error("Error uploading Excel file:", error)); //load excel data
}
else {
excelFile.value = ""; // get row count
}
})
}
})
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('change', function () {
const excel_file = document.getElementById('excelFile').files[0];
if(!excel_file) {
console.log('main dom');
const form = document.getElementById('internal-team');
const phoneNumberInput1 = document.getElementById('PhoneNo1');
const emailInput1 = document.getElementById('Email1');
const phoneNumberInput2 = document.getElementById('LandNumber');
const emailInput2 = document.getElementById('Email2');
const pincodeInput = document.getElementById('Pincode');
if(!phoneNumberInput1 || !emailInput1 || !phoneNumberInput2 || !emailInput2) { return;}
const phonePattern = /^[6-9]\d{9}$/;
const pincodePattern = /^[1-9][0-9]{5}$/;
const emailPattern = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
const emailPattern2 = /^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/;
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 = '';
};
emailInput1.addEventListener('input', () => {
clearValidation(emailInput1);
});
phoneNumberInput1.addEventListener('input', () => {
clearValidation(phoneNumberInput1);
});
emailInput2.addEventListener('input', () => {
clearValidation(emailInput2);
});
phoneNumberInput2.addEventListener('input', () => {
clearValidation(phoneNumberInput2);
});
pincodeInput.addEventListener('input', () => {
clearValidation(pincodeInput);
});
emailInput1.addEventListener('blur', () => {
if (emailInput1.value.trim() & & (!emailInput1.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || emailInput1.value.includes('..') || !emailInput1.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/))) {
emailInput1.style.borderColor = '';
emailInput1.setCustomValidity('Please enter a valid Email address');
emailInput1.reportValidity();
} else {
clearValidation(emailInput1);
if (emailInput1.value.trim()) {
checkFieldExists('Email1', emailInput1);
}
}
});
phoneNumberInput1.addEventListener('blur', () => {
if (phoneNumberInput1.value.trim() & & !phoneNumberInput1.value.match(/^[6-9]\d{9}$/)) {
phoneNumberInput1.style.borderColor = '';
phoneNumberInput1.setCustomValidity('Please enter a valid Phonenumber.');
phoneNumberInput1.reportValidity();
} else {
clearValidation(phoneNumberInput1);
if (phoneNumberInput1.value.trim()) {
checkFieldExists('PhoneNo1', phoneNumberInput1);
}
}
});
emailInput2.addEventListener('blur', () => {
if (emailInput2.value.trim() & & (!emailInput2.value.match(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/) || emailInput2.value.includes('..') || !emailInput2.value.match(/^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/))) {
emailInput2.style.borderColor = '';
emailInput2.setCustomValidity('Please enter a valid Email address');
emailInput2.reportValidity();
} else {
clearValidation(emailInput2);
if (emailInput2.value.trim()) {
checkFieldExists('Email2', emailInput2);
}
}
});
phoneNumberInput2.addEventListener('blur', () => {
const normalValue = phoneNumberInput2.value.trim()
console.log(normalValue);
if (phoneNumberInput2.value.trim() & & !phoneNumberInput2.value.match(/^(\+91[-\s]?)?[0]?\d{2,5}[-\s]?\d{3,4}[-\s]?\d{4}$/)) {
phoneNumberInput2.style.borderColor = '';
phoneNumberInput2.setCustomValidity('Please enter a valid Landline number.');
phoneNumberInput2.reportValidity();
} else {
clearValidation(phoneNumberInput2);
if (normalValue) {
checkFieldExists('LandNumber', phoneNumberInput2, normalValue);
}
}
});
pincodeInput.addEventListener('blur', () => {
if (pincodeInput.value.trim() & & !pincodeInput.value.match(/^[1-9][0-9]{5}$/)) {
pincodeInput.style.borderColor = '';
pincodeInput.setCustomValidity('Please enter a valid Pincode');
pincodeInput.reportValidity();
} else {
clearValidation(pincodeInput);
}
});
function checkFieldExists(fieldName, field, normalValue=null) {
const value = normalValue || field.value.trim();
fetch(`/skyonnadmin/validate_internal_team/?${fieldName}=${value}`)
.then(response => response.json())
.then(data => {
if (data.exists) {
if(fieldName == 'PhoneNo1' || fieldName == 'LandNumber') {
field.setCustomValidity('Phone number already exists.');
}
else {
field.setCustomValidity('Email already exists.');
}
field.style.borderColor = 'red';
field.reportValidity();
field.focus();
} else {
clearValidation(field);
}
})
.catch(error => console.error('Error:', error));
};
}
});
});
window.saveInternal_team_details= async function() {
console.log('main window');
const form = document.getElementById('internal-team');
const orderedFieldIds = [
'FirstName', 'LastName', 'Designation', 'Department', 'Address_1', 'City', 'State', 'Pincode', 'Country',
'PhoneNo1','Email1','Level'
];
const FirstNameInput = document.getElementById('FirstName');
const phoneNumberInput1 = document.getElementById('PhoneNo1');
const emailInput1 = document.getElementById('Email1');
const phoneNumberInput2 = document.getElementById('LandNumber');
const emailInput2 = document.getElementById('Email2');
const pincodeInput = document.getElementById('Pincode');
<!-- if(!phoneNumberInput1.value.trim() && !phoneNumberInput2.value.trim()) { -->
<!-- return; -->
<!-- } -->
let isValid = true;
// 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()) {
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(phoneNumberInput1, /^[6-9]\d{9}$/, 'Please enter a valid Phonenumber.');
validateEmail(emailInput1);
if (phoneNumberInput2.value.trim()) {
checkValidity(phoneNumberInput2, /^(\+91[-\s]?)?[0]?\d{2,5}[-\s]?\d{3,4}[-\s]?\d{4}$/, 'Please enter a valid Landline number.');
}
if (emailInput2.value.trim()) {
validateEmail(emailInput2);
}
checkValidity(pincodeInput, /^[1-9][0-9]{5}$/, 'Please enter a valid Pincode');
const checkFieldExists = (fieldName, field, normalValue = null) => {
return new Promise((resolve, reject) => {
const value = normalValue || field.value.trim();
fetch(`/skyonnadmin/validate_internal_team/?${fieldName}=${value}`)
.then(response => response.json())
.then(data => {
if (data.exists) {
if (fieldName === 'PhoneNo1' || fieldName === 'LandNumber') {
field.setCustomValidity('Phone number already exists.');
} else {
field.setCustomValidity('Email already exists.');
}
field.style.borderColor = 'red';
field.reportValidity();
resolve(false); // Invalid
} else {
field.setCustomValidity('');
field.style.borderColor = 'black';
resolve(true); // Valid
}
})
.catch(error => {
console.error('Error:', error);
reject(error);
});
});
}
if (isValid) {
const phoneNo1Valid = await checkFieldExists('PhoneNo1', phoneNumberInput1);
const email1Valid = await checkFieldExists('Email1', emailInput1);
const normalValue = phoneNumberInput2.value.trim()
console.log(normalValue);
const phoneNo2Valid = await checkFieldExists('PhoneNo2', phoneNumberInput2,normalValue);
const email2Valid = await checkFieldExists('Email2', emailInput2);
isValid = phoneNo1Valid & & email1Valid & & phoneNo2Valid & & email2Valid;
}
if (!isValid) {
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 internal team details.');
}
return response.json();
})
.then(data => {
if (data.status === 'error') {
if (data.field & & data.message) {
const errorField = form.querySelector(`[name=${data.field}]`);
if (errorField) {
errorField.style.borderColor = '';
errorField.setCustomValidity(data.message);
errorField.reportValidity();
errorField.focus();
errorField.value = '';
errorField.addEventListener('input', () => {
errorField.style.borderColor = 'black';
errorField.setCustomValidity('');
errorField.reportValidity();
}, { once: true });
} else {
alert(data.message);
}
} else {
alert(data.message || 'Error saving Client.');
}
} else {
alert('Internal Team saved successfully.');
form.reset();
}
})
.catch(error => {
console.error('Error:', error);
alert('Error: ' + error.message);
})
}
document.addEventListener('click',function() {
if (event.target & & event.target.matches('.client-link')) { //hyperlink to show company details
event.preventDefault();
const client = event.target.getAttribute('data-client');
let xhr= new XMLHttpRequest();
xhr.open('GET',`/get_client_details/?client=${client}`,true);
xhr.onload = function() {
if (xhr.status === 200) {
const details = JSON.parse(xhr.responseText);
console.log(details);
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send()
}
});
function updateButtonStates() {
const clientDropdown = document.getElementById("ClientDropdown");
const subClientDropdown = document.getElementById("SubClientDropdown");
const getCompanyDetailsButton = document.getElementById("getCompanyDetailsButton");
const getTeamDetailsButton = document.getElementById("getTeamDetailsButton");
const clientSelected = clientDropdown.value !== "";
const subClientSelected = subClientDropdown.value !== "";
if (clientSelected || subClientSelected) {
getCompanyDetailsButton.classList.remove("disabled-button");
getCompanyDetailsButton.classList.add("enabled-button");
getCompanyDetailsButton.disabled = false;
getTeamDetailsButton.classList.remove("disabled-button");
getTeamDetailsButton.classList.add("enabled-button");
getTeamDetailsButton.disabled = false;
} else {
getCompanyDetailsButton.classList.remove("enabled-button");
getCompanyDetailsButton.classList.add("disabled-button");
getCompanyDetailsButton.disabled = true;
getTeamDetailsButton.classList.remove("enabled-button");
getTeamDetailsButton.classList.add("disabled-button");
getTeamDetailsButton.disabled = true;
}
}
function initializeEventListeners() {
const clientDropdown = document.getElementById("ClientDropdown");
const subClientDropdown = document.getElementById("SubClientDropdown");
clientDropdown.addEventListener("change", updateButtonStates);
subClientDropdown.addEventListener("change", updateButtonStates);
updateButtonStates();
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const clientDropdown = document.getElementById("ClientDropdown");
const subClientDropdown = document.getElementById("SubClientDropdown");
if (clientDropdown & & subClientDropdown) {
initializeEventListeners();
}
});
});
observer.observe(document.body, { childList: true, subtree: true });
document.addEventListener("DOMContentLoaded", function () {
initializeEventListeners();
});
document.addEventListener('click', function(event) {
const clientDropdown = document.getElementById('ClientDropdown');
const subClientDropdown = document.getElementById('SubClientDropdown');
const searchKeyword = document.getElementById('searchKeyword')
if (!searchKeyword) return;
function handleSearch() {
const clientValue = clientDropdown ? clientDropdown.value.trim() : '';
const subClientValue = subClientDropdown ? subClientDropdown.value.trim() : '';
const keyword = searchKeyword.value.trim();
console.log('keyword1:',keyword);
if (keyword === '') {
console.log('Making empty');
let tableContainer = document.getElementById('TableContainer');
tableContainer.innerHTML = '';
return;
}
performSearch();
}
function performSearch() {
const client = document.getElementById('ClientDropdown').value;
const subClient = document.getElementById('SubClientDropdown').value;
const searchKeyword = document.getElementById('searchKeyword').value;
console.log('keyword2:',searchKeyword);
let xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/get_SearchData/?client=${client}& subClient=${subClient}& searchKeyword=${searchKeyword}`, true);
xhr.onload = function() {
if (xhr.status === 200) {
filteredData = JSON.parse(xhr.responseText);
console.log(filteredData);
renderNewTables(filteredData);
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
searchKeyword.addEventListener('input', handleSearch);
if (clientDropdown) {
clientDropdown.addEventListener('change', handleSearch);
}
if (subClientDropdown) {
subClientDropdown.addEventListener('change', handleSearch);
}
});
function renderNewTables(filteredData) {
let tableContainer = document.getElementById('TableContainer');
tableContainer.innerHTML = '';
let TableHTML = '< div id = "TableName" > < table border = "1" > ';
if (filteredData.client_details.length === 0 & & filteredData.sub_company_details.length === 0 & & filteredData.contacts.length === 0) {
TableHTML += `< thead style = "margin-left:-370px;" > < tr > < th > No details found< / th > < / tr > < / thead > `;
TableHTML += `< / table > < / div > `;
tableContainer.innerHTML += TableHTML;
return;
}
if (filteredData.client_details.length > 0) {
renderClientTable(filteredData.client_details, 'Main client');
}
if (filteredData.sub_company_details.length > 0) {
renderClientTable(filteredData.sub_company_details, 'Sub client');
}
if (filteredData.contacts.length > 0) {
renderTeamDetails(filteredData);
}
AddActionButtons();
}
<!-- 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', '/skyonnadmin/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.Department}`; -->
<!-- option1.textContent = `${contact.FirstName} - ${contact.Department}`; -->
<!-- SPOC1.appendChild(option1); -->
<!-- const option2 = document.createElement('option'); -->
<!-- option2.value = `${contact.FirstName} - ${contact.Department}`; -->
<!-- option2.textContent = `${contact.FirstName} - ${contact.Department}`; -->
<!-- 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(event) {
var target = event.target;
const formId = document.getElementById('Add_new_contact');
console.log(formId);
if (target & & target.id === 'ClientDropdown' & & formId.id === 'Add_new_contact') {
var parentCompany = target.value; // Get selected client
var subClientDropdown = target.closest('form').querySelector('#SubClientDropdown');
subClientDropdown.innerHTML = '';
if (subClientDropdown.tagName.toLowerCase() === 'input') {
var element = document.createElement('select');
element.id = 'SubClientDropdown';
element.name = 'Sub_Company';
element.style.marginLeft = '10px';
element.tabIndex = 2;
subClientDropdown.parentNode.replaceChild(element,subClientDropdown);
subClientDropdown = element;
}
// 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) {
// Parse response and add options to SubClient dropdown
var subClients = JSON.parse(xhr.responseText);
subClients.forEach(function(subClient) {
var option = document.createElement('option');
option.value = subClient;
option.text = subClient;
subClientDropdown.appendChild(option);
});
var parentOption = document.createElement('option');
parentOption.value = parentCompany;
parentOption.textContent = parentCompany;
subClientDropdown.insertBefore(parentOption,subClientDropdown.firstChild);
subClientDropdown.value = parentCompany;
subClientDropdown.disabled = false;
if (subClientDropdown.options.length === 1) {
var inputElement = document.createElement('input');
inputElement.type = 'text';
inputElement.id = 'SubClientDropdown';
inputElement.name = 'Sub_Company';
inputElement.disabled = true;
inputElement.value = subClientDropdown.options[0].text;
subClientDropdown.parentNode.replaceChild(inputElement, subClientDropdown);
}
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
});
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('change', function() {
const form = document.getElementById('Add_new_contact');
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_new_contact = async function () {
const form = document.getElementById('Add_new_contact');
const requiredFields = [
document.getElementById('ClientDropdown'), // Company
document.getElementById('FirstName'),
document.getElementById('Designation'), // Designation
document.getElementById('Department'), // Department
document.getElementById('Email'), // Email
document.getElementById('Phone_number') // Phone Number
];
let isValid = true;
// Clear previous validation messages
requiredFields.forEach(field => {
field.setCustomValidity('');
field.style.borderColor = '';
});
// Sequential validation of required fields
for (let field of requiredFields) {
if (!field.value.trim()) {
isValid = false;
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
return; // Stop validation if any field is invalid
}
}
// Email validation
const emailInput = document.getElementById('Email');
if (
emailInput.value.trim() & &
(!/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/.test(emailInput.value) || emailInput.value.includes('..'))
) {
isValid = false;
emailInput.setCustomValidity('Please enter a valid email address.');
emailInput.reportValidity();
emailInput.focus();
return;
}
// Phone number validation
const phoneNumberInput = document.getElementById('Phone_number');
const phonePattern = /^[6-9]\d{9}$/;
if (phoneNumberInput.value.trim() & & !phonePattern.test(phoneNumberInput.value)) {
isValid = false;
phoneNumberInput.setCustomValidity('Invalid phone number format.');
phoneNumberInput.reportValidity();
phoneNumberInput.focus();
return;
}
// Asynchronous validation for uniqueness
const checkFieldExists = (fieldName, input) => {
return new Promise((resolve, reject) => {
fetch(`/validate_field/?${fieldName}=${encodeURIComponent(input.value.trim())}`)
.then(response => response.json())
.then(data => {
if (data.exists) {
isValid = false;
input.setCustomValidity(`${fieldName.replace('_', ' ')} already exists.`);
input.reportValidity();
input.focus();
resolve(false);
} else {
input.setCustomValidity('');
input.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;
}
// Submit form if all validations pass
const formData = new FormData(form);
const url = form.getAttribute('action');
try {
const response = await fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}', // Adjust according to your CSRF setup
},
});
const data = await response.json();
if (!response.ok || data.status === 'error') {
if (data.field & & data.message) {
const errorField = form.querySelector(`[name="${data.field}"]`);
if (errorField) {
errorField.setCustomValidity(data.message);
errorField.reportValidity();
errorField.focus();
} else {
alert(data.message || 'Error saving contact.');
}
} else {
alert(data.message || 'Error saving contact.');
}
} else {
alert('Contact details saved successfully.');
form.reset();
}
} catch (error) {
console.error('Error:', error);
alert('Error: Unable to save contact. Please try again later.');
}
};
<!-- 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.value.trim()); -->
<!-- } -->
<!-- } -->
<!-- }); -->
<!-- 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.value.trim()); -->
<!-- } -->
<!-- } -->
<!-- }); -->
<!-- function checkFieldExists(fieldName, fieldValue) { -->
<!-- const xhr = new XMLHttpRequest(); -->
<!-- const url = `/skyonnadmin/validate_field/?${fieldName}=${encodeURIComponent(fieldValue.trim())}`; -->
<!-- xhr.open('GET', url, true); -->
<!-- xhr.setRequestHeader('X - CSRFToken', '{{ csrf_token }}'); // Ensure CSRF token is included -->
<!-- xhr.onload = function() { -->
<!-- if (xhr.status === 200) { -->
<!-- const response = JSON.parse(xhr.responseText); -->
<!-- if (response.exists) { -->
<!-- handleValidationResult(fieldName, fieldValue, `${fieldName === 'Email' ? 'Email' : 'Phone number'} already exists.`); -->
<!-- } else { -->
<!-- handleValidationResult(fieldName, fieldValue, ''); -->
<!-- } -->
<!-- } else { -->
<!-- console.error('Request failed. Status: ' + xhr.status); -->
<!-- } -->
<!-- }; -->
<!-- xhr.send(); -->
<!-- } -->
<!-- // Function to handle validation result -->
<!-- function handleValidationResult(fieldName, fieldValue, errorMessage) { -->
<!-- const inputField = fieldName === 'Email' ? emailInput : phoneNumberInput; -->
<!-- if (errorMessage) { -->
<!-- inputField.setCustomValidity(errorMessage); -->
<!-- inputField.style.borderColor = ''; -->
<!-- inputField.reportValidity(); -->
<!-- inputField.focus(); -->
<!-- } else { -->
<!-- inputField.setCustomValidity(''); -->
<!-- inputField.style.borderColor = ''; -->
<!-- } -->
<!-- } -->
<!-- }) -->
<!-- }); -->
<!-- window.saveAdd_SPOC = function() { -->
<!-- const form = document.getElementById('AddSPOCform'); -->
<!-- const requiredFields = form.querySelectorAll('input[required], select[required]'); -->
<!-- const phoneNumberInput = document.getElementById('Phone_number'); -->
<!-- let isValid = true; -->
<!-- requiredFields.forEach(field => { -->
<!-- field.setCustomValidity(''); // Clear previous validation message -->
<!-- field.style.borderColor = ''; // Reset border color -->
<!-- }); -->
<!-- // Iterate over each required field to check if it has value -->
<!-- for (let field of requiredFields) { -->
<!-- if (!field.value.trim()) { -->
<!-- isValid = false; -->
<!-- field.style.borderColor = ''; -->
<!-- field.setCustomValidity('Please fill out this field.'); -->
<!-- field.reportValidity(); -->
<!-- break; -->
<!-- } else { -->
<!-- // If field is filled, reset border to black -->
<!-- field.style.borderColor = 'black'; -->
<!-- field.setCustomValidity(''); -->
<!-- } -->
<!-- } -->
<!-- if (phoneNumberInput.value.trim() && !phoneNumberInput.value.match(/^[6 - 9]\d{9}$/)) { -->
<!-- isValid = false; -->
<!-- phoneNumberInput.style.borderColor = ''; -->
<!-- phoneNumberInput.setCustomValidity('Invalid phone number format.'); -->
<!-- phoneNumberInput.reportValidity(); -->
<!-- } -->
<!-- if (!isValid) { -->
<!-- // Prevent form submission if validation fails -->
<!-- console.log("Validation failed. Please fill out the required fields."); -->
<!-- return; -->
<!-- } -->
<!-- // Final check for email and phone number uniqueness -->
<!-- checkFieldExistsPromise('Phone_number', phoneNumberInput.value.trim()).then(isUnique => { -->
<!-- if (!isUnique) { -->
<!-- console.log("Validation failed. Phone number already exists."); -->
<!-- phoneNumberInput.setCustomValidity('Phone number already exists.'); -->
<!-- phoneNumberInput.style.borderColor = ''; -->
<!-- phoneNumberInput.reportValidity(); -->
<!-- phoneNumberInput.focus(); -->
<!-- return; -->
<!-- } -->
<!-- // If all validations pass, submit the form -->
<!-- const formData = new FormData(form); -->
<!-- const url = form.getAttribute('action'); -->
<!-- fetch(url, { -->
<!-- method: 'POST', -->
<!-- body: formData, -->
<!-- headers: { -->
<!-- 'X - CSRFToken': '{{ csrf_token }}', -->
<!-- }, -->
<!-- }) -->
<!-- .then(response => response.json()) -->
<!-- .then(data => { -->
<!-- if (data.status === 'error') { -->
<!-- if (data.field && data.message) { -->
<!-- const errorField = form.querySelector(`[name=${data.field}]`); -->
<!-- if (errorField) { -->
<!-- errorField.style.borderColor = ''; -->
<!-- errorField.setCustomValidity(data.message); -->
<!-- errorField.reportValidity(); -->
<!-- errorField.focus(); -->
<!-- } else { -->
<!-- alert(data.message); -->
<!-- } -->
<!-- } else { -->
<!-- alert(data.message || 'Error saving Contact.'); -->
<!-- } -->
<!-- } else { -->
<!-- alert('Contact saved successfully.'); -->
<!-- form.reset(); -->
<!-- hidePopup(); // Hide the main popup -->
<!-- showSuccessPopup(); -->
<!-- } -->
<!-- }) -->
<!-- .catch(error => { -->
<!-- console.error('Error:', error); -->
<!-- }); -->
<!-- }); -->
<!-- }; -->
<!-- function checkFieldExistsPromise(fieldName, fieldValue) { -->
<!-- return new Promise((resolve, reject) => { -->
<!-- const xhr = new XMLHttpRequest(); -->
<!-- const url = `/skyonnadmin/validate_field/?${fieldName}=${encodeURIComponent(fieldValue.trim())}`; -->
<!-- xhr.open('GET', url, true); -->
<!-- xhr.setRequestHeader('X - CSRFToken', '{{ csrf_token }}'); // Ensure CSRF token is included -->
<!-- xhr.onload = function() { -->
<!-- if (xhr.status === 200) { -->
<!-- const response = JSON.parse(xhr.responseText); -->
<!-- resolve(!response.exists); -->
<!-- } else { -->
<!-- console.error('Request failed. Status: ' + xhr.status); -->
<!-- reject(); -->
<!-- } -->
<!-- }; -->
<!-- xhr.send(); -->
<!-- }); -->
<!-- } -->
<!-- function refreshSPOCs() { -->
<!-- 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', '/skyonnadmin/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.Department}`; -->
<!-- option1.textContent = `${contact.FirstName} - ${contact.Department}`; -->
<!-- SPOC1.appendChild(option1); -->
<!-- const option2 = document.createElement('option'); -->
<!-- option2.value = `${contact.FirstName} - ${contact.Department}`; -->
<!-- option2.textContent = `${contact.FirstName} - ${contact.Department}`; -->
<!-- SPOC2.appendChild(option2); -->
<!-- }); -->
<!-- } else { -->
<!-- console.error('Request failed. Status: ' + xhr.status); -->
<!-- } -->
<!-- }; -->
<!-- xhr.onerror = function() { -->
<!-- console.error('Request failed.'); -->
<!-- }; -->
<!-- xhr.send(); -->
<!-- } -->
document.addEventListener('click', function(event) {
if (event.target & & event.target.id === 'getTeamDetailsButton') {
let client = document.getElementById('ClientDropdown').value;
let subClient = document.getElementById('SubClientDropdown').value; //render team details based on client and subclient selected from add contact database
// Make AJAX request to get filtered data
let xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/get_team_details/?client=' + client + '& subClient=' + subClient, true);
xhr.onload = function() {
if (xhr.status === 200) {
// Parse the response and store filtered data
filteredData = JSON.parse(xhr.responseText);
console.log(filteredData);
renderTeamDetails(filteredData); // Render the filtered data in a table
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
function enforceCellMaxLength(event) {
const cell = event.target
const maxLengths = {'Phone_number':10, 'Pincode':6}
const field = cell.getAttribute('data-key');
const maxLength = maxLengths[field]
if(maxLength & & cell.textContent.length > maxLength) {
cell.textContent = cell.textContent.slice(0,maxLength);
const range = document.createRange();
const selection = window.getSelection();
range.setStart(cell.childNodes[0], cell.textContent.length); //makes cursor stay at end of text when it reaches max length
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
const TableBody = document.getElementById('TableContainer');
if (!TableBody) return;
TableBody.addEventListener('input',enforceCellMaxLength);
})
function renderTeamDetails(filteredData) {
let tableBody = document.getElementById('TableContainer');
<!-- tableBody.innerHTML =''; -->
const searchKeyword = document.getElementById('searchKeyword').value
if(!searchKeyword) {
tableBody.innerHTML = `
< ul style = "margin-left: 400px;" >
< li > < a href = "#" data-department = "Hiring Managers" > Talent Acquisition< / a > < / li >
< li > < a href = "#" data-department = "Account Department" > Accounts Department< / a > < / li >
< li > < a href = "#" data-department = "Human Resources" > Human Resources< / a > < / li >
< li > < a href = "#" data-department = "Administration And Legal" > Administration And Legal< / a > < / li >
< li > < a href = "#" data-department = "Business Development" > Business Development< / a > < / li >
< / ul > `;
}
let AddContactTableHTML = '< div id = "TableName" > < table border = "1" > ';
AddContactTableHTML += '< caption style = "margin-left: -10px;" > < b > Contact Details< / b > < / caption > ';
if (filteredData.contacts.length === 0) {
AddContactTableHTML += '< thead > < tr > < th > No details found< / th > < / tr > < / thead > ';
AddContactTableHTML += '< / table > < / div > ';
tableBody.innerHTML = AddContactTableHTML;
return;
}
else {
AddContactTableHTML += '< thead > < tr > ';
Object.keys(filteredData.contacts[0]).slice(1).filter(column => column !== 'Contact_id')
.forEach(function (column) {
AddContactTableHTML += `< th > ${capitalizeFirstLetter(column)}< / th > `;
});
AddContactTableHTML += `< th > Action< / th > `;
AddContactTableHTML += '< / tr > < / thead > < tbody > ';
filteredData.contacts.forEach(function(item) { // Populate table rows dynamically
AddContactTableHTML += `< tr data-contact-id = "${item.Contact_id}" > `;
Object.keys(item).slice(1).filter(key => key !== 'Contact_id').forEach(function (key) {
AddContactTableHTML += `< td data-key = "${key}" $ { [ ' FirstName ' , ' LastName ' , ' Designation ' , ' Phone_number ' , ' Email ' ] . includes ( key ) ? ' data-editable = "false" ' : ' ' } > ${item[key]}< / td > `;
});
AddContactTableHTML += `
< td style = "width: 150px;" >
< button class = "edit-button-contact" style = "font-size: 15px;" > Edit< / button >
< button class = "delete-button-contact" style = "font-size: 15px;" > Delete< / button >
< / td >
`;
AddContactTableHTML +='< / tr > ';
})
}
AddContactTableHTML += '< / tbody > < / table > < / div > ';
tableBody.innerHTML += AddContactTableHTML;
bindActionButtons();
document.getElementById('TableContainer').addEventListener('click', function(event) {
if (event.target & & event.target.tagName === 'A') {
event.preventDefault();
var department = event.target.getAttribute('data-department');
let client = document.getElementById('ClientDropdown').value;
let subClient = document.getElementById('SubClientDropdown').value;
fetchDepartment(department,client,subClient);
}
})
}
function fetchDepartment(department,client,subClient) {
var xhr = new XMLHttpRequest();
xhr.open('GET','/skyonnadmin/get_department/?client=' + client + '& subClient=' +subClient + '& Department=' + encodeURIComponent(department) , true);
xhr.onload = function() {
if (xhr.status === 200) {
var Data = JSON.parse(xhr.responseText);
renderDepartment(Data);
}
else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
function renderDepartment(Data) {
let tableContainer = document.getElementById('TableContainer');
tableContainer.innerHTML =`
< ul style = "margin-left: 400px;" >
< li > < a href = "#" data-department = "Hiring Managers" > Talent Acquisition< / a > < / li >
< li > < a href = "#" data-department = "Account Department" > Accounts Department< / a > < / li >
< li > < a href = "#" data-department = "Human Resources" > Human Resources< / a > < / li >
< li > < a href = "#" data-department = "Administration And Legal" > Administration And Legal< / a > < / li >
< li > < a href = "#" data-department = "Business Development" > Business Development< / a > < / li >
< / ul > ` ;
let DepartmentTableHTML = '< div id = "TableName" > < table border = "1" > ';
if (!Data || Data.length === 0) {
// If Data is empty, create a row indicating no details found
DepartmentTableHTML += '< thead > < tr > < th > No details found< / th > < / tr > < / thead > ';
}
else {
DepartmentTableHTML += '< thead > < tr > ';
Object.keys(filteredData.contacts[0]).slice(1).filter(column => column !== 'Contact_id')
.forEach(function (column) {
DepartmentTableHTML += `< th > ${capitalizeFirstLetter(column)}< / th > `;
});
DepartmentTableHTML += `< th > Action< / th > `;
DepartmentTableHTML += '< / tr > < / thead > < tbody > ';
Data.forEach(function(item) { // Populate table rows dynamically
DepartmentTableHTML += `< tr data-contact-id = "${item.Contact_id}" > `;
Object.keys(item).slice(1).filter(key => key !== 'Contact_id').forEach(function (key) {
DepartmentTableHTML += `< td data-key = "${key}" $ {
['FirstName', 'LastName', 'Designation', 'Phone_number', 'Email'].includes(key)? 'data-editable="false"': ''}>${item[key]}< / td > `;
});
DepartmentTableHTML += `
< td style = "width: 150px;" >
< button class = "edit-button-contact" style = "font-size: 15px;" > Edit< / button >
< button class = "delete-button-contact" style = "font-size: 15px;" > Delete< / button >
< / td >
`;
DepartmentTableHTML +='< / tr > ';
})
}
DepartmentTableHTML += '< / tbody > < / table > < / div > ';
tableContainer.innerHTML += DepartmentTableHTML;
}
function bindActionButtons() {
const tableContainer = document.getElementById('TableContainer');
const newContainer = tableContainer.cloneNode(true);
tableContainer.parentNode.replaceChild(newContainer, tableContainer);
newContainer.addEventListener('click', function(event) {
const target = event.target;
if (target.classList.contains('edit-button-contact')) {
console.log('binding edit contact');
const row = target.closest('tr');
const contactId = row.getAttribute('data-contact-id');
const contactData = filteredData.contacts.find(contact => contact.Contact_id === contactId);
console.log('Edit contact:', contactData);
editTeamDetails(event,row);
}
if (target.classList.contains('delete-button-contact')) {
console.log('binding delete contact');
const row = target.closest('tr');
const contactId = row.getAttribute('data-contact-id');
deleteContact(event,contactId);
}
});
}
function editTeamDetails(event,row) {
event.preventDefault();
const button = event.target;
if (button.textContent === 'Edit') {
console.log('editing team details');
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) {
const isEditable = cell.getAttribute('data-editable') !== 'false';
cell.contentEditable = isEditable;
if (!isEditable) {
cell.contentEditable = true;
cell.style.backgroundColor = '';
cell.removeEventListener('blur', validateTeamDetails);
cell.addEventListener('blur', validateTeamDetails);
} else {
cell.contentEditable = false;
cell.style.backgroundColor = '#e0e0e0';
}
}
});
button.textContent = 'Save';
}
else if (button.textContent === 'Save') {
let isValid = true;
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 & & cell . contentEditable = == ' true ' ) {
const isCellValid = validateTeamDetails({ target: cell });
if (!isCellValid) {
isValid = false;
}
}
});
if (!isValid) {
alert("Validation failed. Please fill out the required fields.");
return;
}
const contact_id = row.getAttribute('data-contact-id');
const newData = {
Contact_id: contact_id,
Company: row.querySelector('[data-key="Company"]').textContent.trim(),
Sub_company: row.querySelector('[data-key="Sub_company"]').textContent.trim(),
FirstName: row.querySelector('[data-key="FirstName"]').textContent.trim(),
LastName: row.querySelector('[data-key="LastName"]').textContent.trim(),
Department: row.querySelector('[data-key="Department"]').textContent.trim(),
Designation: row.querySelector('[data-key="Designation"]').textContent.trim(),
Phone_number: row.querySelector('[data-key="Phone_number"]').textContent.trim(),
Email: row.querySelector('[data-key="Email"]').textContent.trim()
};
Array.from(row.cells).forEach((cell, index) => {
cell.contentEditable = false;
cell.style.backgroundColor = '';
});
button.textContent = 'Edit';
fetch(`/skyonnadmin/edit_teamDetails/?Contact_id=${encodeURIComponent(contact_id)}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{csrf_token}}'
},
body: JSON.stringify(newData)
})
.then(response => {
if (response.ok) {
console.log('Data saved successfully.');
alert('Data saved successfully!');
} else {
console.error('Failed to save data.');
alert('Failed to save data.');
}
})
.catch(error => {
console.error('Error saving employee data:', error);
});
}
}
function validateTeamDetails(event) {
const cell = event.target;
const field = cell.getAttribute('data-key');
let value = cell.textContent.trim();
const row = cell.closest('tr');
const contactId = row.getAttribute('data-contact-id');
let alertShown = cell.getAttribute('data-alert-shown') === 'true';
let isValid = true;
let hasEmailError = false;
let hasPhoneError = false;
value = cell.textContent.trim();
if ((field === 'FirstName' || field === 'Designation') & & value === '') {
if (!alertShown) {
alert(`${field} field cannot be empty`);
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC";
cell.focus();
isValid = false;
} else {
cell.setAttribute('data-alert-shown', 'false');
cell.style.backgroundColor = ""; // Reset background color
}
if (field === 'Email') {
const emailPattern = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
const emailPattern2 = /^[^\s@]{1,64}@([^\s@_]+\.)+[a-zA-Z]{2,}$/;
if (!value.match(emailPattern) || value.includes('..') || !value.match(emailPattern2)) {
if (!alertShown) {
alert('Invalid Email Address format');
cell.setAttribute('data-alert-shown', 'true'); // Prevent multiple alerts
}
cell.style.backgroundColor = "#FFCCCC"; // Highlight error
isValid = false;
cell.focus();
} else {
const emailExists = checkEmailExistsSync(value,contactId);
console.log('emailExists:',emailExists);
if (emailExists) {
if (!alertShown) {
alert('email already exists. Please use a different email.');
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC"; // Highlight error
isValid = false;
hasEmailError = true; // Mark email error
cell.focus(); // Keep focus on the email field
} else {
cell.style.backgroundColor = "";
hasEmailError = false;
cell.setAttribute('data-alert-shown', 'false');
}
}
}
if (field === 'Phone_number') {
const phonePattern = /^[6-9]\d{9}$/;
if (!value.match(phonePattern)) {
if (!alertShown) {
alert('Invalid phone number format');
cell.setAttribute('data-alert-shown', 'true');
}
cell.style.backgroundColor = "#FFCCCC";
isValid = false;
cell.focus();
} else {
const phoneExists = checkPhoneNumberExistsSync(value,contactId);
console.log('phoneExists:',phoneExists);
if (phoneExists) {
if (!alertShown) {
alert('phone number already exists. Please use a different number.');
cell.setAttribute('data-alert-shown', 'true'); // Prevent multiple alerts
}
cell.style.backgroundColor = "#FFCCCC"; // Highlight error
isValid = false;
hasPhoneError = true; // Mark phone error
cell.focus(); // Keep focus on the phone field
} else {
cell.style.backgroundColor = ""; // Reset background color
hasPhoneError = false; // No phone error
console.log('hasPhoneError:',hasPhoneError);
cell.setAttribute('data-alert-shown', 'false'); // Reset alert
}
}
}
return isValid;
}
function checkEmailExistsSync(email,contactId) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/validate_cell_field/?Email=${encodeURIComponent(email)}& Contact_id=${encodeURIComponent(contactId)}`, false); // Synchronous request with email and contact_id
xhr.send();
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
return response.email_exists;
} else {
console.error('Error checking email.');
return false;
}
}
function checkPhoneNumberExistsSync(phoneNumber,contactId) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/skyonnadmin/validate_cell_field/?Phone_number=${encodeURIComponent(phoneNumber)}& Contact_id=${encodeURIComponent(contactId)}`, false); // Synchronous request with phone number and contact_id
xhr.send();
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
return response.phone_exists; // Return true if phone number exists
} else {
console.error('Error checking phone number.');
return false;
}
}
function deleteContact(event,contactId) {
event.preventDefault();
console.log('Deleting contact...');
const button = event.target;
const row = button.closest('tr'); // Get the row to delete
const contact_id = row.getAttribute('data-contact-id');
console.log('Deleting row with Contact Id:', contact_id);
if (confirm(`Are you sure you want to delete the details?`)) {
row.remove();
deleteTeamDetails(contact_id); // Call function to delete row from database
}
}
function deleteTeamDetails(contact_id) {
return fetch(`/skyonnadmin/delete_teamDetails/?Contact_id=${encodeURIComponent(contact_id)}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}' // Properly include the CSRF token
}
})
.then(response => {
if (response.ok) {
console.log(`Contact with id ${contact_id} deleted successfully.`);
<!-- alert(`Contact with id ${contact_id} deleted successfully.`); -->
} else {
console.error('Failed to delete contact from server.');
}
})
.catch(error => {
console.error('Network error during contact deletion:', error);
});
}
document.addEventListener('DOMContentLoaded', function() {
window.refreshClientDropdown=function () {
const form = document.getElementById('Existing_client');
const clientDropdown = form.querySelector('#ClientDropdown');
console.log(clientDropdown);
var xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/get_parentCompany/', true);
xhr.onload = function() {
if (xhr.status === 200) {
clientDropdown.innerHTML = '< option value = "" > Select Client< / option > ';
var data = JSON.parse(xhr.responseText);
data.forEach(function(company) {
const option = document.createElement('option');
option.value = company.parent_company;
option.textContent = company.parent_company;
clientDropdown.appendChild(option);
});
const tableContainer = document.getElementById('TableContainer');
tableContainer.innerHTML = '';
<!-- const contactTableContainer = document.getElementById('contactContainerId'); -->
<!-- contactTableContainer.innerHTML = ''; -->
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
function checkForOtherOption() {
var departmentSelect = document.getElementById('Department');
var selectedOption = departmentSelect.value;
if (selectedOption === 'Other') {
// Create an input element
var input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter department';
input.style.marginLeft = '22px';
input.onblur = function() {
if (input.value.trim() !== "") {
// Add the new department as an option to the select
var newOption = document.createElement('option');
newOption.value = input.value;
newOption.text = input.value;
newOption.selected = true;
departmentSelect.add(newOption, departmentSelect.options.length - 1);
}
// Switch back to select element and reset the "Other" option
departmentSelect.style.display = 'inline-block';
input.style.display = 'none';
departmentSelect.value = input.value;
input.remove();
};
// Insert the input element after the select element
departmentSelect.parentNode.insertBefore(input, departmentSelect.nextSibling);
// Hide the select element and show the input element
departmentSelect.style.display = 'none';
input.style.display = 'inline-block';
input.focus();
}
}
function showTeamDetails(){
console.log('1')
var teamDetailsList = document.getElementById('teamDetailsList');
if (teamDetailsList.style.display === 'none' || teamDetailsList.style.display === '') {
teamDetailsList.style.display = 'block';
} else {
teamDetailsList.style.display = 'none';
}
}
function loadPage(pageName, adminId) {
var urlWithAdminId = pageName + "?admin_id=" + adminId; // 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", urlWithAdminId, true);
xhttp.send();
}
function activateLink(clickedLink) {
var allLinks = document.querySelectorAll('.nav a');
// Remove 'active' class from all links
allLinks.forEach(function(link) {
link.classList.remove('active');
});
// Add 'active' class to the clicked link
clickedLink.classList.add('active');
}
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');
}
function showClientDetails() {
var clientDetailsContainer = document.getElementById('clientDetailsContainer');
clientDetailsContainer.style.display = 'block';
document.getElementById('dynamicContentContainer').innerHTML = ''; // Clear any existing content
}
function saveEmployee(button) {
var row = button.closest('tr');
Array.from(row.cells).forEach(cell => cell.contentEditable = false);
button.textContent = 'Edit';
button.onclick = function() { editEmployee(this); };
}
function deleteEmployee(button) {
var row = button.closest('tr');
row.parentNode.removeChild(row);
}
function addActionButtons(row) {
var actionCell = row.insertCell();
var editButton = createButton('Edit', editEmployee);
var deleteButton = createButton('Delete', deleteEmployee);
actionCell.append(editButton, deleteButton);
var space = document.createElement('span');
space.innerHTML = ' ';
actionCell.append(editButton, space, deleteButton);
}
function createButton(text, onclickFunction) {
var button = document.createElement('button');
button.textContent = text;
button.onclick = function() { onclickFunction(this); };
return button;
}
function addRowToOriginalTable(data) {
var table = document.getElementById('originalEmployeeTable').getElementsByTagName('tbody')[0];
var row = table.insertRow();
data.forEach(item => row.insertCell().textContent = item);
addActionButtons(row);
}
var isNewTableAdded = false;
function addNewTable() {
if (!isNewTableAdded) {
var originalTableParent = document.querySelector('.original-table');
var newTable = document.createElement('table');
newTable.id = 'newEmployeeTable';
newTable.style.width = '80%';
newTable.style.Color = 'white';
newTable.style.marginLeft = '350px';
newTable.style.borderCollapse = 'collapse';
newTable.style.marginBottom = '20px';
newTable.style.borderBottom = 'none';
var originalTableHeader = originalTableParent.querySelector('thead').cloneNode(true);
newTable.appendChild(originalTableHeader);
var newRow = newTable.insertRow();
var columns = originalTableHeader.querySelectorAll('th').length;
for (var i = 0; i < columns - 1 ; i + + ) {
newRow.insertCell().contentEditable = true;
}
newRow.insertCell().innerHTML = '< button onclick = "saveNewTable()" > Save< / button > ';
originalTableParent.appendChild(newTable);
isNewTableAdded = true;
}
}
function saveNewTable() {
var confirmation = confirm("Are you sure you want to save the details?");
if (confirmation) {
var originalTable = document.getElementById('originalEmployeeTable');
var originalTBody = originalTable.getElementsByTagName('tbody')[0];
var newTable = document.getElementById('newEmployeeTable');
var newRows = newTable.getElementsByTagName('tr');
console.log('new rows assigning');
var addContact= [];
console.log('adding contact started');
for (var i = 1; i < newRows.length ; i + + ) {
var newData = Array.from(newRows[i].cells).slice(0, -1).map(cell => cell.innerText);
addContact.push({
name: newData[0], // Assuming first cell is name, adjust if needed
designation: newData[1], // Assuming second cell is designation, adjust if needed
department: newData[2], // Assuming third cell is department, adjust if needed
phone_no: newData[3], // Assuming fourth cell is phone_no, adjust if needed
email: newData[4], // Assuming fifth cell is email, adjust if needed
location: newData[5] // Assuming sixth cell is location, adjust if needed
// Add other properties as needed
});
console.log(addContact)
}
fetch('/skyonnadmin/add_contact/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify(addContact)
})
.then(response => {
if (response.ok) {
console.log('Data saved successfully.');
for (var i = 1; i < newRows.length ; i + + ) {
var newRow = originalTBody.insertRow();
newData.forEach(item => newRow.insertCell().textContent = item);
addActionButtons(newRow);
console.log('new rows assigned')
}
newTable.remove();
isNewTableAdded = false;
}
else {
console.error('Failed to save data.');
}
})
.catch(error => {
console.error('Error:', error);
});
}
}
document.addEventListener('click', function(event) {
if (event.target & & event.target.id === 'getCompanyDetailsButton') {
let client = document.getElementById('ClientDropdown').value;
let subClient = document.getElementById('SubClientDropdown').value;
// Make AJAX request to get filtered data
let xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/get_filtered_data/?client=' + client + '& subClient=' + subClient, true);
xhr.onload = function() {
if (xhr.status === 200) {
// Parse the response and store filtered data
filteredData = JSON.parse(xhr.responseText);
console.log(filteredData);
renderTable(filteredData); // Render the filtered data in a table
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
function renderTable(filteredData) {
let tableContainer = document.getElementById('TableContainer');
tableContainer.innerHTML = '';
const searchKeyword = document.getElementById('searchKeyword').value.trim();
const searchButton = document.getElementById('searchButton')
if (filteredData.client_details.length > 0 & & filteredData.sub_company_details.length > 0) {
renderClientTable(filteredData.client_details, 'Main client');
renderClientTable(filteredData.sub_company_details, 'Sub client');
} else {
renderClientTable(filteredData.client_details, 'Main client');
}
AddActionButtons();
}
function renderClientTable(data, caption) {
let tableHTML = `< div id = "TableName" > < table border = "1" > `;
tableHTML += `< caption > < b > ${caption}< / b > < / caption > `;
tableHTML += '< thead > < tr > ';
let columns = Object.keys(data[0]).slice(1).filter(column => !['client_id', 'sub_client_id'].includes(column)); // Skip the first column (usually ID)
columns.forEach(function(column) {
tableHTML += `< th > ${capitalizeFirstLetter(column)}< / th > `;
});
tableHTML += `< th style = "width: 150px;" > Action< / th > `;
tableHTML += '< / tr > < / thead > < tbody > ';
data.forEach(function(item) {
let idAttribute = '';
if (item.client_id) {
idAttribute = `data-client-id="${item.client_id}" data-parent-company="${item.parent_company}"`;
} else if (item.sub_client_id) {
idAttribute = `data-sub-client-id="${item.sub_client_id}" data-original-subcompany="${item.sub_company}" data-parent-company="${item.parent_company}"`;
}
tableHTML += `< tr $ { idAttribute } > `;
columns.forEach(function(column) {
tableHTML += `< td data-key = "${column}" $ { [ ' parent_company ' , ' country ' ] . includes ( column ) ? ' data-editable = "false" ' : ' data-editable = "true" ' } style = "word-wrap: break-word; max-width: 100px;" > ${item[column]}< / td > `;
});
tableHTML += `
< td style = "width: 150px;" >
< button class = "edit-button-client" style = "font-size: 15px; margin-left; -50px;" > Edit< / button >
< button class = "delete-button-client" style = "font-size: 15px;" > Delete< / button >
< / td >
`;
tableHTML += '< / tr > ';
});
tableHTML += '< / tbody > < / table > < / div > ';
if (caption === 'Main client') {
tableHTML += '< div id = "error-message1" style = "color: red; margin-top: 2px; margin-left: 1270px;" > < / div > ';
tableHTML += '< / div > '; // Close clientTableContainer div
} else if (caption === 'Sub client') {
tableHTML += '< div id = "error-message2" style = "color: red; margin-top: 2px; margin-left: 1280px;" > < / div > ';
tableHTML += '< / div > '; // Close subClientTableContainer div
}
document.getElementById('TableContainer').innerHTML += tableHTML;
}
function AddActionButtons() {
document.querySelectorAll('.edit-button-client').forEach(button => {
button.addEventListener('click', editCompanyDetails);
});
document.querySelectorAll('.delete-button-client').forEach(button => {
button.addEventListener('click', deleteClient);
});
}
function editCompanyDetails(event) {
event.preventDefault();
const button = event.target;
let row = button.closest('tr');
console.log('editing company details');
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) { / / Exclude the last cell ( actions cell )
const isEditable = cell.getAttribute('data-editable') === 'true';
console.log(isEditable);
if (isEditable) {
cell.contentEditable = true;
cell.removeEventListener('blur', validateCompanyDetails);
cell.addEventListener('blur', validateCompanyDetails);
} else {
cell.contentEditable = false;
cell.style.backgroundColor = '#e0e0e0'; // Set background color for non-editable cells
}
}
});
button.textContent = 'Save';
button.classList.remove('edit-button-client');
button.classList.add('save-button-client');
button.removeEventListener('click', editCompanyDetails);
button.addEventListener('click', saveCompanyDetails);
}
function validateCompanyDetails(event) {
const cell = event.target;
const value = cell.textContent.trim();
const field = cell.getAttribute('data-key');
let isValid = true; // Assume the input is valid by default
let alertShown = cell.getAttribute('data-alert-shown') === 'true';
const row = cell.closest('tr');
// Identify the error container based on client or sub-client
let errorContainer;
if (row.getAttribute('data-client-id')) {
errorContainer = document.getElementById('error-message1');
} else if (row.getAttribute('data-sub-client-id')) {
errorContainer = document.getElementById('error-message2');
}
// Clear previous error messages
if (errorContainer) {
errorContainer.innerHTML = '';
}
// Define the fields that require validation
const fieldsToValidate = ['sub_company','GST_No', 'location_Id', 'location_id', 'address_1', 'City', 'state', 'Pincode'];
const isPincode = field === 'Pincode';
const pincodePattern = /^[1-9][0-9]{5}$/;
// Check if the field is allowed to be empty
if (fieldsToValidate.includes(field) & & value === '') {
if (!alertShown) {
alert(`${field} field cannot be empty`);
cell.setAttribute('data-alert-shown', 'true');
}
isValid = false;
} else {
cell.setAttribute('data-alert-shown', 'false'); // Reset alert flag for valid input
}
// Pincode validation
if (isPincode) {
if (!pincodePattern.test(value)) {
if (!alertShown) {
alert('Invalid Pincode format');
cell.setAttribute('data-alert-shown', 'true');
}
isValid = false;
} else {
cell.setAttribute('data-alert-shown', 'false'); // Reset flag for valid pincode
}
}
// Set styling and validity feedback
if (!isValid) {
cell.style.backgroundColor = "#FFCCCC";
cell.setAttribute('data-valid', 'false');
cell.focus();
} else {
cell.style.backgroundColor = "";
cell.setAttribute('data-valid', 'true');
}
return isValid;
}
function saveCompanyDetails(event) {
event.preventDefault();
const button = event.target;
const row = button.closest('tr');
console.log('saving');
let isValid = true;
const originalSubcompany = row.getAttribute('data-original-subcompany');
console.log('originalSubcompany',originalSubcompany);
// Get the error row below the current row
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) { / / Exclude the last cell ( actions cell )
if (cell.contentEditable === 'true') {
validateCompanyDetails({ target: cell });
if (cell.getAttribute('data-valid') === 'false') {
isValid = false;
}
}
}
});
if (!isValid) {
alert('Please fix the validation errors before saving.');
return;
}
const id = row.getAttribute('data-client-id') || row.getAttribute('data-sub-client-id');
console.log(id);
let newData = {};
if (row.getAttribute('data-client-id')) {
newData = {
client_id: id,
parent_company: getDataValue(row, 'parent_company'),
GST_No: getDataValue(row, 'GST_No'),
location_Id: getDataValue(row, 'location_Id'),
address_1: getDataValue(row, 'address_1'),
address_2: getDataValue(row, 'address_2'),
City: getDataValue(row, 'City'),
state: getDataValue(row, 'state'),
Pincode: getDataValue(row, 'Pincode'),
country: getDataValue(row, 'country')
};
} else if (row.getAttribute('data-sub-client-id')) {
newData = {
sub_client_id: id,
parent_company: getDataValue(row, 'parent_company'),
sub_company: getDataValue(row, 'sub_company'),
GST_No: getDataValue(row, 'GST_No'),
location_id: getDataValue(row, 'location_id'),
address_1: getDataValue(row, 'address_1'),
address_2: getDataValue(row, 'address_2'),
City: getDataValue(row, 'City'),
State: getDataValue(row, 'State'),
Pincode: getDataValue(row, 'Pincode'),
country: getDataValue(row, 'country')
};
}
console.log('New data to save:', newData);
const updateSubcompany = newData.sub_company
console.log('updateSubcompany',updateSubcompany);
// Fetch request to save data
fetch(`/skyonnadmin/edit_CompanyDetails/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify(newData)
})
.then(response => {
if (response.ok) {
console.log(`Data with id ${id} saved successfully.`);
alert(`Data with id ${id} saved successfully.`);
Array.from(row.cells).forEach((cell, index) => {
if (index < row.cells.length - 1 ) { / / Exclude the last cell ( actions cell )
cell.contentEditable = false;
cell.style.backgroundColor = 'white';
cell.removeEventListener('blur', validateCompanyDetails);
}
});
button.textContent = 'Edit';
button.classList.remove('save-button-client');
button.classList.add('edit-button-client');
button.removeEventListener('click', saveCompanyDetails);
button.addEventListener('click', editCompanyDetails);
if(originalSubcompany !== updateSubcompany & & newData.sub_client_id) {
refreshClientDropdown();
}
} else {
throw new Error('Failed to save details.');
}
})
.catch(error => {
console.error('Error saving details:', error);
// Handle error
});
function getDataValue(row, key) {
const cell = row.querySelector(`[data-key="${key}"]`);
return cell ? cell.textContent.trim() : '';
}
}
function deleteClient(event) {
console.log('deleting');
event.preventDefault();
const button = event.target;
const row = button.closest('tr');
const clientId = row.getAttribute('data-client-id');
const subClientId = row.getAttribute('data-sub-client-id');
const parentCompanyId = row.getAttribute('data-parent-company');
const subCompanyId = row.getAttribute('data-original-subcompany');
<!-- const idToDelete = row.getAttribute('parent_company'); -->
console.log('Deleting row with id:', parentCompanyId);
const confirmationMessage = clientId
? `Are you sure you want to delete the Client,Subclient and Contact data for Parent Company: ${parentCompanyId}?`
: `Are you sure you want to delete the subclient ${subCompanyId} with client : ${parentCompanyId}?`;
if (confirm(confirmationMessage)) {
deleteCompanyDetails({ client_id: clientId, sub_client_id: subClientId, parent_company: parentCompanyId }, row);
}
}
function deleteCompanyDetails(data,row) {
fetch(`/skyonnadmin/delete_CompanyDetails/` , {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}' // Include CSRF token if needed
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
console.log(`Data deleted successfully.`);
row.remove(); // Remove the row from the table
refreshClientDropdown();
} else {
throw new Error('Failed to delete details.');
}
})
.catch(error => {
console.error('Error deleting details:', error);
// Handle error
});
}
function saveForm() {
event.preventDefault();
var formData = new FormData(document.getElementById('jobPostingForm'));
if (!validateForm(formData)) {
return false;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url/to/submit/form', true);
xhr.onload = function() {
if (xhr.status >= 200 & & xhr.status < 300 ) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function() {
console.error(xhr.statusText);
};
xhr.send(formData);
return false;
}
function validateForm(formData) {
var requiredFields = ['ParentCompany', 'SubCompany', 'Location', 'Department', 'GSTNo', 'Address', 'FirstName', 'PhoneNo1', 'CompanyEmail', 'Designation', 'LastName', 'Location', 'Designation'];
for (var i = 0; i < requiredFields.length ; i + + ) {
var field = requiredFields[i];
if (!formData.get(field)) {
alert("Please fill in all the required fields.");
return false;
}
}
return true;
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('change', function() {
const form = document.getElementById('addClientForm');
if (!form) return;
const parentCompanyInput = document.getElementById('ParentCompany');
let requiredFields = form.querySelectorAll('input[required], select[required]');
const clearValidation = (field) => {
field.setCustomValidity('');
field.style.borderColor = '';
};
const validateField = (field) => {
if (!field.value.trim()) {
field.style.borderColor = '';
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
return false;
} else {
field.style.borderColor = 'black';
field.setCustomValidity('');
return true;
}
};
parentCompanyInput.addEventListener('input', () => clearValidation(parentCompanyInput));
parentCompanyInput.addEventListener('blur', () => {
if (validateField(parentCompanyInput)) {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/check_parent_company/?ParentCompany=' + encodeURIComponent(parentCompanyInput.value), true);
xhr.onload = () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.exists) {
parentCompanyInput.style.borderColor = '';
parentCompanyInput.setCustomValidity('Parent company already exists.');
parentCompanyInput.reportValidity();
} else {
parentCompanyInput.style.borderColor = 'black';
}
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
});
});
window.saveClient = function() {
let isValid = true;
const form = document.getElementById('addClientForm');
let requiredFields = form.querySelectorAll('input[required], select[required]');
requiredFields.forEach(field => {
field.setCustomValidity(''); // Clear previous validation message
field.style.borderColor = ''; // Reset border color
});
// Iterate over each required field to check if it has value
for (let field of requiredFields) {
if (!field.value.trim()) {
isValid = false;
field.style.borderColor = '';
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
break;
} else {
// If field is filled, reset border to black
field.style.borderColor = 'black';
field.setCustomValidity('');
}
}
if (!isValid) {
// Prevent form submission if validation fails
console.log("Validation failed. Please fill out the required fields.");
return;
}
const formData = new FormData(form);
const url = form.getAttribute('action');
fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}',
},
})
.then(response => response.json())
.then(data => {
if (data.status === 'error') {
if (data.field & & data.message) {
const errorField = form.querySelector(`[name=${data.field}]`);
if (errorField) {
errorField.style.borderColor = '';
errorField.setCustomValidity(data.message);
errorField.reportValidity();
errorField.focus();
errorField.value = '';
errorField.addEventListener('input', () => {
errorField.style.borderColor = 'black';
errorField.setCustomValidity('');
errorField.reportValidity();
}, { once: true });
} else {
alert(data.message);
}
} else {
alert(data.message || 'Error saving Client.');
}
} else {
alert('Client saved successfully.');
form.reset();
}
})
.catch(error => {
console.error('Error:', error);
alert('Error: ' + error.message);
});
};
document.addEventListener('DOMContentLoaded', function() {
window.populateParentCompanyDropdown=function() {
const form = document.getElementById('subLocationsForm');
if (!form) return;
const clientDropdown = form.querySelector('#ParentCompany');
if (!clientDropdown) return;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/get_parentCompany/', true);
xhr.onload = function() {
if (xhr.status === 200) {
clientDropdown.innerHTML = '< option value = "" > Select Client< / option > ';
var data = JSON.parse(xhr.responseText);
data.forEach(function(company) {
const option = document.createElement('option');
option.value = company.parent_company;
option.textContent = company.parent_company;
clientDropdown.appendChild(option);
});
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
function toggleaddSubLocation() {
var mainForm = document.getElementById("addClientForm");
var subForm = document.getElementById("subLocationsForm");
var addButton = document.getElementById("addSubLocation");
mainForm.style.display = "none";
subForm.style.display = "block";
addButton.style.display = "none";
// Populate the dropdown when the form is displayed
populateParentCompanyDropdown();
}
function saveSubLocation() {
const form = document.getElementById('subLocationsForm');
const requiredFields = form.querySelectorAll('input[required], select[required]');
let isValid = true;
// Clear any previous custom validation messages and reset border colors
requiredFields.forEach(field => {
field.setCustomValidity(''); // Clear previous validation message
field.style.borderColor = ''; // Reset border color
});
// Iterate over each required field to check if it has value
for (let field of requiredFields) {
if (!field.value.trim()) {
isValid = false;
field.style.borderColor = '';
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
break;
}
}
if (!isValid) {
// Prevent form submission if validation fails
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 => {
return response.json().then(data => {
if (!response.ok) {
// Handle specific error messages
if (data.message) {
throw new Error(data.message);
}
}
return data;
});
})
.then(data => {
console.log('Success:', data);
alert('Sub_Location saved successfully.');
})
.catch(error => {
console.error('Error:', error);
alert('Error:' + error.message);
})
.finally(() => {
// Clear all fields in the form whether success or error
form.reset();
});
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('change', function() {
const form = document.getElementById('addSubClientForm');
if (!form) return;
const ParentCompanyInput = document.getElementById('ParentCompany');
const SubCompanyInput = document.getElementById('SubCompany');
const locationInput = document.getElementById('Location_Id');
const GSTNoInput = document.getElementById('GSTNo');
console.log('GSTNoInput:',GSTNoInput.disabled);
const requiredFields = form.querySelectorAll('input[required], select[required]');
const clearValidation = (field) => {
field.setCustomValidity('');
field.style.borderColor = '';
};
const validateField = (field) => {
if (!field.value.trim()) {
field.style.borderColor = '';
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
return false;
} else {
field.style.borderColor = 'black';
field.setCustomValidity('');
return true;
}
};
const fetchGSTNo = () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/get_GSTNo/?ParentCompany=' + encodeURIComponent(ParentCompanyInput.value), true);
xhr.onload = () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.GST_No) {
GSTNoInput.value = response.GST_No;
}
} else {
console.error('Request failed. Status:', xhr.status);
}
};
xhr.send();
};
ParentCompanyInput.addEventListener('change', () => {
if (ParentCompanyInput.value) {
fetchGSTNo();
}
});
ParentCompanyInput.addEventListener('blur', () => {
if (ParentCompanyInput.value) {
fetchGSTNo();
}
});
SubCompanyInput.addEventListener('input', () => clearValidation(SubCompanyInput));
SubCompanyInput.addEventListener('blur', () => {
if (validateField(SubCompanyInput) & & GSTNoInput.disabled) {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/skyonnadmin/check_sub_company/?SubCompany=' + encodeURIComponent(SubCompanyInput.value), true);
xhr.onload = () => {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.exists) {
SubCompanyInput.style.borderColor = '';
SubCompanyInput.setCustomValidity('Sub company already exists.');
SubCompanyInput.reportValidity();
} else {
SubCompanyInput.style.borderColor = '';
}
} else {
console.error('Request failed. Status: ' + xhr.status);
}
};
xhr.send();
}
});
if (changeButton.textContent === 'Change') {
changeButton.addEventListener('click', function (event) {
event.preventDefault();
console.log('Change clicked');
GSTNoInput.disabled = false; // Enable input for editing
GSTNoInput.focus(); // Focus on the input field
changeButton.textContent = 'Save';
})
} else if (changeButton.textContent === 'Save' & & GSTNoInput.value.trim() !== '') {
changeButton.addEventListener('click', function (event) {
console.log('Save clicked');
GSTNoInput.disabled = true; // Disable the input
changeButton.textContent = 'Change'; // Change the button text back to Change
console.log('Updated GST No:', updatedGST);
})
}
});
});
window.saveSubClient = function() {
let isValid = true;
const GSTNoInput = document.getElementById('GSTNo');
const changeButton = document.getElementById("changeButton");
const form = document.getElementById('addSubClientForm');
let requiredFields = form.querySelectorAll('input[required], select[required]');
requiredFields.forEach(field => {
field.setCustomValidity(''); // Clear previous validation message
field.style.borderColor = ''; // Reset border color
});
// Iterate over each required field to check if it has value
for (let field of requiredFields) {
if (!field.value.trim()) {
isValid = false;
field.style.borderColor = '';
field.setCustomValidity('Please fill out this field.');
field.reportValidity();
field.focus();
break;
} else {
// If field is filled, reset border to black
field.style.borderColor = 'black';
field.setCustomValidity('');
}
}
if (!isValid) {
// Prevent form submission if validation fails
console.log("Validation failed. Please fill out the required fields.");
return;
}
const updatedGST = GSTNoInput.value.trim(); // Get the input value
if (!updatedGST) {
GSTNoInput.setCustomValidity('GST field cannot be empty');
GSTNoInput.reportValidity();
GSTNoInput.focus(); // Refocus the input field if invalid
return;
}
if (changeButton.textContent === 'Save') {
GSTNoInput.setCustomValidity('click save button');
GSTNoInput.reportValidity();
GSTNoInput.focus(); // Refocus the input field if invalid
return;
}
const formData = new FormData(form);
formData.append('GSTNo',GSTNoInput.value);
const url = form.getAttribute('action');
fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}',
},
})
.then(response => response.json())
.then(data => {
if (data.status === 'error') {
if (data.field & & data.message) {
const errorField = form.querySelector(`[name=${data.field}]`);
if (errorField) {
errorField.style.borderColor = '';
errorField.setCustomValidity(data.message);
errorField.reportValidity();
errorField.focus();
errorField.value = '';
errorField.addEventListener('input', () => clearValidation(errorField), { once: true });
} else {
alert(data.message);
}
} else {
alert(data.message || 'Error saving Sub Client.');
}
} else {
alert('Sub Client saved successfully.');
form.reset();
GSTNoInput.disabled = true;
changeButton.textContent = 'Change';
}
})
.catch(error => {
console.error('Error:', error);
alert('Error: ' + error.message);
});
};
function hideClientDetails() {
// Example implementation
var clientDetailsContainer = document.getElementById('clientDetailsContainer');
if (clientDetailsContainer) {
clientDetailsContainer.style.display = 'none';
}
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('change', function(event) {
var target = event.target;
const formId = document.getElementById('Existing_client');
console.log(formId);
if (target & & target.id === 'ClientDropdown' & & formId.id === 'Existing_client') {
var parentCompany = target.value; // Get selected client
var subClientDropdown = target.closest('form').querySelector('#SubClientDropdown');
subClientDropdown.innerHTML = '';
// 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 = "All Sub Clients" > All Sub Clients< / option > ';
// Parse response and add options to SubClient dropdown
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();
}
});
});
const subCompanyInput = document.getElementById('SubCompany');
subCompanyInput.addEventListener('input', () => {
subCompanyInput.value = subCompanyInput.value.replace(/\b\w/g, (char) => char.toUpperCase());
});
<!-- document.addEventListener('DOMContentLoaded', function() { -->
<!-- // Define a variable to store the filtered data -->
<!-- let filteredData = []; -->
<!-- // Function to display filtered data based on selected tab -->
<!-- function displayFilteredData(department) { -->
<!-- // Clear the table body -->
<!-- let tableBody = document.querySelector('#originalEmployeeTable tbody'); -->
<!-- tableBody.innerHTML = ''; -->
<!-- // Filter the data based on department -->
<!-- let departmentData = filteredData.filter(function(item) { -->
<!-- return item.department.toLowerCase() === department; -->
<!-- }); -->
<!-- // Append filtered data to the table -->
<!-- departmentData.forEach(function(item) { -->
<!-- let row = `<tr> -->
<!-- <td>${item.name}</td> -->
<!-- <td>${item.designation}</td> -->
<!-- <td>${item.department}</td> -->
<!-- <td>${item.phone}</td> -->
<!-- <td>${item.email}</td> -->
<!-- <td>${item.location}</td> -->
<!-- <td>Action</td> -->
<!-- </tr>`; -->
<!-- tableBody.innerHTML += row; -->
<!-- }); -->
<!-- } -->
<!-- // Event listener for clicking on department tabs -->
<!-- let departmentLinks = document.querySelectorAll('.department - link'); -->
<!-- departmentLinks.forEach(function(link) { -->
<!-- link.addEventListener('click', function() { -->
<!-- let department = this.getAttribute('data - department'); -->
<!-- displayFilteredData(department); -->
<!-- }); -->
<!-- }); -->
<!-- -->
<!-- -->
<!-- // Event listener for clicking on Get Details button -->
<!-- document.addEventListener('click', function(event) { -->
<!-- if (event.target && event.target.id === 'getDetailsButton') { -->
<!-- console.log('getting filtered data') -->
<!-- let client = document.getElementById('ClientDropdown').value; -->
<!-- let subClient = document.getElementById('SubClientDropdown').value; -->
<!-- // Make AJAX request to get filtered data -->
<!-- let xhr = new XMLHttpRequest(); -->
<!-- xhr.open('GET', '/skyonnadmin/get_filtered_data/?client=' + client + '&subClient=' + subClient, true); -->
<!-- xhr.onload = function() { -->
<!-- if (xhr.status === 200) { -->
<!-- // Parse the response and store filtered data -->
<!-- filteredData = JSON.parse(xhr.responseText); -->
<!-- // Display data based on selected tab -->
<!-- let activeTab = document.querySelector('.department - link.active'); -->
<!-- if (activeTab) { -->
<!-- let department = activeTab.getAttribute('data - department'); -->
<!-- displayFilteredData(department); -->
<!-- } -->
<!-- } else { -->
<!-- console.error('Request failed. Status: ' + xhr.status); -->
<!-- } -->
<!-- }; -->
<!-- xhr.send(); -->
<!-- } -->
<!-- }); -->
<!-- }); -->
<!-- function showPopup() { -->
<!-- document.getElementById('popup').style.display = 'block'; -->
<!-- } -->
<!-- function hidePopup() { -->
<!-- document.getElementById('popup').style.display = 'none'; -->
<!-- } -->
<!-- function saveForm() { -->
<!-- if (validateForm()) { -->
<!-- document.getElementById('jobPostingForm').submit(); -->
<!-- hidePopup(); -->
<!-- } -->
<!-- } -->
<!-- function validateForm() { -->
<!-- var requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]'); -->
<!-- var isValid = true; -->
<!-- requiredFields.forEach(function(field) { -->
<!-- if (!field.value.trim()) { -->
<!-- isValid = false; -->
<!-- field.style.border = '2px solid red'; -->
<!-- } else { -->
<!-- field.style.border = '1px solid #ccc'; -->
<!-- } -->
<!-- }); -->
<!-- if (!isValid) { -->
<!-- alert('Please fill in all required fields.'); -->
<!-- } -->
<!-- return isValid; -->
<!-- } -->
<!-- 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="telanganaCheckbox" name="telanganaCheckbox" value="Telangana" onchange="updateInputField()" style="margin - left: - 50px;"> -->
<!-- <label for="telanganaCheckbox" style="margin - left: - 50px;">Telangana</label><br> -->
<!-- <input type="checkbox" id="andhraCheckbox" name="andhraCheckbox" value="Andhra Pradesh" onchange="updateInputField()" style="margin - left: - 50px;"> -->
<!-- <label for="andhraCheckbox" style="margin - left: - 50px;">Andhra Pradesh</label><br> -->
<!-- <input type="checkbox" id="gujaratCheckbox" name="gujaratCheckbox" value="Gujarat" onchange="updateInputField()" style="margin - left: - 50px;"> -->
<!-- <label for="gujaratCheckbox" style="margin - left: - 50px;">Gujarat</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', 'BudgetMax', 'Header', 'JobDescription', 'SpecialInstructions', 'JD' -->
<!-- ]; -->
<!-- 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) { -->
<!-- if (!field.value.trim()) { -->
<!-- isValid = false; -->
<!-- field.setCustomValidity('Please fill out this field.'); -->
<!-- // Show the validation message for this field -->
<!-- field.reportValidity(); -->
<!-- // Focus the first invalid field -->
<!-- if (!firstInvalidField) { -->
<!-- firstInvalidField = field; -->
<!-- } -->
<!-- // Exit the loop after finding the first invalid field -->
<!-- break; -->
<!-- } else { -->
<!-- // If the field is valid, reset its border color -->
<!-- field.style.borderColor = ''; -->
<!-- field.setCustomValidity(''); -->
<!-- } -->
<!-- } -->
<!-- } -->
<!-- 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.'); -->
<!-- }) -->
<!-- .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 validateBudget() { -->
<!-- var budgetMin = parseInt(document.getElementById("BudgetMin").value); -->
<!-- var budgetMax = parseInt(document.getElementById("BudgetMax").value); -->
<!-- var budgetMaxInput = document.getElementById("BudgetMax"); -->
<!-- var errorPopup = document.getElementById("budgetMaxErrorPopup"); -->
<!-- // Check if BudgetMin is less than or equal to 10000 -->
<!-- if (budgetMin <= 0) { -->
<!-- // Show the error popup for BudgetMin -->
<!-- errorPopup.textContent = "Budget Min must be greater than max."; -->
<!-- errorPopup.classList.add("show"); -->
<!-- // Optionally, you can set styles to visually indicate the error -->
<!-- var budgetMinInput = document.getElementById("BudgetMin"); -->
<!-- budgetMinInput.focus(); // Focus back on BudgetMin for correction -->
<!-- return; // Exit function early to prevent further validation -->
<!-- } else { -->
<!-- // Hide the error popup for BudgetMin -->
<!-- errorPopup.classList.remove("show"); -->
<!-- var budgetMinInput = document.getElementById("BudgetMin"); -->
<!-- budgetMinInput.style.borderColor = ""; -->
<!-- budgetMinInput.style.color = ""; -->
<!-- } -->
<!-- // Check if BudgetMax is less than or equal to BudgetMin -->
<!-- if (budgetMax <= budgetMin) { -->
<!-- // Show the error popup for BudgetMax -->
<!-- errorPopup.textContent = "Budget Max must be greater than Budget Min."; -->
<!-- errorPopup.classList.add("show"); -->
<!-- // Optionally, you can set styles to visually indicate the error -->
<!-- budgetMaxInput.focus(); // Focus back on BudgetMax for correction -->
<!-- } else { -->
<!-- // Hide the error popup for BudgetMax -->
<!-- errorPopup.classList.remove("show"); -->
<!-- budgetMaxInput.style.borderColor = ""; -->
<!-- budgetMaxInput.style.color = ""; -->
<!-- } -->
<!-- } -->
<!-- // Attach the validation function to the input events -->
<!-- document.getElementById("BudgetMin").addEventListener("input", validateBudget); -->
<!-- document.getElementById("BudgetMin").addEventListener("blur", validateBudget); -->
<!-- document.getElementById("BudgetMax").addEventListener("input", validateBudget); -->
<!-- document.getElementById("BudgetMax").addEventListener("blur", validateBudget); -->
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.querySelector("input[type='text']");
searchInput.addEventListener("input", debounce(function() {
const query = this.value.trim();
// Modify the URL in the address bar without reloading the page
const newUrl = `${window.location.origin}${window.location.pathname}?query=${encodeURIComponent(query)}`;
history.pushState({ path: newUrl }, '', newUrl);
fetch(`./?query=${encodeURIComponent(query)}`) // Adjusted to relative path
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const newBody = doc.querySelector("tbody");
const oldBody = document.querySelector("table tbody");
if (oldBody & & newBody) {
oldBody.parentNode.replaceChild(newBody, oldBody);
}
})
.catch(error => console.error('Error fetching filtered job postings:', error));
}, 500));
});
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate & & !timeout) func.apply(context, args);
};
};
<!-- function alljobposting(){ -->
<!-- document.addEventListener('DOMContentLoaded', function() { -->
<!-- const searchInput = document.querySelector("input[type='text']"); -->
<!-- searchInput.addEventListener("input", debounce(function() { -->
<!-- const query = this.value.trim(); -->
<!-- // Modify the URL in the address bar without reloading the page -->
<!-- const newUrl = `${window.location.origin}${window.location.pathname}?query=${encodeURIComponent(query)}`; -->
<!-- history.pushState({ path: newUrl }, '', newUrl); -->
<!-- fetch(`./?query=${encodeURIComponent(query)}`) // Adjusted to relative path -->
<!-- .then(response => response.text()) -->
<!-- .then(html => { -->
<!-- const parser = new DOMParser(); -->
<!-- const doc = parser.parseFromString(html, "text/html"); -->
<!-- const newBody = doc.querySelector("tbody"); -->
<!-- const oldBody = document.querySelector("table tbody"); -->
<!-- if (oldBody && newBody) { -->
<!-- oldBody.parentNode.replaceChild(newBody, oldBody); -->
<!-- } -->
<!-- }) -->
<!-- .catch(error => console.error('Error fetching filtered job postings:', error)); -->
<!-- }, 500)); -->
<!-- }); -->
<!-- function debounce(func, wait, immediate) { -->
<!-- var timeout; -->
<!-- return function() { -->
<!-- var context = this, args = arguments; -->
<!-- clearTimeout(timeout); -->
<!-- timeout = setTimeout(function() { -->
<!-- timeout = null; -->
<!-- if (!immediate) func.apply(context, args); -->
<!-- }, wait); -->
<!-- if (immediate && !timeout) func.apply(context, args); -->
<!-- }; -->
<!-- }; -->
<!-- } -->
function searchJob() {
var input, filter, table, tr, td, 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;
td = tr[i].getElementsByTagName("td")[1]; // Get the second column (JobID)
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
tr[i].style.display = found ? "" : "none";
}
}
function goBack() {
hidePopup(); // Assuming you have a function to hide the popup
// Optionally, show another section or perform other actions
}
function toggleForm(formId) {
var forms = ['Existing_employeeform', 'add_employeeform'];
forms.forEach(function(id) {
var form = document.getElementById(id);
if (form & & id === formId) {
form.style.display = form.style.display === 'block' ? 'none' : 'block';
} else if (form) {
form.style.display = 'none';
}
});
}
function validatePhoneNumbers() {
var phoneNo1 = document.getElementById('PhoneNo1').value;
var phoneNo2 = document.getElementById('PhoneNo2').value;
if (phoneNo1 === '' & & phoneNo2 === '') {
alert("Please enter either Mobile No or Land No.");
return false; // Prevent form submission
}
// Allow form submission if one of the fields is filled
return true;
}
< / script >
< / section >
< / div >
< / body >
< / html >
