108 lines
4.0 KiB
JavaScript
108 lines
4.0 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 { 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';
|
|
import * as Blockly from 'blockly'
|
|
|
|
|
|
const styles = theme => ({
|
|
multiGridListTile: {
|
|
background: theme.palette.primary.main,
|
|
opacity: 0.9,
|
|
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) {
|
|
this.props.deleteError(this.props.index, 'hardware');
|
|
}
|
|
}
|
|
this.props.changeContent(hardwareArray, this.props.index, 'hardware');
|
|
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 ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>{Blockly.Msg.builder_hardware_order}</FormHelperText>
|
|
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>{Blockly.Msg.builder_hardware_helper}</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)));
|