template created for not deactivated blocks in the instructions

src/components/Tutorial/Builder/BlocklyExample.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 import localization from 'moment/locale/de';
 import * as Blockly from 'blockly/core';
 
+import { initialXml } from '../../Blockly//initialXml.js';
 import BlocklyWindow from '../../Blockly/BlocklyWindow';
 
 import { withStyles } from '@material-ui/core/styles';
@@ -41,10 +42,12 @@ class BlocklyExample extends Component {
     this.state={
       checked: props.task ? props.task : props.value ? true : false,
       input: null,
+      disabled: false
     };
   }
 
   componentDidMount(){
+    moment.updateLocale('de', localization);
     this.isError();
     // if(this.props.task){
     //   this.props.setError(this.props.index, 'xml');
@@ -57,14 +60,36 @@ class BlocklyExample extends Component {
         () => this.isError()
       );
     }
-    if(state.checked !== this.state.checked){
+    if(state.checked !== this.state.checked && this.state.checked){
       this.isError();
     }
+    if(props.xml !== this.props.xml){
+      // check if there is at least one block, otherwise the workspace cannot be submitted
+      var workspace = Blockly.getMainWorkspace();
+      var areBlocks = workspace.getAllBlocks().length > 0;
+      this.setState({disabled: !areBlocks});
+    }
   }
 
   isError = () => {
-    if(this.state.checked && !this.props.value){
-      this.props.setError(this.props.index, 'xml');
+    if(this.state.checked){
+      var xml = this.props.value;
+      // check if value is valid xml;
+      try{
+        Blockly.Xml.textToDom(xml);
+        this.props.deleteError(this.props.index, 'xml');
+      }
+      catch(err){
+        xml = initialXml;
+        // not valid xml, throw error in redux store
+        this.props.setError(this.props.index, 'xml');
+      }
+      if(!this.props.task){
+        // instruction can also display only one block, which does not necessarily
+        // have to be the initial block 
+        xml = xml.replace('deletable="false"', 'deletable="true"');
+      }
+      this.setState({xml: xml});
     }
     else {
       this.props.deleteError(this.props.index, 'xml');
@@ -79,8 +104,13 @@ class BlocklyExample extends Component {
     }
   }
 
+  setXml = () => {
+    var xml = this.props.xml;
+    this.props.changeContent(this.props.index, 'xml', xml);
+    this.setState({input: moment(Date.now()).format('LTS')});
+  }
+
   render() {
-    moment.locale('de', localization);
     return (
       <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
         {!this.props.task ?
@@ -100,22 +130,18 @@ class BlocklyExample extends Component {
           <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
         : this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
         : null}
+        {this.state.checked && !this.props.task ?
+          <FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
+        : null}
         {this.state.checked ? (() => {
-          var initialXml = this.props.value;
-          // check if value is valid xml;
-          try{
-            Blockly.Xml.textToDom(initialXml);
-          }
-          catch(err){
-            initialXml = null;
-            // this.props.setError(this.props.index, 'xml');
-          }
-          return (
+          return(
             <div style={{marginTop: '10px'}}>
               <Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
                 <Grid item xs={12}>
                   <BlocklyWindow
-                    initialXml={initialXml}
+                    blockDisabled={this.props.task}
+                    trashcan={false}
+                    initialXml={this.state.xml}
                     blocklyCSS={{height: '500px'}}
                   />
                 </Grid>
@@ -125,7 +151,8 @@ class BlocklyExample extends Component {
                 style={{marginTop: '5px', height: '40px'}}
                 variant='contained'
                 color='primary'
-                onClick={() => {this.props.changeContent(this.props.index, 'xml', this.props.xml); this.setState({input: moment(Date.now()).format('LTS')})}}
+                disabled={this.state.disabled}
+                onClick={() => this.setXml()}
               >
                 {this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}
               </Button>

src/components/Tutorial/Builder/StepType.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { changeContent } from '../../../actions/tutorialBuilderActions';
+import { changeContent, deleteProperty } from '../../../actions/tutorialBuilderActions';
 
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
@@ -9,9 +9,15 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 class StepType extends Component {
 
+  onChange = (value) => {
+    this.props.changeContent(this.props.index, 'type', value);
+    // delete property 'xml', so that all used blocks are reset
+    this.props.deleteProperty(this.props.index, 'xml');
+  }
+
   render() {
     return (
-      <RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => {this.props.changeContent(this.props.index, 'type', e.target.value)}}>
+      <RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}>
         <FormControlLabel style={{color: 'black'}}
           value="instruction"
           control={<Radio color="primary" />}
@@ -31,7 +37,8 @@ class StepType extends Component {
 }
 
 StepType.propTypes = {
-  changeContent: PropTypes.func.isRequired
+  changeContent: PropTypes.func.isRequired,
+  deleteProperty: PropTypes.func.isRequired
 };
 
-export default connect(null, { changeContent })(StepType);
+export default connect(null, { changeContent, deleteProperty })(StepType);