System
WiFi Setup
diff --git a/src/route/users/index.jsx b/src/route/users/index.jsx
index df57d3d..c7d7800 100644
--- a/src/route/users/index.jsx
+++ b/src/route/users/index.jsx
@@ -2,48 +2,64 @@ import { h } from "preact";
import { UserList, Pageselector, Breadcrumbs } from "../../components";
import api from '../../api'
import { route } from 'preact-router';
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useContext, useEffect, useState, useMemo } from "preact/hooks";
import AppState, { UserTable } from "../../store";
function Users({ pageid }) {
- const [viewstate, setview] = useState({ limit: 100, page: 1, pages: null })
const { usertable, userreducer } = useContext(UserTable);
let [sessiondata,] = useContext(AppState).session;
+ const [viewstate, setview] = useState({ limit: 100, page: 1, pages: 0, query: '' });
+ const matchUser = (user, query, fields = ['uid', 'first_name', 'last_name'], exact = false) => {
+ let words = query.toLowerCase().split(' ');
+ let matches = 0;
+
+ for (let word of words) {
+ let match = false;
+ for (let key of fields){
+ let cmp = user[key].toLowerCase();
+ if (exact ? cmp == word : cmp.includes(word)) {
+ match = true;
+ break;
+ }
+ }
+ if (match) {
+ matches += 1;
+ if(matches >= words.length) return true;
+ }
+ }
+ return false
+ }
+ const results = useMemo(() => (viewstate.query !== '') ? usertable.filter(u => matchUser(u, viewstate.query)) : usertable, [viewstate.query, usertable]);
+
+
+
+
const setPage = (e) => {
e.preventDefault();
console.log(e)
let page = e.target.text;
- setview({ ...viewstate, page })
+ setview(state => ({ ...state, page }));
}
-
-
useEffect(() => {
- if (usertable === undefined)
- console.log("TOKEN");
- console.log(sessiondata.token);
- api.fetchdb(sessiondata.token).then(imported => {
- let action = { type: 'import', imported };
- userreducer(action);
- });
- }, [sessiondata]);
-
- useEffect(() => {
- setview({ ...viewstate, pages: Math.ceil(usertable.length / viewstate.limit) });
- console.log("New View effect")
- }, [usertable])
+ setview((state) => {
+ let pages = Math.ceil(results.length / state.limit)
+ if (state.page >= pages) return ({ ...state, pages, page: pages })
+ return ({ ...state, pages })
+ })
+ }, [results.length, viewstate.limit])
useEffect(() => {
if (pageid && !isNaN(pageid))
- setview({ ...viewstate, page: pageid })
+ setview((state) => ({ ...state, page: pageid }))
}, [pageid])
+
const deleteUser = (user) => {
- api.deleteUser(sessiondata.token,user).then(r=>{
+ api.deleteUser(sessiondata.token, user).then(r => {
let action = {
type: 'delete',
user, r
}
userreducer(action)
})
-
}
const calculateView = () => {
let start = viewstate.limit * (viewstate.page - 1);
@@ -53,15 +69,22 @@ function Users({ pageid }) {
const editUser = (user) => {
route(`/edituser/${user.uid}`);
}
- const navigation = ["Users"];
+ const setLimit = (e) => {
+ setview(state => ({ ...state, limit: e.target.value }));
+ console.log(e.target.value);
+ console.log(viewstate);
+ }
+ const navigation = ["Benutzerverwaltung",'Übersicht'];
//
return (
-
+
diff --git a/src/store/reducers.js b/src/store/reducers.js
index 6875cba..cee59ba 100644
--- a/src/store/reducers.js
+++ b/src/store/reducers.js
@@ -18,12 +18,12 @@ export const sessionReducer = (state, action) => {
export const userTableReducer = (state, action) => {
let user = action.user;
switch (action.type) {
- case 'create': return [...state, { line: state.length, ...user }]
+ case 'create': return [...state, { line: state.length, ...user }];
case 'delete': {
let newstate = [];
let newindex = 0;
state.forEach((u, i) => {
- if (user.uid && u.uid != user.uid|| user.line && i != user.line )
+ if (user.uid && u.uid != user.uid || user.line && i != user.line)
newstate.push({ ...u, line: newindex++ })
return newstate;
}, []);
diff --git a/src/style/_button.sass b/src/style/_button.sass
index abddc1d..a1ce4ff 100644
--- a/src/style/_button.sass
+++ b/src/style/_button.sass
@@ -10,7 +10,7 @@
text-decoration: none
border: solid 1px #999
border-radius: .2rem
- input[type=submit]
+ button
display: block
background: none
width: 100%
@@ -32,7 +32,7 @@
transition: all ease-in-out 250ms
&:hover
color: #fff
- input[type=submit]
+ button
background: #333
color: #fff
border-radius: .3rem
diff --git a/src/style/_input.sass b/src/style/_input.sass
index b5c58b5..69bfde4 100644
--- a/src/style/_input.sass
+++ b/src/style/_input.sass
@@ -1,7 +1,9 @@
@mixin textfield
+ margin: 0 1em
+ width: 100%
position: relative
- display: inline-block
- margin: 0 .25em 1em .25em
+ display: block
+ margin: 0
background: #fafafa
border-radius: .3em
border-bottom: 1px solid #ccc
@@ -17,7 +19,7 @@
font-size: 1em
padding: 0.7em
+ label
- user-select: none
+ user-select: none
position: absolute
top: 0.15em
left: 0.25em
@@ -34,4 +36,52 @@
padding: .7em
top: 0em
left: 0em
- font-size: 1em
\ No newline at end of file
+ font-size: 1em
+ &__info
+ color: #ccc
+ font-size: 0.7em
+
+@mixin checkbox
+ position: relative
+ font-size: 1.5em
+ label
+ user-select: none
+ margin-left: 1em
+ padding-left: .5em
+ transition: all 250ms ease-in-out
+ &::before
+ position: absolute
+ content: ''
+ left: 0
+ top: 0
+ width: 1em
+ height: 1em
+ background: radial-gradient(circle, #e2e2e2 0%, #b8b8b8 100%)
+ border-radius: .3em
+ border: solid 1px #ccc
+ box-shadow: 0 0 .5em #fff, inset 0 0 .3em #fff
+
+ &::after
+ content: ''
+ left: 0
+ top: 0
+ width: 1em
+ height: 1em
+ position: absolute
+ display: flex
+ align-items: center
+ justify-content: center
+ transform: scale(0)
+ padding: 0
+ text-shadow: 0 0 .2em #888
+ transition: all 250ms ease-in-out
+ input
+ display: none
+ &:checked + label
+ text-shadow: 0 0 .5em #888
+ &::before
+ box-shadow: 0 0 .5em #fff, inset 0 0 .5em #fff
+ &::after
+ transform: scale(1)
+ content: '✔'
+ color: #fff
diff --git a/src/style/style.sass b/src/style/style.sass
index 9a0419f..fb34afb 100644
--- a/src/style/style.sass
+++ b/src/style/style.sass
@@ -74,23 +74,30 @@ body
.page-nav-bar
@include pageselector.pageselector
.user-list-item
+ position: relative
overflow: hidden
- display: flex
+ display: inline-flex
+ flex-shrink: 1
+ min-width: calc(50% - 1em)
+ flex-grow: 1
flex-direction: row
background: #eee
margin: 0 0.5em
- padding: .5em 0
+ padding: .5em 3em 0 0
border-radius: .3em
&:not(:last-child)
margin-bottom: .5em
.user-attributes
padding: .5em
-.btn-group
- margin-left: auto
- display: inline-flex
- flex-direction: column
- align-self: flex-end
- justify-self: flex-end
+ .btn-group
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ display: inline-flex
+ flex-direction: column
+ align-items: center
+ justify-content: center
@mixin button()
position: relative
border: none
@@ -161,3 +168,21 @@ footer
.textbox
@include input.textfield
font-size: 1.5em
+.checkbox
+ @include input.checkbox
+
+.row
+ display: flex
+ justify-content: space-evenly
+ align-items: stretch
+ flex-direction: row
+ flex-wrap: wrap
+ width: 100%
+ &:not(:last-child)
+ margin-bottom: 1em
+.column
+ padding: .5em
+ flex-grow: 1
+ display: flex
+ flex-direction: column
+ flex-wrap: wrap
\ No newline at end of file