Skip to content
Snippets Groups Projects
Commit e20cae22 authored by philippkb's avatar philippkb
Browse files

some changes to the questions and snacks mock

parent 761ece41
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/admin/fragen/Question.tsx
+ 15
− 10
View file @ e20cae22
...@@ -14,7 +14,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore' ...@@ -14,7 +14,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
import FormControl from '@material-ui/core/FormControl' import FormControl from '@material-ui/core/FormControl'
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward' import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
import ClearIcon from '@material-ui/icons/Clear' 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) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
...@@ -31,16 +31,16 @@ const useStyles = makeStyles((theme: Theme) => ...@@ -31,16 +31,16 @@ const useStyles = makeStyles((theme: Theme) =>
const languages = ['eng', 'fr', 'span'] const languages = ['eng', 'fr', 'span']
type QuestionProp = { type QuestionProp = {
activ:boolean activ: boolean
} }
export const Question: React.FC<QuestionProp> = ({activ}) => { export const Question: React.FC<QuestionProp> = ({ activ }) => {
const classes = useStyles() const classes = useStyles()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
return ( return (
<div> <div>
<div> <div>
<Button onClick={() => setOpen(!open)}> <Button variant="contained" onClick={() => setOpen(!open)}>
{open ? <ExpandLess /> : <ExpandMore />} {open ? <ExpandLess /> : <ExpandMore />}
</Button> </Button>
<TextField <TextField
...@@ -52,14 +52,19 @@ export const Question: React.FC<QuestionProp> = ({activ}) => { ...@@ -52,14 +52,19 @@ export const Question: React.FC<QuestionProp> = ({activ}) => {
<Select> <Select>
<option> Wassersport </option> <option> Wassersport </option>
<option> Ballsport </option> <option> Ballsport </option>
<option> Teamsport </option>
</Select> </Select>
</FormControl> </FormControl>
{activ && <Button variant="contained"> {activ && (
<ArrowDownwardIcon /> <Button variant="contained">
</Button>} <ArrowDownwardIcon />
{!activ && <Button variant="contained"> </Button>
<ArrowUpwardIcon /> )}
</Button>} {!activ && (
<Button variant="contained">
<ArrowUpwardIcon />
</Button>
)}
<Button variant="contained"> <Button variant="contained">
<ClearIcon /> <ClearIcon />
</Button> </Button>
......
src/components/admin/fragen/QuestionList.tsx
+ 27
− 7
View file @ e20cae22
import React from 'react' import React from 'react'
import { Question } from './Question' 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 = () => { export const QuestionList: React.FC = () => {
const classes = useStyles()
const ar = [0, 1, 2] const ar = [0, 1, 2]
return ( return (
<div> <div>
<h2>Aktive Fragen:</h2> <h2>Aktive Fragen:</h2>
<List> <List>
{ar.map(() => ( {ar.map(() => (
<ListItem> <div>
<Question activ={true} /> <ListItem>
</ListItem> <Question activ={true} />
</ListItem>
<Divider />
</div>
))} ))}
</List> </List>
<h2>Inaktive Fragen:</h2> <h2>Inaktive Fragen:</h2>
<List> <List>
{ar.map(() => ( {ar.map(() => (
<ListItem> <div>
<Question activ={false}/> <ListItem>
</ListItem> <Question activ={false} />
</ListItem>
<Divider />
</div>
))} ))}
</List> </List>
<Fab className={classes.fab}>
<AddIcon />
</Fab>
</div> </div>
) )
} }
src/components/admin/index.tsx
+ 5
− 1
View file @ e20cae22
...@@ -2,6 +2,7 @@ import React from 'react' ...@@ -2,6 +2,7 @@ import React from 'react'
import { Route, Switch, useRouteMatch } from 'react-router-dom' import { Route, Switch, useRouteMatch } from 'react-router-dom'
import { Navbar } from './navbar' import { Navbar } from './navbar'
import { QuestionList } from './fragen/QuestionList' import { QuestionList } from './fragen/QuestionList'
import { SnacksList } from './snack & co/SnacksList'
const AdminHome: React.FC = () => { const AdminHome: React.FC = () => {
let { path } = useRouteMatch() let { path } = useRouteMatch()
...@@ -16,7 +17,10 @@ const AdminHome: React.FC = () => { ...@@ -16,7 +17,10 @@ const AdminHome: React.FC = () => {
<QuestionList /> <QuestionList />
</Route> </Route>
<Route path={`${path}/synchronisieren`}></Route> <Route path={`${path}/synchronisieren`}></Route>
<Route path={`${path}/snacks`}></Route> <Route path={`${path}/snacks`}>
<SnacksList />
</Route>
<Route path={`${path}/reinfolge`}></Route>
</Switch> </Switch>
</main> </main>
</div> </div>
......
src/components/admin/navbar.tsx
+ 14
− 0
View file @ e20cae22
...@@ -8,6 +8,8 @@ import Filter2Icon from '@material-ui/icons/Filter2' ...@@ -8,6 +8,8 @@ import Filter2Icon from '@material-ui/icons/Filter2'
import Filter3Icon from '@material-ui/icons/Filter3' import Filter3Icon from '@material-ui/icons/Filter3'
import Filter4Icon from '@material-ui/icons/Filter4' import Filter4Icon from '@material-ui/icons/Filter4'
import Filter5Icon from '@material-ui/icons/Filter5' import Filter5Icon from '@material-ui/icons/Filter5'
import Filter6Icon from '@material-ui/icons/Filter6'
import Divider from "@material-ui/core/Divider";
const drawerWidth = 180 const drawerWidth = 180
...@@ -22,30 +24,42 @@ export const Navbar: React.FC = () => { ...@@ -22,30 +24,42 @@ export const Navbar: React.FC = () => {
<Filter1Icon /> Sportarten{' '} <Filter1Icon /> Sportarten{' '}
</Link> </Link>
</ListItem> </ListItem>
<Divider />
<ListItem> <ListItem>
<Link to={`${url}/statistiken`}> <Link to={`${url}/statistiken`}>
{' '} {' '}
<Filter2Icon /> Statistik{' '} <Filter2Icon /> Statistik{' '}
</Link> </Link>
</ListItem> </ListItem>
<Divider />
<ListItem> <ListItem>
<Link to={`${url}/fragen`}> <Link to={`${url}/fragen`}>
{' '} {' '}
<Filter3Icon /> Fragen{' '} <Filter3Icon /> Fragen{' '}
</Link> </Link>
</ListItem> </ListItem>
<Divider />
<ListItem> <ListItem>
<Link to={`${url}/synchronisieren`}> <Link to={`${url}/synchronisieren`}>
{' '} {' '}
<Filter4Icon /> Synchronisieren{' '} <Filter4Icon /> Synchronisieren{' '}
</Link> </Link>
</ListItem> </ListItem>
<Divider />
<ListItem> <ListItem>
<Link to={`${url}/snacks`}> <Link to={`${url}/snacks`}>
{' '} {' '}
<Filter5Icon /> Snacks & Co{' '} <Filter5Icon /> Snacks & Co{' '}
</Link> </Link>
</ListItem> </ListItem>
<Divider />
<ListItem>
<Link to={`${url}/reinfolge`}>
{' '}
<Filter6Icon /> Reinfolge{' '}
</Link>
</ListItem>
<Divider />
</List> </List>
</Drawer> </Drawer>
) )
......
src/components/admin/snack & co/Snack.tsx 0 → 100644
+ 34
− 0
View file @ e20cae22
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>
)
}
src/components/admin/snack & co/SnacksList.tsx 0 → 100644
+ 81
− 0
View file @ e20cae22
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>
)
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment