schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjustment of the tutorial component and all dependencies to the new tutorial.json

Browse Source
This commit is contained in:
Delucse
2020-09-11 10:13:33 +02:00
parent 33445cf67c
commit 6c3709fde8
14 changed files with 368 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Tutorial.js
+32 -61
View File
@@ -1,35 +1,29 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialId, setTutorialLevel } from '../../actions/tutorialActions';
import { tutorialId, tutorialStep } from '../../actions/tutorialActions';
import Breadcrumbs from '../Breadcrumbs';
import StepperHorizontal from './StepperHorizontal';
import StepperVertical from './StepperVertical';
import Instruction from './Instruction';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import SolutionCheck from './SolutionCheck';
import CodeViewer from '../CodeViewer';
import Assessment from './Assessment';
import NotFound from '../NotFound';
import { tutorials } from './tutorials';
import tutorials from './tutorials.json';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Grid from '@material-ui/core/Grid';
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)-1);
this.props.tutorialId(Number(this.props.match.params.tutorialId));
}
componentDidUpdate(props, state){
if(props.currentTutorialId+1 !== Number(this.props.match.params.tutorialId)){
this.props.tutorialId(Number(this.props.match.params.tutorialId)-1);
this.props.setTutorialLevel('instruction');
if(props.currentTutorialId !== Number(this.props.match.params.tutorialId)){
this.props.tutorialId(Number(this.props.match.params.tutorialId));
}
}
@@ -37,78 +31,55 @@ class Tutorial extends Component {
this.props.tutorialId(null);
}
onChange = (e, value) => {
this.props.setTutorialLevel(value);
}
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;
return (
!Number.isInteger(currentTutorialId) || currentTutorialId+1 < 1 || currentTutorialId+1 > tutorials.length ?
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ?
<NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
:
<div>
<Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId+1}`, title: tutorials[currentTutorialId].title}]}/>
<div>
<Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/>
<StepperHorizontal />
<StepperHorizontal />
<div style={{display: 'flex'}}>
<StepperVertical />
<div style={{display: 'flex'}}>
<StepperVertical steps={steps}/>
{/* width of vertical stepper is 30px*/}
<Card style={{width: isWidthUp('sm', this.props.width) ? 'calc(100% - 30px)' : '100%', padding: '10px'}}>
<Tabs
value={this.props.level}
indicatorColor="primary"
textColor="inherit"
variant='fullWidth'
onChange={this.onChange}
>
<Tab label="Anleitung" value='instruction' disableRipple/>
<Tab label="Aufgabe" value='assessment' disableRipple/>
</Tabs>
<Card style={{padding: '10px'}}>
{step ?
step.type === 'instruction' ?
<Instruction step={step}/>
: <Assessment step={step}/> // if step.type === 'assessment'
: null}
<div style={{marginTop: '20px'}}>
{this.props.level === 'instruction' ?
<Instruction /> : null }
{this.props.level === 'assessment' ?
<Grid container spacing={2}>
<Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
<SolutionCheck />
<BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
Hier könnte die Problemstellung stehen.
</Card>
<div style={{height: '50%'}}>
<CodeViewer />
</div>
</Grid>
</Grid>
: null }
</div>
</Card>
</div>
<div style={{marginTop: '20px'}}>
<Button style={{marginRight: '10px'}} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep-1)}>Zurück</Button>
<Button 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,
setTutorialLevel: PropTypes.func.isRequired,
tutorialStep: PropTypes.func.isRequired,
currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
level: PropTypes.string.isRequired
activeStep: PropTypes.number.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId,
level: state.tutorial.level
activeStep: state.tutorial.activeStep
});
export default connect(mapStateToProps, { tutorialId, setTutorialLevel })(withWidth()(Tutorial));
export default connect(mapStateToProps, { tutorialId, tutorialStep })(Tutorial);