finished centralization of query creation.
DatasetController.java: changed mapping for simplification index.html: Changed option text also for simplification main.js: replaced dedicated query methods for search, sort & filter with a central one, also refactored the url parameter generation process. Also removed resolved TODOs and added comments
This commit is contained in:
parent
32ba4995be
commit
e5a4b1186e
@ -65,7 +65,7 @@ public class DatasetController {
|
|||||||
return getDatasetById(id); // new ResponseEntity<>(null, HttpStatus.OK);
|
return getDatasetById(id); // new ResponseEntity<>(null, HttpStatus.OK);
|
||||||
}
|
}
|
||||||
|
|
||||||
@PutMapping("/id/{id}/vote")
|
@PutMapping("/id/{id}/stars")
|
||||||
public Dataset postMethodName(@PathVariable("id") UUID id,
|
public Dataset postMethodName(@PathVariable("id") UUID id,
|
||||||
@RequestParam("stars") int stars) {
|
@RequestParam("stars") int stars) {
|
||||||
if (stars > 0 && stars < 6) {
|
if (stars > 0 && stars < 6) {
|
||||||
|
@ -34,34 +34,31 @@ addButton.addEventListener("click", () => {
|
|||||||
filterButton.addEventListener("change", () => {
|
filterButton.addEventListener("change", () => {
|
||||||
const filterString = filterButton.value;
|
const filterString = filterButton.value;
|
||||||
if (filterString !== filterButton.querySelector("#default-filter").value) {
|
if (filterString !== filterButton.querySelector("#default-filter").value) {
|
||||||
filter(filterString);
|
fetchQuery(createQuery());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
searchButton.addEventListener("click", () => {
|
searchButton.addEventListener("click", () => {
|
||||||
const searchString = searchBar.value;
|
fetchQuery(createQuery());
|
||||||
search(searchString);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
searchBar.addEventListener("input", () => {
|
searchBar.addEventListener("input", () => {
|
||||||
updateSections();
|
updateSections();
|
||||||
clearTimeout(searchBarTimeout);
|
clearTimeout(searchBarTimeout);
|
||||||
searchBarTimeout = setTimeout(() => {
|
searchBarTimeout = setTimeout(() => {
|
||||||
const searchString = searchBar.value;
|
fetchQuery(createQuery());
|
||||||
search(searchString);
|
|
||||||
}, searchDelay);
|
}, searchDelay);
|
||||||
});
|
});
|
||||||
|
|
||||||
searchBar.addEventListener('keypress', function (e) {
|
searchBar.addEventListener('keypress', function (e) {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
const searchString = searchBar.value;
|
fetchQuery(createQuery());
|
||||||
search(searchString);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
sortButton.addEventListener("change", () => {
|
sortButton.addEventListener("change", () => {
|
||||||
const sortString = sortButton.value;
|
fetchQuery(createQuery());
|
||||||
sort(sortString);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
resetButton.addEventListener("click", () => {
|
resetButton.addEventListener("click", () => {
|
||||||
@ -91,53 +88,24 @@ for (const downvoteButton of downvoteButtons) {
|
|||||||
|
|
||||||
// functions of the main page
|
// functions of the main page
|
||||||
function navigateToAdd() {
|
function navigateToAdd() {
|
||||||
//TODO: url to add page not yet implemented, add here
|
|
||||||
window.location.href = "/add";
|
window.location.href = "/add";
|
||||||
}
|
}
|
||||||
|
|
||||||
function filter(filterString) {
|
|
||||||
updateSections();
|
|
||||||
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 getFilterQuery() {
|
function getFilterQuery() {
|
||||||
let filterString= filterButton.value.toUpperCase();
|
let filterString= filterButton.value.toUpperCase();
|
||||||
return "?type=" + filterString;
|
if (filterString === "NONE") {
|
||||||
|
return ["type", "%"]
|
||||||
|
} else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") {
|
||||||
|
return ["type", filterString];
|
||||||
|
} else {
|
||||||
|
return ["category", 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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSearchQuery() {
|
function getSearchQuery() {
|
||||||
let searchString = searchBar.value;
|
let searchString = searchBar.value;
|
||||||
return "?search=" + (searchString.length === 0 ? "%" : searchString);
|
return (searchString.length === 0 ? "%" : (searchString + "%"));
|
||||||
}
|
}
|
||||||
|
|
||||||
function sort(sortString) {
|
|
||||||
let query = sortString.toLowerCase().split(" ");
|
|
||||||
if (query[1] === "a-z" || query[1] === "↑" || query[1] === "oldest-newest") {
|
|
||||||
query[1] = "asc";
|
|
||||||
} else {
|
|
||||||
query[1] = "desc";
|
|
||||||
}
|
|
||||||
updateSections();
|
|
||||||
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 getSortQuery() {
|
function getSortQuery() {
|
||||||
let sortString = sortButton.value.toLowerCase().split(" ");
|
let sortString = sortButton.value.toLowerCase().split(" ");
|
||||||
if (sortString[1] === "a-z" || sortString[1] === "↑" || sortString[1] === "oldest-newest") {
|
if (sortString[1] === "a-z" || sortString[1] === "↑" || sortString[1] === "oldest-newest") {
|
||||||
@ -145,19 +113,19 @@ function getSortQuery() {
|
|||||||
} else {
|
} else {
|
||||||
sortString[1] = "desc";
|
sortString[1] = "desc";
|
||||||
}
|
}
|
||||||
return "?sort=" + sortString[0] + "&direction=" + sortString[1];
|
return sortString
|
||||||
}
|
}
|
||||||
|
|
||||||
// creates query for the whole toolbar, so that searching, sorting and filtering are always combined
|
// creates query for the whole toolbar, so that searching, sorting and filtering are always combined
|
||||||
function createQuery() {
|
function createQuery() {
|
||||||
updateSections();
|
updateSections();
|
||||||
let queryURL = new URL(apiEndpoint + "/search", baseURL);
|
let queryURL = new URL(apiEndpoint + "/search", baseURL);
|
||||||
queryURL.append(getSearchQuery());
|
queryURL.searchParams.append("search", getSearchQuery());
|
||||||
queryURL.append(getFilterQuery());
|
queryURL.searchParams.append(getFilterQuery()[0], getFilterQuery()[1]);
|
||||||
queryURL.append(getSortQuery());
|
queryURL.searchParams.append("sort", getSortQuery()[0]);
|
||||||
queryURL.append("&size=" + defaultPagingValue);
|
queryURL.searchParams.append("direction", getSortQuery()[1]);
|
||||||
console.log(queryURL); // TODO: remove
|
queryURL.searchParams.append("size", defaultPagingValue.toString(10));
|
||||||
fetchQuery(queryURL);
|
return queryURL;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function vote(entryID, up) {
|
export function vote(entryID, up) {
|
||||||
@ -165,7 +133,6 @@ export function vote(entryID, up) {
|
|||||||
`${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
|
`${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
|
||||||
baseURL,
|
baseURL,
|
||||||
);
|
);
|
||||||
console.log(fetchURL); // TODO: remove
|
|
||||||
fetch(fetchURL, {
|
fetch(fetchURL, {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: {
|
headers: {
|
||||||
@ -183,6 +150,7 @@ function incrementPageCount() {
|
|||||||
lastQuery.currentPage++;
|
lastQuery.currentPage++;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// updates the page display. If no query is present, the initial page is shown, otherwise the search results.
|
||||||
function updateSections() {
|
function updateSections() {
|
||||||
if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
|
if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
|
||||||
&& filterButton.value === filterButton.querySelector("#default-filter").value) {
|
&& filterButton.value === filterButton.querySelector("#default-filter").value) {
|
||||||
@ -217,6 +185,6 @@ window.onload = function () {
|
|||||||
fetchCategories();
|
fetchCategories();
|
||||||
updateSections();
|
updateSections();
|
||||||
if (searchBar.value !== "") {
|
if (searchBar.value !== "") {
|
||||||
search(searchBar.value);
|
fetchQuery(createQuery());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -42,8 +42,8 @@
|
|||||||
<option>Title Z-A</option>
|
<option>Title Z-A</option>
|
||||||
<option>Stars ↑</option>
|
<option>Stars ↑</option>
|
||||||
<option>Stars ↓</option>
|
<option>Stars ↓</option>
|
||||||
<option>Votes ↑</option>
|
<option>Upvotes ↑</option>
|
||||||
<option>Votes ↓</option>
|
<option>Upvotes ↓</option>
|
||||||
</select>
|
</select>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<select class="btn flat" id="filter-btn" title="Filter entries">Filter
|
<select class="btn flat" id="filter-btn" title="Filter entries">Filter
|
||||||
|
Loading…
Reference in New Issue
Block a user