113 lines
4.7 KiB
JavaScript
113 lines
4.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { workspaceName } from '../../actions/workspaceActions';
|
|
import { clearMessages } from '../../actions/messageActions';
|
|
import { getTutorial, resetTutorial, 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';
|
|
import LinearProgress from '@material-ui/core/LinearProgress';
|
|
|
|
class Tutorial extends Component {
|
|
|
|
componentDidMount() {
|
|
this.props.getTutorial(this.props.match.params.tutorialId);
|
|
// this.props.tutorialId(Number(this.props.match.params.tutorialId));
|
|
}
|
|
|
|
componentDidUpdate(props, state) {
|
|
if (props.tutorial.id && !props.isLoading && Number(props.tutorial.id) !== Number(this.props.match.params.tutorialId)) {
|
|
this.props.getTutorial(this.props.match.params.tutorialId);
|
|
// this.props.tutorialId(Number(this.props.match.params.tutorialId));
|
|
}
|
|
if(this.props.message.id === 'GET_TUTORIAL_FAIL'){
|
|
alert(this.props.message.msg);
|
|
this.props.clearMessages();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.resetTutorial();
|
|
this.props.workspaceName(null);
|
|
if(this.props.message.msg){
|
|
this.props.clearMessages();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{this.props.isLoading ? <LinearProgress /> :
|
|
Object.keys(this.props.tutorial).length === 0 ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
|
|
: (() => {
|
|
var tutorial = this.props.tutorial;
|
|
var steps = this.props.tutorial.steps;
|
|
var step = steps[this.props.activeStep];
|
|
var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
|
|
return(
|
|
<div>
|
|
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial.id}`, 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>
|
|
)})()
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Tutorial.propTypes = {
|
|
getTutorial: PropTypes.func.isRequired,
|
|
resetTutorial: PropTypes.func.isRequired,
|
|
clearMessages: PropTypes.func.isRequired,
|
|
tutorialStep: PropTypes.func.isRequired,
|
|
workspaceName: PropTypes.func.isRequired,
|
|
status: PropTypes.array.isRequired,
|
|
change: PropTypes.number.isRequired,
|
|
activeStep: PropTypes.number.isRequired,
|
|
tutorial: PropTypes.object.isRequired,
|
|
isLoading: PropTypes.bool.isRequired,
|
|
message: PropTypes.object.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
change: state.tutorial.change,
|
|
status: state.tutorial.status,
|
|
activeStep: state.tutorial.activeStep,
|
|
tutorial: state.tutorial.tutorial,
|
|
isLoading: state.tutorial.progress,
|
|
message: state.message
|
|
});
|
|
|
|
export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, clearMessages, workspaceName })(Tutorial);
|