FormMaker/static/util.js

console.log("entered script");

window.addEventListener('load', function () {
    console.log("All resources finished loading!");

    const questionTypeElement = document.getElementById('question_type');

    if (questionTypeElement) {
        questionTypeElement.addEventListener('change', function () {
            const optionsSection = document.getElementById('options-section');
            const selectedType = this.value;
            if (selectedType === 'multiple_choice' || selectedType === 'single_choice' || selectedType === 'dropdown') {
                optionsSection.style.display = 'block';
            } else {
                optionsSection.style.display = 'none';
            }
        });
    }

    document.querySelectorAll('input[id^="other_"]').forEach(el => {
        const id = el.id.split('_')[1];
        const otherTextElement = document.getElementById(`other_text_${id}`);
        if (otherTextElement) {
            el.addEventListener('change', function () {
                otherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });

    document.querySelectorAll('input[id^="radio_other_"]').forEach(el => {
        const id = el.id.split('_')[2];
        const radioOtherTextElement = document.getElementById(`radio_other_text_${id}`);
        if (radioOtherTextElement) {
            el.addEventListener('change', function () {
                radioOtherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });
});

window.addEventListener('load', function () {
    const tagsInput = document.getElementById('classes-input');
    const matchesContainer = document.getElementById('matches-container');
    let classes = []; // Stores the classes entered by the user
    let fetchedPeople = []; // Stores the people returned from the server

    function addClass(classname) {
        const container = document.getElementById('classes-container');
        const classElement = document.createElement('span');
        classElement.classList.add('tag');
        classElement.textContent = classname;

        const closeIcon = document.createElement('span');
        closeIcon.classList.add('close');
        closeIcon.textContent = 'x';
        closeIcon.addEventListener('click', function () {
            container.removeChild(classElement);
            classes = classes.filter(c => c !== classname);
            fetchMatchingPeople(); // Fetch updated matches when a class is removed
        });

        classElement.appendChild(closeIcon);
        container.appendChild(classElement);
    }

    function fetchMatchingPeople() {
        if (classes.length === 0) {
            matchesContainer.innerHTML = '<p>No one has a similar class yet!</p>';
            return;
        }

        fetch("/fetch-matches", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ classes: classes })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("Network response was not OK");
            }
            return response.json();
        })
        .then(data => {
            // Handle null or empty data
            if (!data || data.length === 0) {
                matchesContainer.innerHTML = '<p>No one has that class yet!</p>';
                return;
            }

            fetchedPeople = data; // Store the fetched people
            matchesContainer.innerHTML = '';  // Clear the matches container

            renderPeople(fetchedPeople, classes);  // Render matches
        })
        .catch(error => {
            console.error("Error fetching matches:", error);
            matchesContainer.innerHTML = '<p>No one has that class yet!</p>';  // Fallback message in case of any error
        });
    }

    function renderPeople(people, filterClasses = []) {
        matchesContainer.innerHTML = '';  // Clear current people list

        people.forEach(person => {
            const personDiv = document.createElement('div');
            personDiv.classList.add('person');

            // Render all classes: shared ones in bold, others in gray
            let classesHtml = person.classes.map(classname => {
                // Check if the classname is in the currently selected filters
                if (filterClasses.includes(classname.trim())) {
                    // Shared classes: bold
                    return `<span class="class-shared">${classname}</span>`;
                } else {
                    // Non-shared classes: gray out
                    return `<span class="class-other">${classname}</span>`;
                }
            }).join(', ');

            // Display the person's name, email, and full class list
            personDiv.innerHTML = `<strong>${person.name}</strong><br>Classes: ${classesHtml}<br>Email: ${person.email || 'N/A'}`;
            matchesContainer.appendChild(personDiv);
        });
    }

    function renderClassFilters() {
        const filterContainer = document.getElementById('class-filter-container');
        filterContainer.innerHTML = '';  // Clear existing filters

        classes.forEach(classname => {
            const filterLabel = document.createElement('label');
            const filterCheckbox = document.createElement('input');
            filterCheckbox.type = 'checkbox';
            filterCheckbox.value = classname;
            filterCheckbox.addEventListener('change', function () {
                applyClassFilter();  // Apply filter when a checkbox is checked/unchecked
            });

            filterLabel.appendChild(filterCheckbox);
            filterLabel.appendChild(document.createTextNode(classname));
            filterContainer.appendChild(filterLabel);
        });
    }

    function applyClassFilter() {
        // Get the list of currently checked classes from the checkboxes
        const selectedClasses = Array.from(document.querySelectorAll('#class-filter-container input:checked'))
            .map(input => input.value);

        // If no checkboxes are selected, use all classes (to keep shared ones bold)
        const filterClasses = selectedClasses.length === 0 ? classes : selectedClasses;

        // Filter people by selected classes, or show all people if no classes are checked
        const filteredPeople = fetchedPeople.filter(person =>
            selectedClasses.length === 0 || selectedClasses.some(cls => person.classes.includes(cls))
        );

        // Render the people with the selected filters and apply the shared class highlighting logic
        renderPeople(filteredPeople, filterClasses);
    }

    tagsInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ',') {
            event.preventDefault();
            let value = tagsInput.value.trim().replace(/,$/, '');
            if (value && !classes.includes(value)) { // Check for empty and duplicate values
                addClass(value);
                classes.push(value);
                renderClassFilters();  // Update the class filters UI
                fetchMatchingPeople();  // Fetch updated matches when a class is added
                tagsInput.value = '';  // Clear the input
            }
        }
    });
});