own blocklyWindow for an instruction

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' ?
-                  'Hier könnte eine Anleitung stehen.': null }
-                {this.state.value === 'assessment' ?
+                {this.props.level === 'instruction' ?
+                  <Instruction /> : null }
+                {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){