diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index 7555315..fb4a75e 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,4 +1,4 @@ -import {searchBarTimeout, searchSection, lastQuery} from "./main.js" +import {searchBarTimeout, searchSection, lastQuery, votedIDs} from "./main.js" import Dataset from "./dataset.js" export function fetchQuery(fetchString, clearResults) { @@ -24,7 +24,11 @@ function parseContent(content, clearResults) { Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); } for (const dataset of datasets) { - searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement()); + if (votedIDs.has(dataset.getID())) { + searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement(false,)); + } else { + searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement()); + } } } diff --git a/src/main/resources/static/dataset.js b/src/main/resources/static/dataset.js index 27245e5..bef41a7 100644 --- a/src/main/resources/static/dataset.js +++ b/src/main/resources/static/dataset.js @@ -29,13 +29,20 @@ export default class Dataset { this.#votes = votes; } - createDatasetHTMLElement() { + createDatasetHTMLElement(votable, isUpVoted) { let template = document.querySelector("#dataset-template"); const clone = template.content.cloneNode(true); clone.querySelector(".dataset").dataset.id = this.#id; clone.querySelector("h3").innerText = this.#title; clone.querySelector("p").innerText = this.#description; clone.querySelector("span").innerText = this.#upvotes; + if (!votable) { + let votedButton = clone.querySelector(isUpVoted? ".upvote-btn":".downvote-btn"); + votedButton.classList.add("isVoted"); + votedButton.disabled = true; + let notVotedButton = clone.querySelector(isUpVoted? ".downvote-btn":".upvote-btn"); + notVotedButton.style.visibility = "hidden"; + } // Event Listeners clone.querySelector(".upvote-btn").addEventListener("click", () => { @@ -48,4 +55,8 @@ export default class Dataset { return clone; } + + getID() { + return this.#id; + } } diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index c62d21e..ab5e5bf 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -81,6 +81,7 @@ header { .hidden { display: none; } + #search-entry:focus-visible { outline: none; } @@ -117,6 +118,7 @@ header { align-items: center; gap: .5em; } + /* Buttons */ .upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn { background: var(--icon-url) no-repeat; @@ -143,6 +145,7 @@ header { --icon-url: url(looking-glass.svg); --icon-size: 1rem; } + #filter-btn { --icon-url: url(filter.svg); --icon-size: 1rem; @@ -158,6 +161,10 @@ header { --icon-size: 1rem; } +.isVoted { + filter: brightness(1.75); +} + .divider { width: .05rem; height: 1rem; diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index fb8700d..5599b26 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -5,10 +5,10 @@ const apiEndpoint = "/api/v1/datasets"; const baseURL = location.origin; const defaultPagingValue = 20; export const lastQuery = { - url: "", totalPages: 0, currentPage: 0 }; +export const votedIDs = new Map; // definition of all buttons & sections const addButton = document.getElementById("add-btn"); @@ -146,13 +146,18 @@ export function vote(entryID, up) { .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; - }); -} + let dataSet = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') + dataSet.querySelector("span").innerText = data.upvotes; + + let votedButton = dataSet.querySelector(up? ".upvote-btn":".downvote-btn"); + votedButton.classList.add("isVoted"); + votedButton.disabled = true; + let notVotedButton = dataSet.querySelector(up? ".downvote-btn":".upvote-btn"); + notVotedButton.style.visibility = "hidden"; + console.log(dataSet.getAttribute("data-id")); + votedIDs.set(dataSet.getAttribute("data-id"), up); + }); -function incrementPageCount() { - lastQuery.currentPage++; } // updates the page display. If no query is present, the initial page is shown, otherwise the search results. @@ -197,6 +202,7 @@ function fetchInitialEntries() { .then((data) => { const datasets = data.content.map(dataset => new Dataset(dataset)); for (const dataset of datasets) { + //dataSets.add(dataset); document.querySelector("#recents .datasets").appendChild(dataset.createDatasetHTMLElement()); } }); @@ -208,8 +214,9 @@ function fetchInitialEntries() { fetch(topVotedQueryURL) .then(resp => resp.json()) .then((data) => { - document.querySelector("#top .datasets") - .appendChild(new Dataset(data.content[0]).createDatasetHTMLElement()); + let dataset = new Dataset(data.content[0]); + //dataSets.add(dataset); + document.querySelector("#top .datasets").appendChild(dataset.createDatasetHTMLElement()); }); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 34982f9..5f8cbdd 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -5,7 +5,7 @@ DataDash - +