more backend

frontend/files/app.js

@@ -3,7 +3,23 @@ var sortState = {
   sortOrder: "asc",
 };
 
+var admin = false;
+
 function init() {
+  fetch("/api/mode")
+    .then((response) => response.json())
+    .then((resp) => (admin = resp.Admin))
+    .then(() => {
+      if (admin) {
+        var element = document.getElementById("addBook");
+        element.addEventListener("click", (e) => {
+          e.preventDefault();
+          renderAddBookView();
+        });
+        element.classList.remove("hidden");
+      }
+    });
+
   fetch("/api/books")
     .then((response) => response.json())
     .then((books) => {
@@ -33,6 +49,10 @@ function init() {
     });
 }
 
+function renderAddBookView() {
+  document.getElementById("current").innerHTML = AddBookTemplate();
+}
+
 function renderTable(books, sortField) {
   if (sortField) {
     if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
@@ -173,6 +193,7 @@ function BookTemplate({
     }
     ${signed ? "<span>Signed by the author ✒</span><br/>" : ""}
     <span>${format}</span>
+    ${admin ? `<a href="#">Edit Book</a>` : ""}
   </div>`;
 }
 
@@ -211,3 +232,31 @@ function TableTemplate(books) {
       return acc.concat(TableRowTemplate(book));
     }, "")} </table>`;
 }
+
+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>`;
+}

frontend/files/index.html

@@ -31,6 +31,7 @@
           href="https://git.yetaga.in/alazyreader/library"
           >git</a
         >
+        <a href="#" id="addBook" class="hidden">add book</a>
         <div id="searchBox">
           <label for="childrens" class="bookCount"
             >Include Childrens Books?</label

frontend/files/records/style.css

@@ -185,7 +185,7 @@ body {
   padding-left: 20px;
   padding-right: 20px;
   display: flex;
-  justify-content: space-evenly; 
+  justify-content: space-evenly;
   align-items: flex-start;
   flex-wrap: wrap;
   overflow: auto;
@@ -235,4 +235,4 @@ footer {
   width: calc(100% - 40px);
   color: #a29c77;
   border-top: 2px solid #d8d0a0;
-}
+}

frontend/files/style.css

@@ -133,6 +133,10 @@ body {
   overflow: hidden;
 }
 
+.hidden {
+  display: none;
+}
+
 #header {
   height: 30px;
   width: calc(100vw - 20px);