schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add more translations and resolve issues

Browse Source
This commit is contained in:
Mario
2020-12-14 13:50:44 +01:00
parent 7d1d2409e4
commit e5204bb4d5
20 changed files with 362 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Builder/Builder.js
+65 -68
View File
@@ -1,15 +1,13 @@
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 { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder } from '../../../actions/tutorialBuilderActions';
import { getTutorials, resetTutorial, deleteTutorial } 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';
@@ -43,7 +41,7 @@ const styles = (theme) => ({
marginTop: '5px',
height: '40px',
backgroundColor: theme.palette.error.dark,
'&:hover':{
'&:hover': {
backgroundColor: theme.palette.error.dark
}
}
@@ -72,16 +70,16 @@ class Builder extends Component {
}
componentDidUpdate(props, state) {
if(props.message !== this.props.message){
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
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'){
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'){
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' });
}
}
@@ -90,7 +88,7 @@ class Builder extends Component {
componentWillUnmount() {
this.resetFull();
this.props.resetTutorial();
if(this.props.message.msg){
if (this.props.message.msg) {
this.props.clearMessages();
}
}
@@ -143,12 +141,12 @@ class Builder extends Component {
onChange = (value) => {
this.props.resetTutorialBuilder();
this.props.tutorialId('');
this.setState({tutorial: value});
this.setState({ tutorial: value });
}
onChangeId = (value) => {
this.props.tutorialId(value);
if(this.state.tutorial === 'change'){
if (this.state.tutorial === 'change') {
this.props.progress(true);
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
this.props.readJSON(tutorial);
@@ -186,8 +184,8 @@ class Builder extends Component {
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
if (i === 0 && step.type === 'instruction') {
if (step.requirements) { // optional
step.requirements.forEach((requirement, j) => {
newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
});
@@ -196,14 +194,14 @@ class Builder extends Component {
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
});
}
if(step.xml){ // optional
if (step.xml) { // optional
newTutorial.append(`steps[${i}][xml]`, step.xml);
}
if(step.media){ // optional
if(step.media.youtube){
if (step.media) { // optional
if (step.media.youtube) {
newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
}
if(step.media.picture){
if (step.media.picture) {
newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
}
}
@@ -214,7 +212,7 @@ class Builder extends Component {
submitNew = () => {
var newTutorial = this.submit();
if(newTutorial){
if (newTutorial) {
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial)
.then(res => {
var tutorial = res.data.tutorial;
@@ -229,7 +227,7 @@ class Builder extends Component {
submitUpdate = () => {
var updatedTutorial = this.submit();
if(updatedTutorial){
if (updatedTutorial) {
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial)
.then(res => {
var tutorial = res.data.tutorial;
@@ -251,30 +249,30 @@ class Builder extends Component {
<h1>Tutorial-Builder</h1>
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
<FormControlLabel style={{color: 'black'}}
<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}
<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' }} />
@@ -294,7 +292,7 @@ class Builder extends Component {
</label>
<Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
</div>
: <FormControl variant="outlined" style={{width: '100%'}}>
: <FormControl variant="outlined" style={{ width: '100%' }}>
<InputLabel id="select-outlined-label">Tutorial</InputLabel>
<Select
color='primary'
@@ -313,37 +311,37 @@ class Builder extends Component {
<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'} />
/*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} />
)}
{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>
{/*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>
}
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
<CircularProgress color="inherit" />
</Backdrop>
</div>
: null}
: null}
{this.state.tutorial === 'delete' && this.props.id !== '' ?
<Button
@@ -351,7 +349,7 @@ class Builder extends Component {
variant='contained'
color='primary'
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
: null}
: null}
<Dialog
open={this.state.open}
@@ -406,7 +404,6 @@ Builder.propTypes = {
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,