diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index a73638b..edf070c 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,4 +1,4 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID } from './types'; +import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from './types'; export const tutorialChange = () => (dispatch) => { dispatch({ @@ -19,7 +19,8 @@ export const tutorialCheck = (status) => (dispatch, getState) => { export const storeTutorialXml = (code) => (dispatch, getState) => { var id = getState().tutorial.currentId; - if(id !== null){ + var level = getState().tutorial.level; + if(id !== null && level === 'assessment'){ var tutorialsStatus = getState().tutorial.status; tutorialsStatus[id] = {...tutorialsStatus[id], xml: code}; dispatch({ @@ -29,6 +30,14 @@ export const storeTutorialXml = (code) => (dispatch, getState) => { } }; +// level = "instruction" or "assessment" +export const setTutorialLevel = (level) => (dispatch) => { + dispatch({ + type: TUTORIAL_LEVEL, + payload: level + }); +} + export const tutorialId = (id) => (dispatch) => { dispatch({ type: TUTORIAL_ID, diff --git a/src/actions/types.js b/src/actions/types.js index 11d24ac..9d26386 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -12,3 +12,4 @@ export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; export const TUTORIAL_XML = 'TUTORIAL_XML'; export const TUTORIAL_ID = 'TUTORIAL_ID'; +export const TUTORIAL_LEVEL = 'TUTORIAL_LEVEL'; diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js new file mode 100644 index 0000000..d955a6d --- /dev/null +++ b/src/components/Tutorial/Instruction.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import * as Blockly from 'blockly/core'; + +import BlocklyWindow from '../Blockly/BlocklyWindow'; + +import { tutorials } from './tutorials'; + +import Grid from '@material-ui/core/Grid'; + + +class Instruction extends Component { + + render() { + var currentTutorialId = this.props.currentTutorialId; + console.log(currentTutorialId); + return ( + tutorials[currentTutorialId].instruction ? +
+

{tutorials[currentTutorialId].instruction.description}

+ {tutorials[currentTutorialId].instruction.xml ? + + + + + + : null } +
+ : null + ); + }; +} + +Instruction.propTypes = { + currentTutorialId: PropTypes.number, +}; + +const mapStateToProps = state => ({ + currentTutorialId: state.tutorial.currentId +}); + +export default connect(mapStateToProps, null)(Instruction); diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index 3b48c09..710db70 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -1,11 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { tutorialId } from '../../actions/tutorialActions'; +import { tutorialId, setTutorialLevel } 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'; @@ -21,10 +22,6 @@ import Card from '@material-ui/core/Card'; class Tutorial extends Component { - state={ - value: 'introduction' - } - componentDidMount(){ this.props.tutorialId(Number(this.props.match.params.tutorialId)-1); } @@ -32,7 +29,7 @@ class Tutorial extends Component { componentDidUpdate(props, state){ if(props.currentTutorialId+1 !== Number(this.props.match.params.tutorialId)){ this.props.tutorialId(Number(this.props.match.params.tutorialId)-1); - this.setState({ value: 'introduction' }); + this.props.setTutorialLevel('instruction'); } } @@ -41,11 +38,12 @@ class Tutorial extends Component { } onChange = (e, value) => { - this.setState({ value: value }); + this.props.setTutorialLevel(value); } render() { var currentTutorialId = this.props.currentTutorialId; + console.log(this.props); return ( !Number.isInteger(currentTutorialId) || currentTutorialId+1 < 1 || currentTutorialId+1 > tutorials.length ? @@ -61,20 +59,20 @@ class Tutorial extends Component { {/* width of vertical stepper is 30px*/} - +
- {this.state.value === 'introduction' ? - 'Hier könnte eine Anleitung stehen.': null } - {this.state.value === 'assessment' ? + {this.props.level === 'instruction' ? + : null } + {this.props.level === 'assessment' ? @@ -100,15 +98,18 @@ class Tutorial extends Component { Tutorial.propTypes = { tutorialId: PropTypes.func.isRequired, + setTutorialLevel: PropTypes.func.isRequired, currentTutorialId: PropTypes.number, status: PropTypes.array.isRequired, - change: PropTypes.number.isRequired + change: PropTypes.number.isRequired, + level: PropTypes.string.isRequired }; const mapStateToProps = state => ({ change: state.tutorial.change, status: state.tutorial.status, - currentTutorialId: state.tutorial.currentId + currentTutorialId: state.tutorial.currentId, + level: state.tutorial.level }); -export default connect(mapStateToProps, { tutorialId })(withWidth()(Tutorial)); +export default connect(mapStateToProps, { tutorialId, setTutorialLevel })(withWidth()(Tutorial)); diff --git a/src/components/Tutorial/tutorials.js b/src/components/Tutorial/tutorials.js index d2d2a38..e16d078 100644 --- a/src/components/Tutorial/tutorials.js +++ b/src/components/Tutorial/tutorials.js @@ -4,6 +4,20 @@ export const tutorials = [ }, { "title": "WLAN", + "instruction": + { + "description": 'Hier könnte eine Anleitung stehen.', + "xml": ` + + + + SSID + Password + + + + ` + }, "test": function(workspace){ var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects if(wifi.length > 0){ @@ -26,6 +40,20 @@ export const tutorials = [ }, { "title": "spezifisches WLAN", + "instruction": + { + "description": 'Hier könnte eine Anleitung stehen.', + "xml": ` + + + + bestimmte SSID + bestimmtes Passwort + + + + ` + }, "test": function(workspace){ var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects if(wifi.length > 0){ diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index 1a9e1fc..e951cb0 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -1,4 +1,4 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID } from '../actions/types'; +import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from '../actions/types'; import { tutorials } from '../components/Tutorial/tutorials'; @@ -6,6 +6,7 @@ const initialState = { status: window.localStorage.getItem('tutorial') ? JSON.parse(window.localStorage.getItem('tutorial')) : new Array(tutorials.length).fill({}), + level: 'instruction', currentId: null, change: 0 }; @@ -31,6 +32,11 @@ export default function(state = initialState, action){ ...state, currentId: action.payload } + case TUTORIAL_LEVEL: + return { + ...state, + level: action.payload + } default: return state; }