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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/actions/tutorialActions.js
View File

@ -1,10 +1,8 @@
import { TUTORIAL_PROGRESS, GET_TUTORIAL, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
import axios from 'axios';
import { returnErrors, returnSuccess } from './messageActions';
// import tutorials from '../data/tutorials';
export const getTutorial = (id) => (dispatch) => {
dispatch({type: TUTORIAL_PROGRESS});
axios.get(`https://api.blockly.sensebox.de/tutorial/${id}`)
@ -23,10 +21,28 @@ export const getTutorial = (id) => (dispatch) => {
});
};
export const getTutorials = () => (dispatch) => {
dispatch({type: TUTORIAL_PROGRESS});
axios.get(`https://api.blockly.sensebox.de/tutorial`)
.then(res => {
dispatch({type: TUTORIAL_PROGRESS});
dispatch({
type: GET_TUTORIALS,
payload: res.data
});
})
.catch(err => {
dispatch({type: TUTORIAL_PROGRESS});
if(err.response){
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
}
});
};
export const resetTutorial = () => (dispatch) => {
dispatch({
type: GET_TUTORIAL,
payload: {}
type: GET_TUTORIALS,
payload: []
});
};
@ -38,7 +54,7 @@ export const tutorialChange = () => (dispatch) => {
export const tutorialCheck = (status, step) => (dispatch, getState) => {
var tutorialsStatus = getState().tutorial.status;
var id = getState().tutorial.tutorial.id;
var id = getState().tutorial.tutorials[0].id;
var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === step.id);
tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
@ -53,11 +69,11 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => {
};
export const storeTutorialXml = (code) => (dispatch, getState) => {
var tutorial = getState().tutorial.tutorial;
var id = tutorial.id;
if (id !== null) {
var tutorial = getState().tutorial.tutorials[0];
if (tutorial) {
var id = tutorial.id;
var activeStep = getState().tutorial.activeStep;
var steps = tutorial.steps;//tutorials.filter(tutorial => tutorial.id === id)[0].steps;
var steps = tutorial.steps;
if (steps && steps[activeStep].type === 'task') {
var tutorialsStatus = getState().tutorial.status;
var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
@ -74,14 +90,6 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
}
};
// export const tutorialId = (id) => (dispatch) => {
// dispatch({
// type: TUTORIAL_ID,
// payload: id
// });
// };
export const tutorialStep = (step) => (dispatch) => {
dispatch({
type: TUTORIAL_STEP,

1
src/actions/types.js
View File

@ -9,6 +9,7 @@ export const NAME = 'NAME';
export const TUTORIAL_PROGRESS = 'TUTORIAL_PROGRESS';
export const GET_TUTORIAL = 'GET_TUTORIAL';
export const GET_TUTORIALS = 'GET_TUTORIALS';
export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS';
export const TUTORIAL_ERROR = 'TUTORIAL_ERROR';
export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE';

3
src/components/Gallery/GalleryHome.js
View File

@ -6,9 +6,6 @@ import clsx from 'clsx';
import Breadcrumbs from '../Breadcrumbs';
// import gallery from './gallery.json';
// import tutorials from '../../data/tutorials.json';
import { Link } from 'react-router-dom';
import { fade } from '@material-ui/core/styles/colorManipulator';

8
src/components/Tutorial/Assessment.js
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));

33
src/components/Tutorial/Builder/Requirements.js
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);

11
src/components/Tutorial/Instruction.js
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;

8
src/components/Tutorial/Requirement.js
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>

9
src/components/Tutorial/SolutionCheck.js
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)));

6
src/components/Tutorial/StepperHorizontal.js
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)));

6
src/components/Tutorial/StepperVertical.js
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)));

8
src/components/Tutorial/Tutorial.js
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
});

40
src/components/Tutorial/TutorialHome.js
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));

15
src/reducers/tutorialReducer.js
View File

@ -1,4 +1,4 @@
import { TUTORIAL_PROGRESS, GET_TUTORIAL, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
import tutorials from '../data/tutorials';
@ -40,11 +40,10 @@ const initialStatus = () => {
const initialState = {
status: initialStatus(),
// currentId: null,
currentIndex: null,
activeStep: 0,
change: 0,
tutorial: {},
tutorials: [],
progress: false
};
@ -55,11 +54,16 @@ export default function (state = initialState, action) {
...state,
progress: !state.progress
}
case GET_TUTORIALS:
return {
...state,
tutorials: action.payload
};
case GET_TUTORIAL:
return {
...state,
tutorial: action.payload
};
tutorials: [action.payload]
}
case TUTORIAL_SUCCESS:
case TUTORIAL_ERROR:
case TUTORIAL_XML:
@ -77,7 +81,6 @@ export default function (state = initialState, action) {
case TUTORIAL_ID:
return {
...state,
// currentId: action.payload,
currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload)
}
case TUTORIAL_STEP: