Fullscreen page: add dropdown for selecting a match filter (api parameter)

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 (<div>
-        <FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code}/>
+        <FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code} filter={props.filter}/>
         <Matches matches={props.matches}/>
     </div>);
 }
@@ -24,10 +26,25 @@ function Matches(props) {
     </div>);
 }
 
+function FilterDropdown(props) {
+    return (<UncontrolledDropdown>
+        <i>Match-Filter: </i>
+        <DropdownToggle color='light' caret>
+            {props.selected.label}
+        </DropdownToggle>
+        <DropdownMenu>
+            {Object.keys(matchFilters).map(matchFilter => <DropdownItem
+                onClick={() => props.select(matchFilters[matchFilter])}>
+                {matchFilters[matchFilter].label}
+            </DropdownItem>)}
+        </DropdownMenu>
+    </UncontrolledDropdown>);
+}
+
 
 function FullscreenPageHeader(props) {
     return (<Navbar color='light' className='mb-4 border-bottom py-0'>
-        <NavItem className='font-weight-bold'>{props.levelName}</NavItem>
+        <NavItem><FilterDropdown {...props.filter}/></NavItem>
         <NavbarBrand>{props.title}</NavbarBrand>
         <NavItem className='text-secondary'>
             Turnier-Code: <b className='text-primary text-monospace'>{props.code}</b>
@@ -35,6 +52,15 @@ function FullscreenPageHeader(props) {
     </Navbar>);
 }
 
+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 (<div>
                 <Head>
                     <title>{tournamentMeta.name}: turnie.re</title>
                 </Head>
-                <FullscreenPage tournamentMeta={tournamentMeta} matches={matches}/>
+                <FullscreenPage tournamentMeta={tournamentMeta} matches={matches} filter={filter}/>
             </div>);
         } else {
             return <ErrorPageComponent code={metaStatus}/>;