management server listener #17
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user