diff --git a/src/actions/types.js b/src/actions/types.js index 27bd18d..a086a29 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -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'; diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index a9700c8..ab2d4e3 100644 --- a/src/actions/workspaceActions.js +++ b/src/actions/workspaceActions.js @@ -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 + }) +} diff --git a/src/components/Compile.js b/src/components/Compile.js index 8326d20..9c0894b 100644 --- a/src/components/Compile.js +++ b/src/components/Compile.js @@ -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 { : - } @@ -94,13 +111,19 @@ class Compile extends Component { - Fehler + {this.state.title} - Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal. + {this.state.content} + {this.state.file ? +
+ + +
+ : null}
@@ -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)); diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js index c8b6ca7..ca87660 100644 --- a/src/components/WorkspaceFunc.js +++ b/src/components/WorkspaceFunc.js @@ -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 { diff --git a/src/reducers/workspaceReducer.js b/src/reducers/workspaceReducer.js index dc4987f..b9e3681 100644 --- a/src/reducers/workspaceReducer.js +++ b/src/reducers/workspaceReducer.js @@ -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; }