redesign
This commit is contained in:
parent
ab5b908769
commit
7819841b25
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
#DataTable td {
|
#DataTable td {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
@ -17,7 +17,11 @@
|
||||||
|
|
||||||
.DataTable_Container {
|
.DataTable_Container {
|
||||||
margin: 0 !important;
|
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{
|
#DataTable{
|
||||||
|
@ -47,7 +51,7 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#DataTable i {
|
#DataTable i.fa-star {
|
||||||
color: #ffbe0e;
|
color: #ffbe0e;
|
||||||
margin-right:10px;
|
margin-right:10px;
|
||||||
}
|
}
|
||||||
|
@ -190,3 +194,20 @@
|
||||||
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;
|
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;
|
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,13 +1,34 @@
|
||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
|
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
window.location.href = "/";
|
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(
|
return(
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -18,9 +39,54 @@ const Sidebar = () => {
|
||||||
<NavLink to={'/books'} exact="true">
|
<NavLink to={'/books'} exact="true">
|
||||||
<li><i className="fas fa-book"></i></li>
|
<li><i className="fas fa-book"></i></li>
|
||||||
</NavLink>
|
</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>
|
<li className="bottom-menu"><button onClick={() => logout()}><i className="fas fa-power-off"></i></button></li>
|
||||||
</ul>
|
</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>
|
</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) => {
|
const BooksList = (props) => {
|
||||||
var [books, setBooks] = useState([]);
|
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) => {
|
const delBook = async (bookid) => {
|
||||||
var result = confirm("Weet je zeker dat je dit wilt verwijderen?");
|
var result = confirm("Weet je zeker dat je dit wilt verwijderen?");
|
||||||
|
@ -47,9 +23,6 @@ const BooksList = (props) => {
|
||||||
import("../Functions.js")
|
import("../Functions.js")
|
||||||
])
|
])
|
||||||
|
|
||||||
const getYears = await data.getReadingYears();
|
|
||||||
setReadingYears(getYears);
|
|
||||||
|
|
||||||
const getbooks = await data.getAllBooks();
|
const getbooks = await data.getAllBooks();
|
||||||
setBooks(getbooks);
|
setBooks(getbooks);
|
||||||
functions.initDataTable();
|
functions.initDataTable();
|
||||||
|
@ -62,51 +35,47 @@ const BooksList = (props) => {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
|
|
||||||
<div className="topbar">
|
<div className="topbar">
|
||||||
<img className="logo" src="/static/images/logo_white.png" />
|
<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">
|
<div className="topbar_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li><i className="fas fa-book" onClick={() => {setShowModal(true)}}></i></li>
|
<li className="currentUser"><i class="fas fa-user-circle"></i> {localStorage.getItem('name')}</li>
|
||||||
<li onClick={() => logout()}><i className="fas fa-power-off"></i></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="content">
|
<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">
|
<div className="DataTable_Container">
|
||||||
<table id="DataTable" className="showHead table responsive nowrap" width="100%">
|
<table id="DataTable" className="table responsive nowrap" width="100%">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Boek</th>
|
<th>Boek</th>
|
||||||
<th>Schrijver</th>
|
<th>Schrijver</th>
|
||||||
<th>Genre</th>
|
|
||||||
<th>Gelezen op</th>
|
|
||||||
<th>Rating</th>
|
<th>Rating</th>
|
||||||
<th>Acties</th>
|
<th>Acties</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{books.map((book, i) => {
|
{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 (
|
return (
|
||||||
<tr key={book.id}>
|
<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.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><i class='fas fa-star'></i> {book.rating}</td>
|
||||||
<td>
|
<td>
|
||||||
<button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
|
<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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
|
|
@ -70,12 +70,24 @@ html, body{
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal{
|
||||||
|
background:rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
.modal .modal-header{
|
.modal .modal-header{
|
||||||
border-bottom:none;
|
border-bottom:none;
|
||||||
|
background: #405181;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header i{
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal .modal-header .modal-title{
|
.modal .modal-header .modal-title{
|
||||||
font-size:13px;
|
font-size:13px;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal .modal-footer{
|
.modal .modal-footer{
|
||||||
|
@ -90,9 +102,8 @@ html, body{
|
||||||
|
|
||||||
.modal .modal-dialog{
|
.modal .modal-dialog{
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
-webkit-box-shadow: 0px 1px 1px 1px #eee;
|
padding: 0px;
|
||||||
box-shadow: 0px 1px 1px 1px #eee;
|
margin-top: 150px;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal .modal-content{
|
.modal .modal-content{
|
||||||
|
@ -116,6 +127,26 @@ html, body{
|
||||||
font-size: 15px;
|
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{
|
.filter{
|
||||||
width:100%;
|
width:100%;
|
||||||
background:#1f2940;
|
background:#1f2940;
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue