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

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

Browse Source
This commit is contained in:
Erik Foris 2024-06-21 12:05:45 +02:00
commit 722be51529
4 changed files with 147 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/resources/static/contentUtility.js Normal file
View File

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

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

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

94
src/main/resources/static/main.js Normal file
View File

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

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

@ -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
<option>Option 1</option>
<option>Option 2</option>
<select id="sort-btn" 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" 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>