Merge branch 'main' into 15-make-content-adding-page-functional-js

src/main/resources/static/contentUtility.js

@@ -0,0 +1,14 @@
+import { searchBarTimeout } from "./main.js"
+
+export function fetchQuery(fetchString) {
+    clearTimeout(searchBarTimeout);
+    fetch(fetchString)
+        .then(resp => resp.json())
+        .then((data) => {
+            parseContent(data.content);
+        });
+}
+
+function parseContent(content) {
+    //TODO: method for parsing query results
+}

src/main/resources/static/main.js

@@ -0,0 +1,127 @@
+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
+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 upvoteButtons = document.getElementsByClassName("upvote-btn");
+const downvoteButtons = document.getElementsByClassName("downvote-btn");
+
+// ID of the timeout, because we need to cancel it at some point
+export let searchBarTimeout;
+
+// Event listeners
+addButton.addEventListener("click", () => {
+    navigateToAdd();
+});
+
+filterButton.addEventListener("change", () => {
+    const filterString = filterButton.value;
+    filter(filterString);
+});
+
+searchButton.addEventListener("click", () => {
+    const searchString = searchBar.value;
+    search(searchString);
+});
+
+searchBar.addEventListener("input", () => {
+    clearTimeout(searchBarTimeout);
+    searchBarTimeout = setTimeout(() => {
+        const searchString = searchBar.value;
+        search(searchString);
+    }, 1000);
+});
+
+searchBar.addEventListener('keypress', function (e) {
+    if (e.key === 'Enter') {
+        const searchString = searchBar.value;
+        search(searchString);
+    }
+})
+
+sortButton.addEventListener("change", () => {
+    const sortString = sortButton.value;
+    sort(sortString);
+});
+
+const upvoteButtonClickListener = e  => {
+    const entryID = e.target.parentElement.parentElement.dataset.id;
+    vote(entryID, true);
+};
+for (const upvoteButton of upvoteButtons) {
+    upvoteButton.addEventListener("click", upvoteButtonClickListener);
+}
+
+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
+}
+
+function filter(filterString) {
+    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) {
+    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] = "asc";
+    } else {
+        query[1] = "desc";
+    }
+
+    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);
+}
+
+function vote(entryID, up) {
+    const fetchURL = new URL(
+        `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
+        baseURL,
+    );
+
+    console.log(fetchURL); // TODO: remove
+    fetch(fetchURL);
+}
+
+function incrementPageCount() {
+    lastQuery.currentPage++;
+}

src/main/resources/templates/index.html

@@ -5,9 +5,10 @@
     <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>
 </head>
 <body>
-    <div onclick="console.log('add')" id="add-btn" title="Add a new API entry"></div>
+    <div id="add-btn" title="Add a new API entry"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>
@@ -16,17 +17,23 @@
 
         <section id="tool-bar">
             <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
-                <option>Option 1</option>
-                <option>Option 2</option>
+                <option>Author A-Z</option>
+                <option>Author Z-A</option>
+                <option>Title A-Z</option>
+                <option>Title Z-A</option>
+                <option>Stars ↑</option>
+                <option>Stars ↓</option>
+                <option>Votes ↑</option>
+                <option>Votes ↓</option>
             </select>
             <div class="divider"></div>
             <select class="btn flat" id="filter-btn" title="Filter entries">Filter
                 <optgroup label="Standard categories">
-                    <option>Option 1</option>
-                    <option>Option 2</option>
+                    <option>Dataset</option>
+                    <option>API</option>
                 </optgroup>
-                <optgroup label="User categories">
-                    <option>user category</option>
+                <optgroup label="Other categories">
+                    <option>a category</option>
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
@@ -37,7 +44,7 @@
             <h2>Recently added:</h2>
             <ul class="datasets">
                 <!-- Preliminary content to be replaced by data from our server: -->
-                <li class="dataset">
+                <li class="dataset" data-id="">
                     <div class="dataset-info">
                         <div class="icon standup"></div>
                         <div class="details">