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.
569 lines
18 KiB
569 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="loadPage('/new_job_postings/'); hideClientDetails()">
|
|
<span class="sidebar--item">Team Details</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="sidebar-link" onclick="loadPage('/new_job_postings/'); hideClientDetails()">
|
|
<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 = ' ';
|
|
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.');
|
|
});
|
|
}
|
|
function hideClientDetails() {
|
|
// Example implementation
|
|
var clientDetailsContainer = document.getElementById('clientDetailsContainer');
|
|
if (clientDetailsContainer) {
|
|
clientDetailsContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</section>
|
|
|
|
|
|
</body>
|
|
</html> |