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;
}