books CRUD

ras/api/modules/crud.py

@@ -31,10 +31,6 @@ def getAllBooks(request):
                     "name": row['name'],
                     "author": row['author'],
                     "genre": row['genre'],
-                    "author": row['author'],
-                    "country": row['country'],
-                    "country_code": row['country_code'],
-                    "pages": row['pages'],
                     "readed": row['readed'],
                     "rating": row['rating'],
                 })
@@ -55,7 +51,11 @@ def addBook(request):
         isLoggedIn = isAuthorized(request.headers.get('Authorization'));
 
         if(isLoggedIn):
-            conn.execute(text("INSERT INTO api_books (name, author, genre, country, country_code, pages, readed, rating) VALUES ('" + str(book['name']) + "', '" + str(book['author']) + "', '" + str(book['genre']) + "', '" + str(book['country']) + "', '" + str(book['country_code']) + "', " + str(book['pages']) + ", '" + str(book['readed']) + "', " + str(book['rating']) + ")"))
+            userid = request.headers.get('userid')
+            book = request.body
+            book = json.loads(book)
+
+            conn.execute(text("INSERT INTO api_books (userid, name, author, genre, readed, rating) VALUES ('" + str(userid) + "', '" + str(book['name']) + "', '" + str(book['author']) + "', '" + str(book['genre']) + "', '" + str(book['readed']) + "', " + str(book['rating']) + ")"))
             return JsonResponse("OK", safe=False)
         else:
             return JsonResponse({'error': 'No user detected'}, safe=False)
@@ -76,7 +76,7 @@ def updateBook(request):
             book = json.loads(book)
             bookid = request.headers.get('bookid')
 
-            conn.execute(text("UPDATE api_books set name='" + str(book['name']) + "', author='" + str(book['author']) + "', genre='" + str(book['genre']) + "', country='" + str(book['country']) + "', country_code='" + str(book['country_code']) + "', pages='" + str(book['pages']) + "', readed='" + str(book['readed']) + "', rating='" + str(book['rating']) + "' WHERE id=" + str(bookid)))
+            conn.execute(text("UPDATE api_books set name='" + str(book['name']) + "', author='" + str(book['author']) + "', genre='" + str(book['genre']) + "', readed='" + str(book['readed']) + "', rating='" + str(book['rating']) + "' WHERE id=" + str(bookid)))
             return JsonResponse("OK", safe=False)
         else:
             return JsonResponse({'error': 'No user detected'}, safe=False)

ras/frontend/src/components/Data.js

@@ -161,4 +161,36 @@ export const getRatingsCount = (year) => {
         .then(data => {
             return data;
         })
+}
+
+export const insertBook = (book) => {
+    return fetch('/api/books/insert', {
+        "method": "POST",
+        "headers": {
+            "Authorization": "Bearer " + localStorage.getItem("token"),
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            "userid": localStorage.getItem('id')
+        },
+        "body": JSON.stringify(book)
+    })
+        .then(response => response.json())
+        .then(data => {
+            return data;
+        })
+}
+
+export const deleteBook = (bookid) => {
+    return fetch('/api/books/delete', {
+        "method": "DELETE",
+        "headers": {
+            "Authorization": "Bearer " + localStorage.getItem("token"),
+            "userid": localStorage.getItem('id'),
+            "bookid": bookid
+        }
+    })
+        .then(response => response.json())
+        .then(data => {
+            return data;
+        })
 }

ras/frontend/src/components/Sidebar.js

