step builder
This commit is contained in:
Delucse
parent
6d7f0fe609
commit
253424037c
Binary file not shown.
|
Before Width: | Height: | Size: 630 KiB |
120
src/components/Tutorial/Builder/Step.js
Normal file
120
src/components/Tutorial/Builder/Step.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { addStep, removeStep, changeStepIndex } from '../../../actions/tutorialBuilderActions';
|
||||||
|
|
||||||
|
import Textfield from './Textfield';
|
||||||
|
import StepType from './StepType';
|
||||||
|
import BlocklyExample from './BlocklyExample';
|
||||||
|
import Requirements from './Requirements';
|
||||||
|
import Hardware from './Hardware';
|
||||||
|
|
||||||
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
|
import Tooltip from '@material-ui/core/Tooltip';
|
||||||
|
import OutlinedInput from '@material-ui/core/OutlinedInput';
|
||||||
|
import InputLabel from '@material-ui/core/InputLabel';
|
||||||
|
import FormControl from '@material-ui/core/FormControl';
|
||||||
|
|
||||||
|
import { faPlus, faAngleDoubleUp, faAngleDoubleDown, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
const styles = (theme) => ({
|
||||||
|
button: {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.primary.contrastText,
|
||||||
|
width: '40px',
|
||||||
|
height: '40px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
color: theme.palette.primary.contrastText,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
class Step extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
var index = this.props.index;
|
||||||
|
var steps = this.props.steps;
|
||||||
|
return (
|
||||||
|
<div style={{borderRadius: '25px', background: 'lightgrey', padding: '10px 14px 10px 10px', marginBottom: '20px'}}>
|
||||||
|
<Typography variant='h6' style={{marginBottom: '10px', marginLeft: '4px'}}>Schritt {index+1}</Typography>
|
||||||
|
<div style={{display: 'flex', position: 'relative'}}>
|
||||||
|
<div style={{width: '40px', marginRight: '10px', position: 'absolute', left: '4px', bottom: '10px'}}>
|
||||||
|
<Tooltip title='Schritt hinzufügen' arrow>
|
||||||
|
<IconButton
|
||||||
|
className={this.props.classes.button}
|
||||||
|
style={index === 0 ? {} : {marginBottom: '5px'}}
|
||||||
|
onClick={() => this.props.addStep(index+1)}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faPlus} size="xs"/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
{index !== 0 ?
|
||||||
|
<div>
|
||||||
|
<Tooltip title={`Schritt ${index+1} nach oben schieben`} arrow>
|
||||||
|
<IconButton
|
||||||
|
disabled={index < 2}
|
||||||
|
className={this.props.classes.button}
|
||||||
|
style={{marginBottom: '5px'}}
|
||||||
|
onClick={() => this.props.changeStepIndex(index, index-1)}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faAngleDoubleUp} size="xs"/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={`Schritt ${index+1} nach unten schieben`} arrow>
|
||||||
|
<IconButton
|
||||||
|
disabled={index === steps.length-1}
|
||||||
|
className={this.props.classes.button}
|
||||||
|
style={{marginBottom: '5px'}}
|
||||||
|
onClick={() => this.props.changeStepIndex(index, index+1)}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faAngleDoubleDown} size="xs"/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={`Schritt ${index+1} löschen`} arrow>
|
||||||
|
<IconButton
|
||||||
|
disabled={index === 0}
|
||||||
|
className={this.props.classes.button}
|
||||||
|
onClick={() => this.props.removeStep(index)}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrash} size="xs"/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
<div style={{width: '100%', marginLeft: '54px'}}>
|
||||||
|
<StepType value={this.props.step.type} index={index} />
|
||||||
|
<Textfield value={this.props.step.headline} property={'headline'} label={'Überschrift'} index={index}/>
|
||||||
|
<Textfield value={this.props.step.text} property={'text'} label={this.props.step.type === 'task' ? 'Aufgabenstellung' : 'Instruktionen'} index={index} multiline/>
|
||||||
|
{index === 0 ?
|
||||||
|
<div>
|
||||||
|
<Requirements value={this.props.step.requirements} index={index}/>
|
||||||
|
<Hardware value={this.props.step.hardware} index={index} />
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
<BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
Step.propTypes = {
|
||||||
|
addStep: PropTypes.func.isRequired,
|
||||||
|
removeStep: PropTypes.func.isRequired,
|
||||||
|
changeStepIndex: PropTypes.func.isRequired,
|
||||||
|
steps: PropTypes.array.isRequired,
|
||||||
|
change: PropTypes.number.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
steps: state.builder.steps,
|
||||||
|
change: state.builder.change
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, { addStep, removeStep, changeStepIndex })(withStyles(styles, {withTheme: true})(Step));
|
||||||
128
src/data/hardware.json
Normal file
128
src/data/hardware.json
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "bmp280",
|
||||||
|
"name": "",
|
||||||
|
"src": "bmp280.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "breadboard",
|
||||||
|
"name": "",
|
||||||
|
"src": "breadboard.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "button",
|
||||||
|
"name": "",
|
||||||
|
"src": "button.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "hc04",
|
||||||
|
"name": "",
|
||||||
|
"src": "hc04.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "hdc1080",
|
||||||
|
"name": "",
|
||||||
|
"src": "hdc1080.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "jst-adapter",
|
||||||
|
"name": "",
|
||||||
|
"src": "jst-adapter.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "jst-jst",
|
||||||
|
"name": "",
|
||||||
|
"src": "jst-jst.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "jumperwire",
|
||||||
|
"name": "",
|
||||||
|
"src": "jumperwire.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ldr",
|
||||||
|
"name": "",
|
||||||
|
"src": "ldr.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "led",
|
||||||
|
"name": "",
|
||||||
|
"src": "led.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "microphone",
|
||||||
|
"name": "",
|
||||||
|
"src": "microphone.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "oled",
|
||||||
|
"name": "",
|
||||||
|
"src": "oled.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "piezo",
|
||||||
|
"name": "",
|
||||||
|
"src": "piezo.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "resistor-10kohm",
|
||||||
|
"name": "",
|
||||||
|
"src": "resistor-10kohm.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "resistor-470ohm",
|
||||||
|
"name": "",
|
||||||
|
"src": "resistor-470ohm.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "rgb-led",
|
||||||
|
"name": "",
|
||||||
|
"src": "rgb-led.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "sd-bee",
|
||||||
|
"name": "",
|
||||||
|
"src": "sd-bee.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "senseboxmcu",
|
||||||
|
"name": "",
|
||||||
|
"src": "senseboxmcu.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "usb-cable",
|
||||||
|
"name": "",
|
||||||
|
"src": "usb-cable.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "veml6070",
|
||||||
|
"name": "",
|
||||||
|
"src": "veml6070.png",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "wifi-bee",
|
||||||
|
"name": "",
|
||||||
|
"src": "wifi-bee.png",
|
||||||
|
"url": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
x
Reference in New Issue
Block a user