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

Merge branch 'blockly-functions'

Browse Source
This commit is contained in:
Delucse 2020-09-17 12:57:07 +02:00
commit 8bed9f4b7f
9 changed files with 172 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/actions/types.js
View File

@ -5,6 +5,7 @@ export const MOVE_BLOCK = 'MOVE_BLOCK';
export const CHANGE_BLOCK = 'CHANGE_BLOCK';
export const DELETE_BLOCK = 'DELETE_BLOCK';
export const CLEAR_STATS = 'CLEAR_STATS';
export const NAME = 'NAME';
export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS';

9
src/actions/workspaceActions.js
View File

@ -1,4 +1,4 @@
import { NEW_CODE, CHANGE_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
import { NEW_CODE, CHANGE_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS, NAME } from './types';
import * as Blockly from 'blockly/core';
@ -72,3 +72,10 @@ export const clearStats = () => (dispatch) => {
payload: stats
});
};
export const workspaceName = (name) => (dispatch) => {
dispatch({
type: NAME,
payload: name
})
}

77
src/components/Compile.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { workspaceName } from '../actions/workspaceActions';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
@ -12,6 +13,7 @@ import DialogActions from '@material-ui/core/DialogActions';
import Dialog from '@material-ui/core/Dialog';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
import { faCogs } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -36,17 +38,31 @@ const styles = (theme) => ({
class Compile extends Component {
state = {
progress: false,
open: false
constructor(props){
super(props);
this.state = {
progress: false,
open: false,
file: false,
title: '',
content: '',
name: props.name
};
}
componentDidUpdate(props){
if(props.name !== this.props.name){
this.setState({name: this.props.name});
}
}
compile = () => {
this.setState({ progress: true });
const data = {
"board": process.env.REACT_APP_BOARD,
"sketch": this.props.arduino
};
this.setState({ progress: true });
fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
method: "POST",
headers: {'Content-Type': 'application/json'},
@ -54,23 +70,41 @@ class Compile extends Component {
})
.then(response => response.json())
.then(data => {
console.log(data)
this.download(data.data.id)
console.log(data);
this.setState({id: data.data.id}, () => {
this.createFileName();
});
})
.catch(err => {
console.log(err);
this.setState({ progress: false, open: true });
this.setState({ progress: false, file: false, open: true, title: 'Fehler', content: 'Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.' });
});
}
download = (id) => {
const filename = 'sketch'
download = () => {
const id = this.state.id;
const filename = this.state.name;
this.toggleDialog();
this.props.workspaceName(filename);
window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
this.setState({ progress: false });
}
toggleDialog = () => {
this.setState({ open: !this.state });
this.setState({ open: !this.state, progress: false });
}
createFileName = () => {
if(this.state.name){
this.download();
}
else{
this.setState({ file: true, open: true, title: 'Blöcke kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
}
}
setFileName = (e) => {
this.setState({name: e.target.value});
}
render() {
@ -94,13 +128,19 @@ class Compile extends Component {
<CircularProgress color="inherit" />
</Backdrop>
<Dialog onClose={this.toggleDialog} open={this.state.open}>
<DialogTitle>Fehler</DialogTitle>
<DialogTitle>{this.state.title}</DialogTitle>
<DialogContent dividers>
Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.
{this.state.content}
{this.state.file ?
<div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
</div>
: null}
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
<Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
{this.state.file ? 'Abbrechen' : 'Schließen'}
</Button>
</DialogActions>
</Dialog>
@ -110,11 +150,14 @@ class Compile extends Component {
}
Compile.propTypes = {
arduino: PropTypes.string.isRequired
arduino: PropTypes.string.isRequired,
name: PropTypes.string,
workspaceName: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
arduino: state.workspace.code.arduino
arduino: state.workspace.code.arduino,
name: state.workspace.name
});
export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(Compile));
export default connect(mapStateToProps, { workspaceName })(withStyles(styles, {withTheme: true})(Compile));

8
src/components/Home.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { clearStats } from '../actions/workspaceActions';
import { clearStats, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core';
@ -58,6 +58,7 @@ class Home extends Component {
componentWillUnmount(){
this.props.clearStats();
this.props.workspaceName(null);
}
onChange = () => {
@ -100,8 +101,9 @@ class Home extends Component {
}
Home.propTypes = {
clearStats: PropTypes.func.isRequired
clearStats: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired
};
export default connect(null, { clearStats })(withStyles(styles, { withTheme: true })(Home));
export default connect(null, { clearStats, workspaceName })(withStyles(styles, { withTheme: true })(Home));

18
src/components/Tutorial/Assessment.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { workspaceName } from '../../actions/workspaceActions';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import SolutionCheck from './SolutionCheck';
@ -14,6 +15,18 @@ import Typography from '@material-ui/core/Typography';
class Assessment extends Component {
componentDidMount(){
// alert(this.props.name);
this.props.workspaceName(this.props.name);
}
componentDidUpdate(props){
if(props.name !== this.props.name){
// alert(this.props.name);
this.props.workspaceName(this.props.name);
}
}
render() {
var tutorialId = this.props.currentTutorialId;
var currentTask = this.props.step;
@ -47,7 +60,8 @@ class Assessment extends Component {
Assessment.propTypes = {
currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired
change: PropTypes.number.isRequired,
workspaceName: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
@ -56,4 +70,4 @@ const mapStateToProps = state => ({
currentTutorialId: state.tutorial.currentId
});
export default connect(mapStateToProps, null)(withWidth()(Assessment));
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));

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

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { workspaceName } from '../../actions/workspaceActions';
import { tutorialId, tutorialStep } from '../../actions/tutorialActions';
import Breadcrumbs from '../Breadcrumbs';
@ -29,6 +30,7 @@ class Tutorial extends Component {
componentWillUnmount(){
this.props.tutorialId(null);
this.props.workspaceName(null);
}
render() {
@ -36,6 +38,7 @@ class Tutorial extends Component {
var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0];
var steps = tutorial ? tutorial.steps : null;
var step = steps ? steps[this.props.activeStep] : null;
var name = step ? `${tutorial.title.replace(/\s/g,'')}_${step.headline.replace(/\s/g,'')}` : null;
return (
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ?
<NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
@ -52,7 +55,7 @@ class Tutorial extends Component {
{step ?
step.type === 'instruction' ?
<Instruction step={step}/>
: <Assessment step={step}/> // if step.type === 'assessment'
: <Assessment step={step} name={name}/> // if step.type === 'assessment'
: null}
<div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>
@ -69,6 +72,7 @@ class Tutorial extends Component {
Tutorial.propTypes = {
tutorialId: PropTypes.func.isRequired,
tutorialStep: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired,
currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
@ -82,4 +86,4 @@ const mapStateToProps = state => ({
activeStep: state.tutorial.activeStep
});
export default connect(mapStateToProps, { tutorialId, tutorialStep })(Tutorial);
export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial);

88
src/components/WorkspaceFunc.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { clearStats, onChangeCode } from '../actions/workspaceActions';
import { clearStats, onChangeCode, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core';
@ -12,6 +12,7 @@ import { initialXml } from './Blockly/initialXml.js';
import Compile from './Compile';
import SolutionCheck from './Tutorial/SolutionCheck';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
@ -21,8 +22,9 @@ import Dialog from '@material-ui/core/Dialog';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import { faSave, faUpload, faShare } from "@fortawesome/free-solid-svg-icons";
import { faPen, faSave, faUpload, faShare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
@ -35,6 +37,15 @@ const styles = (theme) => ({
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}
},
workspaceName: {
backgroundColor: theme.palette.secondary.main,
borderRadius: '25px',
display: 'inline-flex',
cursor: 'pointer',
'&:hover': {
color: theme.palette.primary.main,
}
}
});
@ -48,35 +59,48 @@ class WorkspaceFunc extends Component {
title: '',
content: '',
open: false,
fileName: '',
file: false
file: false,
saveXml: false,
name: props.name
};
}
toggleDialog = () => {
this.setState({ open: !this.state, fileName: '', file: false });
componentDidUpdate(props){
if(props.name !== this.props.name){
this.setState({name: this.props.name});
}
}
saveXmlFile = (code) => {
toggleDialog = () => {
this.setState({ open: !this.state });
}
saveXmlFile = () => {
var code = this.props.xml;
this.toggleDialog();
var fileName = this.state.fileName;
if(fileName === '') fileName = 'unbekannt';
var fileName = this.state.name;
this.props.workspaceName(fileName);
fileName = `${fileName}.xml`
var blob = new Blob([code], { type: 'text/xml' });
saveAs(blob, fileName);
}
createFileName = () => {
this.setState({ file: true, open: true, title: 'Blöcke speichern', content: 'Bitte gib einen Namen für die Bennenung der XML-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
if(this.state.name){
this.saveXmlFile();
}
else{
this.setState({ file: true, saveXml: true, open: true, title: 'Blöcke speichern', content: 'Bitte gib einen Namen für die Bennenung der XML-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
}
}
setFileName = (e) => {
this.setState({ fileName: e.target.value });
this.setState({name: e.target.value});
}
uploadXmlFile = (xmlFile) => {
if(xmlFile.type !== 'text/xml'){
this.setState({ open: true, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
this.setState({ open: true, file: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
}
else {
var reader = new FileReader();
@ -92,10 +116,16 @@ class WorkspaceFunc extends Component {
Blockly.Xml.domToWorkspace(xmlDom, workspace);
if(workspace.getAllBlocks().length < 1){
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace)
this.setState({ open: true, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
}
else {
if(!this.props.solutionCheck){
var extensionPosition = xmlFile.name.lastIndexOf('.');
this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
}
}
} catch(err){
this.setState({ open: true, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
}
};
}
@ -111,11 +141,24 @@ class WorkspaceFunc extends Component {
workspace.options.maxBlocks = Infinity;
this.props.onChangeCode();
this.props.clearStats();
if(!this.props.solutionCheck){
this.props.workspaceName(null);
}
}
render() {
return (
<div style={{width: 'max-content', display: 'flex'}}>
{!this.props.solutionCheck ?
<Tooltip title={`Name des Projekts${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{marginRight: '5px'}}>
<div className={this.props.classes.workspaceName} onClick={() => {this.setState({file: true, open: true, saveXml: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.'})}}>
{this.props.name && !isWidthDown('xs', this.props.width) ? <Typography style={{margin: 'auto -3px auto 12px'}}>{this.props.name}</Typography> : null}
<div style={{width: '40px', display: 'flex'}}>
<FontAwesomeIcon icon={faPen} style={{height: '18px', width: '18px', margin: 'auto'}}/>
</div>
</div>
</Tooltip>
: null}
{this.props.solutionCheck ? <SolutionCheck /> : <Compile iconButton />}
<Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}>
<IconButton
@ -157,14 +200,14 @@ class WorkspaceFunc extends Component {
{this.state.content}
{this.state.file ?
<div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={this.state.fileName === ''} variant='contained' color='primary' onClick={() => this.saveXmlFile(this.props.xml)}>Eingabe</Button>
<TextField autoFocus placeholder={this.state.saveXml ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveXml ? this.saveXmlFile() : this.props.workspaceName(this.state.name); this.toggleDialog();}}>Eingabe</Button>
</div>
: null}
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
<Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
{this.state.file ? 'Abbrechen' : 'Schließen'}
</Button>
</DialogActions>
</Dialog>
@ -176,13 +219,16 @@ class WorkspaceFunc extends Component {
WorkspaceFunc.propTypes = {
arduino: PropTypes.string.isRequired,
xml: PropTypes.string.isRequired,
name: PropTypes.string,
clearStats: PropTypes.func.isRequired,
onChangeCode: PropTypes.func.isRequired
onChangeCode: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
arduino: state.workspace.code.arduino,
xml: state.workspace.code.xml
xml: state.workspace.code.xml,
name: state.workspace.name
});
export default connect(mapStateToProps, { clearStats, onChangeCode })(withStyles(styles, {withTheme: true})(WorkspaceFunc));
export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName })(withStyles(styles, {withTheme: true})(withWidth()(WorkspaceFunc)));

2
src/components/WorkspaceStats.js
View File

@ -50,7 +50,7 @@ class WorkspaceStats extends Component {
};
render() {
const bigDisplay = !isWidthDown('xs', this.props.width);
const bigDisplay = !isWidthDown('sm', this.props.width);
const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>

10
src/reducers/workspaceReducer.js
View File

@ -1,4 +1,4 @@
import { CHANGE_WORKSPACE, NEW_CODE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
import { CHANGE_WORKSPACE, NEW_CODE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS, NAME } from '../actions/types';
const initialState = {
@ -12,7 +12,8 @@ const initialState = {
delete: 0,
move: -1 // initialXML is moved automatically, Block is not part of the statistics
},
change: 0
change: 0,
name: null
};
export default function(state = initialState, action){
@ -36,6 +37,11 @@ export default function(state = initialState, action){
...state,
stats: action.payload
};
case NAME:
return {
...state,
name: action.payload
}
default:
return state;
}