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

<!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>