From 10161861b376bc6d7067b372d65d5a2806ccf379 Mon Sep 17 00:00:00 2001 From: philippkb <65279062+philippkb@users.noreply.github.com> Date: Sun, 13 Jun 2021 19:19:44 +0200 Subject: [PATCH] changes to SynchroniseView.tsx --- .../admin/sports/SportartenTable.tsx | 44 ++++++++++++++----- .../admin/sports/SportartenView.tsx | 6 ++- src/components/admin/sports/sportsMockData.ts | 1 + .../admin/synchronise/SynchroniseCard.tsx | 4 +- .../synchronise/SynchroniseContainer.tsx | 6 +-- .../synchronise/SynchroniseTableView.tsx | 15 +++++-- .../admin/synchronise/SynchroniseView.tsx | 15 +++---- 7 files changed, 61 insertions(+), 30 deletions(-) diff --git a/src/components/admin/sports/SportartenTable.tsx b/src/components/admin/sports/SportartenTable.tsx index 7719fde..c559c96 100644 --- a/src/components/admin/sports/SportartenTable.tsx +++ b/src/components/admin/sports/SportartenTable.tsx @@ -17,15 +17,21 @@ interface SportartenTableProps { categories: ICategorie[] sportarten: ISport[] activ: boolean, - handler:any, + handlerSport:any, + handlerCategorie:any, } export const SportartenTable: React.FC<SportartenTableProps> = ({ sportarten, categories, activ, - handler, + handlerSport, + handlerCategorie, + + + }: SportartenTableProps) => { + return ( <Table> <TableHead> @@ -39,12 +45,14 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ <AddIcon /> </IconButton> </TableCell> + <TableCell>URL</TableCell> <TableCell /> <TableCell /> </TableRow> </TableHead> <TableBody> - {sportarten.map((elem,tx) => { + {sportarten.map((elem,itx) => { + if (elem.active!=activ) return return ( <TableRow key={elem.name}> <TableCell> {elem.name}</TableCell> @@ -58,12 +66,9 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ variant="outlined" value={elem.categoryWeights[key]} onChange={(e)=>{ - console.log(e.currentTarget.value) - console.log(parseInt(e.currentTarget.value,10)) let copy = [...sportarten] - copy[tx].categoryWeights[key]=parseInt(e.currentTarget.value,10) - console.log(sportarten[3].categoryWeights) - handler(copy) + copy[itx].categoryWeights[key]=parseInt(e.currentTarget.value,10) + handlerSport(copy) } } /> @@ -71,18 +76,35 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ) })} <TableCell /> + <TableCell> + <a href={elem.url} target="_blank"> + {elem.url} + </a> + </TableCell> <TableCell> <IconButton> {activ ? ( - <ArrowDownward /> + <ArrowDownward onClick={()=>{ + let copy = [...sportarten] + copy[itx].active=false + handlerSport(copy) + }}/> ) : ( - <ArrowUpward /> + <ArrowUpward onClick={()=>{ + let copy = [...sportarten] + copy[itx].active=true + handlerSport(copy) + }}/> )} </IconButton> </TableCell> <TableCell> <IconButton> - <ClearIcon /> + <ClearIcon onClick={()=>{ + let copy = [...sportarten] + copy.splice(itx,1) + handlerSport(copy) + }}/> </IconButton> </TableCell> </TableRow> diff --git a/src/components/admin/sports/SportartenView.tsx b/src/components/admin/sports/SportartenView.tsx index 566edc7..8e2e2f0 100644 --- a/src/components/admin/sports/SportartenView.tsx +++ b/src/components/admin/sports/SportartenView.tsx @@ -21,14 +21,16 @@ export const SportartenView: React.FC = () => { <div> <h2>Aktive Sportarten</h2> <SportartenTable - handler={setSportarten} + handlerCategorie={setCategories} + handlerSport={setSportarten} categories={categories} sportarten={sportarten} activ={true} /> <h2>Inaktive Sportarten</h2> <SportartenTable - handler={setSportarten} + handlerCategorie={setCategories} + handlerSport={setSportarten} categories={categories} sportarten={sportarten} activ={false} diff --git a/src/components/admin/sports/sportsMockData.ts b/src/components/admin/sports/sportsMockData.ts index 757e88d..dddb0c7 100644 --- a/src/components/admin/sports/sportsMockData.ts +++ b/src/components/admin/sports/sportsMockData.ts @@ -33,3 +33,4 @@ export const mockSportsData : ISport[] = [ {name:"Hot Yoga2",url:"https://http.cat/", active:false, categoryWeights:{"0":1,"1":5,"2":1,"3":4,"4":5,"5":2}}, {name:"Basketball2",url:"https://http.cat/", active:false, categoryWeights:{"0":5,"1":4,"2":1,"3":4,"4":5,"5":undefined}}, ] + diff --git a/src/components/admin/synchronise/SynchroniseCard.tsx b/src/components/admin/synchronise/SynchroniseCard.tsx index dcad150..3e60204 100644 --- a/src/components/admin/synchronise/SynchroniseCard.tsx +++ b/src/components/admin/synchronise/SynchroniseCard.tsx @@ -10,12 +10,12 @@ type SynchroniseCardProp = { const useStyles = makeStyles((theme: Theme) => createStyles({ green: { - background: 'green', + background: '#6B9E1E', textAlign: 'center', margin: '15px' }, red: { - background: 'red', + background: '#c42727', textAlign: 'center', margin: '15px' }, diff --git a/src/components/admin/synchronise/SynchroniseContainer.tsx b/src/components/admin/synchronise/SynchroniseContainer.tsx index bdb8ae5..116d849 100644 --- a/src/components/admin/synchronise/SynchroniseContainer.tsx +++ b/src/components/admin/synchronise/SynchroniseContainer.tsx @@ -12,13 +12,13 @@ const useStyles = makeStyles((theme: Theme) => padding: '5px' }, greenButton: { - background: 'green', + background: '#6B9E1E', width: 15, height: 15, margin: '5px' }, redButton: { - background: 'red', + background: '#c42727', width: 15, height: 15, margin: '5px' @@ -38,7 +38,7 @@ interface SynchroniseContainerProps { export const SynchroniseContainer:React.FC<SynchroniseContainerProps> = ({sports,text})=>{ const classes = useStyles() return ( - <Box border={1} borderRadius="borderRadius" overflow="auto" maxHeight="550px"> + <Box border={1} borderRadius="borderRadius" overflow="auto" maxHeight="550px" borderColor="DarkGrey" m={5}> <div className={classes.div}> <p className={classes.p}> {text[0]} diff --git a/src/components/admin/synchronise/SynchroniseTableView.tsx b/src/components/admin/synchronise/SynchroniseTableView.tsx index 47a2ae3..83b50f1 100644 --- a/src/components/admin/synchronise/SynchroniseTableView.tsx +++ b/src/components/admin/synchronise/SynchroniseTableView.tsx @@ -12,6 +12,15 @@ const useStyles = makeStyles((theme: Theme) => bottom: theme.spacing(4), right: theme.spacing(4) }, + div: { + justifyContent:"center", + alignItems:"center", + display:"flex", + flexDirection:"row", + width:"100%", + minHeight:"100%", + paddingTop:"100px", + } }) ) @@ -19,10 +28,10 @@ export const SynchroniseTableView: React.FC = () => { const classes = useStyles() const [isLoading, content] = useFetchData() return ( - <div> - {isLoading && <p>loading...</p>} + <div style={{minHeight:"100%", textAlign:"center"}}> + {isLoading && <h4 style={{paddingTop:"300px"}}>loading...</h4>} {!isLoading && ( - <div> + <div className={classes.div}> {/*Should be display in the same row, but css is not my strength */} <SynchroniseContainer sports={content} text={["neue Sportarten","nicht übernehmen", "übernehmen"]} /> <SynchroniseContainer sports={content} text={["wiedererkannte Sportarten","nicht übernehmen", "übernehmen"]} /> diff --git a/src/components/admin/synchronise/SynchroniseView.tsx b/src/components/admin/synchronise/SynchroniseView.tsx index e94a625..d67cb4c 100644 --- a/src/components/admin/synchronise/SynchroniseView.tsx +++ b/src/components/admin/synchronise/SynchroniseView.tsx @@ -1,23 +1,20 @@ -import React, { useEffect, useState } from 'react' -import { Button, Grid } from '@material-ui/core' +import React, { useState } from 'react' +import { Button } from '@material-ui/core' import {SynchroniseTableView} from "./SynchroniseTableView"; export const SynchroniseView: React.FC = () => { const [mode, setMode] = useState<string>('start') - useEffect(() => { - console.log(mode) - }) return ( - <Grid container direction="column" alignItems="center" justify="center"> - <Grid item xs={3}> + <div> {mode === 'start' && ( + <div style={{textAlign: 'center', paddingTop:"300px"}}> <Button onClick={() => setMode('loading')}> Synchronisiere </Button> + </div> )} {mode === 'loading' && <SynchroniseTableView />} - </Grid> - </Grid> + </div> ) } -- GitLab