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

get all tutorials about the API

Browse Source
This commit is contained in:
Delucse
2020-11-27 09:30:42 +01:00
parent ea00d173c5
commit b8a2f87321
13 changed files with 116 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Assessment.js
+2 -6
View File
@@ -15,19 +15,17 @@ import Typography from '@material-ui/core/Typography';
class Assessment extends Component {
componentDidMount() {
// alert(this.props.name);
this.props.workspaceName(this.props.name);
}
componentDidUpdate(props) {
if (props.name !== this.props.name) {
// alert(this.props.name);
this.props.workspaceName(this.props.name);
}
}
render() {
var tutorialId = this.props.tutorial.id //currentTutorialId;
var tutorialId = this.props.tutorial.id;
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,7 +59,6 @@ class Assessment extends Component {
}
Assessment.propTypes = {
// currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
workspaceName: PropTypes.func.isRequired,
@@ -71,8 +68,7 @@ Assessment.propTypes = {
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
tutorial: state.tutorial.tutorial
// currentTutorialId: state.tutorial.currentId
tutorial: state.tutorial.tutorials[0]
});
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
src/components/Tutorial/Builder/Requirements.js
+28 -5
View File
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { changeContent } from '../../../actions/tutorialBuilderActions';
import tutorials from '../../../data/tutorials';
import { getTutorials, resetTutorial } from '../../../actions/tutorialActions';
import { clearMessages } from '../../../actions/messageActions';
import FormGroup from '@material-ui/core/FormGroup';
import Checkbox from '@material-ui/core/Checkbox';
@@ -14,6 +14,24 @@ import FormControl from '@material-ui/core/FormControl';
class Requirements extends Component {
componentDidMount() {
this.props.getTutorials();
}
componentDidUpdate(props, state) {
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
alert(this.props.message.msg);
this.props.clearMessages();
}
}
componentWillUnmount() {
this.props.resetTutorial();
if(this.props.message.msg){
this.props.clearMessages();
}
}
onChange = (e) => {
var requirements = this.props.value;
var value = parseInt(e.target.value)
@@ -32,7 +50,7 @@ class Requirements extends Component {
<FormLabel style={{ color: 'black' }}>Voraussetzungen</FormLabel>
<FormHelperText style={{ marginTop: '5px' }}>Beachte, dass die Reihenfolge des Anhakens maßgebend ist.</FormHelperText>
<FormGroup>
{tutorials.map((tutorial, i) =>
{this.props.tutorials.map((tutorial, i) =>
<FormControlLabel
key={i}
control={
@@ -54,11 +72,16 @@ class Requirements extends Component {
}
Requirements.propTypes = {
getTutorials: PropTypes.func.isRequired,
resetTutorial: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired,
changeContent: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
change: state.builder.change
change: state.builder.change,
tutorials: state.tutorial.tutorials,
message: state.message
});
export default connect(mapStateToProps, { changeContent })(Requirements);
export default connect(mapStateToProps, { changeContent, getTutorials, resetTutorial, clearMessages })(Requirements);
src/components/Tutorial/Instruction.js
+1 -10
View File
@@ -1,6 +1,4 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Hardware from './Hardware';
import Requirement from './Requirement';
@@ -55,12 +53,5 @@ class Instruction extends Component {
};
}
Instruction.propTypes = {
// currentTutorialId: PropTypes.number,
};
const mapStateToProps = state => ({
// currentTutorialId: state.tutorial.currentId
});
export default connect(mapStateToProps, null)(Instruction);
export default Instruction;
src/components/Tutorial/Requirement.js
+4 -4
View File
@@ -74,16 +74,16 @@ class Requirement extends Component {
var success = status.tasks.filter(task => task.type === 'success').length / tasks.length
var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
return (
<Link to={`/tutorial/${tutorialId}`} className={this.props.classes.link}>
<Link to={`/tutorial/${tutorialId}`} className={this.props.classes.link} key={i}>
<Tooltip style={{ height: '50px', width: '50px', position: 'absolute', background: 'white', zIndex: 1, borderRadius: '25px' }} title={error ? `Mind. eine Aufgabe im Tutorial wurde nicht richtig gelöst.` : success === 1 ? `Das Tutorial wurde bereits erfolgreich abgeschlossen.` : `Das Tutorial ist zu ${success * 100}% abgeschlossen.`} arrow>
<div>
<div className={clsx(this.props.classes.outerDiv)} style={{ width: '50px', height: '50px', border: 0 }}>
<svg style={{ width: '100%', height: '100%' }}>
{error || success === 1 ?
<circle className={error ? this.props.classes.outerDivError : this.props.classes.outerDivSuccess} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5"></circle>
: <circle className={this.props.classes.outerDivOther} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5"></circle>}
<circle className={error ? this.props.classes.outerDivError : this.props.classes.outerDivSuccess} r="22.5" cx="50%" cy="50%" fill="none" strokeWidth="5"></circle>
: <circle className={this.props.classes.outerDivOther} r="22.5" cx="50%" cy="50%" fill="none" strokeWidth="5"></circle>}
{success < 1 && !error ?
<circle className={this.props.classes.outerDivSuccess} style={{ transform: 'rotate(-90deg)', transformOrigin: "50% 50%" }} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5" stroke-dashoffset={`${(22.5 * 2 * Math.PI) * (1 - success)}`} stroke-dasharray={`${(22.5 * 2 * Math.PI)}`}>
<circle className={this.props.classes.outerDivSuccess} style={{ transform: 'rotate(-90deg)', transformOrigin: "50% 50%" }} r="22.5" cx="50%" cy="50%" fill="none" strokeWidth="5" strokeDashoffset={`${(22.5 * 2 * Math.PI) * (1 - success)}`} strokeDasharray={`${(22.5 * 2 * Math.PI)}`}>
</circle>
: null}
</svg>
src/components/Tutorial/SolutionCheck.js
+3 -6
View File
@@ -8,7 +8,6 @@ import { withRouter } from 'react-router-dom';
import Compile from '../Compile';
import Dialog from '../Dialog';
// import tutorials from '../../data/tutorials';
import { checkXml } from '../../helpers/compareXml';
import { withStyles } from '@material-ui/core/styles';
@@ -47,7 +46,7 @@ class SolutionCheck extends Component {
}
check = () => {
const tutorial = this.props.tutorial //tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0];
const tutorial = this.props.tutorial;
const step = tutorial.steps[this.props.activeStep];
var msg = checkXml(step.xml, this.props.xml);
this.props.tutorialCheck(msg.type, step);
@@ -55,7 +54,7 @@ class SolutionCheck extends Component {
}
render() {
const steps = this.props.tutorial.steps //tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0].steps;
const steps = this.props.tutorial.steps;
return (
<div>
<Tooltip title='Lösung kontrollieren' arrow>
@@ -114,17 +113,15 @@ class SolutionCheck extends Component {
SolutionCheck.propTypes = {
tutorialCheck: PropTypes.func.isRequired,
tutorialStep: PropTypes.func.isRequired,
// currentTutorialId: PropTypes.number,
activeStep: PropTypes.number.isRequired,
xml: PropTypes.string.isRequired,
tutorial: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
// currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep,
xml: state.workspace.code.xml,
tutorial: state.tutorial.tutorial
tutorial: state.tutorial.tutorials[0]
});
export default connect(mapStateToProps, { tutorialCheck, tutorialStep })(withStyles(styles, { withTheme: true })(withRouter(SolutionCheck)));
src/components/Tutorial/StepperHorizontal.js
+2 -4
View File
@@ -50,7 +50,7 @@ const styles = (theme) => ({
class StepperHorizontal extends Component {
render() {
var tutorialId = this.props.tutorial.id //this.props.currentTutorialId;
var tutorialId = this.props.tutorial.id;
var tutorialIndex = this.props.currentTutorialIndex;
var status = this.props.status.filter(status => status.id === tutorialId)[0];
var tasks = status.tasks;
@@ -96,7 +96,6 @@ class StepperHorizontal extends Component {
StepperHorizontal.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
// currentTutorialId: PropTypes.number.isRequired,
currentTutorialIndex: PropTypes.number.isRequired,
tutorial: PropTypes.object.isRequired
};
@@ -104,9 +103,8 @@ StepperHorizontal.propTypes = {
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
// currentTutorialId: state.tutorial.currentId,
currentTutorialIndex: state.tutorial.currentIndex,
tutorial: state.tutorial.tutorial
tutorial: state.tutorial.tutorials[0]
});
export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));
src/components/Tutorial/StepperVertical.js
+2 -4
View File
@@ -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.tutorial.id/*currentTutorialId*/)[0];
var tutorialStatus = this.props.status.filter(status => status.id === this.props.tutorial.id)[0];
return (
<div style={{marginRight: '10px'}}>
<Stepper
@@ -113,7 +113,6 @@ class StepperVertical extends Component {
StepperVertical.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
// currentTutorialId: PropTypes.number.isRequired,
activeStep: PropTypes.number.isRequired,
tutorialStep: PropTypes.func.isRequired,
tutorial: PropTypes.object.isRequired
@@ -122,9 +121,8 @@ StepperVertical.propTypes = {
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
// currentTutorialId: state.tutorial.currentId,
activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorial
tutorial: state.tutorial.tutorials[0]
});
export default connect(mapStateToProps, { tutorialStep })(withRouter(withStyles(styles, {withTheme: true})(StepperVertical)));
src/components/Tutorial/Tutorial.js
+4 -4
View File
@@ -14,7 +14,6 @@ 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';
@@ -28,7 +27,7 @@ class Tutorial extends Component {
}
componentDidUpdate(props, state) {
if (props.tutorial.id && !props.isLoading && Number(props.tutorial.id) !== Number(this.props.match.params.tutorialId)) {
if (props.tutorial && 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));
}
@@ -47,10 +46,11 @@ class Tutorial extends Component {
}
render() {
console.log(this.props.tutorial);
return (
<div>
{this.props.isLoading ? <LinearProgress /> :
Object.keys(this.props.tutorial).length === 0 ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
!this.props.tutorial ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
: (() => {
var tutorial = this.props.tutorial;
var steps = this.props.tutorial.steps;
@@ -104,7 +104,7 @@ const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorial,
tutorial: state.tutorial.tutorials[0],
isLoading: state.tutorial.progress,
message: state.message
});
src/components/Tutorial/TutorialHome.js
+34 -6
View File
@@ -1,14 +1,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getTutorials, resetTutorial } from '../../actions/tutorialActions';
import { clearMessages } from '../../actions/messageActions';
import clsx from 'clsx';
import Breadcrumbs from '../Breadcrumbs';
import tutorials from '../../data/tutorials';
// import tutorials from '../../data/tutorials.json';
import { Link } from 'react-router-dom';
import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -16,6 +15,7 @@ import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import LinearProgress from '@material-ui/core/LinearProgress';
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -52,14 +52,33 @@ const styles = (theme) => ({
class TutorialHome extends Component {
componentDidMount() {
this.props.getTutorials();
}
componentDidUpdate(props, state) {
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
alert(this.props.message.msg);
this.props.clearMessages();
}
}
componentWillUnmount() {
this.props.resetTutorial();
if(this.props.message.msg){
this.props.clearMessages();
}
}
render() {
return (
this.props.isLoading ? <LinearProgress /> :
<div>
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }]} />
<h1>Tutorial-Übersicht</h1>
<Grid container spacing={2}>
{tutorials.map((tutorial, i) => {
{this.props.tutorials.map((tutorial, i) => {
var status = this.props.status.filter(status => status.id === tutorial.id)[0];
var tasks = status.tasks;
var error = status.tasks.filter(task => task.type === 'error').length > 0;
@@ -101,13 +120,22 @@ class TutorialHome extends Component {
}
TutorialHome.propTypes = {
getTutorials: PropTypes.func.isRequired,
resetTutorial: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
tutorials: PropTypes.array.isRequired,
isLoading: PropTypes.bool.isRequired,
message: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status
status: state.tutorial.status,
tutorials: state.tutorial.tutorials,
isLoading: state.tutorial.progress,
message: state.message
});
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(TutorialHome));
export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(TutorialHome));