Manage books

ras/frontend/src/components/DataTables.css

@@ -21,6 +21,19 @@
     text-decoration: none;
 }
 
+.content-manage #DataTable i {
+    color: #ffffff;
+}
+
+.content-manage #DataTable button{
+    text-align: center;
+}
+
+.content-manage #DataTable button i{
+    margin:auto;
+    font-size: 14px;
+}
+
 #DataTable i {
     color: #ffbe0e;
     margin-right:10px;

ras/frontend/src/components/Manage/Sidebar.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function SidebarManage(){
+    return (
+        <React.Fragment>
+            <div className='sidebar-manage'>
+                <ul>
+                    <li><NavLink to="/manage"><i className="fa fa-book"></i> Boeken</NavLink></li>
+                    <li><NavLink to="/manage/challenges"><i className="fa fa-list"></i> Challenges</NavLink></li>
+                </ul>
+                
+            </div>
+        </React.Fragment>
+    )
+
+}
+
+export default SidebarManage;

ras/frontend/src/views/manage/books.js

@@ -1,13 +1,17 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import '../../components/DataTables.css';
 import * as moment from 'moment';
+import SidebarManage from "../../components/manage/sidebar";
+import Filters from "../../components/Filters";
 const $ = require('jquery');
 $.DataTable = require('datatables.net');
 moment.locale('nl');
 
 function ManageBooks() {
 
+    var [books, setBooks] = useState([]);
+
     var navigate = useNavigate();
 
     useEffect(() => {
@@ -15,12 +19,60 @@ function ManageBooks() {
             // window.location.href = "/login";
             navigate("/login")
         }
-    })
+
+        document.title = "Boekenlijst - Reading Analytics System";
+
+        import("../../components/Data.js").then(module => {
+            return module.getAllBooks().then(data => {
+                setBooks(data);
+
+                setTimeout(() => {
+                    $('#DataTable').DataTable({
+                        language: {
+                            url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json',
+                            search: "",
+                            searchPlaceholder: "Zoeken"
+                        },
+                        dom: 'frt<"bottom"pl><"clear">',
+                        order: []
+                    });
+                }, 1000)
+            });
+        });
+    }, [])
 
     return (
         <React.Fragment>
-            <div className="content">
-                <h1>Boeken beheren</h1>
+            <SidebarManage />
+            <div className="content-manage">
+                <h1>Boeken beheren <button type="button" class="btn btn-success">Toevoegen</button></h1>
+                
+
+                <div className="DataTable_Container">
+                    <table id="DataTable" className="showHead table responsive nowrap" width="100%">
+                        <thead>
+                            <tr>
+                                <th>Boek</th>
+                                <th>Schrijver</th>
+                                <th>Acties</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {books.map((book, i) => {
+                                return (
+                                    <tr key={book.id}>
+                                        <td>{book.name}</td>
+                                        <td>{book.author}</td>
+                                        <td>
+                                            <button type="button" class="btn btn-warning"><i class="fa fa-pen"></i></button>
+                                            <button type="button" class="btn btn-danger"><i className="fa fa-trash"></i></button>
+                                        </td>
+                                    </tr>
+                                )
+                            })}
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </React.Fragment>
     )

ras/frontend/static/css/style.css

@@ -33,6 +33,33 @@ html, body{
     padding: 30px;
   }
 
+  .content-manage{
+    padding: 30px;
+    margin-left:200px;
+  }
+
+  .content-manage .search-bar, .content-manage .search-bar input{
+    width:100%
+  }
+
+  .content-manage .dataTables_filter, .content-manage .dataTables_filter label, .content-manage .dataTables_filter label input{
+    width:100%;
+  }
+
+  .content-manage .DataTable_Container{
+    margin-top:0 !important;
+  }
+
+  .content-manage .btn-success{
+    float: right;
+    font-size: 14px;
+    padding: 7px 20px;
+  }
+
+  .content-manage .btn-warning{
+    margin-right:5px;
+  }
+
   .filter{
     width:100%;
     background:#1f2940;
@@ -82,6 +109,75 @@ html, body{
     color: #808080;
   }
 
+  .sidebar-manage{
+    padding: 15px 10px;
+    background: #363a53;
+    width: 200px;
+    height: 100vh;
+    position: fixed;
+    padding-top: 10px;
+  }
+
+  .sidebar-manage .menu-item{
+    text-align: center;
+    padding: 15px 0;
+  }
+
+  .sidebar-manage .menu-item i{
+    font-size: 25px;
+    color: #727794;
+  }
+
+  .sidebar-manage .menu-item.selected i{
+    color:#fff;
+  }
+
+  .sidebar-manage svg{
+    color:#ffffff;
+  }
+
+  .sidebar-manage ul {
+    padding: 0;
+    margin:0;
+  }
+  
+  .sidebar-manage ul li {
+    list-style-type: none;
+    font-size: 14px;
+    font-weight: 400;
+    display: block;
+  }
+  
+  .sidebar-manage ul li a {
+    color: #a9b7d0;
+    text-decoration: none;
+    padding: 12px 15px;
+    display:block;
+    width:100%;
+    border-radius: 10px;
+  }
+  
+  .sidebar-manage ul li a.active {
+    color: #ffffff;
+    background: rgba(0,0,0,0.3) !important;
+  }
+  
+  .sidebar-manage ul li a.active i {
+    color: #8066ee;
+  }
+  
+  .sidebar-manage i {
+    color: #a9b7d0;
+    font-size: 13px;
+    width: 10px;
+    display: inline-block;
+    text-align: center;
+    line-height: 1;
+    margin-right: 12px;
+  }
+
+  /* -------------------------------- */
+
   .sidebar{
     background: #363a53;
     width: 100%;

ras/frontend/static/js/main.js.LICENSE.txt

@@ -14,6 +14,10 @@
   !*** ./src/views/login.js ***!
   \****************************/
 
+/*!***********************************!*\
+  !*** ./src/components/Filters.js ***!
+  \***********************************/
+
 /*!***********************************!*\
   !*** ./src/views/manage/books.js ***!
   \***********************************/
@@ -402,6 +406,10 @@
   !*** ./node_modules/react-dom/client.js ***!
   \******************************************/
 
+/*!******************************************!*\
+  !*** ./src/components/manage/sidebar.js ***!
+  \******************************************/
+
 /*!*******************************************!*\
   !*** ./node_modules/moment/locale/fil.js ***!
   \*******************************************/

ras/frontend/static/js/src_views_booklist_js.js.LICENSE.txt

@@ -2,10 +2,6 @@
   !*** ./src/views/booklist.js ***!
   \*******************************/
 
-/*!***********************************!*\
-  !*** ./src/components/Filters.js ***!
-  \***********************************/
-
 /*!***********************************!*\
   !*** ./src/components/Sidebar.js ***!
   \***********************************/