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;
|
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 {
|
#DataTable i {
|
||||||
color: #ffbe0e;
|
color: #ffbe0e;
|
||||||
margin-right:10px;
|
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 { useNavigate } from "react-router-dom";
|
||||||
import '../../components/DataTables.css';
|
import '../../components/DataTables.css';
|
||||||
import * as moment from 'moment';
|
import * as moment from 'moment';
|
||||||
|
import SidebarManage from "../../components/manage/sidebar";
|
||||||
|
import Filters from "../../components/Filters";
|
||||||
const $ = require('jquery');
|
const $ = require('jquery');
|
||||||
$.DataTable = require('datatables.net');
|
$.DataTable = require('datatables.net');
|
||||||
moment.locale('nl');
|
moment.locale('nl');
|
||||||
|
|
||||||
function ManageBooks() {
|
function ManageBooks() {
|
||||||
|
|
||||||
|
var [books, setBooks] = useState([]);
|
||||||
|
|
||||||
var navigate = useNavigate();
|
var navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -15,12 +19,60 @@ function ManageBooks() {
|
||||||
// window.location.href = "/login";
|
// window.location.href = "/login";
|
||||||
navigate("/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 (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="content">
|
<SidebarManage />
|
||||||
<h1>Boeken beheren</h1>
|
<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>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
|
Binary file not shown.
|
@ -33,6 +33,33 @@ html, body{
|
||||||
padding: 30px;
|
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{
|
.filter{
|
||||||
width:100%;
|
width:100%;
|
||||||
background:#1f2940;
|
background:#1f2940;
|
||||||
|
@ -82,6 +109,75 @@ html, body{
|
||||||
color: #808080;
|
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{
|
.sidebar{
|
||||||
background: #363a53;
|
background: #363a53;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -14,6 +14,10 @@
|
||||||
!*** ./src/views/login.js ***!
|
!*** ./src/views/login.js ***!
|
||||||
\****************************/
|
\****************************/
|
||||||
|
|
||||||
|
/*!***********************************!*\
|
||||||
|
!*** ./src/components/Filters.js ***!
|
||||||
|
\***********************************/
|
||||||
|
|
||||||
/*!***********************************!*\
|
/*!***********************************!*\
|
||||||
!*** ./src/views/manage/books.js ***!
|
!*** ./src/views/manage/books.js ***!
|
||||||
\***********************************/
|
\***********************************/
|
||||||
|
@ -402,6 +406,10 @@
|
||||||
!*** ./node_modules/react-dom/client.js ***!
|
!*** ./node_modules/react-dom/client.js ***!
|
||||||
\******************************************/
|
\******************************************/
|
||||||
|
|
||||||
|
/*!******************************************!*\
|
||||||
|
!*** ./src/components/manage/sidebar.js ***!
|
||||||
|
\******************************************/
|
||||||
|
|
||||||
/*!*******************************************!*\
|
/*!*******************************************!*\
|
||||||
!*** ./node_modules/moment/locale/fil.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/views/booklist.js ***!
|
||||||
\*******************************/
|
\*******************************/
|
||||||
|
|
||||||
/*!***********************************!*\
|
|
||||||
!*** ./src/components/Filters.js ***!
|
|
||||||
\***********************************/
|
|
||||||
|
|
||||||
/*!***********************************!*\
|
/*!***********************************!*\
|
||||||
!*** ./src/components/Sidebar.js ***!
|
!*** ./src/components/Sidebar.js ***!
|
||||||
\***********************************/
|
\***********************************/
|
||||||
|
|
Loading…
Reference in New Issue