switch frontend to use new api endpoint instead of google sheet

frontend/files/index.html

@@ -5,7 +5,6 @@
     <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>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
     <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -18,22 +17,18 @@
       rel="stylesheet"
     />
     <script type="text/javascript">
-      var publicSpreadsheetUrl =
-        "https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml";
       var sortState = {
-        sortBy: "authorLast",
+        sortBy: "sortAuthor",
         sortOrder: "asc",
       };
 
       function init() {
-        Tabletop.init({
-          key: publicSpreadsheetUrl,
-          callback: showInfo,
-          simpleSheet: true,
-        });
+        fetch("/api")
+          .then((response) => response.json())
+          .then(showInfo);
       }
 
-      function showInfo(data, tabletop) {
+      function showInfo(data) {
         $("#reloadLink").unbind("click");
         $("#reloadLink").on("click", function () {
           init();
@@ -66,7 +61,7 @@
           .replace(" ", "");
         relevantFields = [
           "title",
-          "author",
+          "authors",
           "genre",
           "publisher",
           "series",
@@ -81,6 +76,9 @@
         renderTable(
           _.filter(data, function (book) {
             return _.find(_.pick(book, relevantFields), function (field) {
+              if (_.isArray(field)) {
+                field = field.join(" ");
+              }
               return (
                 field
                   .toLowerCase()
@@ -201,7 +199,7 @@
       <table class="bookTable">
         <tr>
           <th data-sort-by="sortTitle" class="tHeader title">Title</th>
-          <th data-sort-by="authorLast" class="tHeader author">Author</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>
@@ -215,7 +213,7 @@
               >✒</span
             >︎{{/signed}}
           </td>
-          <td class="author">{{author}}</td>
+          <td class="author">{{authors}}</td>
           <td class="publisher">{{publisher}}</td>
           <td class="year">{{year}}</td>
           <td class="isbn">{{isbn-13}}</td>
@@ -230,7 +228,7 @@
         <img src="{{coverurl}}"/>
         {{/coverurl}}
         <h1 {{#onLoan}}class="onLoan" {{/onLoan}}>{{title}}</h1>
-        <h2>{{author}}</h2>
+        <h2>{{authors}}</h2>
         <span>{{isbn-13}}</span><br/>
         <span>{{publisher}}, {{year}}</span><br/>
         {{#series}}