92 lines
3.7 KiB
JavaScript
92 lines
3.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { workspaceName } from '../../actions/workspaceActions';
|
|
import { tutorialId, tutorialStep } from '../../actions/tutorialActions';
|
|
|
|
import Breadcrumbs from '../Breadcrumbs';
|
|
import StepperHorizontal from './StepperHorizontal';
|
|
import StepperVertical from './StepperVertical';
|
|
import Instruction from './Instruction';
|
|
import Assessment from './Assessment';
|
|
import NotFound from '../NotFound';
|
|
|
|
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
|
|
|
|
import tutorials from '../../data/tutorials';
|
|
|
|
import Card from '@material-ui/core/Card';
|
|
import Button from '@material-ui/core/Button';
|
|
|
|
class Tutorial extends Component {
|
|
|
|
componentDidMount() {
|
|
this.props.tutorialId(Number(this.props.match.params.tutorialId));
|
|
}
|
|
|
|
componentDidUpdate(props, state) {
|
|
if (props.currentTutorialId !== Number(this.props.match.params.tutorialId)) {
|
|
this.props.tutorialId(Number(this.props.match.params.tutorialId));
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.tutorialId(null);
|
|
this.props.workspaceName(null);
|
|
}
|
|
|
|
render() {
|
|
var currentTutorialId = this.props.currentTutorialId;
|
|
var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0];
|
|
var steps = tutorial ? tutorial.steps : null;
|
|
var step = steps ? steps[this.props.activeStep] : null;
|
|
var name = step ? `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}` : null;
|
|
return (
|
|
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || !tutorial ?
|
|
<NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
|
|
:
|
|
<div>
|
|
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${currentTutorialId}`, title: tutorial.title }]} />
|
|
|
|
<StepperHorizontal />
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
<StepperVertical steps={steps} />
|
|
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
|
|
<Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
|
|
{step ?
|
|
step.type === 'instruction' ?
|
|
<Instruction step={step} />
|
|
: <Assessment step={step} name={name} /> // if step.type === 'assessment'
|
|
: null}
|
|
|
|
<div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
|
|
<Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
|
|
<Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Tutorial.propTypes = {
|
|
tutorialId: PropTypes.func.isRequired,
|
|
tutorialStep: PropTypes.func.isRequired,
|
|
workspaceName: PropTypes.func.isRequired,
|
|
currentTutorialId: PropTypes.number,
|
|
status: PropTypes.array.isRequired,
|
|
change: PropTypes.number.isRequired,
|
|
activeStep: PropTypes.number.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
change: state.tutorial.change,
|
|
status: state.tutorial.status,
|
|
currentTutorialId: state.tutorial.currentId,
|
|
activeStep: state.tutorial.activeStep
|
|
});
|
|
|
|
export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial);
|