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
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/AccountEdit.jsx
+13
View File
@@ -0,0 +1,13 @@
import React, { Component } from 'react'
export class AccountEdit extends Component {
render() {
return (
<div>
</div>
)
}
}
export default AccountEdit
web/src/views/AccountManager.jsx
+63 -6
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)
web/src/views/AdminUI.jsx
+14 -21
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>
web/src/views/Logs.jsx
+33 -6
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)
web/src/views/Overlay.jsx
+41
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)
web/src/views/System.jsx
+4 -4
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)
web/src/views/index.js
+2 -1
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}