NFC-Doorlock/ESP8266-Firmware
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added ui elements

Browse Source
This commit is contained in:
Jean Jacques Avril 2021-11-06 16:25:52 +01:00
parent 09e6deb019
commit dc73b6d991
21 changed files with 342 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/index.html
View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Doorlock Management"
/>
<title>Doorlock</title>

5
web/src/App.jsx
View File

@ -4,7 +4,7 @@ import {
Route,
} from "react-router-dom";
import { ThemeProvider } from "styled-components";
import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components'
import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget, ColourPalette} from './components'
import {AccountManager, AdminUI, Logs, System} from './views'
import theme from './theme';
function App() {
@ -14,7 +14,8 @@ function App() {
<AdminUI>
<Switch>
<Route path="/" exact>
<CreateUserWidget />
<CreateUserWidget />
<RecentActivityWidget />
<SystemStatusWidget />
</Route>

22
web/src/components/Button.jsx Normal file
View File

@ -0,0 +1,22 @@
import styled from 'styled-components'
const Button = styled.button`
font-size: 1em;
font-weight: bold;
color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color3};
display: inline-block;
padding: 0.3em 0.5em;
border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color3};
background: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color4};
transition: ease-in-out 225ms;
&:hover{
background-color: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color3};
color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color6};
border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color10};
text-shadow: 0 0 .2em ${props=>props.disabled?"transparent":props.theme.colours.color9};
}
`;
export default Button

2
web/src/components/Card.jsx
View File

@ -7,6 +7,8 @@ background: ${props=>props.theme.colours.color1};
border-radius: 1em;
padding: 1em;
margin: 1em;
display: block;
flex-direction: column;
h4 {
margin: 0;
}

50
web/src/components/Checkbox.jsx Normal file
View File

@ -0,0 +1,50 @@
import styled from "styled-components";
import Hook from './Checkbox.svg'
const CheckboxOrigin = styled.input.attrs({ type: 'checkbox' })`
visibility: hidden;
`;
const CheckboxStyled = styled.div`
position: absolute;
top: 0;
right: 0;
font-size: 1em;
width: 1em;
height: 1em;
font-weight: bold;
color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color3};
border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color3};
background: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color4};
transition: ease-in-out 125ms;
${CheckboxOrigin}:checked +&{
border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color3};
background-color: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color3};
color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color6};
background-image: url(${Hook});
background-position: center;
background-repeat: no-repeat;
}
${CheckboxOrigin}:hover +&{
background-color: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color3};
color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color6};
border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color10};
}
`;
const CheckboxWrapper = styled.label`
position: relative;
display: inline-block;
vertical-align: middle;
`;
const Checkbox = ({ className, checked, ...props }) => (
<CheckboxWrapper className={className}>
<CheckboxOrigin checked={checked} {...props} />
<CheckboxStyled checked={checked} />
</CheckboxWrapper>
);
export default Checkbox;

11
web/src/components/Checkbox.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<path class="st0" d="M26.66,289.39l138.79,155.55c7.35,8.24,20.27,8.1,27.45-0.28l278.92-325.86c5.17-6.04,5.83-14.73,1.63-21.48
l-27.59-44.36c-6.48-10.41-21.18-11.59-29.23-2.34L214.5,282.9c-7.55,8.67-21.14,8.28-28.17-0.82l-89.7-116.01
c-8.54-11.05-25.83-8.78-31.23,4.1L23.45,270.2C20.73,276.68,21.98,284.14,26.66,289.39z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

25
web/src/components/ColourPalette.jsx Normal file
View File

@ -0,0 +1,25 @@
import React from 'react'
import styled from 'styled-components'
import { useContext } from 'react';
import { ThemeContext } from 'styled-components';
const Element = styled.div`
//width: 1em;
height: 2em;
display: block;
background: ${props=> props.bg};
color: #707070;
padding: .5em;
`;
export default function ColourPalette() {
var colours = useContext(ThemeContext).colours;
return (
<div>
{Object.keys(colours).map((name, index) => (
<Element bg={colours[name]}>{name}</Element>
))}
</div>
)
}

3
web/src/components/CreateUserWidget.jsx
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'
import TextInput from './TextInput'
import Card from './Card'
import Button from './Button'
export class CreateUserWidget extends Component {
render() {
return (
@ -13,7 +14,7 @@ export class CreateUserWidget extends Component {
<TextInput id="pin" label="PIN" />
<TextInput id="rfid" disabled label="RFID" button="Scan" value="Scanning RFID" onClick={(e)=>{console.log("Button Pressed",e)}}/>
<TextInput id="Expire_Date" label="Expire Date" type="date" />
<button>Add</button>
<Button>Create User</Button><Button disabled>Disabled</Button>
</Card>
)
}

5
web/src/components/SearchBox.jsx
View File

@ -9,7 +9,7 @@ export class SearchBox extends Component {
border-radius: .5rem;
display: inline-flex;
white-space: nowrap;
margin-left: auto;
//margin-left: auto;
transition: ease-in-out all 500ms;
flex-grow: 0;
max-width: 20em;
@ -28,7 +28,7 @@ export class SearchBox extends Component {
background: ${this.props.theme.colours.color3};
border: none;
outline: none;
color: ${this.props.theme.colours.color6};
color: ${this.props.theme.colours.color10};
flex-grow: 0;
margin-left: auto;
width: 100%;
@ -41,6 +41,7 @@ export class SearchBox extends Component {
+ button{
height: 2rem;
border: none;
transition: ease-in-out all 100ms;
color: ${this.props.theme.colours.color6};
border-radius: 0 .5rem .5rem 0;
display: inline-flex;

22
web/src/components/Select.jsx Normal file
View File

@ -0,0 +1,22 @@
import styled from "styled-components";
const Select = styled.select`
font-size: 1em;
font-weight: bold;
color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color3};
display: inline-block;
padding: 0.3em 0.5em;
border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color3};
background: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color4};
transition: ease-in-out 225ms;
option {
background-color: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color3};
color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color6};
border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color10};
text-shadow: 0 0 .2em ${props=>props.disabled?"transparent":props.theme.colours.color9};
}
`;
export default Select;

21
web/src/components/Table.jsx Normal file
View File

@ -0,0 +1,21 @@
import styled from "styled-components";
const Table = styled.table`
width: 100%;
border-spacing: 0;
border-collapse: collapse;
thead{
background-color: ${props=>props.theme.colours.color9};
font-weight: bold;
}
tbody tr:not(:last-child){
border-bottom: 1px solid ${props=>props.theme.colours.color9};
}
tr:nth-child(2){
background-color: ${props=>props.theme.colours.color1};
}
td{
padding: 0.5em 1em;
}
`;
export default Table;

2
web/src/components/TextInput.jsx
View File

@ -99,7 +99,7 @@ export class TextInput extends Component {
`;
return (
<InputWrapper>
<input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
<input id={this.props.id} placeholder=" " type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
{this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
{this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
</InputWrapper>

9
web/src/components/index.js
View File

@ -2,4 +2,11 @@ import CreateUserWidget from "./CreateUserWidget";
import RecentActivityWidget from "./RecentActivityWidget";
import SystemStatusWidget from "./SystemStatusWidget";
import SearchBox from "./SearchBox";
export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox }
import Card from "./Card";
import TextInput from "./TextInput";
import Button from "./Button";
import Select from "./Select";
import Checkbox from "./Checkbox";
import ColourPalette from "./ColourPalette";
import Table from "./Table";
export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox, Card, TextInput, Button, Select, Checkbox, Table, ColourPalette}

2
web/src/theme/index.js
View File

@ -13,7 +13,7 @@ const colours1 = {
const colours2 = {
color1: "#1e2e2e",
color2: "#273a37",
color3: "#43f48d",
color3: "#18cb64",
color4: "#012400be",
color5: "#254904c6",
color6: "#daebd9bf",

13
web/src/views/AccountEdit.jsx Normal file
View File

@ -0,0 +1,13 @@
import React, { Component } from 'react'
export class AccountEdit extends Component {
render() {
return (
<div>
</div>
)
}
}
export default AccountEdit

69
web/src/views/AccountManager.jsx
View File

@ -1,15 +1,72 @@
import React, { Component } from 'react'
import Card from '../components/Card'
import styled, { withTheme } from 'styled-components'
import { Button, Table, Select, Checkbox } from '../components';
export class AccountManager extends Component {
render() {
const ActionSelect = styled.div`
width: 100%;
display: flex;
justify-content: flex-end;
`;
return (
<Card>
<h4>Account Manager</h4>
<hr/>
Hello World
</Card>
<>
<h3>Account Manager</h3>
<Table>
<thead>
<tr>
<td>UserID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Last Access</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anton</td>
<td>Stigloher</td>
<td>06.10.2021</td>
<td><Button>More</Button></td>
<td><ActionSelect><Checkbox/></ActionSelect></td>
</tr>
<tr>
<td>002</td>
<td>Max</td>
<td>Mustermann</td>
<td>07.10.2021</td>
<td><Button>More</Button></td>
<td><ActionSelect><Checkbox/></ActionSelect></td>
</tr>
<tr>
<td>003</td>
<td>Peter</td>
<td>Lustig</td>
<td>08.10.2021</td>
<td><Button>More</Button></td>
<td><ActionSelect><Checkbox/></ActionSelect></td>
</tr>
</tbody>
</Table>
<ActionSelect><Select>
<option>Extend</option>
<option>Enable</option>
<option>Disable</option>
<option>Delete</option>
</Select>
<Button>Apply</Button>
</ActionSelect>
</>
)
}
}
export default AccountManager
export default withTheme(AccountManager)

35
web/src/views/AdminUI.jsx
View File

@ -30,37 +30,28 @@ export class AdminUI extends Component {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: header;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
flex-direction: row;
min-height: auto;
padding: .5em;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
align-items: center;
background: ${this.props.theme.colours.color1};
color: ${this.props.theme.colours.color7};
h1 {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
white-space: nowrap;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 1.5em;
margin: .5em;
margin-right: auto;
padding-right: 2em;
}
&::after {
-ms-grid-column-align: start;
justify-self: start;
position: absolute;
display: block;
@ -73,6 +64,7 @@ export class AdminUI extends Component {
z-index: 1;
}
nav{
margin-left: auto;
display: inline-flex;
flex-wrap: nowrap;
flex-shrink: 1;
@ -207,6 +199,7 @@ export class AdminUI extends Component {
align-items: flex-start;
flex-wrap: wrap;
padding: 1em;
color: ${props=>props.theme.colours.color6};
background: ${this.props.theme.colours.color2};
`;
return (
@ -217,7 +210,7 @@ export class AdminUI extends Component {
<SearchBox />
<nav>
<ul>
<li><Link to="/user_cp">User Settings</Link></li>
<li><Link to="/user_cp">Admin Settings</Link></li>
<li><Link to="/logout">Logout</Link></li>
</ul>
</nav>
@ -225,9 +218,9 @@ export class AdminUI extends Component {
<Menu>
<h3>Menu{props => this.props.theme}</h3>
<ul>
<li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
<li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
<li><NavLink activeClassName="menu__active" to="/log">Log</NavLink></li>
<li><NavLink activeClassName="menu__active" exact to="/">Dashboard</NavLink></li>
<li><NavLink activeClassName="menu__active" to="/accounts">Accounts</NavLink></li>
<li><NavLink activeClassName="menu__active" to="/log">Logs</NavLink></li>
<li><NavLink activeClassName="menu__active" to="/system">System</NavLink></li>
</ul>
</Menu>

39
web/src/views/Logs.jsx
View File

@ -1,15 +1,42 @@
import React, { Component } from 'react'
import styled, {withTheme} from 'styled-components'
import { Table, Button } from '../components'
import Card from '../components/Card'
export class Logs extends Component {
render() {
return (
<Card>
<h4>Logs</h4>
<hr/>
Hello World
</Card>
<>
<h3>Logs</h3>
<Table>
<thead>
<tr>
<td>Time</td>
<td>Type</td>
<td>Info</td>
</tr>
</thead>
<tbody>
<tr>
<td>12.12.12 08:12</td>
<td>Authentication</td>
<td>[NFC] Max Mustermann</td>
</tr>
<tr>
<td>12.12.12 08:12</td>
<td>Authentication Error</td>
<td>[NFC] 92:23:c3:32</td>
</tr>
<tr>
<td>12.12.12 08:12</td>
<td>Admin Login</td>
<td>Toni Stigloher</td>
</tr>
</tbody>
</Table>
<Button>Download full Logfile</Button>
</>
)
}
}
export default Logs
export default withTheme(Logs)

41
web/src/views/Overlay.jsx Normal file
View File

@ -0,0 +1,41 @@
import React, { Children, Component } from 'react'
import styled, {withTheme, createGlobalStyle} from 'styled-components'
export class Overlay extends Component {
render() {
const GlobalStyle = createGlobalStyle`
#root{
overflow : hidden ;
//pointer-events:none;
//user-select: none;
}
`;
const OverlayWrapper = styled.div`
user-select: all;
pointer-events: all;
filter: blur(0);
position: fixed;
top: 0;
left: 0;
width: calc(100vw - 4em);
margin: 2em;
height: calc(100vh - 4em);
z-index: 2;
border-radius: 1em;
padding: 1em;
color: ${this.props.theme.colours.color3};
background: ${this.props.theme.colours.color9};
box-shadow: 0 0 2em ${this.props.theme.colours.color3};
border: 1px solid ${this.props.theme.colours.color3};
overflow: auto;
`;
return (
<OverlayWrapper>
<GlobalStyle/>
{this.props.children}
</OverlayWrapper>
)
}
}
export default withTheme(Overlay)

8
web/src/views/System.jsx
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'
import Card from '../components/Card'
import TextInput from '../components/TextInput'
import styled, {withTheme} from 'styled-components'
import {Button, Card, TextInput} from '../components'
export class System extends Component {
render() {
return (
@ -15,7 +15,7 @@ export class System extends Component {
<hr />
<TextInput label="SSID"/>
<TextInput label="Password" type="password"/>
<TextInput type="button" value="SAVE"/>
<Button >Save</Button>
</Card>
</>
@ -23,4 +23,4 @@ export class System extends Component {
}
}
export default System
export default withTheme(System)

3
web/src/views/index.js
View File

@ -2,4 +2,5 @@ import AdminUI from "./AdminUI";
import AccountManager from "./AccountManager";
import Logs from "./Logs";
import System from "./System";
export {AccountManager, AdminUI, Logs, System}
import Overlay from "./Overlay";
export {AccountManager, AdminUI, Logs, System, Overlay}