1
1
Fork 0

reorganise dashboard blocks

This commit is contained in:
Jordy van Zeeland 2024-04-26 13:46:23 +02:00
parent 61d5345730
commit 75c19d7024
3 changed files with 36 additions and 61 deletions

View File

@ -28,8 +28,6 @@ const Readed = (props) => {
} }
setBooks(yearbooks); setBooks(yearbooks);
functions.initDataTable();
} }
useEffect(() => { useEffect(() => {
@ -38,64 +36,42 @@ const Readed = (props) => {
return ( return (
<React.Fragment> <React.Fragment>
<div style={{ display: 'block' }} className="modal modal-books" tabIndex="-1" role="dialog"> <div className="DataTable_Container">
<div className="modal-dialog" role="document"> <table id="DataTable" className="table responsive nowrap" width="100%">
<div className="modal-content"> <thead>
<button type="button" onClick={() => { setShowModal(false) }} className="close" data-dismiss="modal" aria-label="Close"> <tr>
<i className="fas fa-times-circle"></i> <th></th>
</button> <th></th>
<div className="DataTable_Container"> <th></th>
<table id="DataTable" className="showHead table responsive nowrap" width="100%"> <th></th>
<thead> </tr>
<tr> </thead>
<th>Gelezen boeken</th> <tbody>
<th></th> {books.map((book, i) => {
<th></th> var dotcolor = '';
<th></th>
</tr>
</thead>
<tbody>
{books.map((book, i) => {
var dotcolor = '';
if(book.genre === "Thriller"){ if(book.genre === "Thriller"){
dotcolor = '#404e67'; dotcolor = '#404e67';
}else if (book.genre === "Roman"){ }else if (book.genre === "Roman"){
dotcolor = '#01a9ac'; dotcolor = '#01a9ac';
}else if(book.genre === 'Non-fictie'){ }else if(book.genre === 'Non-fictie'){
dotcolor = '#64c5b1'; dotcolor = '#64c5b1';
}else{ }else{
dotcolor = '#1ABB9C'; dotcolor = '#1ABB9C';
} }
return ( return (
<tr key={book.id}> <tr key={book.id}>
<td> <td><div className="dotgenre" style={{background: dotcolor }}></div> {book.name}</td>
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '5px', marginRight: '10px', width: '10px', height: '10px', borderRadius: '100%', background: dotcolor }}></div> <td>{book.author}</td>
<div className="book-info" style={{ display: 'inline-block', verticalAlign: 'top' }}> <td><i className='fas fa-star'></i> {book.rating}</td>
{book.name} <td>{moment(book.readed).format("MMMM")}</td>
<div style={{ color: '#777' }} className="book-author">{book.author}</div> </tr>
</div> )
</td> })}
<td><i className='fas fa-star'></i> {book.rating}</td> </tbody>
<td>{moment(book.readed).format("MMMM")}</td> </table>
<td style={{ textAlign: 'right' }}> </div>
<button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
<div className="legenda" style={{ textAlign: 'center' }}>
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#404e67" }}></div><span style={{ marginRight: '10px' }}>Thriller</span>
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#01a9ac" }}></div><span style={{ marginRight: '10px' }}>Roman</span>
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#64c5b1" }}></div><span style={{ marginRight: '10px' }}>Non-fictie</span>
</div>
</div>
</div>
</div>
</React.Fragment> </React.Fragment>
) )
} }

View File

@ -60,6 +60,7 @@ const Dashboard = (props) => {
<div className="col-md-6"> <div className="col-md-6">
<div className="row"> <div className="row">
<Books year={year} /> <Books year={year} />
{/* <Readed year={year} /> */}
</div> </div>
</div> </div>
@ -72,8 +73,6 @@ const Dashboard = (props) => {
</div> </div>
</div> </div>
</div> </div>
{showModal && (<Readed year={year} />)}
</div> </div>
</React.Fragment> </React.Fragment>
) )

File diff suppressed because one or more lines are too long