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

Merge remote-tracking branch 'origin/implement-js' into 22-integrate-api-and-frontend

Browse Source
This commit is contained in:
Erik Foris 2024-06-21 12:07:02 +02:00
commit 273d67e63f
5 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/static/add.css
View File

@ -66,6 +66,7 @@ label:has(#is-dataset) {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--text-color); background-color: var(--text-color);
transition: inset-inline ease-out 50ms; transition: inset-inline ease-out 50ms;
filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
} }
#is-dataset:not(:checked) + #is-dataset-toggle::before { #is-dataset:not(:checked) + #is-dataset-toggle::before {

7
src/main/resources/static/contentUtility.js
View File

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

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

@ -147,10 +147,14 @@ header {
filter: brightness(1.3); filter: brightness(1.3);
} }
.btn:is(:hover, :focus-visible) { .btn.flat {
transition: filter ease-out 50ms;
}
.btn.flat:is(:hover, :focus-visible) {
filter: brightness(1.5); filter: brightness(1.5);
} }
.btn:active { .btn.flat:active {
filter: brightness(1.75); filter: brightness(1.75);
} }

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

@ -1,4 +1,6 @@
const baseURL = "http://" + window.location.host + "/api/v1/datasets"; import { fetchQuery } from "./contentUtility.js";
const apiEndpoint = "/api/v1/datasets";
const defaultPagingValue = 20; const defaultPagingValue = 20;
const lastQuery = { const lastQuery = {
url: "", url: "",
@ -6,35 +8,53 @@ const lastQuery = {
currentPage: 0 currentPage: 0
}; };
// definition of all buttons
const addButton = document.getElementById("add-btn"); 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", () => { addButton.addEventListener("click", () => {
navigateToAdd(); navigateToAdd();
}); });
const filterButton = document.getElementById("filter-btn");
filterButton.addEventListener("change", () => { filterButton.addEventListener("change", () => {
const filterString = filterButton.value; const filterString = filterButton.value;
filter(filterString); filter(filterString);
}); });
const searchButton = document.getElementById("search-btn");
searchButton.addEventListener("click", () => { searchButton.addEventListener("click", () => {
const searchString = searchBar.value; const searchString = searchBar.value;
search(searchString); search(searchString);
}); });
const searchBar = document.getElementById("search-entry");
searchBar.addEventListener("input", () => { searchBar.addEventListener("input", () => {
const searchString = searchBar.value; clearTimeout(searchBarTimeout);
search(searchString); searchBarTimeout = setTimeout(() => {
const searchString = searchBar.value;
search(searchString);
}, 1000);
}); });
const sortButton = document.getElementById("sort-btn"); searchBar.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const searchString = searchBar.value;
search(searchString);
}
})
sortButton.addEventListener("change", () => { sortButton.addEventListener("change", () => {
const sortString = sortButton.value; const sortString = sortButton.value;
sort(sortString); sort(sortString);
}); });
const upvoteButtons = document.getElementsByClassName("upvote-btn");
const upvoteButtonClickListener = e => { const upvoteButtonClickListener = e => {
const entryID = e.target.parentElement.parentElement.dataset.id; const entryID = e.target.parentElement.parentElement.dataset.id;
vote(entryID, true); vote(entryID, true);
@ -43,7 +63,6 @@ for (const upvoteButton of upvoteButtons) {
upvoteButton.addEventListener("click", upvoteButtonClickListener); upvoteButton.addEventListener("click", upvoteButtonClickListener);
} }
const downvoteButtons = document.getElementsByClassName("downvote-btn");
const downvoteButtonClickListener = e => { const downvoteButtonClickListener = e => {
const entryID = e.target.parentElement.parentElement.dataset.id; const entryID = e.target.parentElement.parentElement.dataset.id;
vote(entryID, false); vote(entryID, false);
@ -52,43 +71,41 @@ for (const downvoteButton of downvoteButtons) {
downvoteButton.addEventListener("click", downvoteButtonClickListener); downvoteButton.addEventListener("click", downvoteButtonClickListener);
} }
// functions of the main page
function navigateToAdd() { function navigateToAdd() {
//TODO: url to add page not yet implemented, add here
} }
function filter(filterString) { function filter(filterString) {
filterString = filterString.toUpperCase(); filterString = filterString.toUpperCase();
const fetchURL = baseURL + "?type=" + filterString + "&size=" + defaultPagingValue; const fetchURL = apiEndpoint + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue;
console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL); fetchQuery(fetchURL);
} }
function search(searchString) { function search(searchString) {
const fetchURL = baseURL + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); const fetchURL = apiEndpoint + "/search" + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString);
console.log(fetchURL); console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL); fetchQuery(fetchURL);
} }
function sort(sortString) { function sort(sortString) {
let query = sortString.toLowerCase().split(" "); let query = sortString.toLowerCase().split(" ");
if (query[1] === "A-Z" || query[1] === "↑") { if (query[1] === "a-z" || query[1] === "↑") {
query[1] = "asc"; query[1] = "asc";
} else { } else {
query[1] = "desc"; query[1] = "desc";
} }
const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1]; const fetchURL = apiEndpoint + "?sort=" + query[0] + "&direction=" + query[1];
console.log(fetchURL); console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL); fetchQuery(fetchURL);
} }
function vote(entryID, up) { function vote(entryID, up) {
console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote")); console.log(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote")); // TODO: remove
fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote"); fetch(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote"));
} }
function incrementPageCount() { function incrementPageCount() {
lastQuery.currentPage++; lastQuery.currentPage++;
} }

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

@ -5,10 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataDash</title> <title>DataDash</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script type="text/javascript" src="main.js" defer></script> <script type="module" src="main.js" defer></script>
</head> </head>
<body> <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> <main>
<header> <header>
<h1>Welcome to DataDash</h1> <h1>Welcome to DataDash</h1>
@ -16,7 +16,7 @@
</header> </header>
<section id="tool-bar"> <section id="tool-bar">
<select id="sort-btn" title="Sort entries">Sort by <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
<option>Author A-Z</option> <option>Author A-Z</option>
<option>Author Z-A</option> <option>Author Z-A</option>
<option>Title A-Z</option> <option>Title A-Z</option>
@ -27,17 +27,17 @@
<option>Votes ↓</option> <option>Votes ↓</option>
</select> </select>
<div class="divider"></div> <div class="divider"></div>
<select class="btn" id="filter-btn" title="Filter entries">Filter <select class="btn flat" id="filter-btn" title="Filter entries">Filter
<optgroup label="Standard categories"> <optgroup label="Standard categories">
<option>Option 1</option> <option>Dataset</option>
<option>Option 2</option> <option>API</option>
</optgroup> </optgroup>
<optgroup label="User categories"> <optgroup label="Other categories">
<option>user category</option> <option>a category</option>
</optgroup> </optgroup>
</select> </select>
<input type="search" name="query" id="search-entry" placeholder="Search"> <input type="search" name="query" id="search-entry" placeholder="Search">
<button class="btn" id="search-btn" title="Search entries">Search</button> <button class="btn flat" id="search-btn" title="Search entries">Search</button>
</section> </section>
<section id="recents"> <section id="recents">
@ -53,9 +53,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -67,9 +67,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -81,9 +81,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -95,9 +95,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -109,9 +109,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>
@ -128,9 +128,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>