From c85c96468c69b4498392e5473ef469e15b5e525a Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Thu, 17 Sep 2020 12:56:43 +0200 Subject: [PATCH] name of tutorial workspace is automatically derived from the tutorial title and the step heading --- src/components/Compile.js | 2 +- src/components/Tutorial/Assessment.js | 18 ++++++++++++++++-- src/components/Tutorial/Tutorial.js | 8 ++++++-- src/components/WorkspaceFunc.js | 15 +++++++++++++++ 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/components/Compile.js b/src/components/Compile.js index f17e7c9..19b35d4 100644 --- a/src/components/Compile.js +++ b/src/components/Compile.js @@ -120,7 +120,7 @@ class Compile extends Component { : - } diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index ead69ec..da5e7f1 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -1,6 +1,7 @@ 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 SolutionCheck from './SolutionCheck'; @@ -14,6 +15,18 @@ 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; @@ -47,7 +60,8 @@ class Assessment extends Component { Assessment.propTypes = { currentTutorialId: PropTypes.number, status: PropTypes.array.isRequired, - change: PropTypes.number.isRequired + change: PropTypes.number.isRequired, + workspaceName: PropTypes.func.isRequired }; const mapStateToProps = state => ({ @@ -56,4 +70,4 @@ const mapStateToProps = state => ({ currentTutorialId: state.tutorial.currentId }); -export default connect(mapStateToProps, null)(withWidth()(Assessment)); +export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment)); diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index e2a9d38..fb4d452 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { workspaceName } from '../../actions/workspaceActions'; import { tutorialId, tutorialStep } from '../../actions/tutorialActions'; import Breadcrumbs from '../Breadcrumbs'; @@ -29,6 +30,7 @@ class Tutorial extends Component { componentWillUnmount(){ this.props.tutorialId(null); + this.props.workspaceName(null); } render() { @@ -36,6 +38,7 @@ class Tutorial extends Component { var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0]; var steps = tutorial ? tutorial.steps : null; var step = steps ? steps[this.props.activeStep] : null; + var name = step ? `${tutorial.title.replace(/\s/g,'')}_${step.headline.replace(/\s/g,'')}` : null; return ( !Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ? @@ -52,7 +55,7 @@ class Tutorial extends Component { {step ? step.type === 'instruction' ? - : // if step.type === 'assessment' + : // if step.type === 'assessment' : null}
@@ -69,6 +72,7 @@ class Tutorial extends Component { Tutorial.propTypes = { tutorialId: PropTypes.func.isRequired, tutorialStep: PropTypes.func.isRequired, + workspaceName: PropTypes.func.isRequired, currentTutorialId: PropTypes.number, status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, @@ -82,4 +86,4 @@ const mapStateToProps = state => ({ activeStep: state.tutorial.activeStep }); -export default connect(mapStateToProps, { tutorialId, tutorialStep })(Tutorial); +export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial); diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js index 52b2006..856dea5 100644 --- a/src/components/WorkspaceFunc.js +++ b/src/components/WorkspaceFunc.js @@ -65,6 +65,12 @@ class WorkspaceFunc extends Component { }; } + componentDidUpdate(props){ + if(props.name !== this.props.name){ + this.setState({name: this.props.name}); + } + } + toggleDialog = () => { this.setState({ open: !this.state }); } @@ -112,6 +118,12 @@ class WorkspaceFunc extends Component { Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace) 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 { + if(!this.props.solutionCheck){ + var extensionPosition = xmlFile.name.lastIndexOf('.'); + this.props.workspaceName(xmlFile.name.substr(0, extensionPosition)); + } + } } catch(err){ this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' }); } @@ -129,6 +141,9 @@ class WorkspaceFunc extends Component { workspace.options.maxBlocks = Infinity; this.props.onChangeCode(); this.props.clearStats(); + if(!this.props.solutionCheck){ + this.props.workspaceName(null); + } } render() {