Compare commits
2 Commits
0dbb7f8528
...
94eed84eaa
| Author | SHA1 | Date | |
|---|---|---|---|
| 94eed84eaa | |||
| ad52fdb08f |
@ -9,7 +9,9 @@
|
||||
"node-sass": "^6.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"styled-components": "^5.3.1",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -1,70 +1,30 @@
|
||||
import "./App.sass"
|
||||
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
} from "react-router-dom";
|
||||
import { ThemeProvider } from "styled-components";
|
||||
import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components'
|
||||
import {AccountManager, AdminUI, Logger} from './views'
|
||||
import theme from './theme';
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="header">
|
||||
<h1>Doorlock Systems</h1>
|
||||
<div id="header__search"><input id="header__search__input" type="text" placeholder="..."></input><button>Search</button></div>
|
||||
<div id="header__menu">
|
||||
<ul>
|
||||
<li><a>User Settings</a></li>
|
||||
<li><a>Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<h3>Menu</h3>
|
||||
<ul>
|
||||
<li><a className="menu__active">Status</a></li>
|
||||
<li><a>Account</a></li>
|
||||
<li><a>Log</a></li>
|
||||
<li><a>Backup</a></li>
|
||||
<li><a>Admin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div className="main__card">
|
||||
<h4>Add User</h4>
|
||||
<hr />
|
||||
<p>Add new user</p>
|
||||
<p><label>First Name</label><input type="text"></input></p>
|
||||
<p><label>Last Name</label><input type="text"></input></p>
|
||||
<p><label>PIN</label><input type="text"></input></p>
|
||||
<p><label>RFID</label><input type="text"></input><button>Scan</button></p>
|
||||
<p><label>Expire Date</label><input type="date"></input></p>
|
||||
<button>Add</button>
|
||||
</div>
|
||||
<div className="main__card">
|
||||
<h4>Recent Activity</h4>
|
||||
<hr />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Method</td>
|
||||
<td>Time</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Max Mustermann</td>
|
||||
<td>RFID</td>
|
||||
<td>1.10.2020 08:30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="main__card">
|
||||
<h4>System Status</h4>
|
||||
<hr />
|
||||
<p>Uptime: since 3days 15hours</p>
|
||||
<p>LastDB Update: before 7hours</p>
|
||||
<p>Last administrator login: Admin (12.9.2021 09:30)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">Footer</div>
|
||||
</>
|
||||
<Router>
|
||||
<ThemeProvider theme={theme}>
|
||||
<AdminUI>
|
||||
<Switch>
|
||||
<Route path="/" exact>
|
||||
<CreateUserWidget />
|
||||
<RecentActivityWidget />
|
||||
<SystemStatusWidget />
|
||||
</Route>
|
||||
<Route path="/accounts">
|
||||
<AccountManager/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</AdminUI>
|
||||
</ThemeProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
198
web/src/App.sass
198
web/src/App.sass
@ -1,198 +0,0 @@
|
||||
$color1: #1F1E2E
|
||||
$color2: #27283A
|
||||
$color3: #438AF4
|
||||
$color4: rgba(2,0,36,0.7455182756696428)
|
||||
$color5: rgba(43,2,23,0.7763306005996149)
|
||||
$color6: #ddd9ebbf
|
||||
*
|
||||
box-sizing: border-box
|
||||
html, body
|
||||
margin: 0
|
||||
#root
|
||||
min-height: 100vh
|
||||
display: grid
|
||||
grid-template-columns: auto 1fr auto
|
||||
grid-template-rows: auto 1fr 2em
|
||||
grid-template-areas: "header header header" " menu main ." "footer footer footer"
|
||||
background: $color2
|
||||
overflow: auto
|
||||
|
||||
#header
|
||||
position: relative
|
||||
grid-area: header
|
||||
display: inline-flex
|
||||
flex-wrap: wrap
|
||||
flex-direction: row
|
||||
min-height: auto
|
||||
padding: .5em
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
background: $color1
|
||||
color: $color6
|
||||
|
||||
h1
|
||||
flex-wrap: nowrap
|
||||
white-space: nowrap
|
||||
display: inline-flex
|
||||
font-size: 1.5em
|
||||
&::after
|
||||
justify-self: start
|
||||
position: absolute
|
||||
display: block
|
||||
content: ''
|
||||
left: 0
|
||||
right: 0
|
||||
top: 100%
|
||||
background: $color3
|
||||
height: .1em
|
||||
|
||||
&__search
|
||||
|
||||
margin: 1em
|
||||
position: relative
|
||||
border-radius: .5rem
|
||||
display: inline-flex
|
||||
margin-left: auto
|
||||
transition: ease all 500ms
|
||||
&:hover
|
||||
flex-grow: 1
|
||||
&__input
|
||||
height: 2rem
|
||||
transition: ease all 500ms
|
||||
border-radius: .5rem 0 0 .5rem
|
||||
display: flex
|
||||
background: $color3
|
||||
border: none
|
||||
outline: none
|
||||
color: $color6
|
||||
flex-grow: 0
|
||||
margin-left: auto
|
||||
max-width: 50%
|
||||
box-shadow: 0 0 .2em $color5
|
||||
padding: .5em
|
||||
&:hover, &:not(:placeholder-shown)
|
||||
transition: ease all 500ms
|
||||
flex-grow: 1
|
||||
+ button
|
||||
height: 2rem
|
||||
border: none
|
||||
color: $color6
|
||||
border-radius: 0 .5rem .5rem 0
|
||||
display: flex
|
||||
align-items: center
|
||||
background: $color2
|
||||
font-size: 1em
|
||||
border: .1rem inset $color3
|
||||
border-style: solid
|
||||
padding: .5em
|
||||
&:hover
|
||||
background: $color6
|
||||
color: $color3
|
||||
&__menu
|
||||
display: inline-flex
|
||||
flex-wrap: nowrap
|
||||
flex-shrink: 1
|
||||
ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
li
|
||||
display: inline
|
||||
a
|
||||
padding: .5em
|
||||
white-space: nowrap
|
||||
#menu
|
||||
grid-area: menu
|
||||
display: flex
|
||||
min-height: 100
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
background: $color1
|
||||
padding: .5em 0
|
||||
overflow: visible
|
||||
h3
|
||||
margin: 0
|
||||
color: $color6
|
||||
text-decoration: bold
|
||||
ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
margin: .4em 0
|
||||
a
|
||||
position: relative
|
||||
display: block
|
||||
text-decoration: none
|
||||
margin-left: .4em
|
||||
color: $color6
|
||||
//margin: .5em 0
|
||||
padding: .3em .5em
|
||||
font-size: 1.05em
|
||||
transition: ease all 500ms
|
||||
&::after
|
||||
transition: ease all 500ms
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
right: 100%
|
||||
width: 0em
|
||||
content: ''
|
||||
background: $color6
|
||||
&:hover
|
||||
background: $color3
|
||||
&::after
|
||||
width: 0.4em
|
||||
&.menu__active
|
||||
color: $color3
|
||||
&::after
|
||||
width: 0.4em
|
||||
background: $color2
|
||||
&:hover
|
||||
color: #fff
|
||||
|
||||
&::after
|
||||
width: 0.4em
|
||||
background: $color6
|
||||
|
||||
#main
|
||||
grid-area: main
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
padding: 1em
|
||||
border-top-left-radius: 1em
|
||||
.main
|
||||
&__card
|
||||
flex-grow: 1
|
||||
background: $color6
|
||||
border-radius: 1em
|
||||
padding: 1em
|
||||
margin: 1em
|
||||
h4
|
||||
margin: 0
|
||||
#footer
|
||||
position: relative
|
||||
grid-area: footer
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
color: #ffffff67
|
||||
text-transform: uppercase
|
||||
&::after
|
||||
position: absolute
|
||||
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
height: 2em
|
||||
widht: 100vw
|
||||
opacity: 0.5
|
||||
background: #000
|
||||
background: linear-gradient(90deg, $color2 0%, $color3% 25%, $color5 50%, $color4 65%, $color1 100%)
|
||||
content: ''
|
||||
&::before
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 100%
|
||||
height: .2em
|
||||
opacity: 0.5
|
||||
content: ''
|
||||
background: linear-gradient($color2,$color3)
|
||||
1
web/src/components/Card.css
Normal file
1
web/src/components/Card.css
Normal file
@ -0,0 +1 @@
|
||||
/* No CSS *//*# sourceMappingURL=Card.css.map */
|
||||
9
web/src/components/Card.css.map
Normal file
9
web/src/components/Card.css.map
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "",
|
||||
"sources": [
|
||||
"Card.sass"
|
||||
],
|
||||
"names": [],
|
||||
"file": "Card.css"
|
||||
}
|
||||
20
web/src/components/Card.jsx
Normal file
20
web/src/components/Card.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
const CardDiv = styled.div`
|
||||
flex-grow: 1;
|
||||
color: ${props=>props.theme.colours.color6};
|
||||
background: ${props=>props.theme.colours.color1};
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
export default function Card({children}) {
|
||||
return (
|
||||
<CardDiv>
|
||||
{children}
|
||||
</CardDiv>
|
||||
)
|
||||
}
|
||||
22
web/src/components/CreateUserWidget.jsx
Normal file
22
web/src/components/CreateUserWidget.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React, { Component } from 'react'
|
||||
import TextInput from './TextInput'
|
||||
import Card from './Card'
|
||||
export class CreateUserWidget extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card>
|
||||
<h4>Add User</h4>
|
||||
<hr />
|
||||
<p>Add new user</p>
|
||||
<TextInput id="first_name" label="First Name" />
|
||||
<TextInput id="last_name" label="Last Name" />
|
||||
<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>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CreateUserWidget
|
||||
30
web/src/components/RecentActivityWidget.jsx
Normal file
30
web/src/components/RecentActivityWidget.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React, { Component } from 'react'
|
||||
import Card from './Card'
|
||||
export class RecentActivityWidget extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card>
|
||||
<h4>Recent Activity</h4>
|
||||
<hr />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Method</td>
|
||||
<td>Time</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Max Mustermann</td>
|
||||
<td>RFID</td>
|
||||
<td>1.10.2020 08:30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RecentActivityWidget
|
||||
66
web/src/components/SearchBox.jsx
Normal file
66
web/src/components/SearchBox.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import React, { Component } from 'react'
|
||||
import styled, {withTheme,} from 'styled-components'
|
||||
export class SearchBox extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
const SearchWrapper = styled.div`
|
||||
margin: .5em;
|
||||
border-radius: .5rem;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
transition: ease-in-out all 500ms;
|
||||
flex-grow: 0;
|
||||
max-width: 20em;
|
||||
&:hover {
|
||||
box-shadow: 0 0 1em ${this.props.theme.colours.color3};
|
||||
flex-grow: 1;
|
||||
input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
input{
|
||||
height: 2rem;
|
||||
transition: ease all 500ms;
|
||||
border-radius: .5rem 0 0 .5rem;
|
||||
display: inline-flex;
|
||||
background: ${this.props.theme.colours.color3};
|
||||
border: none;
|
||||
outline: none;
|
||||
color: ${this.props.theme.colours.color6};
|
||||
flex-grow: 0;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
box-shadow: 0 0 .2em ${this.props.theme.colours.color5};
|
||||
padding: .5em;
|
||||
&:hover, &:not(:placeholder-shown){
|
||||
transition: ease all 500ms;
|
||||
flex-grow: 1;
|
||||
}
|
||||
+ button{
|
||||
height: 2rem;
|
||||
border: none;
|
||||
color: ${this.props.theme.colours.color6};
|
||||
border-radius: 0 .5rem .5rem 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
font-size: 1em;
|
||||
border: .1rem inset ${this.props.theme.colours.color3};
|
||||
border-style: solid;
|
||||
padding: .5em;
|
||||
&:hover{
|
||||
background: ${this.props.theme.colours.color6};
|
||||
color: ${this.props.theme.colours.color3};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
return (
|
||||
<SearchWrapper id="header__search"><input id={this.props.id} type="text" placeholder="..."></input><button>Search</button></SearchWrapper>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(SearchBox)
|
||||
17
web/src/components/SystemStatusWidget.jsx
Normal file
17
web/src/components/SystemStatusWidget.jsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React, { Component } from 'react'
|
||||
import Card from './Card'
|
||||
export class SystemStatusWidget extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card>
|
||||
<h4>System Status</h4>
|
||||
<hr />
|
||||
<p>Uptime: since 3days 15hours</p>
|
||||
<p>LastDB Update: before 7hours</p>
|
||||
<p>Last administrator login: Admin (12.9.2021 09:30)</p>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SystemStatusWidget
|
||||
111
web/src/components/TextInput.jsx
Normal file
111
web/src/components/TextInput.jsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React, { Component } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { withTheme } from 'styled-components';
|
||||
export class TextInput extends Component {
|
||||
|
||||
render() {
|
||||
const InputWrapper = styled.div`
|
||||
font-size: 1.1em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0.2em 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
|
||||
border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
|
||||
:hover {
|
||||
${this.props.disabled===undefined ? "outline: auto;\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
|
||||
button:hover{
|
||||
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
|
||||
&::before{
|
||||
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
|
||||
-webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
|
||||
transform: translateX(-90%) rotate(45deg) scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
input{
|
||||
padding: 1em .2em .1em 0.2em;
|
||||
display: inline-block;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
font-size: 1em;
|
||||
${this.props.disabled!==undefined ? "user-select: none;" : null};
|
||||
&:focus + label, &:not(:placeholder-shown) + label {
|
||||
color: ${this.props.theme.colours.color5};
|
||||
font-size: 0.7em;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
bottom: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
:disabled{
|
||||
color: ${this.props.theme.colours.color1};
|
||||
&:focus + label, &:not(:placeholder-shown) + label{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
label{
|
||||
padding: 0;
|
||||
color: ${this.props.theme.colours.color2};
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
left: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
bottom: 0;
|
||||
-webkit-transition: all ease-in-out 350ms;
|
||||
transition: all ease-in-out 350ms;
|
||||
}
|
||||
button{
|
||||
position: relative;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
color: ${this.props.theme.colours.color6};
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
padding: 0 .5em;
|
||||
-webkit-transition: ease all 300ms;
|
||||
transition: ease all 300ms;
|
||||
z-index: 1;
|
||||
::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
-webkit-transform: translateX(-90%) rotate(45deg);
|
||||
transform: translateX(-90%) rotate(45deg);
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
-webkit-transition: ease all 300ms;
|
||||
transition: ease all 300ms;
|
||||
}
|
||||
}
|
||||
`;
|
||||
return (
|
||||
<InputWrapper>
|
||||
<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>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(TextInput)
|
||||
5
web/src/components/index.js
Normal file
5
web/src/components/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import CreateUserWidget from "./CreateUserWidget";
|
||||
import RecentActivityWidget from "./RecentActivityWidget";
|
||||
import SystemStatusWidget from "./SystemStatusWidget";
|
||||
import SearchBox from "./SearchBox";
|
||||
export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox }
|
||||
@ -2,10 +2,9 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
29
web/src/theme/index.js
Normal file
29
web/src/theme/index.js
Normal file
@ -0,0 +1,29 @@
|
||||
const colours1 = {
|
||||
color1: "#1F1E2E",
|
||||
color2: "#27283A",
|
||||
color3: "#438AF4",
|
||||
color4: "rgba(2,0,36,0.7455182756696428)",
|
||||
color5: "#490428c6",
|
||||
color6: "#ddd9ebbf",
|
||||
color7: "#858192bf",
|
||||
color8: "#3a192ae0",
|
||||
color9: "#110d13",
|
||||
color10: "#fff",
|
||||
}
|
||||
const colours2 = {
|
||||
color1: "#1e2e2e",
|
||||
color2: "#273a37",
|
||||
color3: "#43f48d",
|
||||
color4: "#012400be",
|
||||
color5: "#254904c6",
|
||||
color6: "#daebd9bf",
|
||||
color7: "#839281bf",
|
||||
color8: "#193a1be0",
|
||||
color9: "#110d13",
|
||||
color10: "#fff",
|
||||
}
|
||||
const theme = {
|
||||
colours: colours1
|
||||
}
|
||||
export { theme, colours1 as colours }
|
||||
export default theme
|
||||
15
web/src/views/AccountManager.jsx
Normal file
15
web/src/views/AccountManager.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
import Card from '../components/Card'
|
||||
export class AccountManager extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Card>
|
||||
<h4>Account Manager</h4>
|
||||
<hr/>
|
||||
Hello World
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AccountManager
|
||||
243
web/src/views/AdminUI.jsx
Normal file
243
web/src/views/AdminUI.jsx
Normal file
@ -0,0 +1,243 @@
|
||||
import React, { Component } from 'react'
|
||||
//import "./AdminUI.sass"
|
||||
import { Link, NavLink } from 'react-router-dom'
|
||||
import styled, { createGlobalStyle, withTheme } from 'styled-components';
|
||||
import {SearchBox} from '../components';
|
||||
|
||||
|
||||
export class AdminUI extends Component {
|
||||
render() {
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body{
|
||||
margin: 0;
|
||||
}
|
||||
#root{
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr 2em;
|
||||
grid-template-areas: "header header header" " menu main ." "footer footer footer";
|
||||
//background: $color2
|
||||
overflow: auto;
|
||||
}
|
||||
`;
|
||||
const Header = styled.header`
|
||||
position: relative;
|
||||
-ms-grid-row: 1;
|
||||
-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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
&::after {
|
||||
-ms-grid-column-align: start;
|
||||
justify-self: start;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
background: ${this.props.theme.colours.color3};
|
||||
height: .2em;
|
||||
z-index: 1;
|
||||
}
|
||||
nav{
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 1;
|
||||
ul{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li{
|
||||
display: inline;
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: ${this.props.theme.colours.color6};
|
||||
padding: .5em;
|
||||
white-space: nowrap;
|
||||
&:hover{
|
||||
color: ${this.props.theme.colours.color3};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
const Menu = styled.menu`
|
||||
-ms-grid-row: 2;
|
||||
-ms-grid-column: 1;
|
||||
grid-area: menu;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-height: 100;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: ${this.props.theme.colours.color1};
|
||||
padding: .5em 0;
|
||||
overflow: visible;
|
||||
h3{
|
||||
margin: 0;
|
||||
color: #ddd9ebbf;
|
||||
-webkit-text-decoration: bold;
|
||||
text-decoration: bold;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: .4em 0;
|
||||
a{
|
||||
position: relative;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-left: .4em;
|
||||
color: ${this.props.theme.colours.color6};
|
||||
padding: .3em .5em;
|
||||
font-size: 1.05em;
|
||||
-webkit-transition: ease all 500ms;
|
||||
transition: ease all 500ms;
|
||||
&::after{
|
||||
-webkit-transition: ease all 500ms;
|
||||
transition: ease all 500ms;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
width: 0em;
|
||||
content: '';
|
||||
background: ${this.props.theme.colours.color6};
|
||||
}
|
||||
&:hover{
|
||||
background: ${this.props.theme.colours.color3};
|
||||
&::after{
|
||||
width: 0.4em;
|
||||
}
|
||||
}
|
||||
&.menu__active{
|
||||
color: ${this.props.theme.colours.color3};
|
||||
&::after{
|
||||
width: 0.4em;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
}
|
||||
&:hover {
|
||||
color: ${this.props.theme.colours.color10};
|
||||
&::after {
|
||||
width: 0.4em;
|
||||
background: ${this.props.theme.colours.color6};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
const Footer = styled.footer`
|
||||
position: relative;
|
||||
grid-area: footer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: ${this.props.theme.colours.color10};
|
||||
text-shadow: 0 0 .3em ${this.props.theme.colours.color2};
|
||||
text-transform: uppercase;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2em;
|
||||
opacity: 0.5;
|
||||
background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color6} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
|
||||
content: '';
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
height: .2em;
|
||||
opacity: 0.5;
|
||||
content: '';
|
||||
background: linear-gradient(${this.props.theme.colours.color2}, ${this.props.theme.colours.color3});
|
||||
}
|
||||
`;
|
||||
const Main = styled.div`
|
||||
position: relative;
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 1em;
|
||||
background: ${this.props.theme.colours.color2};
|
||||
`;
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<Header>
|
||||
<h1>Doorlock Systems</h1>
|
||||
<SearchBox />
|
||||
<nav>
|
||||
<ul>
|
||||
<li><Link to="/user_cp">User Settings</Link></li>
|
||||
<li><Link to="/logout">Logout</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</Header>
|
||||
<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" to="/backup">Backup</NavLink></li>
|
||||
<li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
|
||||
</ul>
|
||||
</Menu>
|
||||
<Main>
|
||||
{this.props.children}
|
||||
</Main>
|
||||
<Footer>Footer</Footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(AdminUI)
|
||||
15
web/src/views/Logger.jsx
Normal file
15
web/src/views/Logger.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
export class Logger extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="main__card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Logger
|
||||
4
web/src/views/index.js
Normal file
4
web/src/views/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Logger from "./Logger";
|
||||
import AdminUI from "./AdminUI";
|
||||
import AccountManager from "./AccountManager";
|
||||
export {AccountManager, AdminUI, Logger}
|
||||
179
web/yarn.lock
179
web/yarn.lock
@ -80,7 +80,7 @@
|
||||
jsesc "^2.5.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
|
||||
"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
|
||||
version "7.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
|
||||
integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
|
||||
@ -1157,7 +1157,7 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
|
||||
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
|
||||
@ -1173,7 +1173,7 @@
|
||||
"@babel/parser" "^7.15.4"
|
||||
"@babel/types" "^7.15.4"
|
||||
|
||||
"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.0":
|
||||
"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
|
||||
version "7.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
|
||||
integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
|
||||
@ -1219,6 +1219,28 @@
|
||||
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
|
||||
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
|
||||
|
||||
"@emotion/is-prop-valid@^0.8.8":
|
||||
version "0.8.8"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
|
||||
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "0.7.4"
|
||||
|
||||
"@emotion/memoize@0.7.4":
|
||||
version "0.7.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
|
||||
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
|
||||
|
||||
"@emotion/stylis@^0.8.4":
|
||||
version "0.8.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
|
||||
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
|
||||
|
||||
"@emotion/unitless@^0.7.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@eslint/eslintrc@^0.4.3":
|
||||
version "0.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
|
||||
@ -2771,6 +2793,21 @@ babel-plugin-polyfill-regenerator@^0.2.2:
|
||||
dependencies:
|
||||
"@babel/helper-define-polyfill-provider" "^0.2.2"
|
||||
|
||||
"babel-plugin-styled-components@>= 1.12.0":
|
||||
version "1.13.2"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d"
|
||||
integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
|
||||
dependencies:
|
||||
"@babel/helper-annotate-as-pure" "^7.0.0"
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
lodash "^4.17.11"
|
||||
|
||||
babel-plugin-syntax-jsx@^6.18.0:
|
||||
version "6.18.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
|
||||
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
|
||||
|
||||
babel-plugin-syntax-object-rest-spread@^6.8.0:
|
||||
version "6.13.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
|
||||
@ -3257,6 +3294,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
|
||||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
|
||||
integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
|
||||
|
||||
camelize@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
|
||||
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
|
||||
|
||||
caniuse-api@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
|
||||
@ -3816,6 +3858,11 @@ css-blank-pseudo@^0.1.4:
|
||||
dependencies:
|
||||
postcss "^7.0.5"
|
||||
|
||||
css-color-keywords@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
|
||||
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
|
||||
|
||||
css-color-names@0.0.4, css-color-names@^0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
|
||||
@ -3888,6 +3935,15 @@ css-select@^4.1.3:
|
||||
domutils "^2.6.0"
|
||||
nth-check "^2.0.0"
|
||||
|
||||
css-to-react-native@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
|
||||
integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
|
||||
dependencies:
|
||||
camelize "^1.0.0"
|
||||
css-color-keywords "^1.0.0"
|
||||
postcss-value-parser "^4.0.2"
|
||||
|
||||
css-tree@1.0.0-alpha.37:
|
||||
version "1.0.0-alpha.37"
|
||||
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
|
||||
@ -5750,6 +5806,18 @@ hex-color-regex@^1.1.0:
|
||||
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
|
||||
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
|
||||
|
||||
history@^4.9.0:
|
||||
version "4.10.1"
|
||||
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
|
||||
integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
loose-envify "^1.2.0"
|
||||
resolve-pathname "^3.0.0"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
value-equal "^1.0.1"
|
||||
|
||||
hmac-drbg@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
@ -5759,6 +5827,13 @@ hmac-drbg@^1.0.1:
|
||||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
dependencies:
|
||||
react-is "^16.7.0"
|
||||
|
||||
hoopy@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
|
||||
@ -6485,6 +6560,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
|
||||
dependencies:
|
||||
is-docker "^2.0.0"
|
||||
|
||||
isarray@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
|
||||
integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
|
||||
|
||||
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
@ -7367,7 +7447,7 @@ loglevel@^1.6.8:
|
||||
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
|
||||
integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
|
||||
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
@ -7606,6 +7686,14 @@ min-indent@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
|
||||
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
|
||||
|
||||
mini-create-react-context@^0.4.0:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
|
||||
integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.1"
|
||||
tiny-warning "^1.0.3"
|
||||
|
||||
mini-css-extract-plugin@0.11.3:
|
||||
version "0.11.3"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
|
||||
@ -8454,6 +8542,13 @@ path-to-regexp@0.1.7:
|
||||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
|
||||
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
|
||||
|
||||
path-to-regexp@^1.7.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
|
||||
integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
|
||||
dependencies:
|
||||
isarray "0.0.1"
|
||||
|
||||
path-type@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
|
||||
@ -9334,7 +9429,7 @@ prompts@^2.0.1:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.7.2:
|
||||
prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
@ -9559,7 +9654,7 @@ react-error-overlay@^6.0.9:
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
|
||||
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
|
||||
|
||||
react-is@^16.8.1:
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@ -9574,6 +9669,35 @@ react-refresh@^0.8.3:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
|
||||
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
|
||||
|
||||
react-router-dom@^5.3.0:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
|
||||
integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.13"
|
||||
history "^4.9.0"
|
||||
loose-envify "^1.3.1"
|
||||
prop-types "^15.6.2"
|
||||
react-router "5.2.1"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
|
||||
integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.13"
|
||||
history "^4.9.0"
|
||||
hoist-non-react-statics "^3.1.0"
|
||||
loose-envify "^1.3.1"
|
||||
mini-create-react-context "^0.4.0"
|
||||
path-to-regexp "^1.7.0"
|
||||
prop-types "^15.6.2"
|
||||
react-is "^16.6.0"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-scripts@4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
|
||||
@ -9922,6 +10046,11 @@ resolve-from@^5.0.0:
|
||||
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
|
||||
integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
|
||||
|
||||
resolve-pathname@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
|
||||
integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
|
||||
|
||||
resolve-url-loader@^3.1.2:
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
|
||||
@ -10332,6 +10461,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
|
||||
inherits "^2.0.1"
|
||||
safe-buffer "^5.0.1"
|
||||
|
||||
shallowequal@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
@ -10881,6 +11015,22 @@ style-loader@1.3.0:
|
||||
loader-utils "^2.0.0"
|
||||
schema-utils "^2.7.0"
|
||||
|
||||
styled-components@^5.3.1:
|
||||
version "5.3.1"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a"
|
||||
integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
"@babel/traverse" "^7.4.5"
|
||||
"@emotion/is-prop-valid" "^0.8.8"
|
||||
"@emotion/stylis" "^0.8.4"
|
||||
"@emotion/unitless" "^0.7.4"
|
||||
babel-plugin-styled-components ">= 1.12.0"
|
||||
css-to-react-native "^3.0.0"
|
||||
hoist-non-react-statics "^3.0.0"
|
||||
shallowequal "^1.1.0"
|
||||
supports-color "^5.5.0"
|
||||
|
||||
stylehacks@^4.0.0:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
|
||||
@ -10895,7 +11045,7 @@ supports-color@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
|
||||
|
||||
supports-color@^5.3.0:
|
||||
supports-color@^5.3.0, supports-color@^5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
|
||||
@ -11096,6 +11246,16 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tiny-invariant@^1.0.2:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
|
||||
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
|
||||
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||
|
||||
tmpl@1.0.x:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
|
||||
@ -11545,6 +11705,11 @@ validate-npm-package-license@^3.0.1:
|
||||
spdx-correct "^3.0.0"
|
||||
spdx-expression-parse "^3.0.0"
|
||||
|
||||
value-equal@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
|
||||
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
|
||||
|
||||
vary@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user