initial project commit

web/static/index.js

@@ -0,0 +1,102 @@
+// 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();
+});