quality_recticel/py_app/app/static/script.js

document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;

    // Check for saved theme in localStorage
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.className = savedTheme;
        updateButtonText();
    }

    // Toggle theme on button click
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            if (body.classList.contains('light-mode')) {
                body.className = 'dark-mode';
                localStorage.setItem('theme', 'dark-mode');
            } else {
                body.className = 'light-mode';
                localStorage.setItem('theme', 'light-mode');
            }
            updateButtonText();
        });
    }

    // Function to update the button text
    function updateButtonText() {
        if (body.classList.contains('light-mode')) {
            themeToggle.textContent = 'Change to dark theme';
        } else {
            themeToggle.textContent = 'Change to light theme';
        }
    }

    const createUserBtn = document.getElementById('create-user-btn');
    const createUserPopup = document.getElementById('create-user-popup');
    const closePopupBtn = document.getElementById('close-popup-btn');

    // Open the popup
    createUserBtn.addEventListener('click', () => {
        createUserPopup.style.display = 'flex';
    });

    // Close the popup
    closePopupBtn.addEventListener('click', () => {
        createUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    createUserPopup.addEventListener('click', (e) => {
        if (e.target === createUserPopup) {
            createUserPopup.style.display = 'none';
        }
    });

    const editButtons = document.querySelectorAll('.edit-btn');
    const editUserPopup = document.getElementById('edit-user-popup');
    const closeEditPopupBtn = document.getElementById('close-edit-popup-btn');

    // Open the edit user popup
    editButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
            const userElement = e.target.closest('li');
            const username = userElement.querySelector('.user-name').textContent;
            const role = userElement.querySelector('.user-role').textContent.split(': ')[1];
            const userId = userElement.dataset.userId;

            // Populate the form fields
            document.getElementById('edit-user-id').value = userId;
            document.getElementById('edit-username').value = username;
            document.getElementById('edit-role').value = role;

            // Show the popup
            editUserPopup.style.display = 'flex';
        });
    });

    // Close the edit user popup
    closeEditPopupBtn.addEventListener('click', () => {
        editUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    editUserPopup.addEventListener('click', (e) => {
        if (e.target === editUserPopup) {
            editUserPopup.style.display = 'none';
        }
    });

    const deleteButtons = document.querySelectorAll('.delete-btn');
    const deleteUserPopup = document.getElementById('delete-user-popup');
    const closeDeletePopupBtn = document.getElementById('close-delete-popup-btn');
    const deleteUsernameSpan = document.getElementById('delete-username');
    const deleteUserIdInput = document.getElementById('delete-user-id');

    // Open the delete user popup
    deleteButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
            const userElement = e.target.closest('li');
            const username = userElement.querySelector('.user-name').textContent;
            const userId = userElement.dataset.userId;

            // Populate the popup with user details
            deleteUsernameSpan.textContent = username;
            deleteUserIdInput.value = userId;

            // Show the popup
            deleteUserPopup.style.display = 'flex';
        });
    });

    // Close the delete user popup
    closeDeletePopupBtn.addEventListener('click', () => {
        deleteUserPopup.style.display = 'none';
    });

    // Close the popup when clicking outside the popup content
    deleteUserPopup.addEventListener('click', (e) => {
        if (e.target === deleteUserPopup) {
            deleteUserPopup.style.display = 'none';
        }
    });

    const reportButtons = document.querySelectorAll('.report-btn');
    const reportTitle = document.getElementById('report-title');
    const reportTable = document.getElementById('report-table');

    // Handle report button clicks
    reportButtons.forEach((button) => {
        button.addEventListener('click', () => {
            const reportNumber = button.dataset.report;

            // Update the title dynamically
            reportTitle.textContent = `Data for "Report ${reportNumber}"`;

            // Fetch data for the selected report (mocked for now)
            fetch(`/get_report_data?report=${reportNumber}`)
                .then((response) => response.json())
                .then((data) => {
                    populateTable(data);
                })
                .catch((error) => {
                    console.error('Error fetching report data:', error);
                });
        });
    });

    // Populate the table with data
    function populateTable(data) {
        const tableHead = reportTable.querySelector('thead tr');
        const tableBody = reportTable.querySelector('tbody');

        // Clear existing table content
        tableHead.innerHTML = '';
        tableBody.innerHTML = '';

        if (data.headers && data.rows) {
            // Populate table headers
            data.headers.forEach((header) => {
                const th = document.createElement('th');
                th.textContent = header;
                tableHead.appendChild(th);
            });

            // Populate table rows
            data.rows.forEach((row) => {
                const tr = document.createElement('tr');
                row.forEach((cell) => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tableBody.appendChild(tr);
            });
        } else {
            // No data available
            const tr = document.createElement('tr');
            const td = document.createElement('td');
            td.textContent = 'No data available.';
            td.colSpan = data.headers ? data.headers.length : 1;
            tr.appendChild(td);
            tableBody.appendChild(tr);
        }
    }

    // Export buttons
    const exportCsvButton = document.getElementById('export-csv');
    const exportPdfButton = document.getElementById('export-pdf');

    exportCsvButton.addEventListener('click', () => {
        alert('Exporting current report as CSV...');
        // Add logic to export the current report as CSV
    });

    exportPdfButton.addEventListener('click', () => {
        alert('Exporting current report as PDF...');
        // Add logic to export the current report as PDF
    });
});