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

set filename to save compiled blocks

Browse Source
This commit is contained in:
Delucse 2020-09-17 10:06:29 +02:00
parent 71e881283d
commit ba84bc512c
5 changed files with 63 additions and 23 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
})
}

56
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";
@ -38,15 +40,18 @@ class Compile extends Component {
state = {
progress: false,
open: false
open: false,
file: false,
title: '',
content: ''
}
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 +59,35 @@ 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 = () => {
this.toggleDialog();
const id = this.state.id;
const filename = this.props.name;
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 = () => {
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.props.workspaceName(e.target.value);
}
render() {
@ -86,7 +103,7 @@ class Compile extends Component {
</IconButton>
</Tooltip>
:
<Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.compile()}>
<Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.createFileName()}>
<FontAwesomeIcon icon={faCogs} style={{marginRight: '5px'}}/> Kompilieren
</Button>
}
@ -94,13 +111,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.props.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.props.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
</div>
: null}
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
{this.state.file ? 'Abbrechen' : 'Schließen'}
</Button>
</DialogActions>
</Dialog>
@ -110,11 +133,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));

10
src/components/WorkspaceFunc.js
View File

@ -54,7 +54,7 @@ class WorkspaceFunc extends Component {
}
toggleDialog = () => {
this.setState({ open: !this.state, fileName: '', file: false });
this.setState({ open: !this.state, fileName: '' });
}
saveXmlFile = (code) => {
@ -76,7 +76,7 @@ class WorkspaceFunc extends Component {
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 +92,10 @@ 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.' });
}
} 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.' });
}
};
}
@ -164,7 +164,7 @@ class WorkspaceFunc extends Component {
</DialogContent>
<DialogActions>
<Button onClick={this.toggleDialog} color="primary">
Schließen
{this.state.file ? 'Abbrechen' : 'Schließen'}
</Button>
</DialogActions>
</Dialog>

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