alazyreader
/
library
1
0
Fork 0
Code Issues 1 Pull Requests 3 Releases Wiki Activity

refactoring and fix race condition
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
David 2024-01-05 21:47:34 -05:00
parent 7459117b12
commit 965c2caca3
1 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/files/app.js
View File

@ -5,7 +5,9 @@ var sortState = {
var admin = false; var admin = false;
function init() { var books;
function checkAdminMode() {
fetch("/api/mode") fetch("/api/mode")
.then((response) => response.json()) .then((response) => response.json())
.then((resp) => (admin = resp.Admin)) .then((resp) => (admin = resp.Admin))
@ -19,36 +21,32 @@ function init() {
element.classList.remove("hidden"); element.classList.remove("hidden");
} }
}); });
}
function loadBookList() {
fetch("/api/books") fetch("/api/books")
.then((response) => response.json()) .then((response) => response.json())
.then((books) => { .then((list) => {
// prepare response // prepare response
books.forEach(apiResponseParsing); list.forEach(apiResponseParsing);
document.getElementById("search").addEventListener("input", (e) => { books = list;
renderTable( document.getElementById("search").addEventListener("input", rerender);
search( document.getElementById("childrens").addEventListener("change", rerender);
books, rerender();
e.target.value,
document.getElementById("childrens").checked
)
);
});
document.getElementById("childrens").addEventListener("change", (e) => {
renderTable(
search(
books,
document.getElementById("search").value,
e.target.checked
)
);
});
renderTable(
search(books, "", document.getElementById("childrens").checked)
);
}); });
} }
function rerender() {
var searchValue = document.getElementById("search").value;
var childrens = document.getElementById("childrens").checked;
renderTable(search(searchValue, childrens));
}
function init() {
checkAdminMode();
loadBookList();
}
function renderAddBookView() { function renderAddBookView() {
document.getElementById("current").innerHTML = AddBookTemplate(); document.getElementById("current").innerHTML = AddBookTemplate();
document.getElementById("lookup").addEventListener("click", (e) => { document.getElementById("lookup").addEventListener("click", (e) => {
@ -61,26 +59,20 @@ function renderAddBookView() {
}); });
document.getElementById("save").addEventListener("click", (e) => { document.getElementById("save").addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
fetch("/api/books", { saveBook({
method: "POST", title: document.getElementById("title").value,
headers: { "Content-Type": "application/json" }, authors: document.getElementById("authors").value.split(";"),
body: JSON.stringify({ sortAuthor: document.getElementById("sortAuthor").value,
title: document.getElementById("title").value, "isbn-10": document.getElementById("isbn-10").value,
authors: document.getElementById("authors").value.split(";"), "isbn-13": document.getElementById("isbn-13").value,
sortAuthor: document.getElementById("sortAuthor").value, publisher: document.getElementById("publisher").value,
"isbn-10": document.getElementById("isbn-10").value, format: document.getElementById("format").value,
"isbn-13": document.getElementById("isbn-13").value, genre: document.getElementById("genre").value,
publisher: document.getElementById("publisher").value, series: document.getElementById("series").value,
format: document.getElementById("format").value, volume: document.getElementById("volume").value,
genre: document.getElementById("genre").value, year: document.getElementById("year").value,
series: document.getElementById("series").value, coverURL: document.getElementById("coverURL").value,
volume: document.getElementById("volume").value,
year: document.getElementById("year").value,
coverURL: document.getElementById("coverURL").value,
}),
}); });
renderAddBookView();
init();
}); });
} }
@ -106,34 +98,35 @@ function saveBook(book) {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(book), body: JSON.stringify(book),
}).then(() => {
clearAddBookForm();
loadBookList();
}); });
} }
function renderTable(books, sortField) { function renderTable(bookList, sortField) {
if (sortField) { if (sortField) {
if (sortState.sortBy === sortField && sortState.sortOrder === "asc") { sortState.sortOrder =
sortState.sortOrder = "desc"; sortState.sortBy === sortField && sortState.sortOrder === "asc"
} else { ? "desc"
sortState.sortOrder = "asc"; : "asc";
}
sortState.sortBy = sortField; sortState.sortBy = sortField;
} }
books.sort((one, two) => bookList.sort((one, two) =>
(one[sortState.sortBy] + one["sortTitle"]).localeCompare( (one[sortState.sortBy] + one["sortTitle"]).localeCompare(
two[sortState.sortBy] + two["sortTitle"] two[sortState.sortBy] + two["sortTitle"]
) )
); );
if (sortState.sortOrder === "desc") { if (sortState.sortOrder === "desc") {
books.reverse(); bookList.reverse();
} }
books.forEach((e, i) => (e.rowNumber = i)); // re-key bookList.forEach((e, i) => (e.rowNumber = i)); // re-key
// rendering // rendering
var bookElement = document.getElementById("books"); var bookElement = document.getElementById("books");
bookElement.innerHTML = TableTemplate(books); bookElement.innerHTML = TableTemplate(bookList);
var bookCount = document.getElementById("bookCount"); document.getElementById("bookCount").innerHTML = `${bookList.length} books`;
bookCount.innerHTML = `${books.length} books`;
// add listeners for selecting book to view // add listeners for selecting book to view
Array.from(bookElement.querySelectorAll("tbody tr")) Array.from(bookElement.querySelectorAll("tbody tr"))
@ -142,7 +135,7 @@ function renderTable(books, sortField) {
row.addEventListener("click", (e) => { row.addEventListener("click", (e) => {
// add listener to swap current book // add listener to swap current book
document.getElementById("current").innerHTML = BookTemplate( document.getElementById("current").innerHTML = BookTemplate(
books[e.currentTarget.id] bookList[e.currentTarget.id]
); );
}); });
}); });
@ -151,7 +144,7 @@ function renderTable(books, sortField) {
(row) => { (row) => {
row.addEventListener("click", function (e) { row.addEventListener("click", function (e) {
// only add callback when there's a sortBy attribute // only add callback when there's a sortBy attribute
renderTable(books, e.target.dataset.sortBy); renderTable(bookList, e.target.dataset.sortBy);
}); });
} }
); );
@ -175,9 +168,9 @@ function apiResponseParsing(book) {
return book; return book;
} }
function search(books, searchBy, includeChildrensBooks) { function search(searchBy, includeChildrensBooks) {
searchBy = searchCleaner(searchBy); searchBy = searchCleaner(searchBy);
books = books.filter( return books.filter(
({ title, authors, genre, publisher, series, year, childrens }) => { ({ title, authors, genre, publisher, series, year, childrens }) => {
var inSearch = true; var inSearch = true;
if (searchBy !== "") { if (searchBy !== "") {
@ -196,7 +189,6 @@ function search(books, searchBy, includeChildrensBooks) {
return inSearch; return inSearch;
} }
); );
return books;
} }
function titleCleaner(title) { function titleCleaner(title) {
@ -222,6 +214,14 @@ function ISBNfromEAN(EAN) {
return ISBN + (checkdigit === 10 ? "X" : checkdigit); return ISBN + (checkdigit === 10 ? "X" : checkdigit);
} }
function clearAddBookForm() {
document
.getElementById("newBookForm")
.childNodes.forEach((node) =>
node.nodeName === "LABEL" ? (node.lastChild.value = "") : null
);
}
function BookTemplate({ function BookTemplate({
"isbn-13": isbn13, "isbn-13": isbn13,
"isbn-10": isbn10, "isbn-10": isbn10,