own blocklyWindow for an instruction

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,

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

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 ?
+        <div>
+          <p>{tutorials[currentTutorialId].instruction.description}</p>
+          {tutorials[currentTutorialId].instruction.xml ?
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <BlocklyWindow
+                trashcan={false}
+                readOnly={true}
+                zoomControls={false}
+                grid={false}
+                move={false}
+                blocklyCSS={{minHeight: '300px'}}
+                initialXml={tutorials[this.props.currentTutorialId].instruction.xml}
+              />
+            </Grid>
+          </Grid>
+          : null }
+        </div>
+      : null
+    );
+  };
+}
+
+Instruction.propTypes = {
+  currentTutorialId: PropTypes.number,
+};
+
+const mapStateToProps = state => ({
+  currentTutorialId: state.tutorial.currentId
+});
+
+export default connect(mapStateToProps, null)(Instruction);

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 ?
         <NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
@@ -61,20 +59,20 @@ class Tutorial extends Component {
             {/* width of vertical stepper is 30px*/}
             <Card style={{width: isWidthUp('sm', this.props.width) ? 'calc(100% - 30px)' : '100%', padding: '10px'}}>
               <Tabs
-                value={this.state.value}
+                value={this.props.level}
                 indicatorColor="primary"
                 textColor="inherit"
                 variant='fullWidth'
                 onChange={this.onChange}
               >
-                <Tab label="Anleitung" value='introduction' disableRipple/>
+                <Tab label="Anleitung" value='instruction' disableRipple/>
                 <Tab label="Aufgabe" value='assessment' disableRipple/>
               </Tabs>
 
               <div style={{marginTop: '20px'}}>
-                {this.state.value === 'introduction' ?
+                {this.props.level === 'instruction' ?
-                  'Hier könnte eine Anleitung stehen.': null }
+                  <Instruction /> : null }
-                {this.state.value === 'assessment' ?
+                {this.props.level === 'assessment' ?
                   <Grid container spacing={2}>
                     <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
                       <SolutionCheck />
@@ -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));

src/components/Tutorial/tutorials.js

@@ -4,6 +4,20 @@ export const tutorials = [
   },
   {
     "title": "WLAN",
+    "instruction":
+      {
+        "description": 'Hier könnte eine Anleitung stehen.',
+        "xml": `<xml xmlns="https://developers.google.com/blockly/xml">
+                  <block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" deletable="false" movable="false" editable="false" x="27" y="16">
+                    <statement name="LOOP_FUNC">
+                      <block type="sensebox_wifi" id="f{U%tp!7XbCJhaJbKS:,">
+                        <field name="SSID">SSID</field>
+                        <field name="Password">Password</field>
+                      </block>
+                    </statement>
+                  </block>
+                </xml>`
+      },
     "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": `<xml xmlns="https://developers.google.com/blockly/xml">
+                  <block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" deletable="false" movable="false" editable="false" x="27" y="16">
+                    <statement name="LOOP_FUNC">
+                      <block type="sensebox_wifi" id="f{U%tp!7XbCJhaJbKS:,">
+                        <field name="SSID">bestimmte SSID</field>
+                        <field name="Password">bestimmtes Passwort</field>
+                      </block>
+                    </statement>
+                  </block>
+                </xml>`
+      },
     "test": function(workspace){
               var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects
               if(wifi.length > 0){

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