Add locations

2024-08-31 11:44:20 -04:00
parent 691448fab3
commit 63dfe85832
5 changed files with 306 additions and 85 deletions
--- a/public/library.html
+++ b/public/library.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Library</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        th, td {
+            padding: 10px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        #search-bar {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            margin-top: 20px;
+            border: 1px solid #ddd;
+        }
+    </style>
+</head>
+<body>
+    <h1>Book Library</h1>
+    <input type="text" id="search-bar" placeholder="Search by title, author, publisher, etc.">
+
+    <table id="book-table">
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Authors</th>
+                <th>Publisher</th>
+                <th>Published Date</th>
+                <th>ISBN</th>
+            </tr>
+        </thead>
+        <tbody id="book-table-body">
+            <!-- Book rows will be inserted here -->
+        </tbody>
+    </table>
+
+    <script>
+        // Fetch all books when the page loads
+        window.onload = fetchBooks;
+
+        document.getElementById('search-bar').addEventListener('input', function() {
+            fetchBooks(this.value);
+        });
+
+        function fetchBooks(query = '') {
+            let url = '/search-title';
+            if (query) {
+                url += `?title=${encodeURIComponent(query)}&internalOnly=true`;
+            }
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.results) {
+                        displayBooks(data.results);
+                    } else {
+                        document.getElementById('book-table-body').innerHTML = '<tr><td colspan="5">No books found</td></tr>';
+                    }
+                })
+                .catch(error => console.error('Error fetching books:', error));
+        }
+
+        function displayBooks(books) {
+            console.debug('Books:', books);
+            const tbody = document.getElementById('book-table-body');
+            tbody.innerHTML = '';
+
+            books.forEach(book => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${book.title || ''}</td>
+                    <td>${book.authors ? book.authors : ''}</td>
+                    <td>${book.publisher || ''}</td>
+                    <td>${book.publish_date || ''}</td>
+                    <td>${book.isbn || ''}</td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+    </script>
+</body>
+</html>