diff --git a/src/actions/tutorialBuilderActions.js b/src/actions/tutorialBuilderActions.js index cb4e798..5fe4493 100644 --- a/src/actions/tutorialBuilderActions.js +++ b/src/actions/tutorialBuilderActions.js @@ -301,12 +301,20 @@ export const resetTutorial = () => (dispatch, getState) => { hardware: [], requirements: [], }, + { + id: 2, + type: "instruction", + headline: "", + text: "", + finalpage: true, + solutions: [], + }, ]; dispatch(tutorialSteps(steps)); dispatch({ type: BUILDER_ERROR, payload: { - steps: [{}], + steps: [{}, {}], }, }); }; diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index d603e00..bff8019 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -273,6 +273,7 @@ class Builder extends Component { } else { // export steps without attribute 'url' var steps = this.props.steps; + var length = steps.length; var newTutorial = new FormData(); newTutorial.append("title", this.props.title); newTutorial.append("difficulty", this.props.difficulty); @@ -299,11 +300,28 @@ class Builder extends Component { newTutorial.append(`steps[${i}][hardware][${j}]`, hardware); }); } + if (i === length-1 && step.finalpage) { + newTutorial.append(`steps[${i}][finalpage]`, step.finalpage); + newTutorial.append(`steps[${i}][samplesolutions]`, step.samplesolutions); + newTutorial.append(`steps[${i}][furthertutorials]`, step.furthertutorials); + } + // if (i === length-1 && step.type === "instruction" && step.samplesolutions === true) { + // var solutions = []; + // steps.forEach((step) => { + // if (step.type === "task") { + // solutions.push(step) + // } + // }); + // newTutorial.append(`steps[${i}][samplesolutions]`, solutions); + // } if (step.xml) { // optional newTutorial.append(`steps[${i}][xml]`, step.xml); } }); + for (const pair of newTutorial.entries()) { + console.log(`${pair[0]}, ${pair[1]}`); + } return newTutorial; } }; diff --git a/src/components/Tutorial/Builder/FinalPageOptions.js b/src/components/Tutorial/Builder/FinalPageOptions.js new file mode 100644 index 0000000..110b26f --- /dev/null +++ b/src/components/Tutorial/Builder/FinalPageOptions.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; +import { changeContent } from "../../../actions/tutorialBuilderActions"; + +import { withStyles } from "@material-ui/core/styles"; +import Switch from "@material-ui/core/Switch"; +import FormGroup from '@material-ui/core/FormGroup'; +import FormControlLabel from "@material-ui/core/FormControlLabel"; + +const styles = (theme) => ({ + errorColor: { + color: theme.palette.error.dark, + }, + errorBorder: { + border: `1px solid ${theme.palette.error.dark}`, + }, + errorButton: { + marginTop: "5px", + height: "40px", + backgroundColor: theme.palette.error.dark, + "&:hover": { + backgroundColor: theme.palette.error.dark, + }, + }, +}); + +class FinalPageOptions extends Component { + constructor(props) { + super(props); + this.state = { + checkedSampleSolutions: props.checkedSampleSolutions, + checkedFurtherTutorials: props.checkedFurtherTutorials, + }; + } + + onChangeSampleSolutions = (value) => { + var oldValue = this.state.checked; + this.setState({ checked: value }); + if (oldValue !== value) { + this.props.changeContent(value, this.props.index, "samplesolutions"); + } + }; + + onChangeFurtherTutorials = (value) => { + var oldValue = this.state.checked; + this.setState({ checked: value }); + if (oldValue !== value) { + this.props.changeContent(value, this.props.index, "furthertutorials"); + } + } + + render() { + var steps = this.props.steps; + return ( +
+ + this.onChangeSampleSolutions(e.target.checked)} + color="primary" + /> + } + /> + this.onChangeFurtherTutorials(e.target.checked)} + color="primary" + /> + } + /> + +
+ ); + } +} + +FinalPageOptions.propTypes = { + changeContent: PropTypes.func.isRequired, +}; + +const mapStateToProps = (state) => ({ +}); + +export default connect(mapStateToProps, { + changeContent, +})(withStyles(styles, { withTheme: true })(FinalPageOptions)); diff --git a/src/components/Tutorial/Builder/Step.js b/src/components/Tutorial/Builder/Step.js index 35ed9f7..4a23093 100644 --- a/src/components/Tutorial/Builder/Step.js +++ b/src/components/Tutorial/Builder/Step.js @@ -29,6 +29,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import MarkdownEditor from "./MarkdownEditor"; +import FinalPageOptions from "./FinalPageOptions"; const styles = (theme) => ({ button: { @@ -64,12 +65,21 @@ class Step extends Component { marginBottom: "20px", }} > - - Schritt {index + 1} - + { !this.props.step.finalpage ? ( + + Schritt {index + 1} + + ) : ( + + Abschlussseite + + )}
- - this.props.addStep(index + 1)} - > - - - - {index !== 0 ? ( + {!this.props.step.finalpage ? (
- + this.props.changeStepIndex(index, index - 1)} + style={index === 0 ? {} : { marginBottom: "5px" }} + onClick={() => this.props.addStep(index + 1)} > - - - - - this.props.changeStepIndex(index, index + 1)} - > - - - - - this.props.removeStep(index)} - > - + + {index !== 0 ? ( +
+ + this.props.changeStepIndex(index, index - 1)} + > + + + + + = this.props.steps.length - 2} + className={this.props.classes.button} + style={{ marginBottom: "5px" }} + onClick={() => this.props.changeStepIndex(index, index + 1)} + > + + + + + this.props.removeStep(index)} + > + + + +
+ ) : null}
) : null}
- + {!this.props.step.finalpage ? ( + + ) : null}
) : null} - + { !this.props.step.finalpage ? ( + + ) : ( + + )}
diff --git a/src/reducers/tutorialBuilderReducer.js b/src/reducers/tutorialBuilderReducer.js index cb3a9dc..e65c83d 100644 --- a/src/reducers/tutorialBuilderReducer.js +++ b/src/reducers/tutorialBuilderReducer.js @@ -33,9 +33,18 @@ const initialState = { hardware: [], requirements: [], }, + { + id: 2, + type: "instruction", + headline: "", + text: "", + finalpage: true, + samplesolutions: false, + furtherTutorials: false, + }, ], error: { - steps: [{}], + steps: [{},{}], }, };