53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import {Card, CardBody, Col, Row, Table} from 'reactstrap';
|
|
import {Match} from './Match';
|
|
import React from 'react';
|
|
|
|
export default function GroupStage(props) {
|
|
return (<div className='py-5 px-5'>
|
|
<h1 className='custom-font'>Gruppenphase</h1>
|
|
<Row>
|
|
{props.groups.map(group => <Group group={group} key={group.id} isSignedIn={props.isSignedIn}
|
|
isOwner={props.isOwner}/>)}
|
|
</Row>
|
|
</div>);
|
|
}
|
|
|
|
function Group(props) {
|
|
return (<Col className='minw-25'>
|
|
<Card>
|
|
<CardBody>
|
|
<h3 className='custom-font'>Gruppe {props.group.id + 1}</h3>
|
|
{props.group.matches.map((match => (
|
|
<Match match={match} isSignedIn={props.isSignedIn} isOwner={props.isOwner} key={match.id}/>)))}
|
|
<GroupScoresTable scores={props.group.scores}/>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>);
|
|
}
|
|
|
|
function GroupScoresTable(props) {
|
|
return (<Table className='mt-4' striped size='sm' responsive>
|
|
<thead>
|
|
<tr>
|
|
<th>Team</th>
|
|
<th>Punkte</th>
|
|
<th>erzielt</th>
|
|
<th>kassiert</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
|
|
</tbody>
|
|
</Table>);
|
|
}
|
|
|
|
|
|
function GroupScoresTableRow(props) {
|
|
return (<tr>
|
|
<td>{props.score.team.name}</td>
|
|
<td>{props.score.group_points}</td>
|
|
<td>{props.score.received_points}</td>
|
|
<td>{props.score.scored_points}</td>
|
|
</tr>);
|
|
}
|