turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Cleanup: Use reactstrap components instead of buggy "self-coded" stuff

This commit is contained in:
Felix Hamme 2019-06-17 22:26:58 +02:00
parent 5230b0b52b
commit 682db6f832
2 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/components/WarningPopup.js
View File

@ -1,19 +1,14 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Alert} from 'reactstrap'; import {Alert, Collapse} from 'reactstrap';
export class WarningPopup extends React.Component { export class WarningPopup extends React.Component {
render() { render() {
if (this.props.shown) { return (<Collapse isOpen={this.props.shown}>
return (<div> <Alert className='mt-2 py-1' color='danger'>
{this.props.children} {this.props.text}
<Alert className="mt-2" color="danger"> </Alert>
{this.props.text} </Collapse>);
</Alert>
</div>);
} else {
return this.props.children;
}
} }
} }

50
pages/create.js
View File

@ -2,8 +2,20 @@ import Head from 'next/head';
import React from 'react'; import React from 'react';
import {notify} from 'react-notify-toast'; import {notify} from 'react-notify-toast';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import posed from 'react-pose'; import {
import {Button, Card, CardBody, Col, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap'; Button,
Card,
CardBody,
Col,
Collapse,
Container,
CustomInput,
Form,
FormGroup,
Input,
Label,
Row
} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import EditableStringList from '../js/components/EditableStringList'; import EditableStringList from '../js/components/EditableStringList';
@ -49,14 +61,6 @@ function CreateTournamentCard() {
</Container>); </Container>);
} }
const GroupphaseFader = posed.div({
visible: {
opacity: 1, height: 200
}, hidden: {
opacity: 0, height: 0
}
});
class CreateTournamentForm extends React.Component { class CreateTournamentForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -106,29 +110,31 @@ class CreateTournamentForm extends React.Component {
checked={this.state.groupPhaseEnabled} checked={this.state.groupPhaseEnabled}
onChange={this.handleGroupPhaseEnabledInput}/> onChange={this.handleGroupPhaseEnabledInput}/>
</FormGroup> </FormGroup>
<GroupphaseFader pose={this.state.groupPhaseEnabled ? 'visible' : 'hidden'} <Collapse isOpen={this.state.groupPhaseEnabled}>
className="groupphasefader">
<FormGroup> <FormGroup>
<Label for="teams-per-group">Anzahl Teams pro Gruppe</Label> <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
<Col xs="3" className="pl-0"> <Row>
<NumericInput value={this.state.groupSize} <Col xs="3">
incrementText="+1" incrementCallback={this.increaseGroupSize} <NumericInput value={this.state.groupSize}
decrementText="-1" decrementCallback={this.decreaseGroupSize}/> incrementText="+1" incrementCallback={this.increaseGroupSize}
</Col> decrementText="-1" decrementCallback={this.decreaseGroupSize}/>
</Col>
</Row>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase
weiterkommen?</Label> weiterkommen?</Label>
<WarningPopup text="Füge bitte noch Teams hinzu, um so viele Teams im Playoff zu haben." <Row>
shown={this.state.teams.length < this.state.groupAdvance}> <Col xs="3">
<Col xs="3" className="pl-0">
<NumericInput value={this.state.groupAdvance} <NumericInput value={this.state.groupAdvance}
incrementText="&#215;2" incrementCallback={this.increaseGroupAdvance} incrementText="&#215;2" incrementCallback={this.increaseGroupAdvance}
decrementText="&#247;2" decrementCallback={this.decreaseGroupAdvance}/> decrementText="&#247;2" decrementCallback={this.decreaseGroupAdvance}/>
</Col> </Col>
</WarningPopup> </Row>
<WarningPopup text='Füge bitte noch Teams hinzu, um so viele Teams im Playoff zu haben.'
shown={this.state.teams.length < this.state.groupAdvance}/>
</FormGroup> </FormGroup>
</GroupphaseFader> </Collapse>
</Form> </Form>
<h3 className="custom-font mt-4">Teams</h3> <h3 className="custom-font mt-4">Teams</h3>
<EditableStringList <EditableStringList