reorganise dashboard blocks
This commit is contained in:
parent
61d5345730
commit
75c19d7024
|
@ -28,8 +28,6 @@ const Readed = (props) => {
|
|||
}
|
||||
|
||||
setBooks(yearbooks);
|
||||
|
||||
functions.initDataTable();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -38,64 +36,42 @@ const Readed = (props) => {
|
|||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ display: 'block' }} className="modal modal-books" tabIndex="-1" role="dialog">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button type="button" onClick={() => { setShowModal(false) }} className="close" data-dismiss="modal" aria-label="Close">
|
||||
<i className="fas fa-times-circle"></i>
|
||||
</button>
|
||||
<div className="DataTable_Container">
|
||||
<table id="DataTable" className="showHead table responsive nowrap" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gelezen boeken</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{books.map((book, i) => {
|
||||
var dotcolor = '';
|
||||
<div className="DataTable_Container">
|
||||
<table id="DataTable" className="table responsive nowrap" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{books.map((book, i) => {
|
||||
var dotcolor = '';
|
||||
|
||||
if(book.genre === "Thriller"){
|
||||
dotcolor = '#404e67';
|
||||
}else if (book.genre === "Roman"){
|
||||
dotcolor = '#01a9ac';
|
||||
}else if(book.genre === 'Non-fictie'){
|
||||
dotcolor = '#64c5b1';
|
||||
}else{
|
||||
dotcolor = '#1ABB9C';
|
||||
}
|
||||
if(book.genre === "Thriller"){
|
||||
dotcolor = '#404e67';
|
||||
}else if (book.genre === "Roman"){
|
||||
dotcolor = '#01a9ac';
|
||||
}else if(book.genre === 'Non-fictie'){
|
||||
dotcolor = '#64c5b1';
|
||||
}else{
|
||||
dotcolor = '#1ABB9C';
|
||||
}
|
||||
|
||||
return (
|
||||
<tr key={book.id}>
|
||||
<td>
|
||||
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '5px', marginRight: '10px', width: '10px', height: '10px', borderRadius: '100%', background: dotcolor }}></div>
|
||||
<div className="book-info" style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
||||
{book.name}
|
||||
<div style={{ color: '#777' }} className="book-author">{book.author}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><i className='fas fa-star'></i> {book.rating}</td>
|
||||
<td>{moment(book.readed).format("MMMM")}</td>
|
||||
<td style={{ textAlign: 'right' }}>
|
||||
<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>
|
||||
return (
|
||||
<tr key={book.id}>
|
||||
<td><div className="dotgenre" style={{background: dotcolor }}></div> {book.name}</td>
|
||||
<td>{book.author}</td>
|
||||
<td><i className='fas fa-star'></i> {book.rating}</td>
|
||||
<td>{moment(book.readed).format("MMMM")}</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -60,6 +60,7 @@ const Dashboard = (props) => {
|
|||
<div className="col-md-6">
|
||||
<div className="row">
|
||||
<Books year={year} />
|
||||
{/* <Readed year={year} /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -72,8 +73,6 @@ const Dashboard = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showModal && (<Readed year={year} />)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue