462 lines
17 KiB
JavaScript
462 lines
17 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
|
|
import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
|
|
import { clearMessages } from '../../../actions/messageActions';
|
|
|
|
import axios from 'axios';
|
|
import { withRouter } from 'react-router-dom';
|
|
|
|
import { saveAs } from 'file-saver';
|
|
import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
|
|
|
|
import Breadcrumbs from '../../Breadcrumbs';
|
|
import Textfield from './Textfield';
|
|
import Step from './Step';
|
|
import Dialog from '../../Dialog';
|
|
import Snackbar from '../../Snackbar';
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import Button from '@material-ui/core/Button';
|
|
import Backdrop from '@material-ui/core/Backdrop';
|
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import FormHelperText from '@material-ui/core/FormHelperText';
|
|
import Radio from '@material-ui/core/Radio';
|
|
import RadioGroup from '@material-ui/core/RadioGroup';
|
|
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
|
import InputLabel from '@material-ui/core/InputLabel';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import FormControl from '@material-ui/core/FormControl';
|
|
import Select from '@material-ui/core/Select';
|
|
|
|
const styles = (theme) => ({
|
|
backdrop: {
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
color: '#fff',
|
|
},
|
|
errorColor: {
|
|
color: theme.palette.error.dark
|
|
},
|
|
errorButton: {
|
|
marginTop: '5px',
|
|
height: '40px',
|
|
backgroundColor: theme.palette.error.dark,
|
|
'&:hover':{
|
|
backgroundColor: theme.palette.error.dark
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
class Builder extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
tutorial: 'new',
|
|
open: false,
|
|
title: '',
|
|
content: '',
|
|
string: false,
|
|
snackbar: false,
|
|
key: '',
|
|
message: ''
|
|
};
|
|
this.inputRef = React.createRef();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.tutorialProgress();
|
|
// retrieve tutorials only if a potential user is loaded - authentication
|
|
// is finished (success or failed)
|
|
if(!this.props.authProgress){
|
|
this.props.getTutorials();
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(props, state) {
|
|
if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
|
|
// authentication is completed
|
|
this.props.getTutorials();
|
|
}
|
|
if(props.message !== this.props.message){
|
|
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
|
|
// alert(this.props.message.msg);
|
|
this.props.clearMessages();
|
|
}
|
|
else if(this.props.message.id === 'TUTORIAL_DELETE_SUCCESS'){
|
|
this.onChange('new');
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' });
|
|
}
|
|
else if(this.props.message.id === 'TUTORIAL_DELETE_FAIL'){
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.resetFull();
|
|
this.props.resetTutorial();
|
|
if(this.props.message.msg){
|
|
this.props.clearMessages();
|
|
}
|
|
}
|
|
|
|
uploadJsonFile = (jsonFile) => {
|
|
this.props.progress(true);
|
|
if (jsonFile.type !== 'application/json') {
|
|
this.props.progress(false);
|
|
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 = () => {
|
|
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);
|
|
this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success' });
|
|
} catch (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;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
toggle = () => {
|
|
this.setState({ open: !this.state });
|
|
}
|
|
|
|
onChange = (value) => {
|
|
this.props.resetTutorialBuilder();
|
|
this.props.tutorialId('');
|
|
this.setState({tutorial: value});
|
|
}
|
|
|
|
onChangeId = (value) => {
|
|
this.props.tutorialId(value);
|
|
if(this.state.tutorial === 'change'){
|
|
this.props.progress(true);
|
|
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
|
|
this.props.readJSON(tutorial);
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`, type: 'success' });
|
|
}
|
|
}
|
|
|
|
resetFull = () => {
|
|
this.props.resetTutorialBuilder();
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success' });
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
resetTutorial = () => {
|
|
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === this.props.id)[0];
|
|
this.props.readJSON(tutorial);
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`, type: 'success' });
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
submit = () => {
|
|
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' });
|
|
window.scrollTo(0, 0);
|
|
return false;
|
|
}
|
|
else {
|
|
// export steps without attribute 'url'
|
|
var steps = this.props.steps;
|
|
var newTutorial = new FormData();
|
|
newTutorial.append('title', this.props.title);
|
|
newTutorial.append('badge', this.props.badge);
|
|
steps.forEach((step, i) => {
|
|
if(step._id){
|
|
newTutorial.append(`steps[${i}][_id]`, step._id);
|
|
}
|
|
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 newTutorial;
|
|
}
|
|
}
|
|
|
|
submitNew = () => {
|
|
var newTutorial = this.submit();
|
|
if(newTutorial){
|
|
const config = {
|
|
success: res => {
|
|
var tutorial = res.data.tutorial;
|
|
this.props.history.push(`/tutorial/${tutorial._id}`);
|
|
},
|
|
error: err => {
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
|
window.scrollTo(0, 0);
|
|
}
|
|
};
|
|
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
|
|
.then(res => {
|
|
res.config.success(res);
|
|
})
|
|
.catch(err => {
|
|
err.config.error(err);
|
|
});
|
|
}
|
|
}
|
|
|
|
submitUpdate = () => {
|
|
var updatedTutorial = this.submit();
|
|
if(updatedTutorial){
|
|
const config = {
|
|
success: res => {
|
|
var tutorial = res.data.tutorial;
|
|
this.props.history.push(`/tutorial/${tutorial._id}`);
|
|
},
|
|
error: err => {
|
|
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
|
window.scrollTo(0, 0);
|
|
}
|
|
};
|
|
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
|
|
.then(res => {
|
|
res.config.success(res);
|
|
})
|
|
.catch(err => {
|
|
err.config.error(err);
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var filteredTutorials = this.props.tutorials.filter(tutorial => tutorial.creator === this.props.user.email);
|
|
return (
|
|
<div>
|
|
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: '/tutorial/builder', title: 'Builder' }]} />
|
|
|
|
<h1>Tutorial-Builder</h1>
|
|
|
|
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
|
|
<FormControlLabel style={{color: 'black'}}
|
|
value="new"
|
|
control={<Radio color="primary" />}
|
|
label="neues Tutorial erstellen"
|
|
labelPlacement="end"
|
|
/>
|
|
{filteredTutorials.length > 0 ?
|
|
<div>
|
|
<FormControlLabel style={{color: 'black'}}
|
|
disabled={this.props.index === 0}
|
|
value="change"
|
|
control={<Radio color="primary" />}
|
|
label="bestehendes Tutorial ändern"
|
|
labelPlacement="end"
|
|
/>
|
|
<FormControlLabel style={{color: 'black'}}
|
|
disabled={this.props.index === 0}
|
|
value="delete"
|
|
control={<Radio color="primary" />}
|
|
label="bestehendes Tutorial löschen"
|
|
labelPlacement="end"
|
|
/>
|
|
</div>
|
|
: null}
|
|
</RadioGroup>
|
|
|
|
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
|
|
|
|
{this.state.tutorial === 'new' ?
|
|
/*upload JSON*/
|
|
<div ref={this.inputRef}>
|
|
<input
|
|
style={{ display: 'none' }}
|
|
accept="application/json"
|
|
onChange={(e) => { this.uploadJsonFile(e.target.files[0]) }}
|
|
id="open-json"
|
|
type="file"
|
|
/>
|
|
<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>
|
|
: <FormControl variant="outlined" style={{width: '100%'}}>
|
|
<InputLabel id="select-outlined-label">Tutorial</InputLabel>
|
|
<Select
|
|
color='primary'
|
|
labelId="select-outlined-label"
|
|
value={this.props.id}
|
|
onChange={(e) => this.onChangeId(e.target.value)}
|
|
label="Tutorial"
|
|
>
|
|
{filteredTutorials.map(tutorial =>
|
|
<MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
|
|
)}
|
|
</Select>
|
|
</FormControl>
|
|
}
|
|
|
|
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
|
|
|
|
{this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ?
|
|
/*Tutorial-Builder-Form*/
|
|
<div>
|
|
{this.props.error.type ?
|
|
<FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
|
|
: null}
|
|
{/* <Id error={this.props.error.id} value={this.props.id} /> */}
|
|
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
|
|
<Textfield value={this.props.badge} property={'badge'} label={'Badge'} />
|
|
|
|
{this.props.steps.map((step, i) =>
|
|
<Step step={step} index={i} key={i} />
|
|
)}
|
|
|
|
{/*submit or reset*/}
|
|
<Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
|
|
{this.state.tutorial === 'new' ?
|
|
<div>
|
|
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
|
|
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
|
|
</div>
|
|
: <div>
|
|
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
|
|
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
|
|
</div>
|
|
}
|
|
|
|
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
|
|
<CircularProgress color="inherit" />
|
|
</Backdrop>
|
|
</div>
|
|
: null}
|
|
|
|
{this.state.tutorial === 'delete' && this.props.id !== '' ?
|
|
<Button
|
|
className={this.props.classes.errorButton}
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
|
|
: null}
|
|
|
|
<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.json} />
|
|
: null}
|
|
</Dialog>
|
|
|
|
<Snackbar
|
|
open={this.state.snackbar}
|
|
message={this.state.message}
|
|
type={this.state.type}
|
|
key={this.state.key}
|
|
/>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Builder.propTypes = {
|
|
getTutorials: PropTypes.func.isRequired,
|
|
resetTutorial: PropTypes.func.isRequired,
|
|
clearMessages: PropTypes.func.isRequired,
|
|
tutorialId: PropTypes.func.isRequired,
|
|
checkError: PropTypes.func.isRequired,
|
|
readJSON: PropTypes.func.isRequired,
|
|
jsonString: PropTypes.func.isRequired,
|
|
progress: PropTypes.func.isRequired,
|
|
deleteTutorial: PropTypes.func.isRequired,
|
|
resetTutorialBuilder: PropTypes.func.isRequired,
|
|
tutorialProgress: PropTypes.func.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
badge: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
steps: PropTypes.array.isRequired,
|
|
change: PropTypes.number.isRequired,
|
|
error: PropTypes.object.isRequired,
|
|
json: PropTypes.string.isRequired,
|
|
badge: PropTypes.string.isRequired,
|
|
isProgress: PropTypes.bool.isRequired,
|
|
tutorials: PropTypes.array.isRequired,
|
|
message: PropTypes.object.isRequired,
|
|
user: PropTypes.object.isRequired,
|
|
authProgress: PropTypes.bool.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
title: state.builder.title,
|
|
badge: state.builder.badge,
|
|
id: state.builder.id,
|
|
steps: state.builder.steps,
|
|
change: state.builder.change,
|
|
error: state.builder.error,
|
|
json: state.builder.json,
|
|
isProgress: state.builder.progress,
|
|
tutorials: state.tutorial.tutorials,
|
|
message: state.message,
|
|
user: state.auth.user,
|
|
authProgress: state.auth.progress
|
|
});
|
|
|
|
export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
|