checked if wifi is initialized

src/components/Compile.js

@@ -62,7 +62,7 @@ class Compile extends Component {
     return (
       <div style={{display: 'inline'}}>
         <Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.compile()}>
-          Compile
+          Kompilieren
         </Button>
         <Backdrop className={this.props.classes.backdrop} open={this.state.progress}>
           <CircularProgress color="inherit" />
@@ -70,7 +70,7 @@ class Compile extends Component {
         <Dialog onClose={this.toggleDialog} open={this.state.open}>
           <DialogTitle>Fehler</DialogTitle>
           <DialogContent dividers>
-            Etwas ist beim Compilieren schief gelaufen. Versuche es nochmal.
+            Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.
           </DialogContent>
           <DialogActions>
             <Button onClick={this.toggleDialog} color="primary">

src/components/Tutorial/SolutionCheck.js

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+
+import * as Blockly from 'blockly/core';
+
+import Compile from '../Compile';
+
+import { tutorials } from './tutorials';
+
+import { withRouter } from 'react-router-dom';
+
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+  compile: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    }
+  }
+});
+
+class SolutionCheck extends Component {
+
+  state={
+    open: false,
+    msg: ''
+  }
+
+  toggleDialog = () => {
+    if(this.state.open){
+      this.setState({ open: false, msg: '' });
+    }
+    else{
+      this.setState({ open: !this.state });
+    }
+  }
+
+  check = () => {
+    const workspace = Blockly.getMainWorkspace();
+    var msg = tutorials[this.props.tutorial].test(workspace);
+    this.setState({ msg, open: true });
+  }
+
+  render() {
+    return (
+      tutorials[this.props.tutorial].test ?
+      <div>
+        <Tooltip title='Lösung kontrollieren'>
+          <IconButton
+            className={this.props.classes.compile}
+            style={{width: '40px', height: '40px', position: 'absolute', top: 8, right: 8, zIndex: 21 }}
+            onClick={() => this.check()}
+          >
+            <FontAwesomeIcon icon={faPlay} size="xs"/>
+          </IconButton>
+        </Tooltip>
+        <Dialog fullWidth maxWidth={'sm'} onClose={this.toggleDialog} open={this.state.open} style={{zIndex: 9999999}}>
+          <DialogTitle>{this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'}</DialogTitle>
+          <DialogContent dividers>
+            {this.state.msg.text}
+            {this.state.msg.type === 'success' ?
+            <div style={{marginTop: '20px', display: 'flex'}}>
+              <Compile />
+              <Button
+                style={{marginLeft: '10px'}}
+                variant="contained"
+                color="primary"
+                onClick={() => {this.toggleDialog(); this.props.history.push(`/tutorial/${this.props.tutorial+2}`)}}
+              >
+                nächstes Tutorial
+              </Button>
+              </div>
+            : null}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.toggleDialog} color="primary">
+              Schließen
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+      : null
+    );
+  };
+}
+
+export default withRouter(withStyles(styles, {withTheme: true})(SolutionCheck));

src/components/Tutorial/StepperHorizontal.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { withRouter } from 'react-router-dom';
 
-import tutorials from './tutorials.json';
+import { tutorials } from './tutorials';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';

src/components/Tutorial/StepperVertical.js

@@ -4,7 +4,7 @@ import { withRouter, Link } from 'react-router-dom';
 
 import clsx from 'clsx';
 
-import tutorials from './tutorials.json';
+import { tutorials } from './tutorials';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
@@ -123,7 +123,7 @@ class StepperVertical extends Component {
           >
             {'<'}
           </Button>
-          <div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', width: 'max-content'}}>
+          <div style={{display: 'flex', height: 'max-content', width: 'max-content'}}>
             <div style={{position: 'relative'}}>
               <div
                 className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}

src/components/Tutorial/Tutorial.js

@@ -6,10 +6,11 @@ import Breadcrumbs from '../Breadcrumbs';
 import StepperHorizontal from './StepperHorizontal';
 import StepperVertical from './StepperVertical';
 import BlocklyWindow from '../Blockly/BlocklyWindow';
+import SolutionCheck from './SolutionCheck';
 import CodeViewer from '../CodeViewer';
 import NotFound from '../NotFound';
 
-import tutorials from './tutorials.json';
+import { tutorials } from './tutorials';
 import { initialXml } from '../Blockly/initialXml.js';
 
 import Tabs from '@material-ui/core/Tabs';
@@ -74,7 +75,8 @@ class Tutorial extends Component {
                   'Hier könnte eine Anleitung stehen.': null }
                 {this.state.value === 'assessment' ?
                   <Grid container spacing={2}>
-                    <Grid item xs={12} md={6} lg={8}>
+                    <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
+                      <SolutionCheck tutorial={tutorialId-1}/>
                       <BlocklyWindow />
                     </Grid>
                     <Grid item xs={12} md={6} lg={4}>

src/components/Tutorial/TutorialHome.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import Breadcrumbs from '../Breadcrumbs';
 
-import tutorials from './tutorials.json';
+import { tutorials } from './tutorials';
 
 import { Link } from 'react-router-dom';
 

src/components/Tutorial/tutorials.js

@@ -0,0 +1,128 @@
+export const tutorials = [
+  {
+    "title": "erste Schritte"
+  },
+  {
+    "title": "WLAN",
+    "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",
+    "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 !== '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"
+  }
+]

src/components/Tutorial/tutorials.json

@@ -1,74 +0,0 @@
-[
-  {
-    "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"
-  },
-  {
-    "title": "erste Schritte"
-  },
-  {
-    "title": "if-Bedingung"
-  },
-  {
-    "title": "for-Schleife"
-  }
-]