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.
400 lines
16 KiB
400 lines
16 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Client Details</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center; /* Center align the heading */
|
|
}
|
|
h2 {
|
|
margin-top: 20px; /* Add some top margin to the heading */
|
|
}
|
|
.tab {
|
|
float: left;
|
|
width: 25%;
|
|
height: 50px;
|
|
background-color: #f1f1f1;
|
|
border-right: 1px solid #ccc;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
cursor: pointer;
|
|
}
|
|
.tab:last-child {
|
|
border-right: none;
|
|
}
|
|
.tabcontent {
|
|
display: none;
|
|
padding: 20px;
|
|
clear: both;
|
|
overflow: auto;
|
|
}
|
|
.two-col {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.col1, .col2 {
|
|
flex: 0 0 48%;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
input[type="text"], select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
box-sizing: border-box;
|
|
}
|
|
button[type="submit"] {
|
|
margin-left: 16%;
|
|
width: 100px;
|
|
padding: 8px;
|
|
color: black;
|
|
background-color: lightblue;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.add {
|
|
margin-top: 20px;
|
|
}
|
|
.circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: lightblue;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
.add a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
.search-fields {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-fields label {
|
|
flex: 0 0 auto;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.search-fields select {
|
|
flex: 1;
|
|
}
|
|
|
|
.search-fields button {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Client Details</h2> <!-- Heading centered above the tabs -->
|
|
<div class="tab" onclick="openTab('existingClient')">Client Details</div>
|
|
|
|
<div class="tab" onclick="openTab('existingClient')">Existing Client</div>
|
|
<div class="tab" onclick="openTab('addNewClient')">Add New Client</div>
|
|
<div class="tab" onclick="openTab('addSubClients')">Add Sub Clients/Locations</div>
|
|
|
|
<div id="existingClient" class="tabcontent">
|
|
<h3>Existing Client</h3>
|
|
<div class="search-fields">
|
|
<label for="parentCompanyDropdown">Parent Company</label>
|
|
<select id="parentCompanyDropdown" name="parentCompany" required>
|
|
<option value="" disabled selected>Select Parent Company</option>
|
|
<option value="Oracle India">Oracle India</option>
|
|
<option value="Persistent Systems">Persistent Systems</option>
|
|
<option value="Tech Mahendra">Tech Mahendra</option>
|
|
<option value="GS Labs">GS Labs</option>
|
|
<!-- Add other options here -->
|
|
</select>
|
|
|
|
<label for="Location">Location</label>
|
|
<select id="Location" name="Location" required>
|
|
<option value="" disabled selected>Select Location</option>
|
|
<option value="all">All</option>
|
|
<option value="hyderabad">Hyderabad</option>
|
|
<option value="bangalore">Bangalore</option>
|
|
<option value="pune">Pune</option>
|
|
</select>
|
|
|
|
<button onclick="fetchAndDisplayData()">Submit</button>
|
|
</div>
|
|
<iframe id="combinedDataIframe" style="width: 100%; height: 400px;"></iframe>
|
|
</div>
|
|
|
|
<div id="addNewClient" class="tabcontent">
|
|
<h3>Add New Client</h3>
|
|
<form id="addClientForm" action="{% url 'save_details' %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="two-col">
|
|
<div class="col1">
|
|
<div class="form-group">
|
|
<label for="ParentCompany">Parent Company</label>
|
|
<select id="ParentCompany" name="ParentCompany" required>
|
|
<option value="" disabled selected>Select Parent Company</option>
|
|
<option value="Oracle India">Oracle India</option>
|
|
<option value="Persistent Systems">Persistent Systems</option>
|
|
<option value="Tech Mahendra">Tech Mahendra</option>
|
|
<!-- Add other options here -->
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Location">Location</label>
|
|
<input type="text" id="Location" name="Location" required placeholder="Location">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Department">Department</label>
|
|
<input type="text" id="Department" name="Department" required placeholder="Department">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="GSTNo">GST No.</label>
|
|
<input type="text" id="GSTNo" name="GSTNo" required placeholder="GST No.">
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<div class="form-group">
|
|
<label for="Address">Address</label>
|
|
<input type="text" id="Address" name="Address" required placeholder="Address">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 style="text-align: center; margin-bottom: 20px;">Admin Department Contact person Name for the Above office location*</h3>
|
|
<div class="container1">
|
|
<div class="two-col">
|
|
<div class="col1">
|
|
<div class="form-group">
|
|
<label for="Admin_FirstName">First Name</label>
|
|
<input type="text" id="Admin_FirstName" name="Admin_FirstName" required placeholder="First Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_PhoneNo1">Phone No1</label>
|
|
<input type="text" id="Admin_PhoneNo1" name="Admin_PhoneNo1" required placeholder="Phone No1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_CompanyEmail">Company Email</label>
|
|
<input type="text" id="Admin_CompanyEmail" name="Admin_CompanyEmail" required placeholder="Company Email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Designation">Designation</label>
|
|
<input type="text" id="Admin_Designation" name="Admin_Designation" required placeholder="Designation">
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<div class="form-group">
|
|
<label for="Admin_LastName">Last Name</label>
|
|
<input type="text" id="Admin_LastName" name="Admin_LastName" required placeholder="Last Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_PhoneNo2">Phone No2</label>
|
|
<input type="text" id="Admin_PhoneNo2" name="Admin_PhoneNo2" required placeholder="Phone No2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Location">Location</label>
|
|
<input type="text" id="Admin_Location" name="Admin_Location" required placeholder="Location">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Department">Department</label>
|
|
<input type="text" id="Admin_Department" name="Admin_Department" required placeholder="Department">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" id="saveButton">Save</button>
|
|
<div class="add">
|
|
<a href="{% url 'client-details' %}">
|
|
<span class="circle">+</span>
|
|
<p>Add New sub location</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="addSubClients" class="tabcontent">
|
|
<h3>Add Sub Clients/Locations</h3>
|
|
<form id="addSubClientForm" action="{% url 'save-details-subcompany' %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="two-col">
|
|
<div class="col1">
|
|
<div class="form-group">
|
|
<label for="ParentCompany">Parent Company</label>
|
|
<select id="ParentCompany" name="ParentCompany" required>
|
|
<option value="" disabled selected>Select Parent Company</option>
|
|
<option value="Oracle India">Oracle India</option>
|
|
<option value="Persistent Systems">Persistent Systems</option>
|
|
<option value="Tech Mahendra">Tech Mahendra</option>
|
|
<!-- Add other options here -->
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Location">Location</label>
|
|
<input type="text" id="Location" name="Location" required placeholder="Location">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Department">Department</label>
|
|
<input type="text" id="Department" name="Department" required placeholder="Department">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="GSTNo">GST No.</label>
|
|
<input type="text" id="GSTNo" name="GSTNo" required placeholder="GST No.">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="SubCompany">Sub Company</label>
|
|
<input type="text" id="SubCompany" name="SubCompany" required placeholder="Sub Company">
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<div class="form-group">
|
|
<label for="Address">Address</label>
|
|
<input type="text" id="Address" name="Address" required placeholder="Address">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 style="text-align: center; margin-bottom: 20px;">Department Contact person Name for the Above office location*</h3>
|
|
<div class="container1">
|
|
<div class="two-col">
|
|
<div class="col1">
|
|
<div class="form-group">
|
|
<label for="Admin_FirstName">First Name</label>
|
|
<input type="text" id="Admin_FirstName" name="Admin_FirstName" required placeholder="First Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_PhoneNo1">Phone No1</label>
|
|
<input type="text" id="Admin_PhoneNo1" name="Admin_PhoneNo1" required placeholder="Phone No1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_CompanyEmail">Company Email</label>
|
|
<input type="text" id="Admin_CompanyEmail" name="Admin_CompanyEmail" required placeholder="Company Email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Designation">Designation</label>
|
|
<input type="text" id="Admin_Designation" name="Admin_Designation" required placeholder="Designation">
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<div class="form-group">
|
|
<label for="Admin_LastName">Last Name</label>
|
|
<input type="text" id="Admin_LastName" name="Admin_LastName" required placeholder="Last Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_PhoneNo2">Phone No2</label>
|
|
<input type="text" id="Admin_PhoneNo2" name="Admin_PhoneNo2" required placeholder="Phone No2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Location">Location</label>
|
|
<input type="text" id="Admin_Location" name="Admin_Location" required placeholder="Location">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="Admin_Department">Department</label>
|
|
<input type="text" id="Admin_Department" name="Admin_Department" required placeholder="Department">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" id="saveButton">Save</button>
|
|
<div class="add">
|
|
<a href="{% url 'client-details' %}">
|
|
<span class="circle">+</span>
|
|
<p>Add New sub location</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
function openTab(tabName) {
|
|
var i, tabcontent;
|
|
tabcontent = document.getElementsByClassName("tabcontent");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
}
|
|
function fetchAndDisplayData() {
|
|
const parentCompany = document.getElementById('parentCompanyDropdown').value;
|
|
const location = document.getElementById('Location').value;
|
|
|
|
fetchCombinedDetails(parentCompany, location);
|
|
}
|
|
|
|
function fetchCombinedDetails(parentCompany, location) {
|
|
fetch(`/skyonnadmin/get_subcompany_details/?parent_company=${parentCompany}&location=${location}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update the iframe with the combined data
|
|
const iframe = document.getElementById('combinedDataIframe');
|
|
const htmlContent = generateHTML(data);
|
|
iframe.contentWindow.document.open();
|
|
iframe.contentWindow.document.write(htmlContent);
|
|
iframe.contentWindow.document.close();
|
|
})
|
|
.catch(error => console.error('Error fetching combined details:', error));
|
|
}
|
|
|
|
|
|
function generateHTML(data) {
|
|
let html = '<html><head><title>Combined Data</title></head><body>';
|
|
html += '<h2>Combined Data</h2>';
|
|
html += '<table border="1"><tr>';
|
|
|
|
// Add table headers
|
|
const columns = Object.keys(data[0]);
|
|
columns.forEach(column => {
|
|
if (column !== 'sub_company') { // Ignore 'sub_company' field here
|
|
html += `<th>${column}</th>`;
|
|
}
|
|
});
|
|
// Add separate column for 'sub_company'
|
|
html += '<th>Sub Company</th>';
|
|
|
|
html += '</tr>';
|
|
|
|
// Add data rows
|
|
data.forEach(detail => {
|
|
html += '<tr>';
|
|
columns.forEach(column => {
|
|
if (column !== 'sub_company') { // Ignore 'sub_company' field here
|
|
html += `<td>${detail[column]}</td>`;
|
|
}
|
|
});
|
|
// Add value for 'sub_company' column or empty if it doesn't exist
|
|
html += `<td>${detail.sub_company || ''}</td>`;
|
|
html += '</tr>';
|
|
});
|
|
|
|
html += '</table></body></html>';
|
|
return html;
|
|
}
|
|
|
|
document.getElementById('parentCompanyDropdown').addEventListener('change', function() {
|
|
const selectedParentCompany = this.value;
|
|
const selectedLocation = document.getElementById('Location').value;
|
|
fetchCombinedDetails(selectedParentCompany, selectedLocation);
|
|
});
|
|
|
|
document.getElementById('Location').addEventListener('change', function() {
|
|
const selectedLocation = this.value;
|
|
const selectedParentCompany = document.getElementById('parentCompanyDropdown').value;
|
|
fetchCombinedDetails(selectedParentCompany, selectedLocation);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|