Merge branch 'instruction'

src/components/Blockly/BlocklyWindow.js

@@ -32,10 +32,12 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-    if(props.initialXml !== this.props.initialXml){
+    var initialXML = this.props.initialXml
+    if(props.initialXml !== initialXml){
       // guarantees that the current xml-code (this.props.initialXml) is rendered
       workspace.clear();
-      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace);
+      if(!initialXML) initialXML = initialXml;
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXML), workspace) ;
     }
     Blockly.svgResize(workspace);
   }

src/components/Breadcrumbs.js

@@ -15,7 +15,9 @@ class MyBreadcrumbs extends Component {
               <Typography color="secondary">{content.title}</Typography>
             </Link>
           ))}
-          <Typography color="textPrimary">{this.props.content.slice(-1)[0].title}</Typography>
+          <Typography color="textPrimary" style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '300px'}}>
+            {this.props.content.slice(-1)[0].title}
+          </Typography>
         </Breadcrumbs>
       : null
     );

src/components/Tutorial/Assessment.js

@@ -18,14 +18,14 @@ class Assessment extends Component {
     var status = this.props.status.filter(status => status.id === tutorialId)[0];
     var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id);
     var statusTask = status.tasks[taskIndex];
-    
+
     return (
       <div style={{width: '100%'}}>
         <Typography variant='h4' style={{marginBottom: '5px'}}>{currentTask.headline}</Typography>
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
             <SolutionCheck />
-            <BlocklyWindow initialXml={statusTask.xml ? statusTask.xml : null}/>
+            <BlocklyWindow initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}/>
           </Grid>
           <Grid item xs={12} md={6} lg={4}>
             <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>

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, { isWidthDown } 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 = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
+    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,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import Hardware from './Hardware';
+import Requirement from './Requirement';
 import BlocklyWindow from '../Blockly/BlocklyWindow';
 
 import Grid from '@material-ui/core/Grid';
@@ -18,9 +20,9 @@ class Instruction extends Component {
         <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
         <Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text1}</Typography>
         {isHardware ?
-          <Typography style={areRequirements ? {} : {marginBottom: '5px'}}>Hardware: todo</Typography> : null}
+          <Hardware picture={step.hardware}/> : null}
         {areRequirements > 0 ?
-          <Typography style={{marginBottom: '5px'}}>Voraussetzungen: todo</Typography> : null}
+          <Requirement tutorialIds={step.requirements}/> : null}
         {step.xml ?
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12}>

