106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
|
|
|
|
import hardware from '../../../data/hardware.json';
|
|
|
|
import { fade } from '@material-ui/core/styles/colorManipulator';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
|
import GridList from '@material-ui/core/GridList';
|
|
import GridListTile from '@material-ui/core/GridListTile';
|
|
import GridListTileBar from '@material-ui/core/GridListTileBar';
|
|
import FormHelperText from '@material-ui/core/FormHelperText';
|
|
import FormLabel from '@material-ui/core/FormLabel';
|
|
|
|
const styles = theme => ({
|
|
multiGridListTile: {
|
|
background: fade(theme.palette.secondary.main, 0.5),
|
|
height: '30px'
|
|
},
|
|
multiGridListTileTitle: {
|
|
color: theme.palette.text.primary
|
|
},
|
|
border: {
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
width: 'calc(100% - 4px)',
|
|
height: 'calc(100% - 4px)',
|
|
border: `2px solid ${theme.palette.primary.main}`
|
|
}
|
|
},
|
|
active: {
|
|
cursor: 'pointer',
|
|
width: 'calc(100% - 4px)',
|
|
height: 'calc(100% - 4px)',
|
|
border: `2px solid ${theme.palette.primary.main}`
|
|
},
|
|
errorColor: {
|
|
color: theme.palette.error.dark,
|
|
lineHeight: 'initial',
|
|
marginBottom: '10px'
|
|
}
|
|
});
|
|
|
|
class Requirements extends Component {
|
|
|
|
onChange = (hardware) => {
|
|
var hardwareArray = this.props.value;
|
|
if(hardwareArray.filter(value => value === hardware).length > 0){
|
|
hardwareArray = hardwareArray.filter(value => value !== hardware);
|
|
}
|
|
else {
|
|
hardwareArray.push(hardware);
|
|
if(this.props.error.steps[this.props.index].hardware){
|
|
this.props.deleteError(this.props.index, 'hardware');
|
|
}
|
|
}
|
|
this.props.changeContent(this.props.index, 'hardware', hardwareArray);
|
|
if(hardwareArray.length === 0){
|
|
this.props.setError(this.props.index, 'hardware');
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
|
|
return (
|
|
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
|
|
<FormLabel style={{color: 'black'}}>Hardware</FormLabel>
|
|
<FormHelperText style={this.props.error.steps[this.props.index].hardware ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
|
|
{this.props.error.steps[this.props.index].hardware ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
|
|
<GridList cellHeight={100} cols={cols} spacing={10}>
|
|
{hardware.map((picture,i) => (
|
|
<GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>
|
|
<div style={{margin: 'auto', width: 'max-content'}}>
|
|
<img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} />
|
|
</div>
|
|
<GridListTileBar
|
|
classes={{root: this.props.classes.multiGridListTile}}
|
|
title={
|
|
<div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
|
|
{picture.name}
|
|
</div>
|
|
}
|
|
/>
|
|
</GridListTile>
|
|
))}
|
|
</GridList>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Requirements.propTypes = {
|
|
changeContent: PropTypes.func.isRequired,
|
|
setError: PropTypes.func.isRequired,
|
|
deleteError: PropTypes.func.isRequired,
|
|
change: PropTypes.number.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
change: state.builder.change
|
|
});
|
|
|
|
export default connect(mapStateToProps, { changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(withWidth()(Requirements)));
|