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,
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user