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

Merge branch 'tutorial'

Browse Source
This commit is contained in:
Delucse
2020-09-30 15:59:22 +02:00
parent 67cc477d28 9da57c5067
commit 1cd00dab3f
12 changed files with 268 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Builder/BlocklyExample.js
+3 -2
View File
@@ -107,7 +107,7 @@ class BlocklyExample extends Component {
setXml = () => {
var xml = this.props.xml;
this.props.changeContent(this.props.index, 'xml', xml);
this.props.changeContent(xml, this.props.index, 'xml');
this.setState({input: moment(Date.now()).format('LTS')});
}
@@ -134,7 +134,8 @@ class BlocklyExample extends Component {
{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 ? (() => {
{/* ensure that the correct xml-file is displayed in the workspace */}
{this.state.checked && this.state.xml? (() => {
return(
<div style={{marginTop: '10px'}}>
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
src/components/Tutorial/Builder/Builder.js
+8 -1
View File
@@ -58,10 +58,17 @@ class Builder extends Component {
window.scrollTo(0, 0);
}
else{
// export steps without attribute 'url'
var steps = this.props.steps.map(step => {
if(step.url){
delete step.url;
}
return step;
});
var tutorial = {
id: this.props.id,
title: this.props.title,
steps: this.props.steps
steps: steps
}
var blob = new Blob([JSON.stringify(tutorial)], { type: 'text/json' });
saveAs(blob, `${detectWhitespacesAndReturnReadableResult(tutorial.title)}.json`);
src/components/Tutorial/Builder/Hardware.js
+1 -1
View File
@@ -56,7 +56,7 @@ class Requirements extends Component {
this.props.deleteError(this.props.index, 'hardware');
}
}
this.props.changeContent(this.props.index, 'hardware', hardwareArray);
this.props.changeContent(hardwareArray, this.props.index, 'hardware');
if(hardwareArray.length === 0){
this.props.setError(this.props.index, 'hardware');
}
src/components/Tutorial/Builder/Media.js
+178
View File
@@ -0,0 +1,178 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { changeContent, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import Textfield from './Textfield';
import { withStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Button from '@material-ui/core/Button';
const styles = (theme) => ({
errorColor: {
color: theme.palette.error.dark
},
errorBorder: {
border: `1px solid ${theme.palette.error.dark}`
},
errorButton: {
marginTop: '5px',
height: '40px',
backgroundColor: theme.palette.error.dark,
'&:hover':{
backgroundColor: theme.palette.error.dark
}
}
});
class Media extends Component {
constructor(props){
super(props);
this.state={
checked: props.value ? true : false,
error: false,
radioValue: !props.picture && !props.youtube ? 'picture' : props.picture ? 'picture' : 'youtube'
};
}
componentDidUpdate(props){
if(props.value !== this.props.value){
this.setState({ checked: this.props.value ? true : false });
}
}
onChangeSwitch = (value) => {
var oldValue = this.state.checked;
this.setState({checked: value});
if(oldValue !== value){
if(value){
this.props.setError(this.props.index, 'media');
} else {
this.props.deleteError(this.props.index, 'media');
this.props.deleteProperty(this.props.index, 'media');
this.props.deleteProperty(this.props.index, 'url');
this.setState({ error: false});
}
}
}
onChangeRadio = (value) => {
this.props.setError(this.props.index, 'media');
var oldValue = this.state.radioValue;
this.setState({radioValue: value, error: false});
// delete property 'oldValue', so that all old media files are reset
this.props.deleteProperty(this.props.index, 'media', oldValue);
if(oldValue === 'picture'){
this.props.deleteProperty(this.props.index, 'url');
}
}
uploadPicture = (pic) => {
if(!(/^image\/.*/.test(pic.type))){
this.props.setError(this.props.index, 'media');
this.setState({ error: true });
this.props.deleteProperty(this.props.index, 'url');
}
else {
this.props.deleteError(this.props.index, 'media');
this.setState({ error: false });
this.props.changeContent(URL.createObjectURL(pic), this.props.index, 'url');
}
this.props.changeContent(pic.name, this.props.index, 'media', 'picture');
}
render() {
return (
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
<FormControlLabel
labelPlacement="end"
label={"Medien"}
control={
<Switch
checked={this.state.checked}
onChange={(e) => this.onChangeSwitch(e.target.checked)}
color="primary"
/>
}
/>
{this.state.checked ?
<div>
<RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}>
<FormControlLabel style={{color: 'black'}}
value="picture"
control={<Radio color="primary" />}
label="Bild"
labelPlacement="end"
/>
<FormControlLabel style={{color: 'black'}}
value="youtube"
control={<Radio color="primary" />}
label="Youtube-Video"
labelPlacement="end"
/>
</RadioGroup>
{this.state.radioValue === 'picture' ?
<div>
{!this.props.error ?
<div>
<FormHelperText style={{lineHeight: 'initial', marginBottom: '10px'}}>{`Beachte, dass das Foto zusätzlich in den Ordner public/media/tutorial unter dem Namen '${this.props.picture}' abgespeichert werden muss.`}</FormHelperText>
<img src={this.props.url ? this.props.url : `/media/tutorial/${this.props.picture}`} alt={this.props.url ? '' : `Das Bild '${this.props.picture}' konnte nicht im Ordner public/media/tutorial gefunden werden und kann daher nicht angezeigt werden.`} style={{maxHeight: '180px', maxWidth: '360px', marginBottom: '5px'}}/>
</div>
: <div
style={{height: '150px', maxWidth: '250px', marginBottom: '5px', justifyContent: "center", alignItems: "center", display:"flex", padding: '20px'}}
className={this.props.error ? this.props.classes.errorBorder : null} >
{this.state.error ?
<FormHelperText style={{lineHeight: 'initial', textAlign: 'center'}} className={this.props.classes.errorColor}>{`Die übergebene Datei entspricht nicht dem geforderten Bild-Format. Überprüfe, ob es sich um ein Bild handelt und versuche es nochmal.`}</FormHelperText>
: <FormHelperText style={{lineHeight: 'initial', textAlign: 'center'}} className={this.props.classes.errorColor}>{`Wähle ein Bild aus.`}</FormHelperText>
}
</div>}
{/*upload picture*/}
<div>
<input
style={{display: 'none'}}
accept="image/*"
onChange={(e) => {this.uploadPicture(e.target.files[0]);}}
id={`picture ${this.props.index}`}
type="file"
/>
<label htmlFor={`picture ${this.props.index}`}>
<Button component="span" className={this.props.error ? this.props.classes.errorButton : null} style={{marginRight: '10px', marginBottom: '10px'}} variant='contained' color='primary'>Bild auswählen</Button>
</label>
</div>
</div>
:
/*youtube-video*/
<div>
<Textfield value={this.props.value && this.props.value.youtube} property={'media'} property2={'youtube'} label={'Youtube-ID'} index={this.props.index} error={this.props.error} errorText={`Gib eine Youtube-ID ein.`}/>
{this.props.youtube && !this.props.error ?
<div>
<FormHelperText style={{lineHeight: 'initial', margin: '0 25px 10px 25px'}}>{`Stelle sicher, dass das unten angezeigte Youtube-Video funktioniert, andernfalls überprüfe die Youtube-ID.`}</FormHelperText>
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}>
<iframe title={this.props.youtube} style={{borderRadius: '25px', position: 'absolute', top: '0', left: '0', width: '100%', height: '100%'}} src={`https://www.youtube.com/embed/${this.props.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</div>
</div>
: null}
</div>
}
</div>
: null}
</div>
);
};
}
Media.propTypes = {
changeContent: PropTypes.func.isRequired,
deleteProperty: PropTypes.func.isRequired,
setError: PropTypes.func.isRequired,
deleteError: PropTypes.func.isRequired,
};
export default connect(null, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Media));
src/components/Tutorial/Builder/Requirements.js
+1 -1
View File
@@ -23,7 +23,7 @@ class Requirements extends Component {
else {
requirements = requirements.filter(requirement => requirement !== value);
}
this.props.changeContent(this.props.index, 'requirements', requirements);
this.props.changeContent(requirements, this.props.index, 'requirements');
}
render() {
src/components/Tutorial/Builder/Step.js
+4
View File
@@ -10,6 +10,7 @@ import StepType from './StepType';
import BlocklyExample from './BlocklyExample';
import Requirements from './Requirements';
import Hardware from './Hardware';
import Media from './Media';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
@@ -103,6 +104,9 @@ class Step extends Component {
<Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error.steps[index].hardware}/>
</div>
: null}
{this.props.step.type === 'instruction' ?
<Media value={this.props.step.media} picture={this.props.step.media && this.props.step.media.picture} youtube={this.props.step.media && this.props.step.media.youtube} url={this.props.step.url} index={index} error={this.props.error.steps[index].media} />
: null}
<BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error.steps[index].xml ? true : false}/>
</div>
</div>
src/components/Tutorial/Builder/StepType.js
+1 -1
View File
@@ -10,7 +10,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
class StepType extends Component {
onChange = (value) => {
this.props.changeContent(this.props.index, 'type', value);
this.props.changeContent(value, this.props.index, 'type');
// delete property 'xml', so that all used blocks are reset
this.props.deleteProperty(this.props.index, 'xml');
if(value === 'task'){
src/components/Tutorial/Builder/Textfield.js
+4 -2
View File
@@ -28,7 +28,9 @@ class Textfield extends Component {
componentDidMount(){
if(this.props.error){
this.props.deleteError(this.props.index, this.props.property);
if(this.props.property !== 'media'){
this.props.deleteError(this.props.index, this.props.property);
}
}
}
@@ -41,7 +43,7 @@ class Textfield extends Component {
this.props.jsonString(value);
}
else {
this.props.changeContent(this.props.index, this.props.property, value);
this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
}
if(value.replace(/\s/g,'') === ''){
this.props.setError(this.props.index, this.props.property);
src/components/Tutorial/Instruction.js
+11
View File
@@ -23,6 +23,17 @@ class Instruction extends Component {
<Hardware picture={step.hardware}/> : null}
{areRequirements > 0 ?
<Requirement tutorialIds={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={{maxWidth: '100%'}}/>
</div>
: step.media.youtube ?
<div style={{position: 'relative', paddingBottom: '56.25%', height: 0}}>
<iframe title={step.media.youtube} style={{position: 'absolute', top: '0', left: '0', width: '100%', height: '100%'}} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</div>
: null
: null}
{step.xml ?
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12}>