showing needed hardware

src/components/Tutorial/Instruction.js

@@ -2,41 +2,44 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import * as Blockly from 'blockly/core';
-
+import Hardware from './Hardware';
 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;
-    console.log(currentTutorialId);
+    var step = this.props.step;
+    var isHardware = step.hardware && step.hardware.length > 0;
+    var areRequirements = step.requirements && step.requirements.length > 0;
     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={isHardware ? {} : {marginBottom: '5px'}}>{step.text1}</Typography>
+        {isHardware ?
+          <Hardware picture={step.hardware}/> : null}
+        {areRequirements > 0 ?
+          <Typography style={{marginBottom: '5px'}}>Voraussetzungen: todo</Typography> : null}
+        {step.xml ?
+        <Grid container spacing={2} style={{marginBottom: '5px'}}>
+          <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>
     );
   };
 }