From 1174f03d42a6213bafdb5afdf55d0c3caccccc7f Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Mon, 1 Jul 2024 15:50:57 +0200 Subject: [PATCH 1/6] added paging functionality --- src/main/resources/static/contentUtility.js | 16 ++++--- src/main/resources/static/main.js | 50 ++++++++++++++------- src/main/resources/templates/index.html | 1 + 3 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index deb5658..7555315 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,22 +1,28 @@ -import {searchBarTimeout, searchSection} from "./main.js" +import {searchBarTimeout, searchSection, lastQuery} from "./main.js" import Dataset from "./dataset.js" -export function fetchQuery(fetchString) { +export function fetchQuery(fetchString, clearResults) { clearTimeout(searchBarTimeout); fetch(fetchString) .then(resp => resp.json()) .then((data) => { - parseContent(data.content); + parseContent(data.content, clearResults); + lastQuery.totalPages = data.totalPages; + if (clearResults) { + lastQuery.currentPage = 0; + } }); } -function parseContent(content) { +function parseContent(content, clearResults) { if (content.length === 0) { searchSection.querySelector("#nothing-found ").classList.remove("hidden"); } else { searchSection.querySelector("#nothing-found").classList.add("hidden"); const datasets = content.map(dataset => new Dataset(dataset)); - Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); + if (clearResults) { + Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); + } for (const dataset of datasets) { searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement()); } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 77af7e6..fb8700d 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -4,7 +4,7 @@ import Dataset from "./dataset.js"; const apiEndpoint = "/api/v1/datasets"; const baseURL = location.origin; const defaultPagingValue = 20; -const lastQuery = { +export const lastQuery = { url: "", totalPages: 0, currentPage: 0 @@ -35,12 +35,12 @@ addButton.addEventListener("click", () => { filterButton.addEventListener("change", () => { const filterString = filterButton.value; if (filterString !== filterButton.querySelector("#default-filter").value) { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); } }); searchButton.addEventListener("click", () => { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); }); @@ -48,18 +48,18 @@ searchBar.addEventListener("input", () => { updateSections(); clearTimeout(searchBarTimeout); searchBarTimeout = setTimeout(() => { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); }, searchDelay); }); searchBar.addEventListener('keypress', function (e) { if (e.key === 'Enter') { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); } }); sortButton.addEventListener("change", () => { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); }); resetButton.addEventListener("click", () => { @@ -79,7 +79,7 @@ for (const upvoteButton of upvoteButtons) { } // Consider moving this to datasets.js completely -const downvoteButtonClickListener = e => { +const downvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); }; @@ -93,7 +93,7 @@ function navigateToAdd() { } function getFilterQuery() { - let filterString= filterButton.value.toUpperCase(); + let filterString = filterButton.value.toUpperCase(); if (filterString === "NONE") { return ["type", "%"] } else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") { @@ -141,13 +141,14 @@ export function vote(entryID, up) { 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; - }); + } + }) + .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() { @@ -173,7 +174,7 @@ function updateSections() { // fetches the further categories used in the filter function function fetchCategories() { const fetchURL = new URL( - "api/v1/categories" , baseURL); + "api/v1/categories", baseURL); fetch(fetchURL) .then(resp => resp.json()) .then((data) => { @@ -217,6 +218,21 @@ window.onload = function () { fetchInitialEntries(); updateSections(); if (searchBar.value !== "") { - fetchQuery(createQuery()); + fetchQuery(createQuery(), true); + } + let observer = new IntersectionObserver(() => { + if (!searchSection.classList.contains("hidden")) { + fetchPagingResults(); + } + }, {root: null, rootMargin: "0px", threshold: .9}); + observer.observe(document.getElementById("observable")); +} + +function fetchPagingResults() { + lastQuery.currentPage++ + if (lastQuery.currentPage < lastQuery.totalPages) { + let pagingQuery = new URL(createQuery()); + pagingQuery.searchParams.append("page", lastQuery.currentPage.toString(10)); + fetchQuery(pagingQuery, false); } } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 23ee989..34982f9 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -78,6 +78,7 @@ +
From 20eda5931a9be266f92252b3d16fbf2400fb7a5e Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 2 Jul 2024 17:41:48 +0200 Subject: [PATCH 2/6] started implementing local storage --- src/main/resources/static/contentUtility.js | 8 +++++-- src/main/resources/static/dataset.js | 13 ++++++++++- src/main/resources/static/main.css | 7 ++++++ src/main/resources/static/main.js | 25 +++++++++++++-------- src/main/resources/templates/index.html | 2 +- 5 files changed, 42 insertions(+), 13 deletions(-) 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 - +
From 6d34b8c388afca071fe0ecd8368055e0f09289cf Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Wed, 3 Jul 2024 11:27:49 +0200 Subject: [PATCH 3/6] upvoting suppression by local storage now works, there is a bug however with the entries loaded o startup --- src/main/resources/static/contentUtility.js | 11 ++++------- src/main/resources/static/dataset.js | 12 +++++++----- src/main/resources/static/main.js | 11 +++++------ 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index fb4a75e..6030686 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,4 +1,4 @@ -import {searchBarTimeout, searchSection, lastQuery, votedIDs} from "./main.js" +import {searchBarTimeout, searchSection, lastQuery} from "./main.js" import Dataset from "./dataset.js" export function fetchQuery(fetchString, clearResults) { @@ -24,12 +24,9 @@ function parseContent(content, clearResults) { Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); } for (const dataset of datasets) { - if (votedIDs.has(dataset.getID())) { - searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement(false,)); - } else { - searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement()); - } + console.log(dataset) //TODO: remove + searchSection.querySelector(".datasets") + .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); } } - } diff --git a/src/main/resources/static/dataset.js b/src/main/resources/static/dataset.js index bef41a7..b13b7b6 100644 --- a/src/main/resources/static/dataset.js +++ b/src/main/resources/static/dataset.js @@ -1,4 +1,4 @@ -import { vote } from "./main.js"; +import { vote, votedIDs } from "./main.js"; export default class Dataset { #abstract; @@ -29,18 +29,20 @@ export default class Dataset { this.#votes = votes; } - createDatasetHTMLElement(votable, isUpVoted) { + createDatasetHTMLElement(entryID) { 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"); + + // depending on whether the button has been up/downvoted, its according button get disabled and hidden + if (votedIDs.has(entryID)) { + let votedButton = clone.querySelector(votedIDs.get(entryID)? ".upvote-btn":".downvote-btn"); votedButton.classList.add("isVoted"); votedButton.disabled = true; - let notVotedButton = clone.querySelector(isUpVoted? ".downvote-btn":".upvote-btn"); + let notVotedButton = clone.querySelector(votedIDs.get(entryID)? ".downvote-btn":".upvote-btn"); notVotedButton.style.visibility = "hidden"; } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 5599b26..8edc846 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -89,7 +89,7 @@ for (const downvoteButton of downvoteButtons) { // functions of the main page function navigateToAdd() { - window.location.href = "/add"; + window.location.href = "/add"; //TODO: move to EventListner? } function getFilterQuery() { @@ -154,7 +154,6 @@ export function vote(entryID, up) { 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); }); @@ -202,8 +201,8 @@ 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()); + document.querySelector("#recents .datasets") + .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); } }); @@ -215,8 +214,8 @@ function fetchInitialEntries() { .then(resp => resp.json()) .then((data) => { let dataset = new Dataset(data.content[0]); - //dataSets.add(dataset); - document.querySelector("#top .datasets").appendChild(dataset.createDatasetHTMLElement()); + document.querySelector("#top .datasets") + .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); }); } From 02d2f90e85141893fc75c43d65e56ab6c97aa1ea Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Wed, 3 Jul 2024 11:52:29 +0200 Subject: [PATCH 4/6] fixed bug --- src/main/resources/static/contentUtility.js | 2 +- src/main/resources/static/main.js | 24 ++++++++++----------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index 6030686..d08c0be 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,6 +1,6 @@ import {searchBarTimeout, searchSection, lastQuery} from "./main.js" import Dataset from "./dataset.js" - +// TODO consider renaming this to "searchUtility.js" export function fetchQuery(fetchString, clearResults) { clearTimeout(searchBarTimeout); fetch(fetchString) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 8edc846..78eaa29 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -69,7 +69,7 @@ resetButton.addEventListener("click", () => { updateSections(); }); -// Consider moving this to datasets.js completely +// Consider moving this to datasets.js completely // TODO: we dont need them, do we? there in dataset.js const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); @@ -78,7 +78,7 @@ for (const upvoteButton of upvoteButtons) { upvoteButton.addEventListener("click", upvoteButtonClickListener); } -// Consider moving this to datasets.js completely +// Consider moving this to datasets.js completely // TODO: we dont need them, do we? there in dataset.js const downvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); @@ -146,17 +146,17 @@ 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 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"; - votedIDs.set(dataSet.getAttribute("data-id"), up); + let dataSets = document.querySelectorAll('[data-id= ' + CSS.escape(entryID) + ']'); + for (const dataSetElement of dataSets) { + dataSetElement.querySelector("span").innerText = data.upvotes; + let votedButton = dataSetElement.querySelector(up? ".upvote-btn":".downvote-btn"); + votedButton.classList.add("isVoted"); + votedButton.disabled = true; + let notVotedButton = dataSetElement.querySelector(up? ".downvote-btn":".upvote-btn"); + notVotedButton.style.visibility = "hidden"; + votedIDs.set(dataSetElement.getAttribute("data-id"), up); + } }); - } // updates the page display. If no query is present, the initial page is shown, otherwise the search results. From 62b0d5c028a1f8140f0904b0f94229a6c095b5d1 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Wed, 3 Jul 2024 12:08:59 +0200 Subject: [PATCH 5/6] local storage now properly implemented, (sessionstorage) --- src/main/resources/static/dataset.js | 6 +++--- src/main/resources/static/main.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/main/resources/static/dataset.js b/src/main/resources/static/dataset.js index b13b7b6..947770f 100644 --- a/src/main/resources/static/dataset.js +++ b/src/main/resources/static/dataset.js @@ -38,11 +38,11 @@ export default class Dataset { clone.querySelector("span").innerText = this.#upvotes; // depending on whether the button has been up/downvoted, its according button get disabled and hidden - if (votedIDs.has(entryID)) { - let votedButton = clone.querySelector(votedIDs.get(entryID)? ".upvote-btn":".downvote-btn"); + if (votedIDs.getItem(entryID)) { + let votedButton = clone.querySelector(votedIDs.getItem(entryID)? ".upvote-btn":".downvote-btn"); votedButton.classList.add("isVoted"); votedButton.disabled = true; - let notVotedButton = clone.querySelector(votedIDs.get(entryID)? ".downvote-btn":".upvote-btn"); + let notVotedButton = clone.querySelector(votedIDs.getItem(entryID)? ".downvote-btn":".upvote-btn"); notVotedButton.style.visibility = "hidden"; } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 78eaa29..52ee670 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -8,7 +8,7 @@ export const lastQuery = { totalPages: 0, currentPage: 0 }; -export const votedIDs = new Map; +export const votedIDs = window.sessionStorage; // definition of all buttons & sections const addButton = document.getElementById("add-btn"); @@ -154,7 +154,7 @@ export function vote(entryID, up) { votedButton.disabled = true; let notVotedButton = dataSetElement.querySelector(up? ".downvote-btn":".upvote-btn"); notVotedButton.style.visibility = "hidden"; - votedIDs.set(dataSetElement.getAttribute("data-id"), up); + votedIDs.setItem(dataSetElement.getAttribute("data-id"), up); } }); } From bbb8c9259fa50a11e4faf528790624eb0cf4da8c Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Thu, 4 Jul 2024 18:28:44 +0200 Subject: [PATCH 6/6] accepted review comments --- src/main/resources/static/contentUtility.js | 3 +-- src/main/resources/static/dataset.js | 12 ++++++------ src/main/resources/static/main.js | 6 +++--- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index d08c0be..ff48f52 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -24,9 +24,8 @@ function parseContent(content, clearResults) { Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); } for (const dataset of datasets) { - console.log(dataset) //TODO: remove searchSection.querySelector(".datasets") - .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); + .appendChild(dataset.createDatasetHTMLElement()); } } } diff --git a/src/main/resources/static/dataset.js b/src/main/resources/static/dataset.js index 947770f..29170a8 100644 --- a/src/main/resources/static/dataset.js +++ b/src/main/resources/static/dataset.js @@ -1,4 +1,4 @@ -import { vote, votedIDs } from "./main.js"; +import { vote } from "./main.js"; export default class Dataset { #abstract; @@ -29,20 +29,20 @@ export default class Dataset { this.#votes = votes; } - createDatasetHTMLElement(entryID) { + createDatasetHTMLElement() { 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; - + let votedIDs = window.localStorage; // depending on whether the button has been up/downvoted, its according button get disabled and hidden - if (votedIDs.getItem(entryID)) { - let votedButton = clone.querySelector(votedIDs.getItem(entryID)? ".upvote-btn":".downvote-btn"); + if (votedIDs.getItem(this.#id)) { + let votedButton = clone.querySelector(votedIDs.getItem(this.#id)? ".upvote-btn":".downvote-btn"); votedButton.classList.add("isVoted"); votedButton.disabled = true; - let notVotedButton = clone.querySelector(votedIDs.getItem(entryID)? ".downvote-btn":".upvote-btn"); + let notVotedButton = clone.querySelector(votedIDs.getItem(this.#id)? ".downvote-btn":".upvote-btn"); notVotedButton.style.visibility = "hidden"; } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 52ee670..32caf41 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -8,7 +8,7 @@ export const lastQuery = { totalPages: 0, currentPage: 0 }; -export const votedIDs = window.sessionStorage; +const votedIDs = window.localStorage; // definition of all buttons & sections const addButton = document.getElementById("add-btn"); @@ -202,7 +202,7 @@ function fetchInitialEntries() { const datasets = data.content.map(dataset => new Dataset(dataset)); for (const dataset of datasets) { document.querySelector("#recents .datasets") - .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); + .appendChild(dataset.createDatasetHTMLElement()); } }); @@ -215,7 +215,7 @@ function fetchInitialEntries() { .then((data) => { let dataset = new Dataset(data.content[0]); document.querySelector("#top .datasets") - .appendChild(dataset.createDatasetHTMLElement(dataset.getID())); + .appendChild(dataset.createDatasetHTMLElement()); }); }