EXTREMUM-demo/base/static/js/main.js

import { hideElement, showElement } from "./methods.js";

document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll(".sidebar .nav-item .nav-link");
    const currentUrl = window.location.href.split('#')[0]; // Base URL without hash

    navLinks.forEach((link) => {
        const linkUrl = link.href.split('#')[0]; // Base URL of the link without hash
        const linkHash = link.href.split('#')[1]; // Extract the hash (if present) from the link

        // Compare base URLs to set active class for different pages
        if (currentUrl === linkUrl) {
            // If there is no hash (e.g., home link), mark it active
            if (!window.location.hash && !linkHash) {
                link.classList.add("active");
            }

            // Check if the current URL hash matches the link's hash
            if (window.location.hash && window.location.hash.substring(1) === linkHash) {
                link.classList.add("active");
            }
        }

        // Handle click events to update the active class
        link.addEventListener("click", function () {
            navLinks.forEach((nav) => nav.classList.remove("active"));
            link.classList.add("active");
        });
    });
});
document.getElementById("sidebarToggle").addEventListener("click", function () {
    const sidebar = document.getElementById("accordionSidebar");
    const contentWrapper = document.getElementById("content-wrapper");

    // Toggle minimized class for sidebar
    sidebar.classList.toggle("minimized");

    // Adjust content based on sidebar state
    if (sidebar.classList.contains("minimized")) {
        contentWrapper.classList.add("collapsed");
        contentWrapper.classList.remove("expanded");
    } else {
        contentWrapper.classList.add("expanded");
        contentWrapper.classList.remove("collapsed");
    }
});


document.addEventListener("DOMContentLoaded", function () {
    const datasetButtons = document.querySelectorAll(".btn-dataset");

    datasetButtons.forEach((button) => {
        button.addEventListener("click", function () {
            // Remove "active" class from all buttons
            datasetButtons.forEach((btn) => btn.classList.remove("active"));

            // Add "active" class to the clicked button
            this.classList.add("active");
        });
    });
});


if (document.getElementById("backToDatasetButton")) {
    document.getElementById("backToDatasetButton").addEventListener("click", function () {
        // Redirect to the dataset selection section
        window.location.href = "/#dataset_selection"; // Replace with the actual URL
    });
}

if (document.getElementById("viewCounterfactualsButton")) {
    document.getElementById("viewCounterfactualsButton").addEventListener("click", function () {
        // Redirect to the counterfactuals view section
        window.location.href = "/counterfactuals.html"; // Replace with the actual URL
    });
}

if (document.getElementById("viewPreTrainedButton")) {
    document.getElementById("viewPreTrainedButton").addEventListener("click", function () {
        // Redirect to the counterfactuals view section
        window.location.href = "/charts.html"; // Replace with the actual URL
    });
}

// JavaScript to handle delete functionality
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("radio_buttons").addEventListener("click", function (event) {
        // Identify if the click originated from the button or its child span
        let targetButton = event.target.closest(".delete-file-icon");
        // Only proceed if a delete-file-icon button was clicked
        if (targetButton) {
            // Get the filename from the data-file attribute
            const fileName = targetButton.getAttribute("data-file");

            const fileNameValue = targetButton.getAttribute("data-file-value");

            let index = -1

            const currentUrl = window.location.pathname;
            if (currentUrl.includes("counterfactuals.html")) {
                index = targetButton.getAttribute("id");
                document.getElementById("confirmDeleteButton").setAttribute("value", index);
            }
            // Set the file name in the modal for display
            document.getElementById("fileToDeleteName").innerText = fileName;

            // Set the filename in the confirm button for reference during deletion
            document.getElementById("confirmDeleteButton").setAttribute("data-file", fileName);

            document.getElementById("confirmDeleteButton").setAttribute("data-file-value", fileNameValue);

            // Show the delete confirmation modal
            $('#deleteFileModal').modal('show');

            // Check if #cancel_delete_buttons_modal_delete has display: none
            const cancelDeleteElement = document.getElementById("cancel_delete_buttons_modal_delete");
            if (cancelDeleteElement && cancelDeleteElement.style.display === "none") {
                showElement(cancelDeleteElement); // Replace with your show logic
            }

            // Check if #success-message-modal-delete has display: none
            const successMessageElement = document.getElementById("success-message-modal-delete");
            if (successMessageElement) {
                if (successMessageElement.style.display === "none") {
                    console.log("Element #success-message-modal-delete is hidden (display: none)");
                } else {
                    hideElement(successMessageElement); // Replace with your hide logic
                }
            }
        }
    });
});