templates/includes/blocks/jobs.html.twig line 1

  1. {% set propertyName = propertyName|default('blocks') %}
  2. <style>
  3.     .custom-job-listing {
  4.         position: relative;
  5.         width: 100%;
  6.         padding-bottom: 1rem;
  7.     }
  8.     .job-list.job-list {
  9.         list-style-type: none;
  10.         padding: 0;
  11.         margin-left: 0;
  12.     }
  14.     .job-list__item {
  15.         margin-bottom: 5px;
  16.         border-bottom: 1px solid #ddd;
  17.         padding-bottom: 2px;
  18.         font-size: 0.9em;
  19.         display: flex;
  21.         & h5, h6 {
  22.             color: var(--color-primary);
  23.             text-decoration: none;
  24.             font-weight: 700;
  25.             font-family: Roboto, sans-serif;
  26.             font-style: normal;
  27.         }
  28.         & h5 {
  29.             font-size: 29px;
  30.         }
  31.         & h6 {
  32.             font-size: 18px;
  33.         }
  34.     }
  36.     @media (max-width: 640px) {
  37.         .job-list__item {
  38.             flex-direction: column;
  39.         }
  40.     }
  42.     .job-list__item__left {
  43.         display: flex;
  44.         flex-direction: column;
  45.         flex-grow: 1;
  46.     }
  48.     .job-list__item__right {
  49.         display: flex;
  50.         flex-direction: column;
  51.     }
  53.     .job-list__link {
  54.     }
  56.     .job-list__link:hover {
  58.     }
  60.     .job-list__title {
  61.         font-size: 1.1em;
  62.     }
  64.     .pagination {
  65.         display: flex;
  66.         justify-content: center;
  67.         margin-top: 20px;
  68.     }
  70.     .pagination__button {
  71.         padding: 5px 10px;
  72.         margin: 0 5px;
  73.         background-color: #007bff;
  74.         color: white;
  75.         border: none;
  76.         border-radius: 4px;
  77.         cursor: pointer;
  78.     }
  80.     .pagination__button:disabled {
  81.         background-color: #ccc;
  82.         cursor: default;
  83.     }
  85.     .pagination__page-number {
  86.         font-size: larger;
  87.     }
  88.     .loading-overlay {
  89.         display: none; /* Standardmäßig versteckt */
  90.         position: absolute; /* Positionierung über dem gesamten Inhalt */
  91.         top: 0;
  92.         left: 0;
  93.         width: 100%;
  94.         height: 100%;
  95.         background: rgba(255, 255, 255, 0.5); /* Leicht transparenter Hintergrund */
  96.         backdrop-filter: blur(5px); /* Unscharfer Hintergrund-Effekt */
  97.         justify-content: center;
  98.         align-items: center;
  99.         z-index: 1000; /* Stellt sicher, dass es über anderen Elementen liegt */
  100.     }
  101.     .loading-indicator {
  102.         font-size: 1.5em;
  103.     }
  104.     .job-counter{
  105.         font-size: small;
  106.     }
  108. </style>
  109. <div class="grid-container">
  110.     <div class="grid-x grid-margin-x">
  111.         <div class="custom-job-listing">
  112.             <div class="loading-overlay">
  113.                 <div class="loading-indicator">Jobs werden geladen...</div>
  114.             </div>
  116.             <ul class="job-list">
  117.             </ul>
  118.             <div class="job-counter"></div>
  119.             <div class="error-message" style="display: none"></div>
  121.             <div class="pagination">
  122.                 <button class="pagination__button pagination__button--prev">Zurück</button>
  123.                 <span class="pagination__page-number">1</span>
  124.                 <button class="pagination__button pagination__button--next">Weiter</button>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </div>
  129. <script>
  130.     document.addEventListener("DOMContentLoaded", function () {
  131.         const jobManager = new JobManager();
  132.         jobManager.init();
  133.     });
  135.     class JobManager {
  136.         constructor() {
  137.             this.currentPage = 1;
  138.             this.pageSize = 10;
  139.             this.searchText = "";
  141.             this.searchZipCode = "";
  142.             this.searchZipCodeRadius = 50;
  144.             this.totalPages = 0;
  145.             this.artemisUrl = "https://ndh.artemis.aveo-solutions.net/GetAktuelleStellenanzeigen";
  146.         }
  148.         init() {
  149.             this.fetchJobs();
  150.             this.setupEventListeners();
  151.         }
  153.         fetchJobs() {
  154.             this.showLoadingIndicator(true);
  155.             const url = `${this.artemisUrl}?perPage=${this.pageSize}&page=${this.currentPage}&suchText=${this.searchText}&suchOrt=${this.searchZipCode}&radius=${this.searchZipCodeRadius}`;
  156.             fetch(url)
  157.                 .then((response) => this.handleResponse(response))
  158.                 .then((data) => this.processJobData(data))
  159.                 .catch((error) => this.handleError(error))
  160.                 .finally(() => this.showLoadingIndicator(false));
  161.         }
  163.         handleResponse(response) {
  164.             if (!response.ok) {
  165.                 throw new Error(`HTTP error! status: ${response.status}`);
  166.             }
  167.             return response.json();
  168.         }
  170.         processJobData(data) {
  171.             this.updateJobCount(data.totalResults);
  172.             this.displayJobs(data.results);
  173.             this.updatePagination(data.totalResults);
  174.         }
  176.         updateJobCount(totalJobs) {
  177.             this.totalJobs = totalJobs;
  178.             this.updateJobRangeDisplay();
  179.         }
  181.         displayJobs(jobs) {
  182.             const jobsList = document.querySelector(".job-list");
  183.             jobsList.innerHTML = jobs.map((job) => this.jobTemplate(job)).join("");
  184.         }
  186.         jobTemplate(job) {
  187.             console.log(job);
  188.             return `
  189.             <li class="job-list__item">
  190.                 <div class="job-list__item__left">
  191.                     <h6>${job.arbeitsort}</h6>
  192.                     <a class="job-list__link" href="${job.bewerbenUrl}" target="_blank">
  193.                         <h5>${job.name}</h5>
  194.                     </a>
  195.                 </div>
  196.                 <div class="job-list__item__right">
  197.                     <a class="button-wrapper pt-0" href="${job.bewerbenUrl}" target="_blank" rel="external">
  198.                         <span class="btn btn-primary">
  199.                             Details
  200.                         </span>
  201.                     </a>
  202.                 </div>
  203.             </li>
  204.           `;
  205.         }
  207.         updatePagination(totalJobs) {
  208.             this.totalPages = Math.ceil(totalJobs / this.pageSize);
  209.             this.updatePaginationControls();
  210.         }
  212.         setupEventListeners() {
  213.             document
  214.                 .querySelector(".pagination__button--prev")
  215.                 .addEventListener("click", () => this.changePage(-1));
  216.             document
  217.                 .querySelector(".pagination__button--next")
  218.                 .addEventListener("click", () => this.changePage(1));
  219.         }
  221.         changePage(delta) {
  222.             const newPage = this.currentPage + delta;
  223.             if (newPage > 0 && newPage <= this.totalPages) {
  224.                 this.currentPage = newPage;
  225.                 this.fetchJobs();
  226.                 this.updatePaginationDisplay();
  227.                 this.updateJobRangeDisplay();
  228.             }
  229.         }
  231.         updatePaginationDisplay() {
  232.             document.querySelector(".pagination__page-number").textContent =
  233.                 this.currentPage;
  234.             this.updatePaginationControls();
  235.         }
  237.         updatePaginationControls() {
  238.             document.querySelector(".pagination__button--prev").disabled =
  239.                 this.currentPage <= 1;
  240.             document.querySelector(".pagination__button--next").disabled =
  241.                 this.currentPage >= this.totalPages;
  243.             document.querySelector(".pagination").style.display =
  244.                 this.totalPages <= 1 ? "none" : "";
  245.         }
  247.         updateJobRangeDisplay() {
  248.             const startJobNumber = (this.currentPage - 1) * this.pageSize + 1;
  249.             const endJobNumber = Math.min(
  250.                 this.currentPage * this.pageSize,
  251.                 this.totalJobs
  252.             );
  253.             const jobCountElement = document.querySelector(".job-counter");
  254.             jobCountElement.textContent = `Jobs ${startJobNumber} bis ${endJobNumber} von ${this.totalJobs}`;
  255.         }
  257.         showLoadingIndicator(show) {
  258.             const overlay = document.querySelector(".loading-overlay");
  259.             overlay.style.display = show ? "flex" : "none";
  260.         }
  262.         handleError(error) {
  263.             const errorContainer = document.querySelector(".error-message");
  264.             errorContainer.textContent = `Error: ${error.message}`;
  265.             errorContainer.style.display = "block";
  266.         }
  267.     }
  268. </script>