DataDash/src/main/resources/static/main.js

import { fetchQuery } from "./contentUtility.js";

const apiEndpoint = "/api/v1/datasets";
const baseURL = location.origin;
const defaultPagingValue = 20;
const lastQuery = {
    url: "",
    totalPages: 0,
    currentPage: 0
};

// definition of all buttons & sections
const addButton = document.getElementById("add-btn");
const filterButton = document.getElementById("filter-btn");
const searchButton = document.getElementById("search-btn");
const searchBar = document.getElementById("search-entry");
const sortButton = document.getElementById("sort-btn");
const resetButton = document.getElementById("reset-tools-btn");
const upvoteButtons = document.getElementsByClassName("upvote-btn");
const downvoteButtons = document.getElementsByClassName("downvote-btn");
export const searchSection = document.getElementById("search");
const recentSection = document.getElementById("recents");
const mostLikedSection = document.getElementById("top");

// ID of the timeout, because we need to cancel it at some point
export let searchBarTimeout;
const searchDelay = 500;

// Event listeners
addButton.addEventListener("click", () => {
    navigateToAdd();
});

filterButton.addEventListener("change", () => {
    const filterString = filterButton.value;
    if (filterString !== filterButton.querySelector("#default-filter").value) {
        filter(filterString);
    }
});

searchButton.addEventListener("click", () => {
    const searchString = searchBar.value;
    search(searchString);
});

searchBar.addEventListener("input", () => {
    updateSections();
    clearTimeout(searchBarTimeout);
    searchBarTimeout = setTimeout(() => {
        const searchString = searchBar.value;
        search(searchString);
    }, searchDelay);
});

searchBar.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        const searchString = searchBar.value;
        search(searchString);
    }
});

sortButton.addEventListener("change", () => {
    const sortString = sortButton.value;
    sort(sortString);
});

resetButton.addEventListener("click", () => {
    searchBar.value = "";
    filterButton.value = filterButton.querySelector("#default-filter").value;
    sortButton.value = sortButton.querySelector("#default-sort").value;
    updateSections();
});

// Consider moving this to datasets.js completely
const upvoteButtonClickListener = e => {
    const entryID = e.target.parentElement.parentElement.dataset.id;
    vote(entryID, true);
};
for (const upvoteButton of upvoteButtons) {
    upvoteButton.addEventListener("click", upvoteButtonClickListener);
}

// Consider moving this to datasets.js completely
const downvoteButtonClickListener = e  => {
    const entryID = e.target.parentElement.parentElement.dataset.id;
    vote(entryID, false);
};
for (const downvoteButton of downvoteButtons) {
    downvoteButton.addEventListener("click", downvoteButtonClickListener);
}

// functions of the main page
function navigateToAdd() {
    //TODO: url to add page not yet implemented, add here
    window.location.href = "/add";
}

function filter(filterString) {
    updateSections();
    filterString = filterString.toUpperCase();
    let fetchURL = new URL(apiEndpoint, baseURL);
    fetchURL.searchParams.append("type", filterString);
    fetchURL.searchParams.append("size", defaultPagingValue);
    console.log(fetchURL); // TODO: remove
    fetchQuery(fetchURL);
}

function search(searchString) {
    updateSections();
    let fetchURL = new URL(apiEndpoint + "/search", baseURL);
    fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString);
    console.log(fetchURL); // TODO: remove
    fetchQuery(fetchURL);
}

function sort(sortString) {
    let query = sortString.toLowerCase().split(" ");
    if (query[1] === "a-z" || query[1] === "↑" || query[1] === "oldest-newest") {
        query[1] = "asc";
    } else {
        query[1] = "desc";
    }
    updateSections();
    let fetchURL = new URL(apiEndpoint, baseURL);
    fetchURL.searchParams.append("sort", query[0]);
    fetchURL.searchParams.append("direction", query[1]);
    console.log(fetchURL); // TODO: remove
    fetchQuery(fetchURL);
}

// creates query for the whole toolbar, so that searching, sorting and filtering are always combined
function createQuery() {

}

export function vote(entryID, up) {
    const fetchURL = new URL(
        `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
        baseURL,
    );
    console.log(fetchURL); // TODO: remove
    fetch(fetchURL, {
        method: "PUT",
        headers: {
            'Content-Type': 'application/json',
        }})
    .then(resp => resp.json())
    .then((data) => {
        console.log(data.upvotes); // TODO: remove, check einbauen: data.id === entryID?
    let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']')
    dataset.querySelector("span").innerText = data.upvotes;
    });
}

function incrementPageCount() {
    lastQuery.currentPage++;
}

function updateSections() {
    if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
        && filterButton.value === filterButton.querySelector("#default-filter").value) {
        searchSection.classList.add("hidden");
        recentSection.classList.remove("hidden");
        mostLikedSection.classList.remove("hidden");
        resetButton.classList.add("hidden");
    } else {
        searchSection.classList.remove("hidden");
        recentSection.classList.add("hidden");
        mostLikedSection.classList.add("hidden");
        resetButton.classList.remove("hidden");
    }
}

window.onload = function () {
    updateSections();
    if (searchBar.value !== "") {
        search(searchBar.value);
    }
}