From 14e802da965e9cb7787a50eacbab9bfa1c3c4f00 Mon Sep 17 00:00:00 2001
From: LinuxSquare <linuxscripting.sh@gmail.com>
Date: Sat, 9 Mar 2024 13:48:08 +0100
Subject: [PATCH] Add dynamic jobs page

---
 layouts/shortcodes/jobs.html    |  9 +++---
 static/js/jobs.js               | 54 +++++++++++++++++++++++++++++++++
 static/js/team.js               |  2 +-
 {data => static/json}/jobs.json |  0
 4 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 static/js/jobs.js
 rename {data => static/json}/jobs.json (100%)

diff --git a/layouts/shortcodes/jobs.html b/layouts/shortcodes/jobs.html
index 12e89bc..d671022 100644
--- a/layouts/shortcodes/jobs.html
+++ b/layouts/shortcodes/jobs.html
@@ -1,6 +1,6 @@
 <!-- Get Data maybe from strapi -->
-<div class="flex flex-col">
-  <!-- Check if open jobs are available -->
+<div id="jobsContainer" class="flex flex-col">
+  <!-- Check if open jobs are available
   {{ if le (index (.Site.Data.jobs) 0) 0 }}
     <div class="flex-auto">
       <h2>There are currently no open jobs to apply for</h2>
@@ -8,7 +8,7 @@
     </div>
   {{ end }}
 
-  <!-- Range through all available job offerings -->
+  Range through all available job offerings
   {{ range .Site.Data.jobs }}
     <div class="flex-auto">
       <h2>{{.title}}</h2>
@@ -31,8 +31,9 @@
       type="button" 
       class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 max-w-2xs"
       onclick="openApplyForm('{{.title}}')">Apply</button>
-  {{ end }}
+  {{ end }} -->
 </div>
+<script src="/js/jobs.js"></script>
 
 <form action="/" id="apply-form" class="invisible">
   <div class="color-background"></div>
diff --git a/static/js/jobs.js b/static/js/jobs.js
new file mode 100644
index 0000000..4ffbc0c
--- /dev/null
+++ b/static/js/jobs.js
@@ -0,0 +1,54 @@
+let jobsContainer = document.getElementById("jobsContainer")
+
+fetch('/json/jobs.json')
+  .then((response) => response.json())
+  .then((json) => {
+    json.forEach((job) => {
+      const jobContainer = document.createElement("div");
+      jobContainer.classList.add("flex-auto");
+
+      const jobTitle = document.createElement("h2");
+      jobTitle.innerHTML = job.title;
+      jobContainer.appendChild(jobTitle)
+      if(job.sub.length > 0) {
+        const jobIcons = document.createElement("div");
+        jobIcons.classList.add("flex", "flex-row", "text-2xl");
+        job.sub.forEach((icon) => {
+          let iconObject
+          switch(icon.source) {
+            case "mdi":
+              iconObject = document.createElement("span");
+              iconObject.classList.add("iconify");
+              iconObject.setAttribute("data-icon", "mdi-"+icon.icon+"");
+              break;
+              case "simpleicons":
+                iconObject = document.createElement("span");
+                iconObject.classList.add("icon");
+                const iconImg = document.createElement("img");
+                iconImg.height = 20;
+                iconImg.width = 20;
+                iconImg.src = "https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/"+icon.icon+".svg"
+                iconObject.appendChild(iconImg);
+                break;
+          }
+          jobIcons.appendChild(iconObject);
+        });
+        jobContainer.appendChild(jobIcons);
+      }
+
+      const jobDescription = document.createElement("p");
+      jobDescription.innerHTML = job.description;
+      jobContainer.appendChild(jobDescription);
+
+      const applyButton = document.createElement("button");
+      applyButton.type = "button"
+      applyButton.classList.add("text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-sm", "px-5", "py-2.5", "text-center", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800", "max-w-2xs");
+      applyButton.addEventListener("click", () => {
+        openApplyForm(job.title)
+      })
+      applyButton.innerHTML = "Apply"
+      
+      jobsContainer.appendChild(jobContainer)
+      jobContainer.appendChild(applyButton)
+    });
+  });
diff --git a/static/js/team.js b/static/js/team.js
index b821169..84e5f62 100644
--- a/static/js/team.js
+++ b/static/js/team.js
@@ -1,4 +1,4 @@
-teamContainer = document.getElementById("teamContainer");
+let teamContainer = document.getElementById("teamContainer");
 
 function ucFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
diff --git a/data/jobs.json b/static/json/jobs.json
similarity index 100%
rename from data/jobs.json
rename to static/json/jobs.json