finish the frontend functionality; needs styling

frontend/files/app.js

@@ -51,6 +51,62 @@ function init() {
 
 function renderAddBookView() {
   document.getElementById("current").innerHTML = AddBookTemplate();
+  document.getElementById("lookup").addEventListener("click", (e) => {
+    e.preventDefault();
+    if (document.getElementById("isbn-13").value.length === 13) {
+      getPossibleBooks(document.getElementById("isbn-13").value);
+    } else {
+      console.log("no isbn");
+    }
+  });
+  document.getElementById("save").addEventListener("click", (e) => {
+    e.preventDefault();
+    fetch("/api/books", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        title: document.getElementById("title").value,
+        authors: document.getElementById("authors").value.split(";"),
+        sortAuthor: document.getElementById("sortAuthor").value,
+        "isbn-10": document.getElementById("isbn-10").value,
+        "isbn-13": document.getElementById("isbn-13").value,
+        publisher: document.getElementById("publisher").value,
+        format: document.getElementById("format").value,
+        genre: document.getElementById("genre").value,
+        series: document.getElementById("series").value,
+        volume: document.getElementById("volume").value,
+        year: document.getElementById("year").value,
+        coverURL: document.getElementById("coverURL").value,
+      }),
+    });
+    renderAddBookView();
+    init();
+  });
+}
+
+function getPossibleBooks(isbn) {
+  fetch("/api/query", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ "isbn-13": isbn }),
+  })
+    .then((response) => response.json())
+    .then((json) => {
+      Object.keys(json).forEach((key) => {
+        var elem = document.getElementById(key);
+        if (elem !== null) {
+          elem.value = json[key];
+        }
+      });
+    });
+}
+
+function saveBook(book) {
+  fetch("/api/books", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(book),
+  });
 }
 
 function renderTable(books, sortField) {
@@ -94,7 +150,8 @@ function renderTable(books, sortField) {
   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
+        // only add callback when there's a sortBy attribute
+        renderTable(books, e.target.dataset.sortBy);
       });
     }
   );
@@ -170,9 +227,7 @@ function BookTemplate({
   "isbn-10": isbn10,
   authors,
   coverURL,
-  description,
   format,
-  notes,
   publisher,
   series,
   signed,
@@ -235,28 +290,33 @@ function TableTemplate(books) {
 
 function AddBookTemplate() {
   return `<div class="addBookView">
-    <form>${[
-      { name: "ISBN10", type: "text" },
-      { name: "ISBN13", type: "text" },
-      { name: "Title", type: "text" },
-      { name: "Authors", type: "text" },
-      { name: "SortAuthor", type: "text" },
-      { name: "Format", type: "text" },
-      { name: "Genre", type: "text" },
-      { name: "Publisher", type: "text" },
-      { name: "Series", type: "text" },
-      { name: "Volume", type: "text" },
-      { name: "Year", type: "text" },
-      { name: "Signed", type: "checkbox" },
-      // { name: "Description", type: "text" },
-      // { name: "Notes", type: "text" },
-      { name: "CoverURL", type: "text" },
-      { name: "Childrens", type: "checkbox" },
-    ].reduce((acc, field) => {
-      return acc.concat(
-        `<label>${field.name} <input type="${field.type}" name="${field.name.toLowerCase}"/></label><br/>`
-      );
-    }, "")}
-    </form>
+    <div id="newBookForm">
+      ${[
+        { name: "Title", id: "title", type: "text" },
+        { name: "Authors", id: "authors", type: "text" },
+        { name: "SortAuthor", id: "sortAuthor", type: "text" },
+        { name: "ISBN10", id: "isbn-10", type: "text" },
+        { name: "ISBN13", id: "isbn-13", type: "text" },
+        { name: "Publisher", id: "publisher", type: "text" },
+        { name: "Format", id: "format", type: "text" },
+        { name: "Genre", id: "genre", type: "text" },
+        { name: "Series", id: "series", type: "text" },
+        { name: "Volume", id: "volume", type: "text" },
+        { name: "Year", id: "year", type: "text" },
+        { name: "CoverURL", id: "coverURL", type: "text" },
+        { name: "Signed", id: "signed", type: "checkbox" },
+        { name: "Childrens", id: "childrens", type: "checkbox" },
+      ].reduce((acc, field) => {
+        return acc.concat(
+          `<label>${field.name} <input
+              type="${field.type}"
+              name="${field.name.toLowerCase()}"
+              id="${field.id}"
+            /></label><br/>`
+        );
+      }, "")}
+      <input id="lookup" type="submit" value="look up">
+      <input id="save" type="submit" value="save">
+    </div>
   </div>`;
 }