load pictures from the api server

src/actions/tutorialBuilderActions.js

@@ -189,7 +189,7 @@ export const setSubmitError = () => (dispatch, getState) => {
     step.id = i + 1;
     if (i === 0) {
       if (step.requirements && step.requirements.length > 0) {
-        var requirements = step.requirements.filter(requirement => typeof (requirement) === 'number');
+        var requirements = step.requirements.filter(requirement => /^[0-9a-fA-F]{24}$/.test(requirement));
         if (requirements.length < step.requirements.length) {
           dispatch(changeContent(requirements, i, 'requirements'));
         }

src/components/Tutorial/Builder/Builder.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { checkError, readJSON, jsonString, progress, resetTutorial } from '../../../actions/tutorialBuilderActions';
 
-import { saveAs } from 'file-saver';
+import axios from 'axios';
 
+import { saveAs } from 'file-saver';
 import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
 
 import Breadcrumbs from '../../Breadcrumbs';
@@ -51,12 +52,6 @@ class Builder extends Component {
   }
 
   submit = () => {
-    if (this.props.id === null) {
-      var randomID = Date.now();
-    } else {
-      randomID = this.props.id;
-    }
-
     var isError = this.props.checkError();
     if (isError) {
       this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error' });
@@ -64,19 +59,46 @@ class Builder extends Component {
     }
     else {
       // export steps without attribute 'url'
-      var steps = this.props.steps.map(step => {
+      var steps = this.props.steps;
-        if (step.url) {
+      var newTutorial = new FormData();
-          delete step.url;
+      newTutorial.append('title', this.props.title);
+      steps.forEach((step, i) => {
+        newTutorial.append(`steps[${i}][type]`, step.type);
+        newTutorial.append(`steps[${i}][headline]`, step.headline);
+        newTutorial.append(`steps[${i}][text]`, step.text);
+        if(i === 0 && step.type === 'instruction'){
+          if(step.requirements){ // optional
+            step.requirements.forEach((requirement, j) => {
+              newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
+            });
+          }
+          step.hardware.forEach((hardware, j) => {
+            newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
+          });
+        }
+        if(step.xml){ // optional
+          newTutorial.append(`steps[${i}][xml]`, step.xml);
+        }
+        if(step.media){ // optional
+          if(step.media.youtube){
+            newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
+          }
+          if(step.media.picture){
+            newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
+          }
         }
-        return step;
       });
-      var tutorial = {
+      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial)
-        id: randomID,
+        .then(res => {
-        title: this.props.title,
+          var tutorial = res.data.tutorial;
-        steps: steps
+          this.props.history.push(`/tutorial/${tutorial._id}`);
-      }
+        })
-      var blob = new Blob([JSON.stringify(tutorial)], { type: 'text/json' });
+        .catch(err => {
-      saveAs(blob, `${detectWhitespacesAndReturnReadableResult(tutorial.title)}.json`);
+          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
+          window.scrollTo(0, 0);
+        });
+      // var blob = new Blob([JSON.stringify(tutorial)], { type: 'text/json' });
+      // saveAs(blob, `${detectWhitespacesAndReturnReadableResult(tutorial.title)}.json`);
     }
   }
 

src/components/Tutorial/Builder/Media.js

@@ -84,7 +84,7 @@ class Media extends Component {
       this.setState({ error: false });
       this.props.changeContent(URL.createObjectURL(pic), this.props.index, 'url');
     }
-    this.props.changeContent(pic.name, this.props.index, 'media', 'picture');
+    this.props.changeContent(pic, this.props.index, 'media', 'picture');
   }
 
   render() {

src/components/Tutorial/Builder/Requirements.js

@@ -34,7 +34,7 @@ class Requirements extends Component {
 
   onChange = (e) => {
     var requirements = this.props.value;
-    var value = parseInt(e.target.value)
+    var value = e.target.value;
     if (e.target.checked) {
       requirements.push(value);
     }
@@ -55,8 +55,8 @@ class Requirements extends Component {
               key={i}
               control={
                 <Checkbox
-                  value={tutorial.id}
+                  value={tutorial._id}
-                  checked={this.props.value.filter(id => id === tutorial.id).length > 0}
+                  checked={this.props.value.filter(id => id === tutorial._id).length > 0}
                   onChange={(e) => this.onChange(e)}
                   name="requirements"
                   color="primary"

src/components/Tutorial/Instruction.js

@@ -22,11 +22,11 @@ class Instruction extends Component {
         {isHardware ?
           <Hardware picture={step.hardware} /> : null}
         {areRequirements > 0 ?
-          <Requirement tutorialIds={step.requirements} /> : null}
+          <Requirement requirements={step.requirements} /> : null}
         {step.media ?
           step.media.picture ?
             <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
-              <img src={`/media/tutorial/${step.media.picture}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
+              <img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
             </div>
             : step.media.youtube ?
               /*16:9; width: 800px; height: width/16*9=450px*/

src/components/Tutorial/Requirement.js

@@ -59,14 +59,14 @@ const styles = theme => ({
 class Requirement extends Component {
 
   render() {
-    var tutorialIds = this.props.tutorialIds;
+    var requirements = this.props.requirements;
+    var tutorialIds = requirements.map(requirement => requirement._id);
     return (
       <div style={{ marginTop: '20px', marginBottom: '5px' }}>
         <Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
         <List component="div">
           {tutorialIds.map((tutorialId, i) => {
-            // title must be provided together with ids
+            var title = requirements[i].title
-            // var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
             var status = this.props.status.filter(status => status._id === tutorialId)[0];
             var tasks = status.tasks;
             var error = status.tasks.filter(task => task.type === 'error').length > 0;
@@ -98,7 +98,7 @@ class Requirement extends Component {
                   </div>
                 </Tooltip>
                 <div style={{ height: '50px', width: 'calc(100% - 25px)', transform: 'translate(25px)' }} className={this.props.classes.hoverLink}>
-                  <Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/ }}>{/*title*/}Name hinzufügen über Datenbankeintrag</Typography>
+                  <Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)', textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere' }}>{title}</Typography>
                 </div>
               </Link>
             )
@@ -112,12 +112,12 @@ class Requirement extends Component {
 
 Requirement.propTypes = {
   status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
+  change: PropTypes.number.isRequired
 };
 
 const mapStateToProps = state => ({
   change: state.tutorial.change,
-  status: state.tutorial.status
+  status: state.tutorial.status,
 });
 
 export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withRouter(Requirement)));