Erik/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

main page states (search & initial) are now working

Browse Source
This commit is contained in:
J-Klinke 2024-06-30 11:55:20 +02:00
parent b7ecb4500c
commit 4e645903e3
4 changed files with 80 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/static/main.css
View File

@ -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;

21
src/main/resources/static/main.js
View File

@ -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");
}
}

52
src/main/resources/static/reset.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
src/main/resources/templates/index.html
View File

@ -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>