Manage books
This commit is contained in:
parent
ad047ad27a
commit
e2c5e2d90e
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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;
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
)
|
||||
|
|
Binary file not shown.
|
@ -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%;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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 ***!
|
||||
\*******************************************/
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2,10 +2,6 @@
|
|||
!*** ./src/views/booklist.js ***!
|
||||
\*******************************/
|
||||
|
||||
/*!***********************************!*\
|
||||
!*** ./src/components/Filters.js ***!
|
||||
\***********************************/
|
||||
|
||||
/*!***********************************!*\
|
||||
!*** ./src/components/Sidebar.js ***!
|
||||
\***********************************/
|
||||
|
|
Loading…
Reference in New Issue