showing needed hardware

src/components/Tutorial/Hardware.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
+
+const styles = theme => ({
+  expand: {
+    '&:hover': {
+      color: theme.palette.primary.main,
+    },
+    '&:active': {
+      color: theme.palette.primary.main,
+    },
+    color: theme.palette.text.primary
+  },
+  multiGridListTile: {
+    background: fade(theme.palette.secondary.main, 0.5),
+    height: '30px'
+  },
+  multiGridListTileTitle: {
+    color: theme.palette.text.primary
+  }
+});
+
+
+class Hardware extends Component {
+
+  state = {
+    open: false,
+    title: '',
+    url: ''
+  };
+
+  handleClickOpen = (title, url) => {
+    this.setState({open: true, title, url});
+  };
+
+  handleClose = () => {
+    this.setState({open: false, title: '', url: ''});
+  };
+
+  render() {
+    var cols = isWidthUp('sm', this.props.width) ? isWidthUp('md', this.props.width) ? isWidthUp('lg', this.props.width) ? 6 : 5 : 4 : 3;
+    return (
+      <div style={{marginTop: '10px', marginBottom: '5px'}}>
+        <Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>
+
+            <GridList cellHeight={100} cols={cols} spacing={10}>
+            {this.props.picture.map((picture,i) => (
+              <GridListTile key={i}>
+                <img src={`/media/hardware/${picture}.png`} alt={picture} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}/>
+                <GridListTileBar
+                  classes={{root: this.props.classes.multiGridListTile}}
+                  title={
+                    <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
+                      {picture}
+                    </div>
+                  }
+                  actionIcon={
+                    <IconButton className={this.props.classes.expand} aria-label='Vollbild' onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}>
+                      <FontAwesomeIcon icon={faExpandAlt} size="xs"/>
+                    </IconButton>
+                  }
+                />
+              </GridListTile>
+            ))}
+            </GridList>
+
+        <Dialog
+          style={{zIndex: 1500}}
+          fullWidth={true}
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <DialogTitle style={{padding: "10px 24px"}}>Hardware: {this.state.title}</DialogTitle>
+          <DialogContent style={{padding: "0px"}}>
+            <img src={this.state.url} width="100%" alt={this.state.title}/>
+          </DialogContent>
+          <DialogActions style={{padding: "10px 24px"}}>
+            <Button onClick={this.handleClose} color="primary">
+              Schließen
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  };
+}
+
+export default withWidth()(withStyles(styles, { withTheme: true })(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;
+    var step = this.props.step;
-    console.log(currentTutorialId);
+    var isHardware = step.hardware && step.hardware.length > 0;
+    var areRequirements = step.requirements && step.requirements.length > 0;
     return (
-      tutorials[currentTutorialId].instruction ?
+      <div>
-        <div>
+        <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
-          <p>{tutorials[currentTutorialId].instruction.description}</p>
+        <Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text1}</Typography>
-          {tutorials[currentTutorialId].instruction.xml ?
+        {isHardware ?
-          <Grid container spacing={2}>
+          <Hardware picture={step.hardware}/> : null}
-            <Grid item xs={12}>
+        {areRequirements > 0 ?
-              <BlocklyWindow
+          <Typography style={{marginBottom: '5px'}}>Voraussetzungen: todo</Typography> : null}
-                trashcan={false}
+        {step.xml ?
-                readOnly={true}
+        <Grid container spacing={2} style={{marginBottom: '5px'}}>
-                zoomControls={false}
+          <Grid item xs={12}>
-                grid={false}
+            <BlocklyWindow
-                move={false}
+              trashcan={false}
-                blocklyCSS={{minHeight: '300px'}}
+              readOnly={true}
-                initialXml={tutorials[this.props.currentTutorialId].instruction.xml}
+              zoomControls={false}
-              />
+              grid={false}
-            </Grid>
+              move={false}
+              blocklyCSS={{minHeight: '300px'}}
+              initialXml={step.xml}
+            />
           </Grid>
-          : null }
+        </Grid>
-        </div>
+        : null }
-      : null
+      </div>
     );
   };
 }

src/components/Tutorial/tutorials.json

@@ -0,0 +1,85 @@
+[
+    {
+        "id": 1,
+        "title": "Erste Schritte",
+        "steps": [
+            {
+                "id": 1,
+                "type": "instruction",
+                "headline": "Erste Schritte",
+                "text1": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.",
+                "hardware": ["senseboxmcu", "led", "breadboard", "jst-adapter", "resistor"],
+                "requirements": []
+            },
+            {
+                "id": 2,
+                "type": "instruction",
+                "headline": "Aufbau der Schaltung",
+                "text1": "Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1."
+            },
+            {
+                "id": 3,
+                "type": "instruction",
+                "headline": "Programmierung",
+                "text1": "Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></xml>"
+            },
+            {
+                "id": 4,
+                "type": "instruction",
+                "headline": "Leuchten der LED",
+                "text1": "Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></xml>"
+            },
+            {
+                "id": 5,
+                "type": "task",
+                "headline": "Aufgabe 1",
+                "text1": "Verwenden den Block zum leuchten der LED und übertrage dein erstes Programm auf die senseBox MCU.",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'></block></xml>"
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "title": "WLAN einrichten",
+        "steps": [
+            {
+                "id": 1,
+                "type": "instruction",
+                "headline": "Einführung",
+                "text1": "In diesem Tutorial lernst du wie man die senseBox mit dem Internet verbindest.",
+                "hardware": ["senseboxmcu"],
+                "requirements": [1]
+            },
+            {
+                "id": 2,
+                "type": "instruction",
+                "headline": "Programmierung",
+                "text1": "Man benötigt folgenden Block:",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='sensebox_wifi' id='-!X.Ay]z1ACt!f5+Vfr8'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></xml>"
+            },
+            {
+                "id": 3,
+                "type": "instruction",
+                "headline": "Block richtig einbinden",
+                "text1": "",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            },
+            {
+                "id": 4,
+                "type": "task",
+                "headline": "Aufgabe 1",
+                "text1": "Stelle eine WLAN-Verbindung mit einem beliebigen Netzwerk her.",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            },
+            {
+                "id": 5,
+                "type": "task",
+                "headline": "Aufgabe 2",
+                "text1": "Versuche das gleiche einfach nochmal. Übung macht den Meister! ;)",
+                "xml": "<xml xmlns='https://developers.google.com/blockly/xml'><block type='arduino_functions' id='QWW|$jB8+*EL;}|#uA' deletable='false' x='27' y='16'><statement name='SETUP_FUNC'><block type='sensebox_wifi' id='W}P2Y^g,muH@]|@anou}'><field name='SSID'>SSID</field><field name='Password'>Password</field></block></statement></block></xml>"
+            }
+        ]
+    }
+]