diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js index c4a9631..ecbe69b 100644 --- a/pages/tournament-fullscreen.js +++ b/pages/tournament-fullscreen.js @@ -5,13 +5,15 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import '../static/css/everypage.css'; import '../static/css/tournament-fullscreen.css'; import {getTournamentMatches, getTournamentMeta} from '../js/redux/tournamentApi'; -import {Col, Navbar, NavbarBrand, NavItem, Row} from 'reactstrap'; +import { + Col, DropdownItem, DropdownMenu, DropdownToggle, Navbar, NavbarBrand, NavItem, Row, UncontrolledDropdown +} from 'reactstrap'; import {Match} from '../js/components/Match'; function FullscreenPage(props) { return (
- +
); } @@ -24,10 +26,25 @@ function Matches(props) { ); } +function FilterDropdown(props) { + return ( + Match-Filter: + + {props.selected.label} + + + {Object.keys(matchFilters).map(matchFilter => props.select(matchFilters[matchFilter])}> + {matchFilters[matchFilter].label} + )} + + ); +} + function FullscreenPageHeader(props) { return ( - {props.levelName} + {props.title} Turnier-Code: {props.code} @@ -35,6 +52,15 @@ function FullscreenPageHeader(props) { ); } +const matchFilters = { + 'all': {backend: null, label: 'alle'}, + 'in_progress': {backend: 'in_progress', label: 'laufend'}, + 'not_started': {backend: 'not_started', label: 'bereit zum Starten'}, + 'finished': {backend: 'finished', label: 'beendet'}, + 'single_team': {backend: 'single_team', label: 'ohne Gegner'}, + 'not_ready': {backend: 'not_ready', label: 'noch nicht festgelegt'} +}; + class Main extends React.Component { static async getInitialProps({query}) { return {query}; @@ -44,13 +70,19 @@ class Main extends React.Component { super(props); this.state = { - tournamentMeta: null, matches: [] + tournamentMeta: null, matches: [], matchFilter: matchFilters.all }; this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this); this.onTournamentRequestError = this.onTournamentRequestError.bind(this); this.onTournamentMatchesRequestSuccess = this.onTournamentMatchesRequestSuccess.bind(this); this.onTournamentMatchesRequestError = this.onTournamentMatchesRequestError.bind(this); this.updateMatches = this.updateMatches.bind(this); + this.selectFilter = this.selectFilter.bind(this); + } + + selectFilter(filter) { + this.setState({matchFilter: filter}); + this.updateMatches(); } componentDidMount() { @@ -67,8 +99,8 @@ class Main extends React.Component { updateMatches() { const tournamentId = this.props.query.code; - getTournamentMatches(tournamentId, this.onTournamentMatchesRequestSuccess, - this.onTournamentMatchesRequestError); + getTournamentMatches(tournamentId, this.onTournamentMatchesRequestSuccess, this.onTournamentMatchesRequestError, + this.state.matchFilter.backend); } @@ -99,12 +131,15 @@ class Main extends React.Component { render() { const {metaStatus, tournamentMeta, matches} = this.state; + const filter = { + selected: this.state.matchFilter, select: this.selectFilter + }; if (metaStatus === 200) { return (
{tournamentMeta.name}: turnie.re - +
); } else { return ;