77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { workspaceName } from '../../actions/workspaceActions';
|
|
|
|
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
|
import CodeViewer from '../CodeViewer';
|
|
import WorkspaceFunc from '../WorkspaceFunc';
|
|
|
|
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Card from '@material-ui/core/Card';
|
|
import Typography from '@material-ui/core/Typography';
|
|
|
|
class Assessment extends Component {
|
|
|
|
componentDidMount() {
|
|
// alert(this.props.name);
|
|
this.props.workspaceName(this.props.name);
|
|
}
|
|
|
|
componentDidUpdate(props) {
|
|
if (props.name !== this.props.name) {
|
|
// alert(this.props.name);
|
|
this.props.workspaceName(this.props.name);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var tutorialId = this.props.currentTutorialId;
|
|
var currentTask = this.props.step;
|
|
var status = this.props.status.filter(status => status.id === tutorialId)[0];
|
|
var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id);
|
|
var statusTask = status.tasks[taskIndex];
|
|
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
|
|
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc solutionCheck /></div>
|
|
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
|
<Grid item xs={12} md={6} lg={8}>
|
|
<BlocklyWindow
|
|
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
|
|
blockDisabled
|
|
blocklyCSS={{ height: '65vH' }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
|
|
<Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
|
|
<Typography variant='h5'>Arbeitsauftrag</Typography>
|
|
<Typography>{currentTask.text}</Typography>
|
|
</Card>
|
|
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
|
<CodeViewer />
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Assessment.propTypes = {
|
|
currentTutorialId: PropTypes.number,
|
|
status: PropTypes.array.isRequired,
|
|
change: PropTypes.number.isRequired,
|
|
workspaceName: PropTypes.func.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
change: state.tutorial.change,
|
|
status: state.tutorial.status,
|
|
currentTutorialId: state.tutorial.currentId
|
|
});
|
|
|
|
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
|