books CRUD
This commit is contained in:
parent
bc1083c257
commit
42132d6777
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
})
|
||||
}
|
|
@ -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><i className="fas fa-cog"></i> Instellingen</li>
|
||||
</NavLink> */}
|
||||
<li><i className="fas fa-power-off"></i> Uitloggen</li>
|
||||
<li><button onClick={() => logout()}><i className="fas fa-power-off"></i> Uitloggen</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -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 getbooks = await data.getAllBooks();
|
||||
console.log(getbooks)
|
||||
setBooks(getbooks);
|
||||
const [data, functions] = await Promise.all([
|
||||
import("../components/Data.js"),
|
||||
import("../Functions.js")
|
||||
])
|
||||
|
||||
setTimeout(() => {
|
||||
$('#DataTable').DataTable({
|
||||
language: {
|
||||
url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json',
|
||||
search: "",
|
||||
searchPlaceholder: "Zoeken"
|
||||
},
|
||||
dom: 'frt<"bottom"pl><"clear">',
|
||||
order: []
|
||||
});
|
||||
}, 300)
|
||||
const getbooks = await data.getAllBooks();
|
||||
setBooks(getbooks);
|
||||
functions.initDataTable();
|
||||
}
|
||||
|
||||
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</h1>
|
||||
|
||||
<h1>Boeken beheren <button type="button" onClick={() => setShowModal(true)} className="btn btn-success btn-add">Toevoegen</button></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>
|
||||
)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue