upload JSON string

src/components/Tutorial/Builder/Builder.js

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { checkError, readJSON, progress, resetTutorial } from '../../../actions/tutorialBuilderActions';
+import { checkError, readJSON, jsonString, progress, resetTutorial } from '../../../actions/tutorialBuilderActions';
 
 import { saveAs } from 'file-saver';
 
-import data from '../../../data/hardware.json';
 import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
 
 import Breadcrumbs from '../../Breadcrumbs';
 import Id from './Id';
-import Title from './Textfield';
+import Textfield from './Textfield';
 import Step from './Step';
+import Dialog from '../../Dialog';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -30,6 +30,12 @@ class Builder extends Component {
 
   constructor(props){
     super(props);
+    this.state = {
+      open: false,
+      title: '',
+      content: '',
+      string: false
+    };
     this.inputRef = React.createRef();
   }
 
@@ -57,30 +63,37 @@ class Builder extends Component {
   uploadJsonFile = (jsonFile) => {
     this.props.progress(true);
     if(jsonFile.type !== 'application/json'){
-      alert('falscher Dateityp');
       this.props.progress(false);
-      this.setState({ open: true, file: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.' });
+      this.setState({ open: true, string: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.'});
     }
     else {
       var reader = new FileReader();
       reader.readAsText(jsonFile);
       reader.onloadend = () => {
-        try {
-          var result = JSON.parse(reader.result);
-          if(!this.checkSteps(result.steps)){
-            result.steps = [{}];
-          }
-          this.props.readJSON(result);
-        } catch(err){
-          console.log(err);
-          this.props.progress(false);
-          alert('ungültige JSON-Datei');
-          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.' });
-        }
+        this.readJson(reader.result, true);
       };
     }
   }
 
+  uploadJsonString = () => {
+    this.setState({ open: true, string: true, title: 'JSON-String einfügen', content: ''});
+  }
+
+  readJson = (jsonString, isFile) => {
+    try {
+      var result = JSON.parse(jsonString);
+      if(!this.checkSteps(result.steps)){
+        result.steps = [{}];
+      }
+      this.props.readJSON(result);
+    } catch(err){
+      console.log(err);
+      this.props.progress(false);
+      this.props.jsonString('');
+      this.setState({ open: true, string: false, title: 'Ungültiges JSON-Format', content: `${isFile ? 'Die übergebene Datei' : 'Der übergebene String'} enthält nicht valides JSON. Bitte überprüfe ${isFile ? 'die JSON-Datei' : 'den JSON-String'} und versuche es erneut.`});
+    }
+  }
+
   checkSteps = (steps) => {
     if(!(steps && steps.length > 0)){
       return false;
@@ -88,6 +101,10 @@ class Builder extends Component {
     return true;
   }
 
+  toggle = () => {
+    this.setState({ open: !this.state });
+  }
+
 
   render() {
     return (
@@ -96,6 +113,7 @@ class Builder extends Component {
 
         <h1>Tutorial-Builder</h1>
 
+        {/*upload JSON*/}
         <div ref={this.inputRef}>
           <input
             style={{display: 'none'}}
@@ -107,30 +125,50 @@ class Builder extends Component {
           <label htmlFor="open-json">
             <Button component="span" style={{marginRight: '10px', marginBottom: '10px'}} variant='contained' color='primary'>Datei laden</Button>
           </label>
+          <Button style={{marginRight: '10px', marginBottom: '10px'}} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
         </div>
         <Divider variant='fullWidth' style={{margin: '10px 0 30px 0'}}/>
 
+        {/*Tutorial-Builder-Form*/}
         <Id error={this.props.error} value={this.props.id}/>
-        <Title value={this.props.title} property={'title'} label={'Titel'} error={this.props.error}/>
+        <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error}/>
 
         {this.props.steps.map((step, i) =>
           <Step step={step} index={i} />
-
         )}
 
-
+        {/*submit or reset*/}
         <Button style={{marginRight: '10px'}} variant='contained' color='primary' onClick={() => this.submit()}>Tutorial-Vorlage erstellen</Button>
         <Button variant='contained' onClick={() => this.reset()}>Zurücksetzen</Button>
+
         <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
           <CircularProgress color="inherit" />
         </Backdrop>
 
+        <Dialog
+          open={this.state.open}
+          maxWidth={this.state.string ? 'md' : 'sm'}
+          fullWidth={this.state.string}
+          title={this.state.title}
+          content={this.state.content}
+          onClose={this.toggle}
+          onClick={this.toggle}
+          button={'Schließen'}
+          actions={
+            this.state.string ?
+            <div>
+              <Button disabled={this.props.error.json || this.props.json === ''} variant='contained' onClick={() => {this.toggle(); this.props.progress(true); this.readJson(this.props.json, false);}} color="primary">Bestätigen</Button>
+              <Button onClick={() => {this.toggle(); this.props.jsonString('');}} color="primary">Abbrechen</Button>
+            </div>
+            : null
+          }
+        >
+          {this.state.string ?
+            <Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error}/>
+          : null}
+        </Dialog>
 
       </div>
-      /*<div style={{borderRadius: '25px', background: 'yellow', textAlign: 'center'}}>
-        <Typography variant='h4'>Tutorial-Builder</Typography>
-      </div>
-      */
     );
   };
 }
@@ -138,12 +176,14 @@ class Builder extends Component {
 Builder.propTypes = {
   checkError: PropTypes.func.isRequired,
   readJSON: PropTypes.func.isRequired,
+  jsonString: PropTypes.func.isRequired,
   progress: PropTypes.func.isRequired,
   resetTutorial: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   steps: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
   error: PropTypes.object.isRequired,
+  json: PropTypes.string.isRequired,
   isProgress: PropTypes.bool.isRequired
 };
 
@@ -153,7 +193,8 @@ const mapStateToProps = state => ({
   steps: state.builder.steps,
   change: state.builder.change,
   error: state.builder.error,
+  json: state.builder.json,
   isProgress: state.builder.progress
 });
 
-export default connect(mapStateToProps, { checkError, readJSON, progress, resetTutorial })(withStyles(styles, {withTheme: true})(Builder));
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, resetTutorial })(withStyles(styles, {withTheme: true})(Builder));