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

Merge branch 'assessment' into backend-connection

Browse Source
This commit is contained in:
Delucse 2020-12-01 14:43:25 +01:00
commit 2e330d1215
6 changed files with 64 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/actions/tutorialActions.js
View File

@ -18,13 +18,14 @@ export const getTutorial = (id) => (dispatch, getState) => {
type: GET_TUTORIAL, type: GET_TUTORIAL,
payload: tutorial payload: tutorial
}); });
dispatch(returnSuccess(res.data.message, res.status));
}); });
}) })
.catch(err => { .catch(err => {
dispatch({type: TUTORIAL_PROGRESS});
if(err.response){ if(err.response){
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL')); dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL'));
} }
dispatch({type: TUTORIAL_PROGRESS});
}); });
}; };
@ -44,13 +45,14 @@ export const getTutorials = () => (dispatch, getState) => {
payload: tutorials payload: tutorials
}); });
dispatch({type: TUTORIAL_PROGRESS}); dispatch({type: TUTORIAL_PROGRESS});
dispatch(returnSuccess(res.data.message, res.status));
}); });
}) })
.catch(err => { .catch(err => {
dispatch({type: TUTORIAL_PROGRESS});
if(err.response){ if(err.response){
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL')); dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
} }
dispatch({type: TUTORIAL_PROGRESS});
}); });
}; };

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

6
src/components/Tutorial/Tutorial.js
View File

@ -22,17 +22,14 @@ class Tutorial extends Component {
componentDidMount() { componentDidMount() {
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
// this.props.tutorialId(Number(this.props.match.params.tutorialId));
} }
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) { if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
// this.props.tutorialId(Number(this.props.match.params.tutorialId));
} }
if(this.props.message.id === 'GET_TUTORIAL_FAIL'){ if(this.props.message.id === 'GET_TUTORIAL_FAIL'){
alert(this.props.message.msg); alert(this.props.message.msg);
this.props.clearMessages();
} }
} }
@ -48,7 +45,8 @@ class Tutorial extends Component {
return ( return (
<div> <div>
{this.props.isLoading ? null : {this.props.isLoading ? null :
!this.props.tutorial ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> !this.props.tutorial ?
this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> : null
: (() => { : (() => {
var tutorial = this.props.tutorial; var tutorial = this.props.tutorial;
var steps = this.props.tutorial.steps; var steps = this.props.tutorial.steps;

1
src/components/Tutorial/TutorialHome.js
View File

@ -58,7 +58,6 @@ class TutorialHome extends Component {
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){ if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
alert(this.props.message.msg); alert(this.props.message.msg);
this.props.clearMessages();
} }
} }

86
src/components/WorkspaceFunc.js
View File

@ -208,7 +208,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));
} }
@ -237,7 +237,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, type: 'success', key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' }); this.setState({ snackbar: true, type: 'success', key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
@ -248,7 +248,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}
@ -258,7 +258,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}
@ -267,34 +267,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}
@ -303,14 +307,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 <Dialog
open={this.state.open} open={this.state.open}

22
src/data/tutorials.js
View File

@ -1,11 +1,11 @@
let tutorials = [ // let tutorials = [
require('./tutorial/ErsteSchritte.json'), // require('./tutorial/ErsteSchritte.json'),
require('./tutorial/Schleifen.json'), // require('./tutorial/Schleifen.json'),
require('./tutorial/Wenn-DannBedingungen.json'), // require('./tutorial/Wenn-DannBedingungen.json'),
require('./tutorial/VerwendungVonVariablen.json'), // require('./tutorial/VerwendungVonVariablen.json'),
require('./tutorial/SendenVonMesswertenUeberLoRa.json'), // require('./tutorial/SendenVonMesswertenUeberLoRa.json'),
require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json'), // require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json'),
require('./tutorial/MesswerteAnDieOpenSenseMapSenden.json') // require('./tutorial/MesswerteAnDieOpenSenseMapSenden.json')
] // ]
//
module.exports = tutorials; // module.exports = tutorials;