main page states (search & initial) are now working

src/main/resources/static/main.css

@@ -42,6 +42,7 @@ header {
     left: 0;
     z-index: 1;
 }
+
 #tool-bar {
     display: flex;
     flex-direction: row;
@@ -77,18 +78,6 @@ header {
     text-align: center;
 }
 
-
-/*
-#search .datasets:empty {
-    background: url("sad-looking-glass.svg");
-    height: 7rem;
-    width: 7rem;
-    padding: var(--pad-main);
-}
-
- */
-
-
 .hidden {
     display: none;
 }
@@ -103,10 +92,6 @@ header {
     gap: 1rem;
 }
 
-
-
-
-
 @container (width < 60ch) {
     .datasets {
         grid-template-columns: 1fr;
@@ -133,7 +118,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
+.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -163,6 +148,11 @@ header {
     --icon-size: 1rem;
 }
 
+#reset-tools-btn {
+    --icon-url: url(reset.svg);
+    --icon-size: 1rem;
+}
+
 #sort-btn {
     --icon-url: url(sort.svg);
     --icon-size: 1rem;

src/main/resources/static/main.js

@@ -15,6 +15,7 @@ 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 resetButton = document.getElementById("reset-tools-btn");
 const upvoteButtons = document.getElementsByClassName("upvote-btn");
 const downvoteButtons = document.getElementsByClassName("downvote-btn");
 export const searchSection = document.getElementById("search");
@@ -32,7 +33,9 @@ addButton.addEventListener("click", () => {
 
 filterButton.addEventListener("change", () => {
     const filterString = filterButton.value;
-    filter(filterString);
+    if (filterString !== filterButton.querySelector("#default-filter").value) {
+        filter(filterString);
+    }
 });
 
 searchButton.addEventListener("click", () => {
@@ -61,6 +64,13 @@ sortButton.addEventListener("change", () => {
     sort(sortString);
 });
 
+resetButton.addEventListener("click", () => {
+    searchBar.value = "";
+    filterButton.value = filterButton.querySelector("#default-filter").value;
+    sortButton.value = sortButton.querySelector("#default-sort").value;
+    updateSections();
+})
+
 // Consider moving this to datasets.js completely
 const upvoteButtonClickListener = e => {
     const entryID = e.target.parentElement.parentElement.dataset.id;
@@ -86,6 +96,7 @@ function navigateToAdd() {
 }
 
 function filter(filterString) {
+    updateSections();
     filterString = filterString.toUpperCase();
     let fetchURL = new URL(apiEndpoint, baseURL);
     fetchURL.searchParams.append("type", filterString);
@@ -95,9 +106,9 @@ function filter(filterString) {
 }
 
 function search(searchString) {
+    updateSections();
     let fetchURL = new URL(apiEndpoint + "/search", baseURL);
     fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString);
-
     console.log(fetchURL); // TODO: remove
     fetchQuery(fetchURL);
 }
@@ -109,6 +120,7 @@ function sort(sortString) {
     } else {
         query[1] = "desc";
     }
+    updateSections();
     let fetchURL = new URL(apiEndpoint, baseURL);
     fetchURL.searchParams.append("sort", query[0]);
     fetchURL.searchParams.append("direction", query[1]);
@@ -140,14 +152,17 @@ function incrementPageCount() {
 }
 
 function updateSections() {
-    if (searchBar.value === "") {
+    if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
+        && filterButton.value === filterButton.querySelector("#default-filter").value) {
         searchSection.classList.add("hidden");
         recentSection.classList.remove("hidden");
         mostLikedSection.classList.remove("hidden");
+        resetButton.classList.add("hidden");
     } else {
         searchSection.classList.remove("hidden");
         recentSection.classList.add("hidden");
         mostLikedSection.classList.add("hidden");
+        resetButton.classList.remove("hidden");
     }
 }
 

src/main/resources/static/reset.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.70667in" height="1.70667in"
+     viewBox="0 0 512 512">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 237.00,255.00
+           C 232.17,252.53 227.04,246.25 222.99,242.29
+             222.99,242.29 198.20,217.75 198.20,217.75
+             198.20,217.75 163.08,182.72 163.08,182.72
+             163.08,182.72 125.09,144.45 125.09,144.45
+             125.09,144.45 100.59,120.08 100.59,120.08
+             95.21,114.71 91.15,113.03 91.00,105.00
+             90.96,102.52 90.73,98.57 91.99,96.43
+             95.30,90.82 104.55,89.45 110.00,92.17
+             114.03,94.19 130.60,111.60 135.00,116.00
+             135.00,116.00 215.00,196.00 215.00,196.00
+             215.00,196.00 257.00,237.00 257.00,237.00
+             259.56,232.22 265.16,227.50 269.08,223.59
+             269.08,223.59 290.92,201.92 290.92,201.92
+             290.92,201.92 367.41,125.08 367.41,125.08
+             367.41,125.08 391.85,101.05 391.85,101.05
+             396.75,96.08 399.44,91.44 407.00,91.04
+             416.65,90.54 421.50,95.35 420.96,105.00
+             420.60,111.25 417.19,113.79 413.00,118.00
+             413.00,118.00 397.00,134.00 397.00,134.00
+             397.00,134.00 307.00,224.00 307.00,224.00
+             307.00,224.00 284.00,247.00 284.00,247.00
+             282.10,248.90 277.04,253.27 277.04,256.00
+             277.04,258.73 282.10,263.10 284.00,265.00
+             284.00,265.00 307.00,288.00 307.00,288.00
+             307.00,288.00 397.00,378.00 397.00,378.00
+             397.00,378.00 412.00,393.00 412.00,393.00
+             414.67,395.67 418.93,399.50 420.26,403.00
+             420.95,404.81 421.00,407.07 420.99,409.00
+             420.95,417.91 415.37,421.34 407.00,420.96
+             399.20,420.61 397.05,416.34 391.92,411.26
+             391.92,411.26 368.25,387.75 368.25,387.75
+             368.25,387.75 291.75,311.25 291.75,311.25
+             291.75,311.25 269.08,288.42 269.08,288.42
+             265.10,284.40 259.51,279.96 257.00,275.00
+             257.00,275.00 219.83,311.28 219.83,311.28
+             219.83,311.28 135.00,396.00 135.00,396.00
+             135.00,396.00 119.08,412.08 119.08,412.08
+             116.77,414.39 112.71,418.94 109.83,420.13
+             104.28,422.42 95.26,421.12 91.99,415.57
+             90.73,413.43 90.96,409.48 91.00,407.00
+             91.14,399.23 95.36,397.16 100.59,391.92
+             100.59,391.92 127.56,365.29 127.56,365.29
+             127.56,365.29 202.25,290.25 202.25,290.25
+             202.25,290.25 237.00,255.00 237.00,255.00 Z" />
+</svg>

src/main/resources/templates/index.html

@@ -32,8 +32,9 @@
         </template>
 
         <section id="tool-bar">
+            <button class="btn flat" id="reset-tools-btn" title="Reset search results">Reset</button>
             <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
-                <option>Date newest-oldest</option>
+                <option id="default-sort">Date newest-oldest</option>
                 <option>Date oldest-newest</option>
                 <option>Author A-Z</option>
                 <option>Author Z-A</option>
@@ -46,6 +47,7 @@
             </select>
             <div class="divider"></div>
             <select class="btn flat" id="filter-btn" title="Filter entries">Filter
+                <option id="default-filter">None</option>
                 <optgroup label="Standard categories">
                     <option>Dataset</option>
                     <option>API</option>