@@ -2,6 +2,12 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 
 const Sidebar = () => {
+
+    const logout = () => {
+        localStorage.clear();
+        window.location.href = "/";
+    }
+
     return(
         <div className="sidebar">
                 <img className="logo_text" src="/static/images/logo_white.png" style={{ width: '100%', padding: '10px 25px' }}/>
@@ -18,10 +24,7 @@ const Sidebar = () => {
                 </ul>
 
                 <ul className="bottom-menu">
-                    {/* <NavLink to={'/settings'} exact="true">
+                    <li><button onClick={() => logout()}><i className="fas fa-power-off"></i> Uitloggen</button></li>
-                        <li><i className="fas fa-cog"></i> Instellingen</li>
-                    </NavLink> */}
-                    <li><i className="fas fa-power-off"></i> Uitloggen</li>
                 </ul>
         </div>
     )

ras/frontend/src/views/bookslist.js

@@ -6,24 +6,47 @@ moment.locale('nl');
 
 const BooksList = (props) => {
     var [books, setBooks] = useState([]);
+    const [showModal, setShowModal] = useState(false);
+    const [months, setMonths] = useState([]);
+
+    const addBook = async (event) => {
+        event.preventDefault();
+
+        const book = {
+            name: event.target.name.value,
+            author: event.target.author.value,
+            genre: event.target.genre.value,
+            readed: event.target.readed.value,
+            rating: event.target.rating.value,
+        }
+
+        const data = await import("../components/Data.js");
+        const insertbook = await data.insertBook(book);
+
+        setShowModal(false);
+        await getData();
+        
+    }
+
+    const delBook = async (bookid) => {
+        var result = confirm("Weet je zeker dat je dit wilt verwijderen?");
+
+        if (result) {
+            const data = await import("../components/Data.js");
+            await data.deleteBook(bookid);
+            await getData();
+        }   
+    }
 
     const getData = async() => {
-        const data = await import("../components/Data.js");
+        const [data, functions] = await Promise.all([
-        const getbooks = await data.getAllBooks();
+            import("../components/Data.js"),
-        console.log(getbooks)
+            import("../Functions.js")
-        setBooks(getbooks);
+        ])
 
-        setTimeout(() => {
+        const getbooks = await data.getAllBooks();
-            $('#DataTable').DataTable({
+        setBooks(getbooks);
-                language: {
+        functions.initDataTable();
-                    url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json',
-                    search: "",
-                    searchPlaceholder: "Zoeken"
-                },
-                dom: 'frt<"bottom"pl><"clear">',
-                order: []
-            });
-        }, 300)
     }
 
     useEffect(() => {
@@ -34,9 +57,7 @@ const BooksList = (props) => {
         <React.Fragment>
             <Sidebar />
             <div className="content-manage">
-            {/* <button type="button" class="btn btn-success">Toevoegen</button> */}
+                <h1>Boeken beheren <button type="button" onClick={() => setShowModal(true)} className="btn btn-success btn-add">Toevoegen</button></h1>
-                <h1>Boeken beheren</h1>
-
 
                 <div className="DataTable_Container">
                     <table id="DataTable" className="showHead table responsive nowrap" width="100%">
@@ -58,7 +79,7 @@ const BooksList = (props) => {
                                         <td>{moment(book.readed).format('MMMM YYYY')}</td>
                                         <td><i class='fas fa-star'></i> {book.rating}</td>
                                         <td>
-                                            <button type="button" class="btn btn-danger"><i className="fa fa-trash"></i></button>
+                                            <button onClick={() => delBook(book.id)} type="button" class="btn btn-danger"><i className="fa fa-trash"></i></button>
                                         </td>
                                     </tr>
                                 )
@@ -66,6 +87,47 @@ const BooksList = (props) => {
                         </tbody>
                     </table>
                 </div>
+
+                {showModal && (<div style={{ display: 'block' }} className="modal" tabIndex="-1" role="dialog">
+                    <div className="modal-dialog" role="document">
+                        <div className="modal-content">
+                            <div className="modal-header">
+                                <h5 className="modal-title">Boek toevoegen</h5>
+                                <button type="button" onClick={() => setShowModal(false)} className="close" data-dismiss="modal" aria-label="Close">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                            </div>
+                            <form method="POST" onSubmit={(event) => addBook(event)}>
+                            <div className="modal-body">
+                                <div className="form-group">
+                                    <label htmlFor="name">Naam</label>
+                                    <input type="text" className="form-control" id="name" name="name"/>
+                                </div>
+                                <div className="form-group">
+                                    <label htmlFor="author">Schrijver</label>
+                                    <input type="text" className="form-control" id="author" name="author" />
+                                </div>
+                                <div className="form-group">
+                                    <label htmlFor="genre">Genre</label>
+                                    <input type="text" className="form-control" id="genre" name="genre" />
+                                </div>
+                                <div className="form-group">
+                                    <label htmlFor="readed">Gelezen op</label>
+                                    <input type="date" className="form-control" id="readed" name="readed"/>
+                                </div>
+                                <div className="form-group">
+                                    <label htmlFor="rating">Aantal sterren</label>
+                                    <input type="text" className="form-control" id="rating" name="rating"/>
+                                </div>
+                            </div>
+                            <div className="modal-footer">
+                                <button type="submit" className="btn btn-success">Toevoegen</button>
+                                <button type="button" onClick={() => setShowModal(false)} className="btn btn-danger cancel" data-dismiss="modal">Annuleren</button>
+                            </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>)}
             </div>
         </React.Fragment>
     )

ras/frontend/static/css/style.css

@@ -280,6 +280,15 @@ html, body{
   border-top: solid 1px rgba(255,255,255,0.2);
 }
 
+.sidebar button{
+  background: none;
+    border: none;
+    width: 100%;
+    color: rgba(255,255,255,0.5);
+    text-align: justify;
+    padding: 0;
+}
+
   .books-stats{
     margin:20px 0;
   }