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.
406 lines
18 KiB
406 lines
18 KiB
2 weeks ago
|
<!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>
|
||
|
|
.internal-team{
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
.search-container1 {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 20px;
|
||
|
|
margin-top:20px;
|
||
|
|
border-radius:30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-container1 input[type="text"] {
|
||
|
|
height: 30px;
|
||
|
|
padding-right: 30px;
|
||
|
|
border-radius:10px;
|
||
|
|
border-color:black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-container1 button {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0px;
|
||
|
|
height: 100%;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0 10px;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-container1 button:hover {
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
width: 75rem;
|
||
|
|
margin: auto;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.two-col {
|
||
|
|
display: flex;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-left: 100px;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
align-items: center;
|
||
|
|
width:120%;
|
||
|
|
}
|
||
|
|
.form-group label {
|
||
|
|
margin-left: 10px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#Address {
|
||
|
|
margin-left: 40px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
ul {
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
margin-left: 500px;
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
#Existing_employeeform{
|
||
|
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
transform: scale(0.7);
|
||
|
|
transform-origin: 0 0;
|
||
|
|
width: 150%;
|
||
|
|
margin-left: -100px;
|
||
|
|
background-color:white;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 8px;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
background-color: #ACC7D2;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.table-container {
|
||
|
|
margin-left: 240px;
|
||
|
|
max-height: 900px; /* Set the height as needed */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
word-break: break-word;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
.modal {
|
||
|
|
display: none; /* Hidden by default */
|
||
|
|
position: fixed; /* Sit on top */
|
||
|
|
left: 200px;
|
||
|
|
top: 0;
|
||
|
|
width: 40%; /* Full width */
|
||
|
|
height: 80%; /* Full height */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 15% auto; /* 15% from the top and centered */
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px white;
|
||
|
|
width: 50%; /* Could be more or less, depending on screen size */
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
|
|
border-radius: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.close-button {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 15px;
|
||
|
|
color: #aaa;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: bold;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.modal-content .separator {
|
||
|
|
background-color: red; /* Vertical line styling */
|
||
|
|
width: 1px; /* Line thickness */
|
||
|
|
height: auto; /* Automatically adjust height to match content */
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-button:hover,
|
||
|
|
.close-button:focus {
|
||
|
|
color: red;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="internal-team">
|
||
|
|
<div class="heading" style="margin-left:150px; margin-top:25px; color:#054560; ">
|
||
|
|
<b style="margin-top:0px; margin-left:200px; text-decoration: none;">
|
||
|
|
Skyonn Technologies:
|
||
|
|
</b> Internal Team_Details
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" onclick="toggleForm('add_employeeform')" style="margin-left:-150px;">Add Employee</a></li>
|
||
|
|
<li><a href="#" id ="Existing_employeeLink" onclick="toggleForm('Existing_employeeform')" style="margin-left:40px;">Existing Employee</a></li>
|
||
|
|
<div class="search-container1">
|
||
|
|
<input type="text" id="searchInput" placeholder="Search Employee.." onkeyup="searchEmployee()" style="margin-left:30px; margin-top:-10px;">
|
||
|
|
<button type="button" id="searchButton" onclick="searchEmployee()"><i class="fa fa-search"></i></button>
|
||
|
|
</div>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="container" id="add_employeeform" style="display: none; margin-left:50px;">
|
||
|
|
<form id="internal-team" action="{% url 'save_Internal_team_Details' %}?admin_id={{ admin_id }}" method="post" style="margin-left: 100px">
|
||
|
|
{% csrf_token %}
|
||
|
|
|
||
|
|
<div class="form-group" style="margin-left:-600px; margin-bottom:30px">
|
||
|
|
|
||
|
|
<input type="file" id="excelFile" onchange="UploadExcel()" style="width:150; margin-left:5px" name="excelFile" required accept=".xlsx">
|
||
|
|
<b style="margin-left:20px">Upload ExcelFile:</b>
|
||
|
|
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="two-col">
|
||
|
|
<div class="col1">
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="FirstName" name="FirstName" required placeholder="Firstname" style="margin-left:55px" tabindex="1">
|
||
|
|
<label for="FirstName" class="required" style="margin-left:-0px;">First name</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Designation" name="Designation" required placeholder="Eg.Designation" style="margin-left:45px" tabindex="3">
|
||
|
|
<label for="Designation" style="margin-left:-0px;" class="required">Designation</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Address_1" name="Address_1" required placeholder="Address_1" style="margin-left:0px" tabindex="5">
|
||
|
|
<label for="Address_1" style="margin-left:-0px;" class="required"> Home Address_1:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="City" name="City" required placeholder="City" style="margin-left:97px" tabindex="7">
|
||
|
|
<label for="City" style="margin-left:-0px;" class="required">City:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="number" id="Pincode" name="Pincode" required placeholder="500090" maxlength="6" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{20" style="margin-left:62px" tabindex="9">
|
||
|
|
<label for="Pincode" style="margin-left:-0px;" class="required">Pincode:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="PhoneNo1" name="PhoneNo1" required placeholder="Phone No1*" maxlength="10" style="margin-left:55px" tabindex="11">
|
||
|
|
<label for="PhoneNo1" style="margin-left:-0px;" class="required">MobileNo</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="email" id="Email1" name="Email1" required placeholder="Email1*" style="margin-left:5px" tabindex="13">
|
||
|
|
<label for="Email" style="margin-left:-0px;" class="required">Company_Email</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col2" style="margin-left: 70px">
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="LastName" name="LastName" required placeholder="LastName" style="margin-left:54px" tabindex="2">
|
||
|
|
<label for="LastName" class="required">Last Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Department" name="Department" required placeholder="Eg.Department" style="margin-left:47px" tabindex="4">
|
||
|
|
<label for="Department" class="required">Department</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Address_2" name="Address_2" placeholder="Address_2" style="margin-left:10px" tabindex="6">
|
||
|
|
<label for="Address_2">Home Address_2:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<select id="State" name="State" required style="margin-left:90px" tabindex="8">
|
||
|
|
<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">State:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Country" name="Country" value="India" required placeholder="Country" style="margin-left:67px" tabindex="10">
|
||
|
|
<label for="Country" class="required">Country:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="LandNumber" name="LandNumber" maxlength="20" required placeholder="040 1111 1111" style="margin-left:65px" tabindex="12">
|
||
|
|
<label for="LandNumber" class="required">Land_No:</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="email" id="Email2" name="Email2" placeholder="Email_2*" style="margin-left:15px" tabindex="14">
|
||
|
|
<label for="Email" class="required">Personal_Email</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<select id="Level" name="Level" required style="margin-left:85px" tabindex="15">
|
||
|
|
<option value="" selected disabled>Select Level</option>
|
||
|
|
<option value="Level 1">Level 1</option>
|
||
|
|
<option value="Level 2">Level 2</option>
|
||
|
|
<option value="Level 3">Level 3</option>
|
||
|
|
<option value="Level 4">Level 4</option>
|
||
|
|
<option value="Level 5">Level 5</option>
|
||
|
|
<option value="Level 6">Level 6</option>
|
||
|
|
<option value="Level 7">Level 7</option>
|
||
|
|
<option value="Level 8">Level 8</option>
|
||
|
|
<option value="Level 9">Level 9</option>
|
||
|
|
<option value="Level 10">Level 10</option>
|
||
|
|
<option value="Level 11">Level 11</option>
|
||
|
|
<option value="Level 12">Level 12</option>
|
||
|
|
</select>
|
||
|
|
<label for="Level" class="required">Level:</label>
|
||
|
|
</div>
|
||
|
|
<form id="UploadExcelForm" method="post" action="{% url 'load_excel_data' %}?admin_id={{admin_id}}" style="margin-right: -350px; width:50px">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button type="button" onclick="saveInternal_team_details()" style="margin-left: 40%; width: 100px; margin-top: 10px; padding: 2px; color:black; background-color:lightgreen; border-radius:15%"tabindex="16" >Save</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="container" id="Existing_employeeform" style="display: none;width:90rem;margin-left:110px;">
|
||
|
|
<div class="table-container">
|
||
|
|
<table style="font-size: 17px">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>FirstName</th>
|
||
|
|
<th>LastName</th>
|
||
|
|
<th>Designation</th>
|
||
|
|
<th>Department</th>
|
||
|
|
<th>MobileNo</th>
|
||
|
|
<th>LandNumber</th>
|
||
|
|
<th>Company_Email</th>
|
||
|
|
<th>Personal_Email</th>
|
||
|
|
<th>Level</th>
|
||
|
|
<th style="width:200px;">Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="employeeTableBody">
|
||
|
|
<!-- Employee rows will be dynamically inserted here -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<!-- Modal Structure -->
|
||
|
|
<div id="detailsModal" class="modal" style="margin-left:180px; display:none; width:60%; margin-top:-30px; height:auto;">
|
||
|
|
<div class="modal-content" >
|
||
|
|
|
||
|
|
<p><strong>FirstName:</strong> <span id="FirstName_1" style="margin-left:62px"></span></p><br>
|
||
|
|
<p><strong>LastName:</strong> <span id="LastName_1" style="margin-left:64px"></span></p><br>
|
||
|
|
<p><strong>Designation:</strong> <span id="Designation_1" style="margin-left:50px"></span></p><br>
|
||
|
|
<p><strong>Department:</strong> <span id="Department_1" style="margin-left:52px"></span></p><br>
|
||
|
|
<p><strong>Home Address_1:</strong> <span id="Address_1_1" style="margin-left:10px"></span></p><br>
|
||
|
|
<p><strong>Home Address_2:</strong> <span id="Address_2_1" style="margin-left:10px" ></span></p><br>
|
||
|
|
<p><strong>City:</strong> <span id="City_1" style="margin-left:110px"></span></p><br>
|
||
|
|
<p><strong>State:</strong> <span id="State_1" style="margin-left:100px" ></span></p><br>
|
||
|
|
<p><strong>Pincode:</strong> <span id="Pincode_1" style="margin-left:78px"></span></p><br>
|
||
|
|
<p><strong>Country:</strong> <span id="Country_1" style="margin-left:78px"></span></p><br>
|
||
|
|
<p><strong>PhoneNo1:</strong> <span id="PhoneNo1_1" style="margin-left:60px"></span></p><br>
|
||
|
|
<p><strong>LandNumber:</strong> <span id="LandNumber_1" style="margin-left:40px"></span></p><br>
|
||
|
|
<p><strong>Company_Email:</strong> <span id="Email1_1" style="margin-left:15px"></span></p><br>
|
||
|
|
<p><strong>Personal_Email:</strong> <span id="Email2_1" style="margin-left:20px"></span></p><br>
|
||
|
|
<p><strong>Level:</strong> <span id="Level_1" style="margin-left:98px"></span></p><br>
|
||
|
|
|
||
|
|
<button id="closePopup" style="background-color:red; color:white; border-radius:5px; border: 1px red;padding: 10px;
|
||
|
|
width:60px; margin-left:100px" >close</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
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';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|