From e20cae229b0cabf220fe0f95ab6e72a2bcd7bb37 Mon Sep 17 00:00:00 2001
From: philippkb <65279062+philippkb@users.noreply.github.com>
Date: Sat, 29 May 2021 00:50:32 +0200
Subject: [PATCH] some changes to the questions and snacks mock
---
src/components/admin/fragen/Question.tsx | 25 +++---
src/components/admin/fragen/QuestionList.tsx | 34 ++++++--
src/components/admin/index.tsx | 6 +-
src/components/admin/navbar.tsx | 14 ++++
src/components/admin/snack & co/Snack.tsx | 34 ++++++++
.../admin/snack & co/SnacksList.tsx | 81 +++++++++++++++++++
6 files changed, 176 insertions(+), 18 deletions(-)
create mode 100644 src/components/admin/snack & co/Snack.tsx
create mode 100644 src/components/admin/snack & co/SnacksList.tsx
diff --git a/src/components/admin/fragen/Question.tsx b/src/components/admin/fragen/Question.tsx
index 890015e..897a7e1 100644
--- a/src/components/admin/fragen/Question.tsx
+++ b/src/components/admin/fragen/Question.tsx
@@ -14,7 +14,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
import FormControl from '@material-ui/core/FormControl'
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
import ClearIcon from '@material-ui/icons/Clear'
-import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -31,16 +31,16 @@ const useStyles = makeStyles((theme: Theme) =>
const languages = ['eng', 'fr', 'span']
type QuestionProp = {
- activ:boolean
+ activ: boolean
}
-export const Question: React.FC<QuestionProp> = ({activ}) => {
+export const Question: React.FC<QuestionProp> = ({ activ }) => {
const classes = useStyles()
const [open, setOpen] = useState(false)
return (
<div>
<div>
- <Button onClick={() => setOpen(!open)}>
+ <Button variant="contained" onClick={() => setOpen(!open)}>
{open ? <ExpandLess /> : <ExpandMore />}
</Button>
<TextField
@@ -52,14 +52,19 @@ export const Question: React.FC<QuestionProp> = ({activ}) => {
<Select>
<option> Wassersport </option>
<option> Ballsport </option>
+ <option> Teamsport </option>
</Select>
</FormControl>
- {activ && <Button variant="contained">
- <ArrowDownwardIcon />
- </Button>}
- {!activ && <Button variant="contained">
- <ArrowUpwardIcon />
- </Button>}
+ {activ && (
+ <Button variant="contained">
+ <ArrowDownwardIcon />
+ </Button>
+ )}
+ {!activ && (
+ <Button variant="contained">
+ <ArrowUpwardIcon />
+ </Button>
+ )}
<Button variant="contained">
<ClearIcon />
</Button>
diff --git a/src/components/admin/fragen/QuestionList.tsx b/src/components/admin/fragen/QuestionList.tsx
index 53d13ca..af415f6 100644
--- a/src/components/admin/fragen/QuestionList.tsx
+++ b/src/components/admin/fragen/QuestionList.tsx
@@ -1,27 +1,47 @@
import React from 'react'
import { Question } from './Question'
-import { ListItem, List } from '@material-ui/core'
+import { ListItem, List, Fab, makeStyles } from '@material-ui/core'
+import AddIcon from '@material-ui/icons/Add'
+import Divider from '@material-ui/core/Divider'
+
+const useStyles = makeStyles((theme) => ({
+ fab: {
+ position: 'fixed',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2)
+ }
+}))
export const QuestionList: React.FC = () => {
+ const classes = useStyles()
const ar = [0, 1, 2]
return (
<div>
<h2>Aktive Fragen:</h2>
<List>
{ar.map(() => (
- <ListItem>
- <Question activ={true} />
- </ListItem>
+ <div>
+ <ListItem>
+ <Question activ={true} />
+ </ListItem>
+ <Divider />
+ </div>
))}
</List>
<h2>Inaktive Fragen:</h2>
<List>
{ar.map(() => (
- <ListItem>
- <Question activ={false}/>
- </ListItem>
+ <div>
+ <ListItem>
+ <Question activ={false} />
+ </ListItem>
+ <Divider />
+ </div>
))}
</List>
+ <Fab className={classes.fab}>
+ <AddIcon />
+ </Fab>
</div>
)
}
diff --git a/src/components/admin/index.tsx b/src/components/admin/index.tsx
index 3210368..e78db1a 100644
--- a/src/components/admin/index.tsx
+++ b/src/components/admin/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { Route, Switch, useRouteMatch } from 'react-router-dom'
import { Navbar } from './navbar'
import { QuestionList } from './fragen/QuestionList'
+import { SnacksList } from './snack & co/SnacksList'
const AdminHome: React.FC = () => {
let { path } = useRouteMatch()
@@ -16,7 +17,10 @@ const AdminHome: React.FC = () => {
<QuestionList />
</Route>
<Route path={`${path}/synchronisieren`}></Route>
- <Route path={`${path}/snacks`}></Route>
+ <Route path={`${path}/snacks`}>
+ <SnacksList />
+ </Route>
+ <Route path={`${path}/reinfolge`}></Route>
</Switch>
</main>
</div>
diff --git a/src/components/admin/navbar.tsx b/src/components/admin/navbar.tsx
index b568457..69f589c 100644
--- a/src/components/admin/navbar.tsx
+++ b/src/components/admin/navbar.tsx
@@ -8,6 +8,8 @@ import Filter2Icon from '@material-ui/icons/Filter2'
import Filter3Icon from '@material-ui/icons/Filter3'
import Filter4Icon from '@material-ui/icons/Filter4'
import Filter5Icon from '@material-ui/icons/Filter5'
+import Filter6Icon from '@material-ui/icons/Filter6'
+import Divider from "@material-ui/core/Divider";
const drawerWidth = 180
@@ -22,30 +24,42 @@ export const Navbar: React.FC = () => {
<Filter1Icon /> Sportarten{' '}
</Link>
</ListItem>
+ <Divider />
<ListItem>
<Link to={`${url}/statistiken`}>
{' '}
<Filter2Icon /> Statistik{' '}
</Link>
</ListItem>
+ <Divider />
<ListItem>
<Link to={`${url}/fragen`}>
{' '}
<Filter3Icon /> Fragen{' '}
</Link>
</ListItem>
+ <Divider />
<ListItem>
<Link to={`${url}/synchronisieren`}>
{' '}
<Filter4Icon /> Synchronisieren{' '}
</Link>
</ListItem>
+ <Divider />
<ListItem>
<Link to={`${url}/snacks`}>
{' '}
<Filter5Icon /> Snacks & Co{' '}
</Link>
</ListItem>
+ <Divider />
+ <ListItem>
+ <Link to={`${url}/reinfolge`}>
+ {' '}
+ <Filter6Icon /> Reinfolge{' '}
+ </Link>
+ </ListItem>
+ <Divider />
</List>
</Drawer>
)
diff --git a/src/components/admin/snack & co/Snack.tsx b/src/components/admin/snack & co/Snack.tsx
new file mode 100644
index 0000000..7ed2065
--- /dev/null
+++ b/src/components/admin/snack & co/Snack.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import EditIcon from '@material-ui/icons/Edit'
+import { Button, Grid } from '@material-ui/core'
+import SearchIcon from '@material-ui/icons/Search'
+import ClearIcon from '@material-ui/icons/Clear'
+
+export type SnackType =
+ | 'Startseite'
+ | 'Endseite'
+ | 'Wissenssnack'
+ | 'Bewegungsaufforderung'
+
+type SnackProp = {
+ typ: SnackType
+ titel: string
+}
+
+export const Snack: React.FC<SnackProp> = ({ typ, titel }) => {
+ return (
+ <Grid container direction="row">
+ <Button>
+ <EditIcon />
+ </Button>
+ <p>{typ}</p>
+ <p>{titel}</p>
+ <Button>
+ <SearchIcon />
+ </Button>
+ <Button>
+ <ClearIcon />
+ </Button>
+ </Grid>
+ )
+}
diff --git a/src/components/admin/snack & co/SnacksList.tsx b/src/components/admin/snack & co/SnacksList.tsx
new file mode 100644
index 0000000..9e4b533
--- /dev/null
+++ b/src/components/admin/snack & co/SnacksList.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import {
+ Button,
+ Fab,
+ makeStyles,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow
+} from '@material-ui/core'
+import { SnackType } from './Snack'
+import AddIcon from '@material-ui/icons/Add'
+import EditIcon from '@material-ui/icons/Edit'
+import SearchIcon from '@material-ui/icons/Search'
+import ClearIcon from '@material-ui/icons/Clear'
+
+const useStyles = makeStyles((theme) => ({
+ fab: {
+ position: 'fixed',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2)
+ }
+}))
+
+export const SnacksList: React.FC = () => {
+ const classes = useStyles()
+ const ar: [SnackType, string][] = [
+ ['Startseite', ''],
+ ['Endseite', ''],
+ ['Wissenssnack', 'Treppensteigen'],
+ ['Wissenssnack', 'Kreislauf'],
+ ['Bewegungsaufforderung', 'Kniebeugen']
+ ]
+ return (
+ <div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell> </TableCell>
+ <TableCell>Type</TableCell>
+ <TableCell>Title</TableCell>
+ <TableCell> </TableCell>
+ <TableCell> </TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {ar.map((entry, ix) => {
+ return (
+ <TableRow key={ix}>
+ <TableCell align="left">
+ <Button>
+ {' '}
+ <EditIcon />{' '}
+ </Button>
+ </TableCell>
+ <TableCell align="left">{entry[0]}</TableCell>
+ <TableCell align="left">{entry[1]}</TableCell>
+ <TableCell align="left">
+ <Button>
+ {' '}
+ <SearchIcon />{' '}
+ </Button>
+ </TableCell>
+ <TableCell align="left">
+ <Button>
+ {' '}
+ <ClearIcon />{' '}
+ </Button>
+ </TableCell>
+ </TableRow>
+ )
+ })}
+ </TableBody>
+ </Table>
+ <Fab className={classes.fab}>
+ <AddIcon />
+ </Fab>
+ </div>
+ )
+}
--
GitLab