started implementing local storage

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());
+            }
         }
     }
 

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;
+    }
 }

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;

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());
         });
 }
 

src/main/resources/templates/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
     <link rel="stylesheet" href="main.css">
-    <script type="module"  src="main.js" defer></script>
+    <script type="module" src="main.js" defer></script>
 </head>
 <body>
     <div id="add-btn" title="Add a new API entry"></div>