@@ -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() {
From bde430dd40d0289968b5de67ca6ce75a1c33011e Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Thu, 17 Sep 2020 13:24:00 +0200
Subject: [PATCH 15/16] detect whitespaces and return readable filename
---
src/components/Compile.js | 6 ++++--
src/components/Tutorial/SolutionCheck.js | 2 +-
src/components/Tutorial/Tutorial.js | 4 +++-
src/components/WorkspaceFunc.js | 5 +++--
.../Tutorial => helpers}/compareXml.js | 0
src/helpers/whitespace.js | 15 +++++++++++++++
6 files changed, 26 insertions(+), 6 deletions(-)
rename src/{components/Tutorial => helpers}/compareXml.js (100%)
create mode 100644 src/helpers/whitespace.js
diff --git a/src/components/Compile.js b/src/components/Compile.js
index 19b35d4..f1945f6 100644
--- a/src/components/Compile.js
+++ b/src/components/Compile.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { workspaceName } from '../actions/workspaceActions';
+import { detectWhitespacesAndReturnReadableResult } from '../helpers/whitespace';
+
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
@@ -83,9 +85,9 @@ class Compile extends Component {
download = () => {
const id = this.state.id;
- const filename = this.state.name;
+ const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
this.toggleDialog();
- this.props.workspaceName(filename);
+ this.props.workspaceName(this.state.name);
window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
this.setState({ progress: false });
}
diff --git a/src/components/Tutorial/SolutionCheck.js b/src/components/Tutorial/SolutionCheck.js
index 0057787..084d2d1 100644
--- a/src/components/Tutorial/SolutionCheck.js
+++ b/src/components/Tutorial/SolutionCheck.js
@@ -8,7 +8,7 @@ import { withRouter } from 'react-router-dom';
import Compile from '../Compile';
import tutorials from './tutorials.json';
-import { checkXml } from './compareXml';
+import { checkXml } from '../../helpers/compareXml';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index fb4d452..48438d3 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@@ -11,6 +11,8 @@ import Instruction from './Instruction';
import Assessment from './Assessment';
import NotFound from '../NotFound';
+import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
+
import tutorials from './tutorials.json';
import Card from '@material-ui/core/Card';
@@ -38,7 +40,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;
+ var name = step ? `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}` : null;
return (
!Number.isInteger(currentTutorialId) || currentTutorialId < 1 || currentTutorialId > tutorials.length ?
diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js
index 856dea5..2beff96 100644
--- a/src/components/WorkspaceFunc.js
+++ b/src/components/WorkspaceFunc.js
@@ -7,6 +7,7 @@ import * as Blockly from 'blockly/core';
import { saveAs } from 'file-saver';
+import { detectWhitespacesAndReturnReadableResult } from '../helpers/whitespace';
import { initialXml } from './Blockly/initialXml.js';
import Compile from './Compile';
@@ -78,8 +79,8 @@ class WorkspaceFunc extends Component {
saveXmlFile = () => {
var code = this.props.xml;
this.toggleDialog();
- var fileName = this.state.name;
- this.props.workspaceName(fileName);
+ var fileName = detectWhitespacesAndReturnReadableResult(this.state.name);
+ this.props.workspaceName(this.state.name);
fileName = `${fileName}.xml`
var blob = new Blob([code], { type: 'text/xml' });
saveAs(blob, fileName);
diff --git a/src/components/Tutorial/compareXml.js b/src/helpers/compareXml.js
similarity index 100%
rename from src/components/Tutorial/compareXml.js
rename to src/helpers/compareXml.js
diff --git a/src/helpers/whitespace.js b/src/helpers/whitespace.js
new file mode 100644
index 0000000..e51bae2
--- /dev/null
+++ b/src/helpers/whitespace.js
@@ -0,0 +1,15 @@
+export const detectWhitespacesAndReturnReadableResult = (word) => {
+ var readableResult = '';
+ var space = false;
+ for(var i = 0; i < word.length; i++){
+ var letter = word[i];
+ if(/\s/g.test(letter)){
+ space = true;
+ }
+ else {
+ readableResult += space ? letter.toUpperCase() : letter;
+ space = false;
+ }
+ }
+ return readableResult;
+};
From d70207ea1ac3939499ad158e9ea1bf9c39635f4c Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Thu, 17 Sep 2020 14:13:30 +0200
Subject: [PATCH 16/16] breadcrumbs with inital home-link
---
src/components/Breadcrumbs.js | 36 ++++++++++++++++++++-----
src/components/NotFound.js | 2 +-
src/components/Tutorial/Tutorial.js | 2 +-
src/components/Tutorial/TutorialHome.js | 2 +-
4 files changed, 32 insertions(+), 10 deletions(-)
diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js
index 71a57ea..dc0af20 100644
--- a/src/components/Breadcrumbs.js
+++ b/src/components/Breadcrumbs.js
@@ -1,27 +1,49 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
+import clsx from 'clsx';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import { withStyles } from '@material-ui/core/styles';
+import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
import Typography from '@material-ui/core/Typography';
-class MyBreadcrumbs extends Component {
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ home: {
+ color: theme.palette.secondary.main,
+ width: '20px !important',
+ height: '20px',
+ marginTop: '2px'
+ },
+ hover: {
+ '&:hover': {
+ color: theme.palette.primary.main
+ }
+ }
+});
+
+class Breadcrumbs extends Component {
render() {
return (
- this.props.content && this.props.content.length > 1 ?
-
+ this.props.content && this.props.content.length > 0 ?
+
+
+
+
{this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
- {content.title}
+ {content.title}
))}
{this.props.content.slice(-1)[0].title}
-
+
: null
);
};
}
-export default MyBreadcrumbs;
+export default withStyles(styles, {withTheme: true})(Breadcrumbs);
diff --git a/src/components/NotFound.js b/src/components/NotFound.js
index 44b3ddb..85a9c6f 100644
--- a/src/components/NotFound.js
+++ b/src/components/NotFound.js
@@ -11,7 +11,7 @@ class NotFound extends Component {
render() {
return (
-
+
Die von Ihnen angeforderte Seite kann nicht gefunden werden.
Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.
{this.props.button ?
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index 48438d3..acce0c9 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@@ -46,7 +46,7 @@ class Tutorial extends Component {
:
-
+
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index dd804ff..2bf99f2 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -54,7 +54,7 @@ class TutorialHome extends Component {
render() {
return (
-
+
Tutorial-Übersicht