https://www.uni-erfurt.de/_assets/8a5590b3945574943b736691c463c4aa…/StudyfinderController.js?1790664050

1if (document.querySelector('#studyfinder')) {
2
3    let currentSection = 1;
4
5    const studyfinder = document.querySelector('#studyfinder');
6    const loadingIndicator = document.querySelector('#loading-indicator');
7
8    const addClickListeners = function (element) {
9        const buttons = element.querySelectorAll('[data-section-url]');
10        buttons.forEach(button => {
11            button.addEventListener('click', event => switchSection(event.target.dataset.sectionUrl));
12        });
13    }
14
15    addClickListeners(document.querySelector('[data-section="1"]'));
16
17    const switchSection = async function (selection) {
18
19        // set min-height to fixed value, so the container won't shrink
20        studyfinder.style.minHeight = studyfinder.clientHeight + `px`;
21
22        // remove current section element
23        const currentSectionElement = document.querySelector(`[data-section="${currentSection}"]`);
24        currentSectionElement.remove();
25
26        // show spinner
27        loadingIndicator.classList.add('studyfinder__loading-indicator--show');
28
29        // increment current section id
30        currentSection++;
31
32        // create new section, fetch html, set style and data attribute, add click listeners
33        const newSectionElement = document.createElement('section');
34        newSectionElement.innerHTML = await fetchSection(selection);
35        newSectionElement.classList.add('section');
36        newSectionElement.dataset.section = currentSection;
37        addClickListeners(newSectionElement);
38
39        // hide spinner
40        loadingIndicator.classList.remove('studyfinder__loading-indicator--show');
41
42        // show new section and add click listeners
43        studyfinder.appendChild(newSectionElement);
44
45    }
46
47    const fetchSection = async function (selection) {
48        const newSectionHtml = await fetch(selection)
49            .then((res) => {
50                if (!res.ok) throw new Error(`${res.status} `);
51                return res.text();
52            })
53            .then((text) => {
54                return text;
55            })
56            .catch((e) => {
57                console.log("Could not Fetch", e);
58            });
59        return newSectionHtml;
60    }
61
62}