modernize frontend somewhat

This commit is contained in:
2021-08-02 21:31:54 -04:00
parent 9e4f10a7e0
commit f47f0e233c
3 changed files with 67 additions and 228 deletions

View File

@@ -4,7 +4,6 @@
<title>Library</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mustache.js"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -28,105 +27,78 @@
.then(showInfo);
}
function showInfo(data) {
$("#reloadLink").unbind("click");
$("#reloadLink").on("click", function () {
init();
});
$("#search").unbind("input");
$("#search").on("input", function (e) {
search(data, e.target.value);
});
$.each(data, function (key, value) {
value.sortTitle = titleCleaner(value.title);
if (!value["isbn-10"] && value["isbn-13"]) {
value["isbn-10"] = generateISBNfromEAN(value["isbn-13"]);
function showInfo(books) {
books.forEach((book) => {
book.sortTitle = titleCleaner(book.title);
if (!book["isbn-10"] && book["isbn-13"]) {
book["isbn-10"] = ISBNfromEAN(book["isbn-13"]);
}
if (!value.coverurl && value["isbn-10"]) {
value.coverurl = generateAmazonCoverUrl(value["isbn-10"]);
if (!book.coverurl && book["isbn-10"]) {
book.coverurl = amazonCoverUrl(book["isbn-10"]);
}
});
renderTable(data);
$("#search")
.unbind("input")
.on("input", (e) => {
search(books, e.target.value);
});
$("#reloadLink")
.unbind("click")
.on("click", () => {
init();
});
renderTable(books);
}
function search(data, searchString) {
searchBy = searchString
.toLowerCase()
.replace('"', "")
.replace(":", "")
.replace("'", "")
.replace(" ", "");
relevantFields = [
"title",
"authors",
"genre",
"publisher",
"series",
"year",
];
if (!searchString) {
renderTable(data);
return false;
function search(books, searchBy) {
searchBy = searchCleaner(searchBy);
if (searchBy !== "") {
books = books.filter(
({ title, authors, genre, publisher, series, year }) => {
return Object.values({
title,
authors: authors.join(" "),
genre,
publisher,
series,
year,
}).find((field) => searchCleaner(field).indexOf(searchBy) !== -1);
}
);
}
renderTable(
_.filter(data, function (book) {
return _.find(_.pick(book, relevantFields), function (field) {
if (_.isArray(field)) {
field = field.join(" ");
}
return (
field
.toLowerCase()
.replace('"', "")
.replace(":", "")
.replace("'", "")
.replace(" ", "")
.indexOf(searchBy) !== -1
);
});
})
);
renderTable(books);
}
function renderTable(data, sortField) {
function renderTable(books, sortField) {
if (sortField) {
if (sortState.sortBy === sortField) {
sortState.sortOrder =
sortState.sortOrder === "asc" ? "desc" : "asc"; // swap if we're looping
if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
sortState.sortOrder = "desc";
} else {
sortState.sortOrder = "asc"; // reset if we've changed columns
sortState.sortOrder = "asc";
}
sortState.sortBy = sortField;
}
data = _.orderBy(
data,
function (o) {
return (
o[sortState.sortBy].toLowerCase() + o["sortTitle"].toLowerCase()
);
},
sortState.sortOrder
books.sort((one, two) =>
(one[sortState.sortBy] + one["sortTitle"]).localeCompare(
two[sortState.sortBy] + two["sortTitle"]
)
);
if (sortState.sortOrder === "desc") {
books.reverse();
}
books.forEach((e, i) => (e.rowNumber = i)); // re-key for new sort
$.each(data, function (key, value) {
value.rowNumber = key; // re-key for new sort
});
var template = $("#Table").html();
var rendered = Mustache.render(template, { books: data });
$("#books").html(rendered);
$("#books").html(Mustache.render($("#Table").html(), { books }));
$("#books tbody tr")
.not(":first")
.not(":first") // ignore the headers
.on("click", function () {
updateCurrentBook(data[$(this)[0].id]); // ignore the headers
updateCurrentBook(books[$(this)[0].id]);
});
$("#books tbody tr th[data-sort-by]").on("click", function () {
renderTable(data, $(this).data("sortBy")); // only add callback when there's a sortBy attribute
renderTable(books, $(this).data("sortBy")); // only add callback when there's a sortBy attribute
});
$("#books tbody tr th[data-sort-by=" + sortState.sortBy + "]").addClass(
sortState.sortOrder
@@ -134,9 +106,7 @@
}
function updateCurrentBook(book) {
var template = $("#View").html();
var rendered = Mustache.render(template, { book: book });
$("#current").html(rendered);
$("#current").html(Mustache.render($("#View").html(), { book }));
}
function titleCleaner(title) {
@@ -146,21 +116,26 @@
.replace(/^(An?|The)\s/i, "");
}
function generateAmazonCoverUrl(ISBN) {
return (
"https://images-na.ssl-images-amazon.com/images/P/" +
ISBN +
".01.LZZ.jpg"
);
function searchCleaner(str) {
return str
.toLowerCase()
.replace('"', "")
.replace(":", "")
.replace("'", "")
.replace(" ", "");
}
function generateISBNfromEAN(EAN) {
function amazonCoverUrl(ISBN) {
return `https://images-na.ssl-images-amazon.com/images/P/${ISBN}.01.LZZ.jpg`;
}
function ISBNfromEAN(EAN) {
ISBN = EAN.slice(3, 12);
var checkdigit =
(11 -
(_.reduce(ISBN.split(""), (s, n, k) => s + n * (10 - k), 0) % 11)) %
(ISBN.split("").reduce((s, n, k) => s + n * (10 - k), 0) % 11)) %
11;
return ISBN + (checkdigit == 10 ? "X" : checkdigit);
return ISBN + (checkdigit === 10 ? "X" : checkdigit);
}
window.addEventListener("DOMContentLoaded", init);