diff --git a/src/components/Tutorial/Builder/Requirements.js b/src/components/Tutorial/Builder/Requirements.js new file mode 100644 index 0000000..c97ad6c --- /dev/null +++ b/src/components/Tutorial/Builder/Requirements.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { changeContent } from '../../../actions/tutorialBuilderActions'; + +import tutorials from '../tutorials.json'; + +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormLabel from '@material-ui/core/FormLabel'; +import FormControl from '@material-ui/core/FormControl'; + +class Requirements extends Component { + + onChange = (e) => { + var requirements = this.props.value; + var value = parseInt(e.target.value) + if(e.target.checked){ + requirements.push(value); + } + else { + requirements = requirements.filter(requirement => requirement !== value); + } + this.props.changeContent(this.props.index, 'requirements', requirements); + } + + render() { + return ( + + Voraussetzungen + Beachte, dass die Reihenfolge des Anhakens maßgebend ist. + + {tutorials.map((tutorial, i) => + id === tutorial.id).length > 0} + onChange={(e) => this.onChange(e)} + name="requirements" + color="primary" + /> + } + label={tutorial.title} + /> + )} + + + ); + }; +} + +Requirements.propTypes = { + changeContent: PropTypes.func.isRequired +}; + +const mapStateToProps = state => ({ + change: state.builder.change +}); + +export default connect(mapStateToProps, { changeContent })(Requirements);