103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
// Update the table with job data
|
|
function updateTableData(jobs) {
|
|
const jobsContainer = document.getElementById("jobs");
|
|
jobsContainer.innerHTML = ""; // Clear existing jobs
|
|
jobs.forEach((job) => {
|
|
const jobElement = document.createElement("div");
|
|
jobElement.classList.add("job");
|
|
jobElement.innerHTML = `
|
|
<h3><a href="${job.url}" target="_blank">${job.title}</a></h3>
|
|
<p class="job-posted-time">${job.posted_time}</p>
|
|
<span class="job-region region-${job.region
|
|
.replace(" ", "")
|
|
.toLowerCase()}">${job.region}</span>
|
|
<span class="job-keyword keyword-${job.keyword
|
|
.replace(" ", "")
|
|
.toLowerCase()}">${job.keyword}</span>
|
|
`;
|
|
jobsContainer.appendChild(jobElement);
|
|
});
|
|
}
|
|
|
|
// Fetch job data from the server
|
|
function fetchJobs() {
|
|
fetch("/jobs")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
updateTableData(data);
|
|
})
|
|
.catch((error) => console.error("Error fetching jobs:", error));
|
|
}
|
|
|
|
// scrape form submission
|
|
function updateScrapeInfo(message, color) {
|
|
let scrapingInfo = document.getElementById("scrape-info");
|
|
scrapingInfo.style.display = "inline-block"; // Show the scraping info
|
|
scrapingInfo.innerText = message;
|
|
scrapingInfo.style.color = color;
|
|
}
|
|
|
|
function scrape(event) {
|
|
event.preventDefault(); // Prevent the default form submission
|
|
updateScrapeInfo("Scraping in progress...", "blue");
|
|
fetch("/scrape")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.status) {
|
|
updateScrapeInfo(data.status, "green");
|
|
} else {
|
|
updateScrapeInfo("Scraping failed. Please try again.", "red");
|
|
}
|
|
})
|
|
.catch((error) => console.error("Error:", error));
|
|
}
|
|
|
|
function updateJobsFiltered() {
|
|
const selectedRegion = document.getElementById("region").value;
|
|
const selectedKeyword = document.getElementById("keyword").value;
|
|
const filterForm = document.getElementById("filter-form");
|
|
const queryString = new URLSearchParams({
|
|
region: selectedRegion,
|
|
keyword: selectedKeyword,
|
|
}).toString();
|
|
filterForm.action = `/?${queryString}`;
|
|
filterForm.submit(); // Submit the form to apply filters
|
|
}
|
|
|
|
function regionClick(event) {
|
|
const region = event.target.innerText;
|
|
const regionInput = document.getElementById("region");
|
|
regionInput.value = region;
|
|
updateJobsFiltered();
|
|
}
|
|
|
|
function keywordClick(event) {
|
|
const keyword = event.target.innerText;
|
|
const keywordInput = document.getElementById("keyword");
|
|
keywordInput.value = keyword;
|
|
updateJobsFiltered();
|
|
}
|
|
|
|
document.querySelectorAll(".job-keyword").forEach((element) => {
|
|
element.addEventListener("click", keywordClick);
|
|
});
|
|
document.querySelectorAll(".job-region").forEach((element) => {
|
|
element.addEventListener("click", regionClick);
|
|
});
|
|
|
|
document.getElementById("scrape-form").addEventListener("submit", scrape);
|
|
document
|
|
.getElementById("region")
|
|
.addEventListener("change", updateJobsFiltered);
|
|
document
|
|
.getElementById("keyword")
|
|
.addEventListener("change", updateJobsFiltered);
|
|
document
|
|
.getElementById("filter-form")
|
|
.addEventListener("submit", updateJobsFiltered);
|
|
document.getElementById("reset-filters").addEventListener("click", () => {
|
|
document.getElementById("region").value = "";
|
|
document.getElementById("keyword").value = "";
|
|
updateJobsFiltered();
|
|
});
|