basic state setup
This commit is contained in:
studavrije7683
parent
981dcb3789
commit
642083bad6
@ -4,18 +4,16 @@ import { h } from "preact";
|
||||
|
||||
|
||||
const Pageselector = (props) => {
|
||||
|
||||
let start = 1;
|
||||
let end = 7;
|
||||
var items = [];
|
||||
if(!isNaN(props.start)&&!isNaN(props.end)&&!isNaN(props.current))
|
||||
for(var i=props.start; i<=props.end; i++){
|
||||
items.push(<li><a {...(i==props.current?{className:'active'}:{})} href="#">{i}</a></li>);
|
||||
}
|
||||
items.push(<li><a href="#">></a></li>);
|
||||
return (
|
||||
<div class="page-nav-bar">
|
||||
<ul>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">></a></li>
|
||||
{items}
|
||||
</ul>
|
||||
</div>);
|
||||
}
|
||||
|
||||
@ -1,23 +1,57 @@
|
||||
import { createRef, h } from 'preact';
|
||||
import { Router } from 'preact-router';
|
||||
import Header from './header';
|
||||
import Login from '../routes/login';
|
||||
import Profile from '../routes/profile';
|
||||
import Menu from './menu';
|
||||
import Users from '../routes/users';
|
||||
import { Component, createRef, h } from "preact";
|
||||
import { Router } from "preact-router";
|
||||
import Header from "./header";
|
||||
import Login from "../routes/login";
|
||||
import Profile from "../routes/profile";
|
||||
import Menu from "./menu";
|
||||
import Users from "../routes/users";
|
||||
import { useCallback, useState } from "preact/hooks";
|
||||
const menu = createRef();
|
||||
class App extends Component {
|
||||
toggleMenu() {
|
||||
const [visible, setValue] = useState(false);
|
||||
const toggle = useCallback(() => {
|
||||
setValue(!visible);
|
||||
return !visible;
|
||||
}, [visible]);
|
||||
return { visible, toggle };
|
||||
}
|
||||
authenticateUser() {
|
||||
const [session, setValue] = useState({ token: null });
|
||||
const login = (username, password) => {
|
||||
if (username == "admin" && password == "admin") {
|
||||
setValue({ ...session, token: "ABCDEFG" });
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const logout = () => setValue({ ...session, token: null });
|
||||
const isAuthenticated = () => session.token != null;
|
||||
return { login, logout, isAuthenticated };
|
||||
}
|
||||
|
||||
const App = () => (
|
||||
<div id="wrapper">
|
||||
<Header menu={menu} />
|
||||
<Menu ref={menu} />
|
||||
<Login />
|
||||
<Router>
|
||||
<Profile path="/profile/" user="me" />
|
||||
<Profile path="/profile/:user" />
|
||||
<Users path="/users" />
|
||||
</Router>
|
||||
</div>
|
||||
)
|
||||
render() {
|
||||
const menu = this.toggleMenu();
|
||||
const auth = this.authenticateUser();
|
||||
return (
|
||||
<div id="wrapper">
|
||||
<Header menu={menu} auth={auth} />
|
||||
<Menu menu={menu} />
|
||||
{!menu.visible &&
|
||||
(!auth.isAuthenticated() ? (
|
||||
<Login auth={auth} />
|
||||
) : (
|
||||
<div class="page">
|
||||
<Router>
|
||||
<Profile path="/test/" user="me" />
|
||||
<Profile path="/profile/:user" />
|
||||
<Users path="/users" />
|
||||
<div class="container" default>Error 404</div>
|
||||
</Router>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,37 +1,21 @@
|
||||
import { Component, createRef, h } from 'preact';
|
||||
//import { Link } from 'preact-router/match';
|
||||
|
||||
class Header extends Component {
|
||||
state = { shown: true }
|
||||
hamburger = createRef();
|
||||
togglemenu() {
|
||||
if (this.props.menu.current) {
|
||||
this.setState(prev => ({ shown: !prev.shown }));
|
||||
this.props.menu.current.toggle(this.state);
|
||||
if (this.state.shown) {
|
||||
this.hamburger.current.classList.add('hamburger-active');
|
||||
}
|
||||
else {
|
||||
this.hamburger.current.classList.remove('hamburger-active');
|
||||
}
|
||||
}
|
||||
}
|
||||
const Header = (props) => (
|
||||
<header className='header'>
|
||||
<div className="container">
|
||||
<h1>Login</h1>
|
||||
{props.auth.isAuthenticated() && (<div id="hamburger-button" className={`hamburger ${props.menu.visible && 'hamburger-active'}`}
|
||||
onClick={() => props.menu.toggle()}>
|
||||
<hr />
|
||||
<hr />
|
||||
<hr />
|
||||
</div>)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
|
||||
render(props){
|
||||
return (
|
||||
<header className='header'>
|
||||
<div className="container">
|
||||
<h1>Login</h1>
|
||||
<div id="hamburger-button" ref={this.hamburger} className='hamburger' onClick={() => this.togglemenu(props)}>
|
||||
<hr />
|
||||
<hr />
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Header;
|
||||
|
||||
@ -1,36 +1,34 @@
|
||||
import { Component, h } from 'preact';
|
||||
|
||||
import { Link } from 'preact-router';
|
||||
class Menu extends Component {
|
||||
|
||||
menu_items = [
|
||||
{ text: "Übersicht", path: "/" },
|
||||
{ text: "Benutzer", path: "/user" },
|
||||
{ text: "Benutzer", path: "/users" },
|
||||
{ text: "System", path: "/system" },
|
||||
{ text: "Backup", path: "/backup" },
|
||||
{ text: "Abmelden", path: "/" }
|
||||
{ text: "Abmelden", path: "/logout" }
|
||||
]
|
||||
state = { shown: false }
|
||||
toggle(val) {
|
||||
this.setState(val);
|
||||
}
|
||||
|
||||
getAlert() {
|
||||
alert("getAlert from Child");
|
||||
}
|
||||
|
||||
onClick = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.menu.toggle();
|
||||
}
|
||||
render(props, state) {
|
||||
if (props.menu.visible)
|
||||
return (
|
||||
<div class="container" >
|
||||
<nav className='menu' >
|
||||
<ul>
|
||||
<li><Link href="/test" >Test</Link></li>
|
||||
{this.menu_items.map((element, i) => (<li key={i}><Link href={element.path} onClick={this.onClick} >{element.text}</Link></li>))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
return (<div id="menu-screen" className='page' style={`display: ${state.shown ? 'flex' : 'none'}`}>
|
||||
<div class="container">
|
||||
<nav className='menu'>
|
||||
<ul>
|
||||
{this.menu_items.map((element,i) => (<li key={i}><a href={element.link}>{element.text}</a></li>))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</div>)
|
||||
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import './style/style.sass';
|
||||
import App from './components/app';
|
||||
import { h, render, Component } from "preact"
|
||||
|
||||
export default App;
|
||||
render(<App />, document.body)
|
||||
//export default App;
|
||||
|
||||
@ -2,12 +2,14 @@ import { Component, h } from 'preact';
|
||||
import Breadcrumbs from '../../components/breadcrumbs';
|
||||
|
||||
class Login extends Component {
|
||||
state = { name: '', password: '' };
|
||||
state = { username: '', password: '' };
|
||||
navigation = ["Login"];
|
||||
onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log(this.state);
|
||||
this.setState({ name: '', password: '' });
|
||||
this.setState({ username: '', password: '' });
|
||||
if(!this.props.auth.login(this.state.username,this.state.password))
|
||||
alert("Wrong login")
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -21,7 +23,7 @@ class Login extends Component {
|
||||
Bitte melden Sie sich mit ihren Nutzerdaten an.
|
||||
</p>
|
||||
<div class="input-box">
|
||||
<input id="name" type="text" placeholder="Username" onInput={e => this.setState(prev => ({ ...prev, name: e.target.value }))} value={this.state.name} />
|
||||
<input id="name" type="text" placeholder="Username" onInput={e => this.setState(prev => ({ ...prev, username: e.target.value }))} value={this.state.username} />
|
||||
<label for="name">Benutzername</label>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
|
||||
@ -2,6 +2,9 @@ import { Component } from "preact";
|
||||
import UserList from "../../components/userlist";
|
||||
import Pageselector from "../../components/Pageselector";
|
||||
class Users extends Component {
|
||||
shouldComponentUpdate() {
|
||||
return false
|
||||
}
|
||||
userlist = [
|
||||
{ uid: 1234, first_name: 'Max', last_name: 'Muster', rfid: 'D3A2E35E', pin: 1234 },
|
||||
{ uid: 12341, first_name: 'Max1', last_name: 'Muster', rfid: 'D3A2E35E', pin: 1234 },
|
||||
@ -9,12 +12,12 @@ class Users extends Component {
|
||||
];
|
||||
render() {
|
||||
return (
|
||||
<div id="user-screen" class="page">
|
||||
<div class="container">
|
||||
<UserList userlist={this.userlist} />
|
||||
<Pageselector />
|
||||
</div>
|
||||
</div>);
|
||||
|
||||
<div class="container">
|
||||
<UserList userlist={this.userlist} />
|
||||
<Pageselector start={1} end={9} current={2} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
26
src/style/_pageselector.sass
Normal file
26
src/style/_pageselector.sass
Normal file
@ -0,0 +1,26 @@
|
||||
@mixin pageselector
|
||||
text-align: center
|
||||
//background-color: #ccc
|
||||
margin: 1em
|
||||
ul
|
||||
list-style: none
|
||||
justify-content: center
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
li a
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
padding: .2em .5em
|
||||
margin: .3em
|
||||
border-radius: .3em
|
||||
background: #eee
|
||||
color: #ccc
|
||||
border: .1em solid #ccc
|
||||
&.active
|
||||
background: #888
|
||||
color: #eee
|
||||
&:hover
|
||||
color: #333
|
||||
background: #fff
|
||||
border: .1em solid #ccc
|
||||
@ -2,6 +2,7 @@
|
||||
@use 'menu'
|
||||
@use 'login'
|
||||
@use 'breadcrumbs'
|
||||
@use 'pageselector'
|
||||
*
|
||||
//border: red 1px dotted
|
||||
box-sizing: border-box
|
||||
@ -53,7 +54,7 @@ body
|
||||
display: flex
|
||||
background: white
|
||||
width: 100%
|
||||
padding-top: 3em
|
||||
padding-top: 6em
|
||||
.menu
|
||||
@include menu.nav
|
||||
|
||||
@ -61,28 +62,7 @@ body
|
||||
@include login.login-form
|
||||
|
||||
.page-nav-bar
|
||||
text-align: center
|
||||
//background-color: #ccc
|
||||
margin: 1em
|
||||
ul
|
||||
list-style: none
|
||||
justify-content: center
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
li a
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
padding: .2em .5em
|
||||
margin: .3em
|
||||
border-radius: .3em
|
||||
background: #eee
|
||||
color: #ccc
|
||||
border: .1em solid #ccc
|
||||
&:hover
|
||||
color: #333
|
||||
background: #fff
|
||||
border: .1em solid #ccc
|
||||
@include pageselector.pageselector
|
||||
.user-list-item
|
||||
overflow: hidden
|
||||
display: flex
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user