Merge branch '22-integrate-api-and-frontend' into '11-add-api-for-getting-home-page-data'
Resolve "Integrate api and frontend" See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!19
This commit is contained in:
Julian Klinke
commit
1b73f88cc4
@ -66,6 +66,7 @@ label:has(#is-dataset) {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--text-color);
|
||||
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 {
|
||||
|
||||
14
src/main/resources/static/contentUtility.js
Normal file
14
src/main/resources/static/contentUtility.js
Normal file
@ -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
|
||||
}
|
||||
@ -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,22 @@ 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.flat {
|
||||
transition: filter ease-out 50ms;
|
||||
}
|
||||
|
||||
.btn.flat:is(:hover, :focus-visible) {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
|
||||
.btn.flat:active {
|
||||
filter: brightness(1.75);
|
||||
}
|
||||
|
||||
127
src/main/resources/static/main.js
Normal file
127
src/main/resources/static/main.js
Normal file
@ -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++;
|
||||
}
|
||||
@ -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"></div>
|
||||
<div id="add-btn" title="Add a new API entry"></div>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Welcome to DataDash</h1>
|
||||
@ -15,29 +16,35 @@
|
||||
</header>
|
||||
|
||||
<section id="tool-bar">
|
||||
<select id="sort-btn">Sort by
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<select id="sort-btn" class="btn flat" title="Sort entries">Sort by
|
||||
<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 id="filter-btn">Filter
|
||||
<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">
|
||||
<button id="search-btn">Search</button>
|
||||
<button class="btn flat" 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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">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 flat">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn">Downvote</button>
|
||||
<button class="downvote-btn btn flat">Downvote</button>
|
||||
</aside>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user