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

changes to SynchroniseView.tsx

parent dc839e21
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 61 additions and 30 deletions
src/components/admin/sports/SportartenTable.tsx
+ 33
− 11
View file @ 10161861
...@@ -17,15 +17,21 @@ interface SportartenTableProps { ...@@ -17,15 +17,21 @@ interface SportartenTableProps {
categories: ICategorie[] categories: ICategorie[]
sportarten: ISport[] sportarten: ISport[]
activ: boolean, activ: boolean,
handler:any, handlerSport:any,
handlerCategorie:any,
} }
export const SportartenTable: React.FC<SportartenTableProps> = ({ export const SportartenTable: React.FC<SportartenTableProps> = ({
sportarten, sportarten,
categories, categories,
activ, activ,
handler, handlerSport,
handlerCategorie,
}: SportartenTableProps) => { }: SportartenTableProps) => {
return ( return (
<Table> <Table>
<TableHead> <TableHead>
...@@ -39,12 +45,14 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ...@@ -39,12 +45,14 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
<AddIcon /> <AddIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell>URL</TableCell>
<TableCell /> <TableCell />
<TableCell /> <TableCell />
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{sportarten.map((elem,tx) => { {sportarten.map((elem,itx) => {
if (elem.active!=activ) return
return ( return (
<TableRow key={elem.name}> <TableRow key={elem.name}>
<TableCell> {elem.name}</TableCell> <TableCell> {elem.name}</TableCell>
...@@ -58,12 +66,9 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ...@@ -58,12 +66,9 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
variant="outlined" variant="outlined"
value={elem.categoryWeights[key]} value={elem.categoryWeights[key]}
onChange={(e)=>{ onChange={(e)=>{
console.log(e.currentTarget.value)
console.log(parseInt(e.currentTarget.value,10))
let copy = [...sportarten] let copy = [...sportarten]
copy[tx].categoryWeights[key]=parseInt(e.currentTarget.value,10) copy[itx].categoryWeights[key]=parseInt(e.currentTarget.value,10)
console.log(sportarten[3].categoryWeights) handlerSport(copy)
handler(copy)
} }
} }
/> />
...@@ -71,18 +76,35 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ...@@ -71,18 +76,35 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
) )
})} })}
<TableCell /> <TableCell />
<TableCell>
<a href={elem.url} target="_blank">
{elem.url}
</a>
</TableCell>
<TableCell> <TableCell>
<IconButton> <IconButton>
{activ ? ( {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> </IconButton>
</TableCell> </TableCell>
<TableCell> <TableCell>
<IconButton> <IconButton>
<ClearIcon /> <ClearIcon onClick={()=>{
let copy = [...sportarten]
copy.splice(itx,1)
handlerSport(copy)
}}/>
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
......
src/components/admin/sports/SportartenView.tsx
+ 4
− 2
View file @ 10161861
...@@ -21,14 +21,16 @@ export const SportartenView: React.FC = () => { ...@@ -21,14 +21,16 @@ export const SportartenView: React.FC = () => {
<div> <div>
<h2>Aktive Sportarten</h2> <h2>Aktive Sportarten</h2>
<SportartenTable <SportartenTable
handler={setSportarten} handlerCategorie={setCategories}
handlerSport={setSportarten}
categories={categories} categories={categories}
sportarten={sportarten} sportarten={sportarten}
activ={true} activ={true}
/> />
<h2>Inaktive Sportarten</h2> <h2>Inaktive Sportarten</h2>
<SportartenTable <SportartenTable
handler={setSportarten} handlerCategorie={setCategories}
handlerSport={setSportarten}
categories={categories} categories={categories}
sportarten={sportarten} sportarten={sportarten}
activ={false} activ={false}
......
src/components/admin/sports/sportsMockData.ts
+ 1
− 0
View file @ 10161861
...@@ -33,3 +33,4 @@ export const mockSportsData : ISport[] = [ ...@@ -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:"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}}, {name:"Basketball2",url:"https://http.cat/", active:false, categoryWeights:{"0":5,"1":4,"2":1,"3":4,"4":5,"5":undefined}},
] ]
src/components/admin/synchronise/SynchroniseCard.tsx
+ 2
− 2
View file @ 10161861
...@@ -10,12 +10,12 @@ type SynchroniseCardProp = { ...@@ -10,12 +10,12 @@ type SynchroniseCardProp = {
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
green: { green: {
background: 'green', background: '#6B9E1E',
textAlign: 'center', textAlign: 'center',
margin: '15px' margin: '15px'
}, },
red: { red: {
background: 'red', background: '#c42727',
textAlign: 'center', textAlign: 'center',
margin: '15px' margin: '15px'
}, },
......
src/components/admin/synchronise/SynchroniseContainer.tsx
+ 3
− 3
View file @ 10161861
...@@ -12,13 +12,13 @@ const useStyles = makeStyles((theme: Theme) => ...@@ -12,13 +12,13 @@ const useStyles = makeStyles((theme: Theme) =>
padding: '5px' padding: '5px'
}, },
greenButton: { greenButton: {
background: 'green', background: '#6B9E1E',
width: 15, width: 15,
height: 15, height: 15,
margin: '5px' margin: '5px'
}, },
redButton: { redButton: {
background: 'red', background: '#c42727',
width: 15, width: 15,
height: 15, height: 15,
margin: '5px' margin: '5px'
...@@ -38,7 +38,7 @@ interface SynchroniseContainerProps { ...@@ -38,7 +38,7 @@ interface SynchroniseContainerProps {
export const SynchroniseContainer:React.FC<SynchroniseContainerProps> = ({sports,text})=>{ export const SynchroniseContainer:React.FC<SynchroniseContainerProps> = ({sports,text})=>{
const classes = useStyles() const classes = useStyles()
return ( 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}> <div className={classes.div}>
<p className={classes.p}> <p className={classes.p}>
{text[0]} {text[0]}
......
src/components/admin/synchronise/SynchroniseTableView.tsx
+ 12
− 3
View file @ 10161861
...@@ -12,6 +12,15 @@ const useStyles = makeStyles((theme: Theme) => ...@@ -12,6 +12,15 @@ const useStyles = makeStyles((theme: Theme) =>
bottom: theme.spacing(4), bottom: theme.spacing(4),
right: 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 = () => { ...@@ -19,10 +28,10 @@ export const SynchroniseTableView: React.FC = () => {
const classes = useStyles() const classes = useStyles()
const [isLoading, content] = useFetchData() const [isLoading, content] = useFetchData()
return ( return (
<div> <div style={{minHeight:"100%", textAlign:"center"}}>
{isLoading && <p>loading...</p>} {isLoading && <h4 style={{paddingTop:"300px"}}>loading...</h4>}
{!isLoading && ( {!isLoading && (
<div> <div className={classes.div}>
{/*Should be display in the same row, but css is not my strength */} {/*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={["neue Sportarten","nicht übernehmen", "übernehmen"]} />
<SynchroniseContainer sports={content} text={["wiedererkannte Sportarten","nicht übernehmen", "übernehmen"]} /> <SynchroniseContainer sports={content} text={["wiedererkannte Sportarten","nicht übernehmen", "übernehmen"]} />
......
src/components/admin/synchronise/SynchroniseView.tsx
+ 6
− 9
View file @ 10161861
import React, { useEffect, useState } from 'react' import React, { useState } from 'react'
import { Button, Grid } from '@material-ui/core' import { Button } from '@material-ui/core'
import {SynchroniseTableView} from "./SynchroniseTableView"; import {SynchroniseTableView} from "./SynchroniseTableView";
export const SynchroniseView: React.FC = () => { export const SynchroniseView: React.FC = () => {
const [mode, setMode] = useState<string>('start') const [mode, setMode] = useState<string>('start')
useEffect(() => {
console.log(mode)
})
return ( return (
<Grid container direction="column" alignItems="center" justify="center"> <div>
<Grid item xs={3}>
{mode === 'start' && ( {mode === 'start' && (
<div style={{textAlign: 'center', paddingTop:"300px"}}>
<Button onClick={() => setMode('loading')}> <Button onClick={() => setMode('loading')}>
Synchronisiere Synchronisiere
</Button> </Button>
</div>
)} )}
{mode === 'loading' && <SynchroniseTableView />} {mode === 'loading' && <SynchroniseTableView />}
</Grid> </div>
</Grid>
) )
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment