added ui elements

web/public/index.html

@@ -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>

web/src/App.jsx

@@ -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>

web/src/components/Button.jsx

@@ -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

web/src/components/Card.jsx

@@ -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;
 }

web/src/components/Checkbox.jsx

@@ -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;

web/src/components/Checkbox.svg

@@ -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>

web/src/components/ColourPalette.jsx

@@ -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>
+    )
+}

web/src/components/CreateUserWidget.jsx

@@ -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>
         )
     }

web/src/components/SearchBox.jsx

@@ -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;

web/src/components/Select.jsx

@@ -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;

web/src/components/Table.jsx

@@ -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;

web/src/components/TextInput.jsx

@@ -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>

web/src/components/index.js

@@ -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}

web/src/theme/index.js

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

web/src/views/AccountEdit.jsx

@@ -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

@@ -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/>
+                <h3>Account Manager</h3>
-                Hello World
+                <Table>
-            </Card>
+                    <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

@@ -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;
-                flex-wrap: wrap;
+            flex-direction: row;
-            -webkit-box-orient: horizontal;
-            -webkit-box-direction: normal;
-                -ms-flex-direction: row;
-                    flex-direction: row;
             min-height: auto;
             padding: .5em;
-            -webkit-box-pack: end;
+            justify-content: space-between;
-                -ms-flex-pack: end;
+            align-items: center;
-                    justify-content: flex-end;
-            -webkit-box-align: center;
-                -ms-flex-align: center;
-                    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" exact to="/">Dashboard</NavLink></li>
-                        <li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/accounts">Accounts</NavLink></li>
-                        <li><NavLink activeClassName="menu__active" to="/log">Log</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

@@ -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>
+                <h3>Logs</h3>
-                <hr/>
+                <Table>
-                Hello World
+                    <thead>
-            </Card>
+                        <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

@@ -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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import Card from '../components/Card'
+import styled, {withTheme} from 'styled-components'
-import TextInput from '../components/TextInput'
+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,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}