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

get a tutorial about the API

Browse Source
This commit is contained in:
Delucse
2020-11-27 08:41:34 +01:00
parent 28d674b6cd
commit ea00d173c5
13 changed files with 220 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Assessment.js
+6 -4
View File
@@ -27,7 +27,7 @@ class Assessment extends Component {
}
render() {
var tutorialId = this.props.currentTutorialId;
var tutorialId = this.props.tutorial.id //currentTutorialId;
var currentTask = this.props.step;
var status = this.props.status.filter(status => status.id === tutorialId)[0];
var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id);
@@ -61,16 +61,18 @@ class Assessment extends Component {
}
Assessment.propTypes = {
currentTutorialId: PropTypes.number,
// currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
workspaceName: PropTypes.func.isRequired
workspaceName: PropTypes.func.isRequired,
tutorial: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId
tutorial: state.tutorial.tutorial
// currentTutorialId: state.tutorial.currentId
});
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
src/components/Tutorial/Instruction.js
+2 -2
View File
@@ -56,11 +56,11 @@ class Instruction extends Component {
}
Instruction.propTypes = {
currentTutorialId: PropTypes.number,
// currentTutorialId: PropTypes.number,
};
const mapStateToProps = state => ({
currentTutorialId: state.tutorial.currentId
// currentTutorialId: state.tutorial.currentId
});
export default connect(mapStateToProps, null)(Instruction);
src/components/Tutorial/SolutionCheck.js
+9 -7
View File
@@ -8,7 +8,7 @@ import { withRouter } from 'react-router-dom';
import Compile from '../Compile';
import Dialog from '../Dialog';
import tutorials from '../../data/tutorials';
// import tutorials from '../../data/tutorials';
import { checkXml } from '../../helpers/compareXml';
import { withStyles } from '@material-ui/core/styles';
@@ -47,7 +47,7 @@ class SolutionCheck extends Component {
}
check = () => {
const tutorial = tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0];
const tutorial = this.props.tutorial //tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0];
const step = tutorial.steps[this.props.activeStep];
var msg = checkXml(step.xml, this.props.xml);
this.props.tutorialCheck(msg.type, step);
@@ -55,7 +55,7 @@ class SolutionCheck extends Component {
}
render() {
const steps = tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0].steps;
const steps = this.props.tutorial.steps //tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0].steps;
return (
<div>
<Tooltip title='Lösung kontrollieren' arrow>
@@ -114,15 +114,17 @@ class SolutionCheck extends Component {
SolutionCheck.propTypes = {
tutorialCheck: PropTypes.func.isRequired,
tutorialStep: PropTypes.func.isRequired,
currentTutorialId: PropTypes.number,
// currentTutorialId: PropTypes.number,
activeStep: PropTypes.number.isRequired,
xml: PropTypes.string.isRequired
xml: PropTypes.string.isRequired,
tutorial: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
currentTutorialId: state.tutorial.currentId,
// currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep,
xml: state.workspace.code.xml
xml: state.workspace.code.xml,
tutorial: state.tutorial.tutorial
});
export default connect(mapStateToProps, { tutorialCheck, tutorialStep })(withStyles(styles, { withTheme: true })(withRouter(SolutionCheck)));
src/components/Tutorial/StepperHorizontal.js
+8 -6
View File
@@ -50,14 +50,14 @@ const styles = (theme) => ({
class StepperHorizontal extends Component {
render() {
var tutorialId = this.props.currentTutorialId;
var tutorialId = this.props.tutorial.id //this.props.currentTutorialId;
var tutorialIndex = this.props.currentTutorialIndex;
var status = this.props.status.filter(status => status.id === tutorialId)[0];
var tasks = status.tasks;
var error = tasks.filter(task => task.type === 'error').length > 0;
var success = tasks.filter(task => task.type === 'success').length / tasks.length;
var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
var title = this.props.tutorial.title;
return (
<div style={{ position: 'relative' }}>
{error || success > 0 ?
@@ -96,15 +96,17 @@ class StepperHorizontal extends Component {
StepperHorizontal.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
currentTutorialId: PropTypes.number.isRequired,
currentTutorialIndex: PropTypes.number.isRequired
// currentTutorialId: PropTypes.number.isRequired,
currentTutorialIndex: PropTypes.number.isRequired,
tutorial: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId,
currentTutorialIndex: state.tutorial.currentIndex
// currentTutorialId: state.tutorial.currentId,
currentTutorialIndex: state.tutorial.currentIndex,
tutorial: state.tutorial.tutorial
});
export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));
src/components/Tutorial/StepperVertical.js
+8 -6
View File
@@ -61,7 +61,7 @@ class StepperVertical extends Component {
}
componentDidUpdate(props){
if(props.currentTutorialId !== Number(this.props.match.params.tutorialId)){
if (props.tutorial.id !== Number(this.props.match.params.tutorialId)) {
this.props.tutorialStep(0);
}
}
@@ -69,7 +69,7 @@ class StepperVertical extends Component {
render() {
var steps = this.props.steps;
var activeStep = this.props.activeStep;
var tutorialStatus = this.props.status.filter(status => status.id === this.props.currentTutorialId)[0];
var tutorialStatus = this.props.status.filter(status => status.id === this.props.tutorial.id/*currentTutorialId*/)[0];
return (
<div style={{marginRight: '10px'}}>
<Stepper
@@ -113,16 +113,18 @@ class StepperVertical extends Component {
StepperVertical.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
currentTutorialId: PropTypes.number.isRequired,
// currentTutorialId: PropTypes.number.isRequired,
activeStep: PropTypes.number.isRequired,
tutorialStep: PropTypes.func.isRequired
tutorialStep: PropTypes.func.isRequired,
tutorial: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep
// currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorial
});
export default connect(mapStateToProps, { tutorialStep })(withRouter(withStyles(styles, {withTheme: true})(StepperVertical)));
src/components/Tutorial/Tutorial.js
+60 -39
View File
@@ -2,7 +2,8 @@ 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 { clearMessages } from '../../actions/messageActions';
import { getTutorial, resetTutorial, tutorialStep } from '../../actions/tutorialActions';
import Breadcrumbs from '../Breadcrumbs';
import StepperHorizontal from './StepperHorizontal';
@@ -13,79 +14,99 @@ import NotFound from '../NotFound';
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
import tutorials from '../../data/tutorials';
// 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.tutorialId(Number(this.props.match.params.tutorialId));
this.props.getTutorial(this.props.match.params.tutorialId);
// 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));
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.tutorialId(null);
this.props.resetTutorial();
this.props.workspaceName(null);
if(this.props.message.msg){
this.props.clearMessages();
}
}
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 }]} />
<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 />
<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={{ 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 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 = {
tutorialId: PropTypes.func.isRequired,
getTutorial: PropTypes.func.isRequired,
resetTutorial: PropTypes.func.isRequired,
clearMessages: 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
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,
currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep
activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorial,
isLoading: state.tutorial.progress,
message: state.message
});
export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial);
export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, clearMessages, workspaceName })(Tutorial);