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