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.
440 lines
20 KiB
440 lines
20 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">
|
|
<title>New Job Posting</title>
|
|
<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>
|
|
.Admin_client{
|
|
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 black;
|
|
}
|
|
label.required::after {
|
|
content: "*";
|
|
color: red;
|
|
margin-left: 5px;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
}
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
}
|
|
.form-group label {
|
|
margin-left: 10px;
|
|
}
|
|
#Address {
|
|
margin-left: 40px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
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: 500px;
|
|
width: 900px;
|
|
}
|
|
.add-sublocation-link {
|
|
display: inline-flex; /* Use inline-flex to keep the link inline */
|
|
align-items: center; /* Vertically center the icon and text */
|
|
text-decoration: none; /* Remove underline */
|
|
color: black; /* Text color */
|
|
margin: 600;
|
|
}
|
|
|
|
.sublocation-icon {
|
|
margin-right: 7px;
|
|
margin-top:-200px;/* Space between the icon and the text */
|
|
}
|
|
|
|
.sublocation-text {
|
|
margin-left:-90px;
|
|
margin-top:-150px;
|
|
}
|
|
.container1 input[type="text"] {
|
|
width: calc(100% - 20px);
|
|
margin-right: 10px;
|
|
}
|
|
<!-- .add span {-->
|
|
<!-- display: inline-block;-->
|
|
<!-- width: 25px;-->
|
|
<!-- height: 25px;-->
|
|
<!-- border: 2px solid black; /* Add border property */-->
|
|
<!-- border-radius: 50%;-->
|
|
<!-- text-align: center;-->
|
|
<!-- line-height: 30px;-->
|
|
<!-- margin-left: 530px;-->
|
|
<!-- color: black;-->
|
|
<!-- }-->
|
|
h3 {
|
|
text-decoration: underline;
|
|
margin-left:30px;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="Admin_client">
|
|
<div class="container" style="width:200%; margin-left:255px;">
|
|
<form id="addClientForm" action="{% url 'save_details' %}?admin_id={{ admin_id }}" method="post" style="width:100%;">
|
|
{% csrf_token %}
|
|
<div class="two-col">
|
|
<div class="col1" style="width:15%;">
|
|
<div class="form-group">
|
|
<input type="text" id="ParentCompany" name="ParentCompany" placeholder="Eg. Oracle in India" tabindex="1" style="margin-left:7px" required autocomplete="off">
|
|
<label for="ParentCompany" class="required" style="width: 200px;"><b>Parent Company:</b></label>
|
|
</div>
|
|
<div class="form-group" style="margin-left:-60px">
|
|
<input type="text" id="Location_Id" name="Location_Id" style="margin-left:44px" placeholder="Eg. Hyderabad" tabindex="3" required autocomplete="off">
|
|
<label for="Location_Id" class="required" style="margin-left: 70px;"><b>Location_Id:</b></label>
|
|
</div>
|
|
<div class="form-group" style="margin-left:30px">
|
|
<input type="text" id="Address_2" name="Address_2" placeholder="optional" style="margin-left:63px;" tabindex="5" autocomplete="off">
|
|
<label for="Address_2" style="margin-left: -22px;"><b>Address_2:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<select id="State" name="State" style="margin-left: 93px;" tabindex="8" required>
|
|
<option value="" selected disabled>Select State</option>
|
|
<option value="Andhra Pradesh">Andhra Pradesh</option>
|
|
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
|
|
<option value="Assam">Assam</option>
|
|
<option value="Bihar">Bihar</option>
|
|
<option value="Chhattisgarh">Chhattisgarh</option>
|
|
<option value="Goa">Goa</option>
|
|
<option value="Gujarat">Gujarat</option>
|
|
<option value="Haryana">Haryana</option>
|
|
<option value="Himachal Pradesh">Himachal Pradesh</option>
|
|
<option value="Jharkhand">Jharkhand</option>
|
|
<option value="Karnataka">Karnataka</option>
|
|
<option value="Kerala">Kerala</option>
|
|
<option value="Madhya Pradesh">Madhya Pradesh</option>
|
|
<option value="Maharashtra">Maharashtra</option>
|
|
<option value="Manipur">Manipur</option>
|
|
<option value="Meghalaya">Meghalaya</option>
|
|
<option value="Mizoram">Mizoram</option>
|
|
<option value="Nagaland">Nagaland</option>
|
|
<option value="Odisha">Odisha</option>
|
|
<option value="Punjab">Punjab</option>
|
|
<option value="Rajasthan">Rajasthan</option>
|
|
<option value="Sikkim">Sikkim</option>
|
|
<option value="Tamil Nadu">Tamil Nadu</option>
|
|
<option value="Telangana">Telangana</option>
|
|
<option value="Tripura">Tripura</option>
|
|
<option value="Uttar Pradesh">Uttar Pradesh</option>
|
|
<option value="Uttarakhand">Uttarakhand</option>
|
|
<option value="West Bengal">West Bengal</option>
|
|
</select>
|
|
<label for="State" class="required" style="margin-left: 8px;"><b>State:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="country" name="country" value="India" placeholder="Country" style="margin-left: 68px;" tabindex="10" required>
|
|
<label for="country" class="required" style="margin-left: 9px;"><b>Country:</b></label>
|
|
</div>
|
|
</div>
|
|
<div class="col2" style="width:15%">
|
|
<div class="form-group">
|
|
<input type="text" id="GSTNo" name="GSTNo" style="margin-left: 30px;" placeholder="Eg. LSB009876L1" tabindex="2" pattern="[A-Z0-9]{15}" oninput="this.value = this.value.toUpperCase()" required autocomplete="off">
|
|
<label for="GSTNo" class="required" style="margin-left: 15px;"><b>GST No:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="Address_1" name="Address_1" style="margin-left: 10px;" placeholder="Address_1" tabindex="4" required autocomplete="off">
|
|
<label for="Address_1" class="required" style="margin-left: 15px;"><b>Address_1:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="City" name="City" placeholder="City" style="margin-left:60px;" tabindex="7" required autocomplete="off">
|
|
<label for="City" class="required" style="margin-left: 15px;"><b>City:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="number" id="Pincode" name="Pincode" placeholder="500090" tabindex="9" style="margin-left: 30px;" required autocomplete="off" maxlength="6" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{6}">
|
|
<label for="Pincode" class="required" style="margin-left: 15px;"><b>Pincode:</b></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="saveButton" onclick="saveClient()" tabindex="10" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:380px; margin-top: 10px; padding: 5px;">Save</button>
|
|
</form>
|
|
|
|
<span id="ResultMessage"></span>
|
|
|
|
|
|
<div class="add" id="addSubLocation" style="margin-left:600px;">
|
|
<a href="#" onclick="toggleaddSubLocation()" class="add-sublocation-link">
|
|
<svg class="sublocation-icon" width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="none"/>
|
|
<line x1="12" y1="7" x2="12" y2="17" stroke="black" stroke-width="2"/>
|
|
<line x1="7" y1="12" x2="17" y2="12" stroke="black" stroke-width="2"/>
|
|
</svg>
|
|
<span class="sublocation-text" tabindex="12">Add New sub location</span>
|
|
</a>
|
|
</div>
|
|
<div id="subClientLocationsForm" >
|
|
<form id="subLocationsForm" style="display: none; width:200%;" action="{% url 'save_sublocation' %}?admin_id={{ admin_id }}" method="post">
|
|
{% csrf_token %}
|
|
<div class="two-col" >
|
|
<div class="col1" style="width:7.5%;">
|
|
<div class="form-group">
|
|
<select id="ParentCompany" name="ParentCompany" required tabindex="1">
|
|
<option value="">Select Client</option>
|
|
</select>
|
|
<label for="ParentCompany" class="required" style="width: 200px;"><b>Parent Company:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="Department" name="Department" style="margin-left: 40px;" required placeholder="Eg. Billing or Accouts or Hiring" tabindex="3">
|
|
<label for="Department" class="required" style="margin-left: 10px;"><b>Department:</b></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="Address_1" name="Address_1" style="margin-left: 48px;" required placeholder="Address_1" tabindex="5">
|
|
<label for="Address_1" class="required" style="margin-left: 10px;"><b>Address_1:</b></label>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-left:-18px">
|
|
<input type="text" id="City" name="City" style="margin-left: 95px;" required placeholder="City" tabindex="7">
|
|
<label for="City" class="required" style="margin-left: 28px;"><b>City:</b></label>
|
|
</div>
|
|
<div class="form-group" style="margin-left:-20px">
|
|
<input type="number" id="Pincode" name="Pincode" style="margin-left: 65px;" required placeholder="500090" tabindex="9" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);">
|
|
<label for="Pincode" class="required" style="margin-left: 28px;"><b>Pincode:</b></label>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col2" style="width:7.5%;">
|
|
<div class="form-group">
|
|
<input type="text" id="GSTNo" name="GSTNo" required placeholder="Eg. LSB009876L1" tabindex="2" style="margin-left: 20px;" pattern="[A-Z0-9]{15}" oninput="this.value = this.value.toUpperCase()">
|
|
<label for="GSTNo" class="required" style="margin-left: 10px;"><b>GST No.</b></label>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-left:-60px">
|
|
<input type="text" id="Location" name="Location" required placeholder="Eg. bangalore"tabindex="4" style="margin-left: 13px;">
|
|
<label for="Location" class="required" style="margin-left: 70px;"><b>Location:</b></label>
|
|
</div>
|
|
<div class="form-group" style="margin-left:-15px">
|
|
<input type="text" id="Address_2" name="Address_2" placeholder="optional" style="margin-left: 10px;" tabindex="6">
|
|
<label for="Address_2" style="margin-left: 28px;"><b>Address_2:</b></label>
|
|
</div>
|
|
<div class="form-group" style="margin-left:-15px">
|
|
<select id="State" name="State" required tabindex="8" style="margin-left: 37px;">
|
|
<option value="" selected disabled>Select State</option>
|
|
<option value="Andhra Pradesh">Andhra Pradesh</option>
|
|
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
|
|
<option value="Assam">Assam</option>
|
|
<option value="Bihar">Bihar</option>
|
|
<option value="Chhattisgarh">Chhattisgarh</option>
|
|
<option value="Goa">Goa</option>
|
|
<option value="Gujarat">Gujarat</option>
|
|
<option value="Haryana">Haryana</option>
|
|
<option value="Himachal Pradesh">Himachal Pradesh</option>
|
|
<option value="Jharkhand">Jharkhand</option>
|
|
<option value="Karnataka">Karnataka</option>
|
|
<option value="Kerala">Kerala</option>
|
|
<option value="Madhya Pradesh">Madhya Pradesh</option>
|
|
<option value="Maharashtra">Maharashtra</option>
|
|
<option value="Manipur">Manipur</option>
|
|
<option value="Meghalaya">Meghalaya</option>
|
|
<option value="Mizoram">Mizoram</option>
|
|
<option value="Nagaland">Nagaland</option>
|
|
<option value="Odisha">Odisha</option>
|
|
<option value="Punjab">Punjab</option>
|
|
<option value="Rajasthan">Rajasthan</option>
|
|
<option value="Sikkim">Sikkim</option>
|
|
<option value="Tamil Nadu">Tamil Nadu</option>
|
|
<option value="Telangana">Telangana</option>
|
|
<option value="Tripura">Tripura</option>
|
|
<option value="Uttar Pradesh">Uttar Pradesh</option>
|
|
<option value="Uttarakhand">Uttarakhand</option>
|
|
<option value="West Bengal">West Bengal</option>
|
|
</select>
|
|
<label for="State" class="required" style="margin-left: 28px;"><b>State:</b></label>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-left:-20px">
|
|
<input type="text" id="country" name="country" value="India" style="margin-left: 20px;"required placeholder="country" tabindex="10">
|
|
<label for="country" class="required" style="margin-left: 35px;"><b>country:</b></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" onclick="saveSubLocation()" tabindex="11" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:380px; margin-top: 10px; padding: 5px; "> Save</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
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";
|
|
}
|
|
|
|
function saveClient() {
|
|
const form = document.getElementById('addClientForm');
|
|
const inputs = form.querySelectorAll('input[required], select[required]');
|
|
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.');
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Parent company already exit.');
|
|
});
|
|
}
|
|
|
|
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;
|
|
|
|
// Highlight the empty field with a red border
|
|
field.style.borderColor = '';
|
|
|
|
// Set a custom validation message
|
|
field.setCustomValidity('Please fill out this field.');
|
|
|
|
// Show the validation message for this field
|
|
field.reportValidity();
|
|
|
|
// Focus the first invalid field
|
|
field.focus();
|
|
|
|
// Exit the loop after finding the first invalid field
|
|
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();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |