schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checked if wifi is initialized

Browse Source
This commit is contained in:
Delucse 2020-09-04 15:06:55 +02:00
parent c00c0949e4
commit 1586e74cdc
8 changed files with 236 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Compile.js
View File

@ -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">

98
src/components/Tutorial/SolutionCheck.js Normal file
View File

@ -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));

2
src/components/Tutorial/StepperHorizontal.js
View File

@ -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';

4
src/components/Tutorial/StepperVertical.js
View File

@ -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)}

6
src/components/Tutorial/Tutorial.js
View File

@ -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}>

2
src/components/Tutorial/TutorialHome.js
View File

@ -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';

128
src/components/Tutorial/tutorials.js Normal file
View File

@ -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"
}
]

74
src/components/Tutorial/tutorials.json
View File

@ -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"
}
]