modernize frontend somewhat
This commit is contained in:
@@ -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);
|
||||
|
Reference in New Issue
Block a user