JBELjWPc

1import * as api from './data.js';
2
3window.addEventListener('load', () => {
4    const loadButton = document.querySelector('#loadBooks');
5    const table = document.querySelector('table tbody');
6    const titleInput = document.querySelector('#title');
7    const authorInput = document.querySelector('#author');
8    const isbnInput = document.querySelector('#isbn');
9    const submitButton = document.querySelector('form > button');
10
11    loadButton.addEventListener('click', async function () {
12        table.innerHTML = '';
13        const books = await api.getBooks();
14        books.forEach(b => {
15            renderBooks(b);
16        });;
17
18    });
19
20    function renderBooks(book) {
21        const td1 = document.createElement('td');
22        const td2 = document.createElement('td');
23        const td3 = document.createElement('td');
24        const td4 = document.createElement('td');
25        const editButton = document.createElement('button');
26        const deleteButton = document.createElement('button');
27        const tr = document.createElement('tr');
28
29        td1.textContent = book.title;
30        td2.textContent = book.author;
31        td3.textContent = book.isbn;
32        editButton.textContent = 'Edit';
33        deleteButton.textContent = 'Delete';
34        td4.appendChild(editButton);
35        td4.appendChild(deleteButton);
36        tr.appendChild(td1);
37        tr.appendChild(td2);
38        tr.appendChild(td3);
39        tr.appendChild(td4);
40        table.appendChild(tr);
41
42        deleteButton.addEventListener('click', bookDelete)
43        async function bookDelete() {
44            try {
45                deleteButton.disabled = true;
46                deleteButton.textContent = 'Please wait...';
47                tr.innerHTML = '';
48                await api.deleteBook(book.objectId);
49            } catch (error) {
50                deleteButton.disabled = false;
51                deleteButton.textContent = 'Delete';
52                alert(error);
53                console.error(error);
54            }
55        }
56    };
57
58    submitButton.addEventListener('click', async function (e) {
59        e.preventDefault();
60
61        const book = {
62            title: titleInput.value,
63            author: authorInput.value,
64            isbn: isbnInput.value
65        }
66
67        const flag = true;
68        Object.entries(book).forEach(([key, value]) => {
69            if (value.length === 0) {
70                alert(`Book ${key} cannot be empty!`);
71                flag = false;
72            }
73        });
74
75        if (flag === false) {
76            return;
77        }
78
79        try {
80            const created = await api.createBook(book);
81            table.appendChild(renderBooks(created));
82        } catch (error) {
83            alert(error);
84            console.error(error);
85        }
86    });
87})