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

restriction of workspace functions in context tutorials

Browse Source
This commit is contained in:
Delucse 2020-12-01 14:37:32 +01:00
parent 2d29b8d7bd
commit 47f0ebb80d
2 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tutorial/Assessment.js
View File

@ -34,7 +34,7 @@ class Assessment extends Component {
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography> <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc solutionCheck /></div> <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
<Grid container spacing={2} style={{ marginBottom: '5px' }}> <Grid container spacing={2} style={{ marginBottom: '5px' }}>
<Grid item xs={12} md={6} lg={8}> <Grid item xs={12} md={6} lg={8}>
<BlocklyWindow <BlocklyWindow

86
src/components/WorkspaceFunc.js
View File

@ -216,7 +216,7 @@ class WorkspaceFunc extends Component {
this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' }); this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
} }
else { else {
if (!this.props.solutionCheck) { if (!this.props.assessment) {
var extensionPosition = xmlFile.name.lastIndexOf('.'); var extensionPosition = xmlFile.name.lastIndexOf('.');
this.props.workspaceName(xmlFile.name.substr(0, extensionPosition)); this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
} }
@ -245,7 +245,7 @@ class WorkspaceFunc extends Component {
workspace.options.maxBlocks = Infinity; workspace.options.maxBlocks = Infinity;
this.props.onChangeCode(); this.props.onChangeCode();
this.props.clearStats(); this.props.clearStats();
if (!this.props.solutionCheck) { if (!this.props.assessment) {
this.props.workspaceName(null); this.props.workspaceName(null);
} }
this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' }); this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
@ -256,7 +256,7 @@ class WorkspaceFunc extends Component {
render() { render() {
return ( return (
<div style={{ width: 'max-content', display: 'flex' }}> <div style={{ width: 'max-content', display: 'flex' }}>
{!this.props.solutionCheck ? {!this.props.assessment ?
<Tooltip title={`Name des Projekts${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ marginRight: '5px' }}> <Tooltip title={`Name des Projekts${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ marginRight: '5px' }}>
<div className={this.props.classes.workspaceName} onClick={() => { this.setState({ file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}> <div className={this.props.classes.workspaceName} onClick={() => { this.setState({ file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
{this.props.name && !isWidthDown('xs', this.props.width) ? <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography> : null} {this.props.name && !isWidthDown('xs', this.props.width) ? <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography> : null}
@ -266,7 +266,7 @@ class WorkspaceFunc extends Component {
</div> </div>
</Tooltip> </Tooltip>
: null} : null}
{this.props.solutionCheck ? <SolutionCheck /> : <Compile iconButton />} {this.props.assessment ? <SolutionCheck /> : <Compile iconButton />}
<Tooltip title='Blöcke speichern' arrow style={{ marginRight: '5px' }}> <Tooltip title='Blöcke speichern' arrow style={{ marginRight: '5px' }}>
<IconButton <IconButton
className={this.props.classes.button} className={this.props.classes.button}
@ -275,34 +275,38 @@ class WorkspaceFunc extends Component {
<FontAwesomeIcon icon={faSave} size="xs" /> <FontAwesomeIcon icon={faSave} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<div ref={this.inputRef} style={{ width: 'max-content', height: '40px', marginRight: '5px' }}> {!this.props.assessment?
<input <div ref={this.inputRef} style={{ width: 'max-content', height: '40px', marginRight: '5px' }}>
style={{ display: 'none' }} <input
accept="text/xml" style={{ display: 'none' }}
onChange={(e) => { this.uploadXmlFile(e.target.files[0]) }} accept="text/xml"
id="open-blocks" onChange={(e) => { this.uploadXmlFile(e.target.files[0]) }}
type="file" id="open-blocks"
/> type="file"
<label htmlFor="open-blocks"> />
<Tooltip title='Blöcke öffnen' arrow style={{ marginRight: '5px' }}> <label htmlFor="open-blocks">
<div className={this.props.classes.button} style={{ <Tooltip title='Blöcke öffnen' arrow style={{ marginRight: '5px' }}>
borderRadius: '50%', cursor: 'pointer', display: 'table-cell', <div className={this.props.classes.button} style={{
verticalAlign: 'middle', borderRadius: '50%', cursor: 'pointer', display: 'table-cell',
textAlign: 'center' verticalAlign: 'middle',
}}> textAlign: 'center'
<FontAwesomeIcon icon={faUpload} style={{ width: '18px', height: '18px' }} /> }}>
</div> <FontAwesomeIcon icon={faUpload} style={{ width: '18px', height: '18px' }} />
</Tooltip> </div>
</label> </Tooltip>
</div> </label>
<Tooltip title='Screenshot erstellen' arrow style={{ marginRight: '5px' }}> </div>
<IconButton : null}
className={this.props.classes.button} {!this.props.assessment?
onClick={() => { this.createFileName('svg'); }} <Tooltip title='Screenshot erstellen' arrow style={{ marginRight: '5px' }}>
> <IconButton
<FontAwesomeIcon icon={faCamera} size="xs" /> className={this.props.classes.button}
</IconButton> onClick={() => { this.createFileName('svg'); }}
</Tooltip> >
<FontAwesomeIcon icon={faCamera} size="xs" />
</IconButton>
</Tooltip>
: null}
<Tooltip title='Workspace zurücksetzen' arrow style={{ marginRight: '5px' }}> <Tooltip title='Workspace zurücksetzen' arrow style={{ marginRight: '5px' }}>
<IconButton <IconButton
className={this.props.classes.button} className={this.props.classes.button}
@ -311,14 +315,16 @@ class WorkspaceFunc extends Component {
<FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' /> <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title='Blöcke teilen' arrow> {!this.props.assessment?
<IconButton <Tooltip title='Blöcke teilen' arrow>
className={this.props.classes.button} <IconButton
onClick={() => this.shareBlocks()} className={this.props.classes.button}
> onClick={() => this.shareBlocks()}
<FontAwesomeIcon icon={faShareAlt} size="xs" flip='horizontal' /> >
</IconButton> <FontAwesomeIcon icon={faShareAlt} size="xs" flip='horizontal' />
</Tooltip> </IconButton>
</Tooltip>
:null}
<Dialog open={this.state.share} onClose={this.toggleDialog} aria-labelledby="form-dialog-title"> <Dialog open={this.state.share} onClose={this.toggleDialog} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Dein Link wurde erstellt.</DialogTitle> <DialogTitle id="form-dialog-title">Dein Link wurde erstellt.</DialogTitle>