From 642083bad64b25b4e2a61b842c03a0c32e4bd015 Mon Sep 17 00:00:00 2001 From: studavrije7683 Date: Sat, 5 Mar 2022 12:31:29 +0100 Subject: [PATCH] basic state setup --- src/components/Pageselector/index.jsx | 16 +++--- src/components/app.js | 72 ++++++++++++++++++++------- src/components/header/index.jsx | 44 ++++++---------- src/components/menu/index.jsx | 38 +++++++------- src/index.js | 4 +- src/routes/login/index.jsx | 8 +-- src/routes/users/index.jsx | 15 +++--- src/style/_pageselector.sass | 26 ++++++++++ src/style/style.sass | 26 ++-------- 9 files changed, 138 insertions(+), 111 deletions(-) create mode 100644 src/style/_pageselector.sass diff --git a/src/components/Pageselector/index.jsx b/src/components/Pageselector/index.jsx index 48c9b2d..1f7dc0a 100644 --- a/src/components/Pageselector/index.jsx +++ b/src/components/Pageselector/index.jsx @@ -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(
  • {i}
    • ); + } + items.push(
  • >
    • ); return (
    ); } diff --git a/src/components/app.js b/src/components/app.js index 62415f6..96b60c2 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -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 = () => ( -
    -
    - - - - - - - -
    -) + render() { + const menu = this.toggleMenu(); + const auth = this.authenticateUser(); + return ( +
    +
    + + {!menu.visible && + (!auth.isAuthenticated() ? ( + + ) : ( +
    + + + + +
    Error 404
    +     +
    + ))} +
    + ); + } +} export default App; diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index e62e522..5188ee1 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -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) => ( +
    +
    +

    Login

    + {props.auth.isAuthenticated() && (
    props.menu.toggle()}> +
    +
    +
    +
    )} +
    +
    +); + -render(props){ - return ( -
    -
    -

    Login

    -
    this.togglemenu(props)}> -
    -
    -
    -
    -
    -
    - ); -} -} export default Header; diff --git a/src/components/menu/index.jsx b/src/components/menu/index.jsx index 339b4b0..db415de 100644 --- a/src/components/menu/index.jsx +++ b/src/components/menu/index.jsx @@ -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 ( +
    + - return () - +
    ) } } diff --git a/src/index.js b/src/index.js index b921cb0..1d691c9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,6 @@ import './style/style.sass'; import App from './components/app'; +import { h, render, Component } from "preact" -export default App; +render(, document.body) +//export default App; diff --git a/src/routes/login/index.jsx b/src/routes/login/index.jsx index 9fc3230..b41f4d8 100644 --- a/src/routes/login/index.jsx +++ b/src/routes/login/index.jsx @@ -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.

    - this.setState(prev => ({ ...prev, name: e.target.value }))} value={this.state.name} /> + this.setState(prev => ({ ...prev, username: e.target.value }))} value={this.state.username} />
    diff --git a/src/routes/users/index.jsx b/src/routes/users/index.jsx index 043471f..6c87d43 100644 --- a/src/routes/users/index.jsx +++ b/src/routes/users/index.jsx @@ -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 ( -
    -
    - - -
    -
    ); + +
    + + +
    + ); } } diff --git a/src/style/_pageselector.sass b/src/style/_pageselector.sass new file mode 100644 index 0000000..d9307b1 --- /dev/null +++ b/src/style/_pageselector.sass @@ -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 \ No newline at end of file diff --git a/src/style/style.sass b/src/style/style.sass index e4e4d4f..c6bed66 100644 --- a/src/style/style.sass +++ b/src/style/style.sass @@ -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