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 ;