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.
141 lines
4.6 KiB
141 lines
4.6 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>Job/Project Table</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>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
table {
|
|
width: 75%;
|
|
border-collapse: collapse;
|
|
margin-left:330px;
|
|
}
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background-color: #F2F2F2;
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #F2F2F2;
|
|
}
|
|
a{
|
|
text-decoration: none;
|
|
}
|
|
.search-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
.search-container input[type="text"] {
|
|
border-radius: 5px;
|
|
height: 20px;
|
|
width: 250px; /* Adjusted width */
|
|
padding-left: 30px; /* Space for the search icon */
|
|
}
|
|
.search-container .fa-magnifying-glass {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: black;
|
|
}
|
|
.head{
|
|
margin-left: 330px;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="position: relative;">
|
|
<div class="head">
|
|
<h2 style="display: inline-block; margin-right: 10px;">All Job Posting:</h2>
|
|
<div class="search" style="display: inline-block;">
|
|
<div class="search-container">
|
|
<i class="fa-solid fa-magnifying-glass" style="position: absolute; left: 210px; top: 58%; transform: translateY(-50%); color: black;"></i>
|
|
<input type="text" placeholder="Search by JobId/SPOC/Client" style=" height: 20px; width: 130%; height: 30px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<table>
|
|
<tr>
|
|
<th>Client</th>
|
|
<th>JobId</th>
|
|
<th>Subject</th>
|
|
<th>SPOC</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>Location</th>
|
|
<th>Openings</th>
|
|
<th>Budget</th>
|
|
<th>Comments</th>
|
|
</tr>
|
|
{% for posting in job_postings %}
|
|
<tr>
|
|
<td>{{ posting.client }}</td>
|
|
<td><a href="#">{{ posting.job_id }}</a></td>
|
|
|
|
<td>{{ posting.job_description }}</td>
|
|
<td>{{ posting.spoc }}</td>
|
|
<td>{{ posting.start_date }}</td>
|
|
<td>{{ posting.close_date }}</td>
|
|
<td>{{ posting.location }}</td>
|
|
<td>{{ posting.no_of_posting }}</td>
|
|
<td>{{ posting.budget_max }} to {{ posting.budget_max }}</td>
|
|
<td>{{ posting.special_instructions }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.querySelector("input[type='text']");
|
|
searchInput.addEventListener("input", debounce(function() {
|
|
const query = this.value.trim();
|
|
|
|
// Modify the URL in the address bar without reloading the page
|
|
const newUrl = `${window.location.origin}${window.location.pathname}?query=${encodeURIComponent(query)}`;
|
|
history.pushState({ path: newUrl }, '', newUrl);
|
|
|
|
fetch(`./?query=${encodeURIComponent(query)}`) // Adjusted to relative path
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, "text/html");
|
|
const newBody = doc.querySelector("tbody");
|
|
const oldBody = document.querySelector("table tbody");
|
|
if (oldBody && newBody) {
|
|
oldBody.parentNode.replaceChild(newBody, oldBody);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching filtered job postings:', error));
|
|
}, 500));
|
|
});
|
|
|
|
function debounce(func, wait, immediate) {
|
|
var timeout;
|
|
return function() {
|
|
var context = this, args = arguments;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(function() {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
}, wait);
|
|
if (immediate && !timeout) func.apply(context, args);
|
|
};
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|