diff --git a/src/components/admin/sports/SportartenTable.tsx b/src/components/admin/sports/SportartenTable.tsx
index 7719fde86d5b51afa1b54eeac12cd53b96ed125f..c559c968afacc02210c121bcef185b6af4a2f23f 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 566edc7b4bdb0044ebb5b0bbce17ddfaa4767ad7..8e2e2f03a511e4451f27df4194451806929df0e7 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 757e88d5fd7f624557bbf7044cb2617ebd07d8b7..dddb0c71e4e1764d51a864fb3189b433161d44b5 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 dcad150725fa267f8b39ed7f7024f57d7e4e532e..3e602047317afb7437d3668399983f6b25f8df75 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 bdb8ae59d25c1edbedf9b17b56dd75bf83495464..116d849306d083133a7b3fe8ef6e6a1c20c35fc4 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 47a2ae3347e5b4c4fb9c032307bb734567f5f5f3..83b50f11b5fdb122817d8be83348d24c4001f980 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 e94a6252ef47d44c46f0f3415ed3194270873457..d67cb4cb57fab7f1324b47f1e8cf7115dff697d4 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>
)
}