Merge branch 'blockly-functions'

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";
@@ -36,17 +38,31 @@ const styles = (theme) => ({
 
 class Compile extends Component {
 
-  state = {
+  constructor(props){
+    super(props);
+    this.state = {
       progress: false,
-    open: 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)
+      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'
+    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">
+            <Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
-              Schließen
+              {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));

src/components/Home.js

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

src/components/Tutorial/Assessment.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 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));

src/components/Tutorial/Tutorial.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 { 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);

src/components/WorkspaceFunc.js

@@ -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 = () => {
+  componentDidUpdate(props){
-    this.setState({ open: !this.state, fileName: '', file: false });
+    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;
+    var fileName = this.state.name;
-    if(fileName === '') fileName = 'unbekannt';
+    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'}}/>
+                <TextField autoFocus placeholder={this.state.saveXml ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
-                <Button disabled={this.state.fileName === ''} variant='contained' color='primary' onClick={() => this.saveXmlFile(this.props.xml)}>Eingabe</Button>
+                <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">
+            <Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
-              Schließen
+              {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)));

src/components/WorkspaceStats.js

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

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