set filename to save compiled blocks

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

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

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)
+      console.log(data);
-      this.download(data.data.id)
+      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) => {
+  download = () => {
-    const filename = 'sketch'
+    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));

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 {
           </DialogContent>
           <DialogActions>
             <Button onClick={this.toggleDialog} color="primary">
-              Schließen
+              {this.state.file ? 'Abbrechen' : 'Schließen'}
             </Button>
           </DialogActions>
         </Dialog>

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