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.

562 lines
18 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
position: relative;
width: 100%;
}
.header {
height: 60px;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid black;
}
h2{
color: red;
margin-left:400px ;
white-space: nowrap;
margin-top: 10px;
}
.search--notification--profile {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 100px);
padding: 0 40px;
margin-left: -10px;
}
.search {
width: 300px;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-container {
display: flex;
align-items: center;
border: 1px solid black;
border-radius: 5px;
padding: 0 5px;
}
.search input {
outline: none;
border: none;
text-indent: 15px;
width: 100%;
height: 40px;
}
.search button {
outline: none;
border: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.main {
position: relative;
width: 100%;
min-height: calc(100vh - 60px);
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 250px;
background-color: #fff;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid black;
}
.sidebar.active {
width: 103px;
overflow: hidden;
}
.sidebar.active .sidebar--item {
display: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.sidebar--items a,
.sidebar--bottom-items a {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 1.1rem;
color:blue;
padding: 10px;
border-radius: 10px;
}
.sidebar--items a:hover,
.sidebar--bottom-items a:hover {
color: red;
}
#clientDetailsContainer{
body {
font-family: Arial, sans-serif;
}
.container {
width: 45rem;
margin: auto;
padding: 20px;
border-radius: 10px;
overflow: hidden;
}
.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;
}
}
</style>
<title> Admin Dashboard</title>
</head>
<body>
<section class="header">
<h1 style="color: lightskyblue; margin-top: 10px; margin-left: 50px; text-decoration: underline;">Home</h1>
<h2>Admin <span>Dashboard</span></h2>
<div class="search--notification--profile">
<div class="search">
<div class="search-container">
<input type="text" placeholder="Search">
<button><i class="ri-search-2-line"></i></button>
</div>
</div>
</div>
<div class="bell" style="margin-right: 40px;">
<i class="fa-solid fa-bell"></i>
</div>
<div class="profile" style="margin-right: 40px;">
<i class="fa-solid fa-user"></i>
</div>
<h3 style="margin-right: 40px;">{{first_name}}</h3>
<a href="{% url 'admin_logout' %}" style="margin-right: 350px; color: blue; font-size: larger; text-decoration: underline;">LogOut</a>
</section>
<section class="main">
<div class="sidebar">
<ul class="sidebar--items">
<li><a href="#" onclick="showClientDetails()">Existing Client</a></li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Team Details</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="loadPage('/new_job_postings/')">
<span class="sidebar--item">New Job Postings</span>
</a>
</li>
<li>
<a href="{% url 'all_job_postings' %}" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">All Jobs Postings</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Messages</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Pending Process</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Submitted Resumes</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Add a New SPOC</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Client Details</span>
</a>
</li>
<li>
<a href="#" class="sidebar-link" onclick="activateLink(this)">
<span class="sidebar--item">Activity Report</span>
</a>
</li>
</ul>
</div>
<div id="clientDetailsContainer" style="display: none;">
<ul>
<div class="nav">
<!-- <li><a href="#" class="btn" onclick="#">Client Details</a></li>-->
<li><a href="#" class="btn" onclick="loadPage('/skyonnadmin/existing_client/','{{admin_id}}')">Existing Client</a></li>
<li><a href="#" class="btn" onclick="loadPage('/skyonnadmin/add_client/','{{admin_id}}')">Add New Client</a></li>
<li><a href="#" class="btn" onclick="loadPage('/skyonnadmin/add_subclient/','{{admin_id}}')">Add Sub Clients/Locations</a></li>
</div>
</ul>
</div>
<div id="dynamicContentContainer"></div>
<script>
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(link) {
var links = document.querySelectorAll('.sidebar-link');
links.forEach(function(item) {
item.classList.remove('active');
});
link.classList.add('active');
}
function showClientDetails() {
var clientDetailsContainer = document.getElementById('clientDetailsContainer');
clientDetailsContainer.style.display = 'block';
document.getElementById('dynamicContentContainer').innerHTML = ''; // Clear any existing content
}
function editEmployee(button) {
var row = button.closest('tr');
Array.from(row.cells).forEach(cell => cell.contentEditable = true);
button.textContent = 'Save';
button.onclick = function() { saveEmployee(this); };
}
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 = '&nbsp;';
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 = '60%';
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');
for (var i = 1; i < newRows.length; i++) {
var newData = Array.from(newRows[i].cells).slice(0, -1).map(cell => cell.innerText);
var newRow = originalTBody.insertRow();
newData.forEach(item => newRow.insertCell().textContent = item);
addActionButtons(newRow);
}
newTable.remove();
isNewTableAdded = false;
}
}
function toggleaddSubLocation() {
var mainForm = document.getElementById("addClientForm");
var subForm = document.getElementById("subClientsLocationsForm");
var addButton = document.getElementById("addSubLocation");
mainForm.style.display = "none";
subForm.style.display = "block";
addButton.style.display = "none";
}
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;
}
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 saveJobPosting() {
const form = document.getElementById('jobPostingForm');
const formData = new FormData(form);
// Ensure this retrieves the correct URL
const url = form.getAttribute('action');
console.log('CSRF Token:', '{{ csrf_token }}');
console.log('Form action URL:', url);
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('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Success:', data);
alert('Job posting saved successfully.');
form.reset();
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while saving the job posting.');
});
}
function saveClient() {
const form = document.getElementById('addClientForm');
const formData = new FormData(form);
// Ensure this retrieves the correct URL
const url = form.getAttribute('action');
console.log('CSRF Token:', '{{ csrf_token }}');
console.log('Form action URL:', url);
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('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Success:', data);
alert('Client saved successfully.');
form.reset();
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while saving the job posting.');
});
}
function saveSubClient() {
const form = document.getElementById('addSubClientForm');
const formData = new FormData(form);
// Ensure this retrieves the correct URL
const url = form.getAttribute('action');
console.log('CSRF Token:', '{{ csrf_token }}');
console.log('Form action URL:', url);
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('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Success:', data);
alert('Sub Client saved successfully.');
form.reset();
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while saving the job posting.');
});
}
</script>
</section>
</body>
</html>