adjustment of the tutorial component and all dependencies to the new tutorial.json

src/components/Tutorial/Instruction.js

@@ -4,36 +4,35 @@ import { connect } from 'react-redux';
 
 import BlocklyWindow from '../Blockly/BlocklyWindow';
 
-import { tutorials } from './tutorials';
-
 import Grid from '@material-ui/core/Grid';
-
+import Typography from '@material-ui/core/Typography';
 
 class Instruction extends Component {
 
   render() {
-    var currentTutorialId = this.props.currentTutorialId;
+    var step = this.props.step;
     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>
+      <div>
+        <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
+        <Typography style={{marginBottom: '5px'}}>{step.text1}</Typography>
+        {step.hardware && step.hardware.length > 0 ? 'Hardware: todo' : null}
+        {step.requirements && step.requirements.length > 0 ? 'Voraussetzungen: todo' : null}
+        {step.xml ?
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <BlocklyWindow
+              trashcan={false}
+              readOnly={true}
+              zoomControls={false}
+              grid={false}
+              move={false}
+              blocklyCSS={{minHeight: '300px'}}
+              initialXml={step.xml}
+            />
           </Grid>
-          : null }
-        </div>
-      : null
+        </Grid>
+        : null }
+      </div>
     );
   };
 }