redesign
This commit is contained in:
parent
ab5b908769
commit
7819841b25
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
#DataTable td {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
font-weight: 300;
|
||||
vertical-align: middle;
|
||||
|
|
@ -17,7 +17,11 @@
|
|||
|
||||
.DataTable_Container {
|
||||
margin: 0 !important;
|
||||
margin-top:30px !important;
|
||||
margin-top:10px !important;
|
||||
box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#DataTable{
|
||||
|
|
@ -47,7 +51,7 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
#DataTable i {
|
||||
#DataTable i.fa-star {
|
||||
color: #ffbe0e;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
|
@ -189,4 +193,21 @@
|
|||
.badge-info{
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.dotgenre{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 5px -1px, rgba(0, 0, 0, 0.14) 3px 3px 5px -1px, rgba(0, 0, 0, 0.12) 3px 3px 5px -1px;
|
||||
}
|
||||
|
||||
.btn-danger{
|
||||
border-radius: 100% !important;
|
||||
background: red;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 5px -1px, rgba(0, 0, 0, 0.14) 3px 3px 5px -1px, rgba(0, 0, 0, 0.12) 3px 3px 5px -1px;
|
||||
}
|
||||
|
|
@ -1,26 +1,92 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
const Sidebar = () => {
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const logout = () => {
|
||||
localStorage.clear();
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
const addBook = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const book = {
|
||||
name: event.target.name.value,
|
||||
author: event.target.author.value,
|
||||
genre: event.target.genre.value,
|
||||
readed: event.target.readed.value,
|
||||
rating: event.target.rating.value,
|
||||
}
|
||||
|
||||
const data = await import("../components/Data.js");
|
||||
const insertbook = await data.insertBook(book);
|
||||
|
||||
setShowModal(false);
|
||||
await getData();
|
||||
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<NavLink to={'/'} exact="true">
|
||||
<li><i className="fas fa-chart-line"></i></li>
|
||||
</NavLink>
|
||||
<ul>
|
||||
<NavLink to={'/'} exact="true">
|
||||
<li><i className="fas fa-chart-line"></i></li>
|
||||
</NavLink>
|
||||
|
||||
<NavLink to={'/books'} exact="true">
|
||||
<li><i className="fas fa-book"></i></li>
|
||||
</NavLink>
|
||||
<li className="bottom-menu"><button onClick={() => logout()}><i className="fas fa-power-off"></i></button></li>
|
||||
</ul>
|
||||
<NavLink to={'/books'} exact="true">
|
||||
<li><i className="fas fa-book"></i></li>
|
||||
</NavLink>
|
||||
|
||||
<li onClick={() => setShowModal(true)}><i class="fas fa-plus-circle"></i></li>
|
||||
<li className="bottom-menu"><button onClick={() => logout()}><i className="fas fa-power-off"></i></button></li>
|
||||
</ul>
|
||||
|
||||
{showModal && (<div style={{ display: 'block' }} className="modal" tabIndex="-1" role="dialog">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Boek toevoegen</h5>
|
||||
<button type="button" onClick={() => setShowModal(false)} className="close" data-dismiss="modal" aria-label="Close">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form method="POST" onSubmit={(event) => addBook(event)}>
|
||||
<div className="modal-body">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Naam</label>
|
||||
<input type="text" className="form-control" id="name" name="name"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="author">Schrijver</label>
|
||||
<input type="text" className="form-control" id="author" name="author" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="genre">Genre</label>
|
||||
<input type="text" className="form-control" id="genre" name="genre" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="readed">Gelezen op</label>
|
||||
<input type="date" className="form-control" id="readed" name="readed"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="rating">Aantal sterren</label>
|
||||
<input type="text" className="form-control" id="rating" name="rating"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="submit" className="btn btn-add">Toevoegen</button>
|
||||
<button type="button" onClick={() => setShowModal(false)} className="btn btn-cancel" data-dismiss="modal">Annuleren</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,30 +6,6 @@ moment.locale('nl');
|
|||
|
||||
const BooksList = (props) => {
|
||||
var [books, setBooks] = useState([]);
|
||||
const currentyear = new Date().getFullYear();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [months, setMonths] = useState([]);
|
||||
const [year, setYear] = useState(currentyear);
|
||||
const [readingYears, setReadingYears] = useState([]);
|
||||
|
||||
const addBook = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const book = {
|
||||
name: event.target.name.value,
|
||||
author: event.target.author.value,
|
||||
genre: event.target.genre.value,
|
||||
readed: event.target.readed.value,
|
||||
rating: event.target.rating.value,
|
||||
}
|
||||
|
||||
const data = await import("../components/Data.js");
|
||||
const insertbook = await data.insertBook(book);
|
||||
|
||||
setShowModal(false);
|
||||
await getData();
|
||||
|
||||
}
|
||||
|
||||
const delBook = async (bookid) => {
|
||||
var result = confirm("Weet je zeker dat je dit wilt verwijderen?");
|
||||
|
|
@ -47,9 +23,6 @@ const BooksList = (props) => {
|
|||
import("../Functions.js")
|
||||
])
|
||||
|
||||
const getYears = await data.getReadingYears();
|
||||
setReadingYears(getYears);
|
||||
|
||||
const getbooks = await data.getAllBooks();
|
||||
setBooks(getbooks);
|
||||
functions.initDataTable();
|
||||
|
|
@ -62,51 +35,47 @@ const BooksList = (props) => {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<Sidebar />
|
||||
|
||||
<div className="topbar">
|
||||
<img className="logo" src="/static/images/logo_white.png" />
|
||||
<div className="chooseYear">
|
||||
<i className="fa fa-calendar"></i>
|
||||
<span className="stats-number" style={{ marginRight: '0px' }}>
|
||||
<select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
|
||||
{readingYears.map((year, i) => {
|
||||
return (<option key={i} value={year}>{year}</option>)
|
||||
})}
|
||||
{!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="topbar_right">
|
||||
<ul>
|
||||
<li><i className="fas fa-book" onClick={() => {setShowModal(true)}}></i></li>
|
||||
<li onClick={() => logout()}><i className="fas fa-power-off"></i></li>
|
||||
<li className="currentUser"><i class="fas fa-user-circle"></i> {localStorage.getItem('name')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="content">
|
||||
<h1>Boeken beheren <button type="button" onClick={() => setShowModal(true)} className="btn btn-success btn-add">Toevoegen</button></h1>
|
||||
|
||||
<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>Boek</th>
|
||||
<th>Schrijver</th>
|
||||
<th>Genre</th>
|
||||
<th>Gelezen op</th>
|
||||
<th>Rating</th>
|
||||
<th>Acties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{books.map((book, i) => {
|
||||
var dotcolor = '';
|
||||
|
||||
if(book.genre === "Thriller"){
|
||||
dotcolor = '#405181';
|
||||
}else if (book.genre === "Roman"){
|
||||
dotcolor = '#01a9ac';
|
||||
}else if(book.genre === 'Non-fictie'){
|
||||
dotcolor = '#64c5b1';
|
||||
}else{
|
||||
dotcolor = '#1ABB9C';
|
||||
}
|
||||
|
||||
return (
|
||||
<tr key={book.id}>
|
||||
<td>{book.name}</td>
|
||||
<td><div className="dotgenre" style={{background: dotcolor }}></div> {book.name}</td>
|
||||
<td>{book.author}</td>
|
||||
<td>{book.genre}</td>
|
||||
<td>{moment(book.readed).format('MMMM YYYY')}</td>
|
||||
<td><i class='fas fa-star'></i> {book.rating}</td>
|
||||
<td>
|
||||
<button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
|
||||
|
|
@ -117,47 +86,6 @@ const BooksList = (props) => {
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{showModal && (<div style={{ display: 'block' }} className="modal" tabIndex="-1" role="dialog">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Boek toevoegen</h5>
|
||||
<button type="button" onClick={() => setShowModal(false)} className="close" data-dismiss="modal" aria-label="Close">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form method="POST" onSubmit={(event) => addBook(event)}>
|
||||
<div className="modal-body">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Naam</label>
|
||||
<input type="text" className="form-control" id="name" name="name"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="author">Schrijver</label>
|
||||
<input type="text" className="form-control" id="author" name="author" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="genre">Genre</label>
|
||||
<input type="text" className="form-control" id="genre" name="genre" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="readed">Gelezen op</label>
|
||||
<input type="date" className="form-control" id="readed" name="readed"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="rating">Aantal sterren</label>
|
||||
<input type="text" className="form-control" id="rating" name="rating"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="submit" className="btn btn-success">Toevoegen</button>
|
||||
<button type="button" onClick={() => setShowModal(false)} className="btn btn-danger cancel" data-dismiss="modal">Annuleren</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -70,12 +70,24 @@ html, body{
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal{
|
||||
background:rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal .modal-header{
|
||||
border-bottom:none;
|
||||
background: #405181;
|
||||
color: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal .modal-header i{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal .modal-header .modal-title{
|
||||
font-size:13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.modal .modal-footer{
|
||||
|
|
@ -90,9 +102,8 @@ html, body{
|
|||
|
||||
.modal .modal-dialog{
|
||||
background: #ffffff;
|
||||
-webkit-box-shadow: 0px 1px 1px 1px #eee;
|
||||
box-shadow: 0px 1px 1px 1px #eee;
|
||||
padding: 10px;
|
||||
padding: 0px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.modal .modal-content{
|
||||
|
|
@ -116,6 +127,26 @@ html, body{
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.modal form{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn-cancel{
|
||||
background: red !important;
|
||||
border-radius: 10px !important;
|
||||
color: #fff;
|
||||
padding: 10px 20px !important;
|
||||
|
||||
}
|
||||
|
||||
.btn-add{
|
||||
background: #5cb85c !important;
|
||||
border-radius: 10px !important;
|
||||
color: #fff;
|
||||
padding: 10px 20px !important;
|
||||
|
||||
}
|
||||
|
||||
.filter{
|
||||
width:100%;
|
||||
background:#1f2940;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue