Extract the standings table view
This commit is contained in:
Jonny
JP1998
parent
3e9307a79d
commit
beffd24855
|
|
@ -0,0 +1,104 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
Collapse,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
|
||||
import { rangedmap } from '../utils/rangedmap';
|
||||
import { findTeam } from '../utils/findTeam';
|
||||
import { Order, sort } from '../utils/sort';
|
||||
|
||||
export class StandingsTable extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showFullTable: false
|
||||
};
|
||||
this.toggleShowFullTable = this.toggleShowFullTable.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
let performances = this.props.data.groupPhasePerformances;
|
||||
|
||||
/**
|
||||
* comparison(p1, p2) < 0 => p1 < p2
|
||||
* comparison(p1, p2) = 0 => p1 = p2
|
||||
* comparison(p1, p2) > 0 => p1 > p2
|
||||
*/
|
||||
let sortedPerformances = sort(performances, (p1, p2) => p1.rank - p2.rank, Order.descending);
|
||||
|
||||
return (
|
||||
<Card className="shadow-sm">
|
||||
<CardBody>
|
||||
<h1 className="custom-font">Aktuelle Rangliste</h1>
|
||||
<Table striped className="mt-3 mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Team Name</th>
|
||||
<th className="text-center">Match Differenz</th>
|
||||
<th className="text-center">Punkt Differenz</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ rangedmap(sortedPerformances, (team, index) => (
|
||||
<TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
|
||||
), 0, 3) }
|
||||
</tbody>
|
||||
<Collapse isOpen={ this.state.showFullTable } tag="tbody">
|
||||
{ rangedmap(sortedPerformances, (team, index) => (
|
||||
<TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
|
||||
), 3) }
|
||||
</Collapse>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan='4'>
|
||||
<TableButton isFullTableShown={this.state.showFullTable} onToggle={this.toggleShowFullTable}/>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
toggleShowFullTable() {
|
||||
this.setState({ showFullTable: !this.state.showFullTable });
|
||||
}
|
||||
}
|
||||
|
||||
class TeamRow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<tr>
|
||||
<td>{ this.props.teamToShow.rank }</td>
|
||||
<td className="w-100">{findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
|
||||
<td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
|
||||
<td className="text-center">{ this.props.teamToShow.pointDifferential }</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TableButton extends React.Component {
|
||||
|
||||
render() {
|
||||
const { isFullTableShown } = this.props;
|
||||
|
||||
if(isFullTableShown) {
|
||||
return <Button className="w-100" onClick={this.props.onToggle}>Zeige nur die 3 besten Teams</Button>;
|
||||
} else {
|
||||
return <Button className="w-100" onClick={this.props.onToggle}>Zeige alle Teams</Button>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,28 +57,28 @@ function ButtonsBadge(props) {
|
|||
const { id, ownerName, isSignedIn, username, currentpage } = props;
|
||||
|
||||
switch(currentpage) {
|
||||
case 'statistics':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'tournament':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<StatisticsButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'edit':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<StatisticsButton id={id}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
default: return null;
|
||||
case 'statistics':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'tournament':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<StatisticsButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'edit':
|
||||
return (
|
||||
<ButtonGroup className={props.className}>
|
||||
<StatisticsButton id={id}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,11 @@ import Head from 'next/head';
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardTitle,
|
||||
Col,
|
||||
Collapse,
|
||||
Container,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
Row,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
|
|
@ -18,10 +14,9 @@ import {
|
|||
import { TurniereNavigation } from '../js/components/Navigation';
|
||||
import { TournamentInformationView } from '../js/components/TournamentInformationView';
|
||||
import { BigImage } from '../js/components/BigImage';
|
||||
import { StandingsTable } from '../js/components/StandingsTable';
|
||||
import { Footer } from '../js/components/Footer';
|
||||
import { findTeam } from '../js/utils/findTeam';
|
||||
import { rangedmap } from '../js/utils/rangedmap';
|
||||
import { Order, sort } from '../js/utils/sort';
|
||||
|
||||
class DominanceShower extends React.Component {
|
||||
|
||||
|
|
@ -51,98 +46,6 @@ class DominanceShower extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
class StandingsTable extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showFullTable: false
|
||||
};
|
||||
this.toggleShowFullTable = this.toggleShowFullTable.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
let performances = this.props.data.groupPhasePerformances;
|
||||
|
||||
/**
|
||||
* comparison(p1, p2) < 0 => p1 < p2
|
||||
* comparison(p1, p2) = 0 => p1 = p2
|
||||
* comparison(p1, p2) > 0 => p1 > p2
|
||||
*/
|
||||
let sortedPerformances = sort(performances, (p1, p2) => p1.rank - p2.rank, Order.descending);
|
||||
|
||||
return (
|
||||
<Card className="shadow-sm">
|
||||
<CardBody>
|
||||
<h1 className="custom-font">Aktuelle Rangliste</h1>
|
||||
<Table striped className="mt-3 mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Team Name</th>
|
||||
<th className="text-center">Match Differenz</th>
|
||||
<th className="text-center">Punkt Differenz</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ rangedmap(sortedPerformances, (team, index) => (
|
||||
<TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
|
||||
), 0, 3) }
|
||||
</tbody>
|
||||
<Collapse isOpen={ this.state.showFullTable } tag="tbody">
|
||||
{ rangedmap(sortedPerformances, (team, index) => (
|
||||
<TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
|
||||
), 3) }
|
||||
</Collapse>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan='4'>
|
||||
<TableButton isFullTableShown={this.state.showFullTable} onToggle={this.toggleShowFullTable}/>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
toggleShowFullTable() {
|
||||
this.setState({ showFullTable: !this.state.showFullTable });
|
||||
}
|
||||
}
|
||||
|
||||
class TeamRow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<tr>
|
||||
<td>{ this.props.teamToShow.rank }</td>
|
||||
<td className="w-100">{findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
|
||||
<td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
|
||||
<td className="text-center">{ this.props.teamToShow.pointDifferential }</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TableButton extends React.Component {
|
||||
|
||||
render() {
|
||||
const { isFullTableShown } = this.props;
|
||||
|
||||
if(isFullTableShown) {
|
||||
return <Button className="w-100" onClick={this.props.onToggle}>Zeige nur die 3 besten Teams</Button>;
|
||||
} else {
|
||||
return <Button className="w-100" onClick={this.props.onToggle}>Zeige alle Teams</Button>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class StatisticsTournamentPage extends React.Component {
|
||||
|
||||
static async getInitialProps({query}) {
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ import {Match} from '../js/components/Match';
|
|||
|
||||
class PrivateTournamentPage extends React.Component {
|
||||
render() {
|
||||
const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
|
||||
const {ownerUsername, playoffStages} = this.props.tournament;
|
||||
const {isSignedIn, username} = this.props;
|
||||
|
||||
|
||||
// TODO: Change href-prop of the anchor tag to contain the tournament code
|
||||
return (<div className='pb-5'>
|
||||
<TournamentInformationView tournament={this.props.tournament} currentpage='tournament'/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue