Merge branch 'implement-js' into 22-integrate-api-and-frontend

src/main/resources/static/contentUtility.js

@@ -0,0 +1,11 @@
+function fetchQuery(fetchString) {
+    fetch(fetchString)
+        .then(resp => resp.json())
+        .then((data) => {
+            parseContent(data.content);
+        });
+}
+
+function parseContent(content) {
+
+}

src/main/resources/static/main.css

@@ -4,7 +4,7 @@
     --text-color: #dbdbdb;
     --pad-datasets: 1rem;
     --pad-main: 2rem;
-    --min-card-size: 60ch;
+    --min-card-size: min(60ch, 33vw);
     --corner-radius: 1rem;
     font-size: 12pt;
     font-family: sans-serif;
@@ -49,6 +49,9 @@ header {
     gap: .5rem;
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
+    margin-bottom: var(--pad-datasets);
+    margin-left: var(--pad-datasets);
+    margin-right: var(--pad-datasets);
     border-radius: 1.5rem;
 }
 
@@ -69,14 +72,14 @@ header {
     gap: 1rem;
 }
 
-@container (width < 80ch) {
+@container (width < 60ch) {
     .datasets {
         grid-template-columns: 1fr;
     }
 }
 
 .dataset {
-    padding: 1rem 2rem;
+    padding: var(--pad-datasets) 2rem;
     background-color: var(--fg-color, darkgrey);
     border-radius: var(--corner-radius);
     list-style: none;
@@ -136,10 +139,18 @@ header {
     background-color: var(--bg-color);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) {
+#add-btn:is(:hover, :focus-visible) {
+    filter: brightness(1.2);
+}
+
+#add-btn:active {
+    filter: brightness(1.3);
+}
+
+.btn:is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
+.btn:active {
     filter: brightness(1.75);
 }

src/main/resources/static/main.js

@@ -0,0 +1,94 @@
+const baseURL = "http://" + window.location.host + "/api/v1/datasets";
+const defaultPagingValue = 20;
+const lastQuery = {
+    url: "",
+    totalPages: 0,
+    currentPage: 0
+};
+
+const addButton = document.getElementById("add-btn");
+addButton.addEventListener("click", () => {
+    navigateToAdd();
+});
+
+const filterButton = document.getElementById("filter-btn");
+filterButton.addEventListener("change", () => {
+    const filterString = filterButton.value;
+    filter(filterString);
+});
+
+const searchButton = document.getElementById("search-btn");
+searchButton.addEventListener("click", () => {
+    const searchString = searchBar.value;
+    search(searchString);
+});
+const searchBar = document.getElementById("search-entry");
+searchBar.addEventListener("input", () => {
+    const searchString = searchBar.value;
+    search(searchString);
+});
+
+const sortButton = document.getElementById("sort-btn");
+sortButton.addEventListener("change", () => {
+    const sortString = sortButton.value;
+    sort(sortString);
+});
+
+const upvoteButtons = document.getElementsByClassName("upvote-btn");
+const upvoteButtonClickListener = e  => {
+    const entryID = e.target.parentElement.parentElement.dataset.id;
+    vote(entryID, true);
+};
+for (const upvoteButton of upvoteButtons) {
+    upvoteButton.addEventListener("click", upvoteButtonClickListener);
+}
+
+const downvoteButtons = document.getElementsByClassName("downvote-btn");
+const downvoteButtonClickListener = e  => {
+    const entryID = e.target.parentElement.parentElement.dataset.id;
+    vote(entryID, false);
+};
+for (const downvoteButton of downvoteButtons) {
+    downvoteButton.addEventListener("click", downvoteButtonClickListener);
+}
+
+function navigateToAdd() {
+
+}
+
+function filter(filterString) {
+    filterString = filterString.toUpperCase();
+    const fetchURL = baseURL + "?type=" + filterString + "&size=" + defaultPagingValue;
+    fetchQuery(fetchURL);
+}
+
+function search(searchString) {
+    const fetchURL = baseURL + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString);
+    console.log(fetchURL);
+    fetchQuery(fetchURL);
+}
+
+function sort(sortString) {
+    let query = sortString.toLowerCase().split(" ");
+    if (query[1] === "A-Z" || query[1] === "↑") {
+        query[1] = "asc";
+    } else {
+        query[1] = "desc";
+    }
+    const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1];
+    console.log(fetchURL);
+    fetchQuery(fetchURL);
+}
+
+function vote(entryID, up) {
+    console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote"));
+    fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote");
+}
+
+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="text/javascript" src="main.js" defer></script>
 </head>
 <body>
-    <div onclick="console.log('add')" id="add-btn"></div>
+    <div onclick="console.log('add')" id="add-btn" title="Add a new API entry"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>
@@ -15,12 +16,18 @@
         </header>
 
         <section id="tool-bar">
-            <select id="sort-btn">Sort by
+            <select id="sort-btn" title="Sort entries">Sort by
-                <option>Option 1</option>
+                <option>Author A-Z</option>
-                <option>Option 2</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 id="filter-btn">Filter
+            <select class="btn" id="filter-btn" title="Filter entries">Filter
                 <optgroup label="Standard categories">
                     <option>Option 1</option>
                     <option>Option 2</option>
@@ -30,14 +37,14 @@
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
-            <button id="search-btn">Search</button>
+            <button class="btn" id="search-btn" title="Search entries">Search</button>
         </section>
 
         <section id="recents">
             <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">
@@ -46,9 +53,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -60,9 +67,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -74,9 +81,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -88,9 +95,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -102,9 +109,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
             </ul>
@@ -121,9 +128,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn">Downvote</button>
                     </aside>
                 </li>
             </ul>