You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4818 lines
182 KiB
4818 lines
182 KiB
<!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> |