reorganise dashboard blocks

ras/frontend/src/components/Readed.js

@@ -28,8 +28,6 @@ const Readed = (props) => {
         }
 
         setBooks(yearbooks);
-
-        functions.initDataTable();
     }
 
     useEffect(() => {
@@ -38,17 +36,11 @@ 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%">
+                <table id="DataTable" className="table responsive nowrap" width="100%">
                     <thead>
                         <tr>
-                                            <th>Gelezen boeken</th>
+                            <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
@@ -70,32 +62,16 @@ const Readed = (props) => {
 
                             return (
                                 <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' }}>
-                                                            {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>
         </React.Fragment>
     )
 }

ras/frontend/src/views/dashboard.js

@@ -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>
     )