From b52949f3e900a24fb6aaba98fc4d8e276ab7ddd6 Mon Sep 17 00:00:00 2001
From: David Ashby <delta.mu.alpha@gmail.com>
Date: Sun, 31 Oct 2021 20:00:04 -0400
Subject: [PATCH] move js file into its own file

---
 frontend/files/app.js     | 195 +++++++++++++++++++++++++++++++++++++
 frontend/files/index.html | 199 +-------------------------------------
 2 files changed, 196 insertions(+), 198 deletions(-)
 create mode 100644 frontend/files/app.js

diff --git a/frontend/files/app.js b/frontend/files/app.js
new file mode 100644
index 0000000..b7ada36
--- /dev/null
+++ b/frontend/files/app.js
@@ -0,0 +1,195 @@
+var sortState = {
+  sortBy: "sortAuthor",
+  sortOrder: "asc",
+};
+
+function init() {
+  fetch("/api")
+    .then((response) => response.json())
+    .then((books) => {
+      // prepare response
+      books.forEach(apiResponseParsing);
+      document.getElementById("search").addEventListener("input", (e) => {
+        renderTable(search(books, e.target.value));
+      });
+      renderTable(books);
+    });
+}
+
+function apiResponseParsing(book) {
+  book.sortTitle = titleCleaner(book.title);
+  if (!book["isbn-10"] && book["isbn-13"]) {
+    book["isbn-10"] = ISBNfromEAN(book["isbn-13"]);
+  }
+  if (!book.coverurl && book["isbn-10"]) {
+    book.coverurl =
+      `https://images-na.ssl-images-amazon.com/images/P/` +
+      book["isbn-10"] +
+      `.01.LZZ.jpg`;
+  }
+  return book;
+}
+
+function renderTable(books, sortField) {
+  if (sortField) {
+    if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
+      sortState.sortOrder = "desc";
+    } else {
+      sortState.sortOrder = "asc";
+    }
+    sortState.sortBy = sortField;
+  }
+  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
+
+  // rendering
+  var bookElement = document.getElementById("books");
+  bookElement.innerHTML = TableTemplate(books);
+
+  // add listeners for selecting book to view
+  Array.from(bookElement.querySelectorAll("tbody tr"))
+    .slice(1) // remove header from Array
+    .forEach((row) => {
+      row.addEventListener("click", (e) => {
+        // add listener to swap current book
+        document.getElementById("current").innerHTML = BookTemplate(
+          books[e.currentTarget.id]
+        );
+      });
+    });
+  // add sorting callbacks
+  Array.from(bookElement.querySelectorAll("tbody tr th[data-sort-by]")).forEach(
+    (row) => {
+      row.addEventListener("click", function (e) {
+        renderTable(books, e.target.dataset.sortBy); // only add callback when there's a sortBy attribute
+      });
+    }
+  );
+  // mark currently active column
+  bookElement
+    .querySelector("tbody tr th[data-sort-by=" + sortState.sortBy + "]")
+    .classList.add(sortState.sortOrder);
+}
+
+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);
+      }
+    );
+  }
+  return books;
+}
+
+function titleCleaner(title) {
+  return title
+    .replace('"', "")
+    .replace(":", "")
+    .replace(/^(An?|The)\s/i, "");
+}
+
+function searchCleaner(str) {
+  return str
+    .toLowerCase()
+    .replaceAll('"', "")
+    .replaceAll(":", "")
+    .replaceAll("'", "")
+    .replaceAll(" ", "");
+}
+
+function ISBNfromEAN(EAN) {
+  ISBN = EAN.slice(3, 12);
+  var checkdigit =
+    (11 - (ISBN.split("").reduce((s, n, k) => s + n * (10 - k), 0) % 11)) % 11;
+  return ISBN + (checkdigit === 10 ? "X" : checkdigit);
+}
+
+function BookTemplate({
+  "isbn-13": isbn13,
+  authors,
+  coverurl,
+  description,
+  format,
+  notes,
+  onLoan,
+  publisher,
+  series,
+  signed,
+  title,
+  volume,
+  year,
+}) {
+  return `${coverurl ? `<img src="${coverurl}"/>` : ""}
+  <h1 ${onLoan ? "class='onLoan' " : ""}>${title}</h1>
+  <h2>${authors}</h2>
+  <span>${isbn13}</span><br/>
+  <span>${publisher}, ${year}</span><br/>
+  ${
+    series
+      ? `<span>${series}${volume ? `, Volume ${volume}` : ""}</span><br/>`
+      : ""
+  }
+  ${signed ? "<span>Signed by the author ✒</span><br/>" : ""}
+  <span>${format}</span>
+  ${onLoan ? `<h2 class="onLoan">On loan to ${onLoan}</h2>` : ""}
+  <div class="description">
+    <p>${description}</p>
+    ${notes ? `<span>Notes:</span><p>${notes}</p>` : ""}
+  </div>`;
+}
+
+function TableRowTemplate({
+  "isbn-13": isbn13,
+  authors,
+  onLoan,
+  publisher,
+  rowNumber,
+  signed,
+  title,
+  year,
+}) {
+  return `<tr class="tRow ${onLoan ? "onLoan" : ""}" id="${rowNumber}">
+    <td class="title">
+      ${title} ${
+    signed ? '<span class="signed" title="Signed by the author" >✒</span>︎' : ""
+  }
+    </td>
+    <td class="author">${authors}</td>
+    <td class="publisher">${publisher}</td>
+    <td class="year">${year}</td>
+    <td class="isbn">${isbn13}</td>
+  </tr>`;
+}
+
+function TableTemplate(books) {
+  return `<table class="bookTable">
+    <tr>
+      <th data-sort-by="sortTitle" class="tHeader title">Title</th>
+      <th data-sort-by="sortAuthor" class="tHeader author">Author</th>
+      <th data-sort-by="publisher" class="tHeader publisher">Publisher</th>
+      <th data-sort-by="year" class="tHeader year">Year</th>
+      <th class="tHeader isbn">ISBN</th>
+    </tr>${books.reduce((acc, book) => {
+      return acc.concat(TableRowTemplate(book));
+    }, "")} </table>`;
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  init();
+});
diff --git a/frontend/files/index.html b/frontend/files/index.html
index e78d298..46b09a9 100644
--- a/frontend/files/index.html
+++ b/frontend/files/index.html
@@ -13,204 +13,7 @@
       as="style"
       rel="stylesheet preload prefetch"
     />
-    <script type="text/javascript">
-      var sortState = {
-        sortBy: "sortAuthor",
-        sortOrder: "asc",
-      };
-
-      function init() {
-        fetch("/api")
-          .then((response) => response.json())
-          .then((books) => {
-            // prepare response
-            books.forEach((book) => {
-              book.sortTitle = titleCleaner(book.title);
-              if (!book["isbn-10"] && book["isbn-13"]) {
-                book["isbn-10"] = ISBNfromEAN(book["isbn-13"]);
-              }
-              if (!book.coverurl && book["isbn-10"]) {
-                book.coverurl =
-                  `https://images-na.ssl-images-amazon.com/images/P/` +
-                  book["isbn-10"] +
-                  `.01.LZZ.jpg`;
-              }
-            });
-            document.getElementById("search").addEventListener("input", (e) => {
-              renderTable(search(books, e.target.value));
-            });
-            renderTable(books);
-          });
-      }
-
-      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);
-            }
-          );
-        }
-        return books;
-      }
-
-      function renderTable(books, sortField) {
-        if (sortField) {
-          if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
-            sortState.sortOrder = "desc";
-          } else {
-            sortState.sortOrder = "asc";
-          }
-          sortState.sortBy = sortField;
-        }
-        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
-
-        // rendering
-        var bookElement = document.getElementById("books");
-        bookElement.innerHTML = TableTemplate(books);
-
-        // add listeners for selecting book to view
-        Array.from(bookElement.querySelectorAll("tbody tr"))
-          .slice(1) // remove header from Array
-          .forEach((row) => {
-            row.addEventListener("click", (e) => {
-              // add listener to swap current book
-              document.getElementById("current").innerHTML = BookTemplate(
-                books[e.currentTarget.id]
-              );
-            });
-          });
-        // add sorting callbacks
-        Array.from(
-          bookElement.querySelectorAll("tbody tr th[data-sort-by]")
-        ).forEach((row) => {
-          row.addEventListener("click", function (e) {
-            renderTable(books, e.target.dataset.sortBy); // only add callback when there's a sortBy attribute
-          });
-        });
-        // mark currently active column
-        bookElement
-          .querySelector("tbody tr th[data-sort-by=" + sortState.sortBy + "]")
-          .classList.add(sortState.sortOrder);
-      }
-
-      function titleCleaner(title) {
-        return title
-          .replace('"', "")
-          .replace(":", "")
-          .replace(/^(An?|The)\s/i, "");
-      }
-
-      function searchCleaner(str) {
-        return str
-          .toLowerCase()
-          .replaceAll('"', "")
-          .replaceAll(":", "")
-          .replaceAll("'", "")
-          .replaceAll(" ", "");
-      }
-
-      function ISBNfromEAN(EAN) {
-        ISBN = EAN.slice(3, 12);
-        var checkdigit =
-          (11 -
-            (ISBN.split("").reduce((s, n, k) => s + n * (10 - k), 0) % 11)) %
-          11;
-        return ISBN + (checkdigit === 10 ? "X" : checkdigit);
-      }
-
-      function BookTemplate({
-        "isbn-13": isbn13,
-        authors,
-        coverurl,
-        description,
-        format,
-        notes,
-        onLoan,
-        publisher,
-        series,
-        signed,
-        title,
-        volume,
-        year,
-      }) {
-        return `${coverurl ? `<img src="${coverurl}"/>` : ""}
-        <h1 ${onLoan ? "class='onLoan' " : ""}>${title}</h1>
-        <h2>${authors}</h2>
-        <span>${isbn13}</span><br/>
-        <span>${publisher}, ${year}</span><br/>
-        ${
-          series
-            ? `<span>${series}${volume ? `, Volume ${volume}` : ""}</span><br/>`
-            : ""
-        }
-        ${signed ? "<span>Signed by the author ✒</span><br/>" : ""}
-        <span>${format}</span>
-        ${onLoan ? `<h2 class="onLoan">On loan to ${onLoan}</h2>` : ""}
-        <div class="description">
-          <p>${description}</p>
-          ${notes ? `<span>Notes:</span><p>${notes}</p>` : ""}
-        </div>`;
-      }
-
-      function TableRowTemplate({
-        "isbn-13": isbn13,
-        authors,
-        onLoan,
-        publisher,
-        rowNumber,
-        signed,
-        title,
-        year,
-      }) {
-        return `<tr class="tRow ${onLoan ? "onLoan" : ""}" id="${rowNumber}">
-          <td class="title">
-            ${title} ${
-          signed
-            ? '<span class="signed" title="Signed by the author" >✒</span>︎'
-            : ""
-        }
-          </td>
-          <td class="author">${authors}</td>
-          <td class="publisher">${publisher}</td>
-          <td class="year">${year}</td>
-          <td class="isbn">${isbn13}</td>
-        </tr>`;
-      }
-
-      function TableTemplate(books) {
-        return `<table class="bookTable">
-          <tr>
-            <th data-sort-by="sortTitle" class="tHeader title">Title</th>
-            <th data-sort-by="sortAuthor" class="tHeader author">Author</th>
-            <th data-sort-by="publisher" class="tHeader publisher">Publisher</th>
-            <th data-sort-by="year" class="tHeader year">Year</th>
-            <th class="tHeader isbn">ISBN</th>
-          </tr>${books.reduce((acc, book) => {
-            return acc.concat(TableRowTemplate(book));
-          }, "")} </table>`;
-      }
-
-      window.addEventListener("DOMContentLoaded", () => {
-        init();
-      });
-    </script>
+    <script type="text/javascript" src="app.js"></script>
   </head>
   <body>
     <div class="wrapper">