src/components/Tutorial/Requirement.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import clsx from 'clsx';
+import { withRouter, Link } from 'react-router-dom';
+
+import tutorials from './tutorials.json';
+
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+
+const styles = theme => ({
+  outerDiv: {
+    width: '50px',
+    height: '50px',
+    position: 'absolute',
+    color: fade(theme.palette.secondary.main, 0.6)
+  },
+  outerDivError: {
+    stroke: fade(theme.palette.error.dark, 0.2),
+    color: fade(theme.palette.error.dark, 0.2)
+  },
+  outerDivSuccess: {
+    stroke: fade(theme.palette.primary.main, 0.2),
+    color: fade(theme.palette.primary.main, 0.2)
+  },
+  outerDivOther: {
+    stroke: fade(theme.palette.secondary.main, 0.2)
+  },
+  innerDiv: {
+    width: 'inherit',
+    height: 'inherit',
+    display: 'table-cell',
+    verticalAlign: 'middle',
+    textAlign: 'center'
+  },
+  link: {
+    color: theme.palette.text.primary,
+    position: 'relative',
+    height: '50px',
+    display: 'flex',
+    margin: '5px 0 5px 10px',
+    textDecoration: 'none'
+  },
+  hoverLink: {
+    '&:hover': {
+      background: fade(theme.palette.secondary.main, 0.5),
+      borderRadius: '0 25px 25px 0 '
+    }
+  }
+});
+
+
+class Requirement extends Component {
+
+  render() {
+    var tutorialIds = this.props.tutorialIds;
+    return (
+      <div style={{marginTop: '20px', marginBottom: '5px'}}>
+        <Typography>Es bietet sich an folgende Tutorials vorab erfolgreich gelöst zu haben:</Typography>
+        <List component="div">
+          {tutorialIds.map((tutorialId, i) => {
+            var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
+            var status = this.props.status.filter(status => status.id === tutorialId)[0];
+            var tasks = status.tasks;
+            var error = status.tasks.filter(task => task.type === 'error').length > 0;
+            var success = status.tasks.filter(task => task.type === 'success').length/tasks.length
+            var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
+            return(
+              <Link to={`/tutorial/${tutorialId}`} className={this.props.classes.link}>
+                <Tooltip style={{height: '50px', width: '50px', position: 'absolute', background: 'white', zIndex: 1, borderRadius: '25px'}} title={error ? `Mind. eine Aufgabe im Tutorial wurde nicht richtig gelöst.` : success === 1 ? `Das Tutorial wurde bereits erfolgreich abgeschlossen.` : `Das Tutorial ist zu ${success * 100}% abgeschlossen.`} arrow>
+                  <div>
+                    <div className={clsx(this.props.classes.outerDiv)} style={{width: '50px', height: '50px', border: 0}}>
+                      <svg style={{width: '100%', height: '100%'}}>
+                        {error || success === 1 ?
+                          <circle className={error ? this.props.classes.outerDivError : this.props.classes.outerDivSuccess} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5"></circle>
+                        : <circle className={this.props.classes.outerDivOther} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5"></circle>}
+                        {success < 1 && !error ?
+                          <circle className={this.props.classes.outerDivSuccess} style={{transform: 'rotate(-90deg)', transformOrigin: "50% 50%"}} r="22.5" cx="50%" cy="50%" fill="none" stroke-width="5" stroke-dashoffset={`${(22.5*2*Math.PI)*(1-success)}`} stroke-dasharray={`${(22.5*2*Math.PI)}`}>
+                          </circle>
+                        : null}
+                      </svg>
+                    </div>
+                    <div className={clsx(this.props.classes.outerDiv, tutorialStatus === 'Error' ? this.props.classes.outerDivError : tutorialStatus === 'Success' ? this.props.classes.outerDivSuccess : null)}>
+                      <div className={this.props.classes.innerDiv}>
+                        {error || success === 1 ?
+                          <FontAwesomeIcon icon={tutorialStatus === 'Success' ? faCheck : faTimes}/>
+                        : <Typography variant='h7' className={success > 0 ? this.props.classes.outerDivSuccess : {}}>{Math.round(success*100)}%</Typography>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </Tooltip>
+                <div style={{height: '50px', width: 'calc(100% - 25px)', transform: 'translate(25px)'}} className={this.props.classes.hoverLink}>
+                  <Typography style={{margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/}}>{title}</Typography>
+                </div>
+              </Link>
+            )}
+          )}
+        </List>
+      </div>
+    );
+  };
+}
+
+Requirement.propTypes = {
+  status: PropTypes.array.isRequired,
+  change: PropTypes.number.isRequired,
+};
+
+const mapStateToProps = state => ({
+  change: state.tutorial.change,
+  status: state.tutorial.status
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(withRouter(Requirement)));

src/components/Tutorial/StepperHorizontal.js

@@ -10,10 +10,9 @@ import tutorials from './tutorials.json';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
 import Button from '@material-ui/core/Button';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -57,6 +56,7 @@ class StepperHorizontal extends Component {
     var error = tasks.filter(task => task.type === 'error').length > 0;
     var success = tasks.filter(task => task.type === 'success').length / tasks.length;
     var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
+    var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
     return (
       <div style={{position: 'relative'}}>
         {error || success > 0 ?
@@ -74,14 +74,12 @@ class StepperHorizontal extends Component {
           >
             {'<'}
           </Button>
-          <Stepper activeStep={tutorialId} orientation="horizontal"
+          <Tooltip style={{display: 'flex', width: 'calc(100% - 64px - 64px)', justifyContent: 'center'}} title={title} arrow>
-                   style={{padding: 0}} classes={{root: this.props.classes.color}}>
+            <div>
-            <Step expanded completed={false}>
+              {tutorialStatus !== 'Other' ? <div className={tutorialStatus === 'Success' && success === 1 ? this.props.classes.iconDivSuccess : this.props.classes.iconDivError} style={{margin: 'auto 10px auto 0'}}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes}/></div> : null}
-              <StepLabel icon={tutorialStatus !== 'Other' ? <div className={tutorialStatus === 'Success' && success === 1 ? this.props.classes.iconDivSuccess : this.props.classes.iconDivError}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes}/></div> : ''}>
+              <Typography variant='body2' style={{fontWeight: 'bold', fontSize: '1.75em', margin: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'rgba(0, 0, 0, 0.54)'}}>{title}</Typography>
-                <h1 style={{margin: 0}}>{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}</h1>
+            </div>
-              </StepLabel>
+          </Tooltip>
-            </Step>
-          </Stepper>
           <Button
             disabled={tutorialId+1 > tutorials.length}
             onClick={() => {this.props.history.push(`/tutorial/${tutorialId+1}`)}}

src/components/Tutorial/TutorialHome.js

@@ -59,9 +59,8 @@ class TutorialHome extends Component {
         <h1>Tutorial-Übersicht</h1>
         <Grid container spacing={2}>
           {tutorials.map((tutorial, i) => {
-            var steps = tutorial.steps;
-            var tasks = steps.filter(task => task.type === 'task');
             var status = this.props.status.filter(status => status.id === tutorial.id)[0];
+            var tasks = status.tasks;
             var error = status.tasks.filter(task => task.type === 'error').length > 0;
             var success = status.tasks.filter(task => task.type === 'success').length/tasks.length
             var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';

src/components/Tutorial/tutorials.js

@@ -1,175 +0,0 @@
-export const tutorials = [
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "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>`
-      },
-    "solution": `<xml xmlns="https://developers.google.com/blockly/xml">
-                  <block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" deletable="false" x="37" y="20">
-                    <statement name="LOOP_FUNC">
-                      <block type="sensebox_telegram_do" id="K%yUabqRVQ{]9eX-8jZD">
-                        <statement name="telegram_do">
-                          <block type="controls_if" id="rA6:!p7,{y2MOuVpv[Pm">
-                            <value name="IF0">
-                              <block type="logic_boolean" id="=[Zh}O6_)fl?JD#2)2bL">
-                                <field name="BOOL">TRUE</field>
-                              </block>
-                            </value>
-                          </block>
-                        </statement>
-                      </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){
-                var wifiBlock = wifi[wifi.length-1] // first block is probably overwritten
-                if(wifiBlock.getRootBlock().type === 'sensebox_wifi'){
-                  return {text: 'Block, um eine WLAN-Verbindung herzustellen, ist nicht verbunden.', type: 'error'}
-                }
-                if(!wifiBlock.getFieldValue('SSID')){
-                  return {text: 'Die SSID-Angabe fehlt.', type: 'error'}
-                }
-                if(!wifiBlock.getFieldValue('Password')){
-                  return {text: 'Die Angabe des Passworts fehlt.', type: 'error'}
-                }
-                return {text: 'Super. Alles richtig!', type: 'success'}
-              }
-              else {
-                return {text: 'Der Block, um eine WLAN-Verbindung herzustellen, fehlt.', type: 'error'}
-              }
-            }
-  },
-  {
-    "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){
-                var wifiBlock = wifi[wifi.length-1] // first block is probably overwritten
-                if(wifiBlock.getRootBlock().type === 'sensebox_wifi'){
-                  return {text: 'Block, um eine WLAN-Verbindung herzustellen, ist nicht verbunden.', type: 'error'}
-                }
-                var ssid = wifiBlock.getFieldValue('SSID');
-                if(ssid){
-                  if(ssid !== 'SSID'){
-                    return {text: 'SSID muss als Angabe "SSID" haben.', type: 'error'}
-                  }
-                }
-                else{
-                  return {text: 'Die SSID-Angabe fehlt.', type: 'error'}
-                }
-                var password = wifiBlock.getFieldValue('Password')
-                if(password){
-                  if(password !== 'Passwort'){
-                    return {text: 'Password muss als Angabe "Passwort" haben.', type: 'error'}
-                  }
-                }
-                else{
-                  return {text: 'Die Angabe des Passworts fehlt.', type: 'error'}
-                }
-                return {text: 'Super. Alles richtig!', type: 'success'}
-              }
-              else {
-                return {text: 'Der Block, um eine WLAN-Verbindung herzustellen, fehlt.', type: 'error'}
-              }
-            }
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  }
-]