🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../uploads/../../../../584683.klas4s23.mid-ica.nl/public_html/js/projects.js

document.addEventListener("DOMContentLoaded", setProjects());

async function setProjects() {
    fetch("/endpoints/get-projects.php")
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                console.error(response);
                throw new Error("Something went wrong.");
            }
        })
        .then(projects => {
            projects.forEach(project => {
                createProjectElement(project);
            });
        })
        .catch(error => console.error("There was a problem with the fetch operation:", error));
}

function createProjectElement(project) {
    const container = document.querySelector(".project-container");

    const projectElement = document.createElement("div");
    projectElement.className = "project-container_project";
    projectElement.addEventListener("click", () => {
        showDetailProject(projectElement, project);
    });

    const projectName = document.createElement("p");
    projectName.className = "project-container_project-name";
    projectName.innerText = project.name;

    const projectImg = document.createElement("img");
    projectImg.setAttribute("src", project.image);

    projectElement.append(projectName, projectImg);
    container.appendChild(projectElement);
}

function showDetailProject(projectElement, project) {
    const activePopupContainer = document.querySelector(".popup-container.active");
    if (activePopupContainer) {
        activePopupContainer.querySelector(".project-container_project").remove();
        activePopupContainer.classList.remove("active");

        return;
    }

    const popupContainer = document.querySelector(".popup-container");
    popupContainer.classList.add("active");
    popupContainer.addEventListener("click", () => {
        popupContainer.querySelector(".project-container_project").remove();
        popupContainer.classList.remove("active");
    });

    const projectContainer = document.createElement("div");
    projectContainer.className = "project-container_project";

    const projectLeftContent = document.createElement("div");
    projectLeftContent.className = "popup-container_project-left";
    projectLeftContent.innerHTML = projectElement.innerHTML;

    const projectRightContent = document.createElement("div");
    projectRightContent.className = "popup-container_project-right";

    const projectDescription = document.createElement("p");
    projectDescription.className = "popup-container_project-description";
    projectDescription.innerText = project.description;

    projectRightContent.appendChild(projectDescription);

    if (project.GO_link != null) {
        const linkElement = document.createElement("a");
        linkElement.className = "popup-container_project-link";
        linkElement.setAttribute("href", project.GO_link);
        linkElement.setAttribute("target", "_blank");
        linkElement.innerText = "Grafisch ontwerp";

        projectRightContent.appendChild(linkElement);
    }

    if (project.TO_link != null) {
        const linkElement = document.createElement("a");
        linkElement.className = "popup-container_project-link";
        linkElement.setAttribute("href", project.TO_link);
        linkElement.setAttribute("target", "_blank");
        linkElement.innerText = "Technisch ontwerp";

        projectRightContent.appendChild(linkElement);
    }

    const footer = document.createElement("div");
    footer.className = "popup-container_project-right_footer";

    const madeBy = document.createElement("em");
    madeBy.innerText = `Gemaakt ${(project.is_individual == 1
        ? "door mij"
        : "in een team")}`;

    footer.appendChild(madeBy);

    if (project.link != null) {
        const projectLink = document.createElement("a");
        projectLink.setAttribute("href", project.link);
        projectLink.setAttribute("target", "_blank");
        projectLink.className = "popup-container_project-button";
        projectLink.innerText = "Bekijk";

        footer.appendChild(projectLink);
    }

    projectRightContent.appendChild(footer);
    projectContainer.append(projectLeftContent, projectRightContent);
    popupContainer.appendChild(projectContainer);
}

🎯 Available Actions