From 84d4166cab5daa7ada3bf4127c88233207a25015 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Mon, 14 Sep 2020 19:00:15 +0200 Subject: [PATCH] display requirements --- src/components/Blockly/BlocklyWindow.js | 6 +- src/components/Breadcrumbs.js | 4 +- src/components/Tutorial/Assessment.js | 4 +- src/components/Tutorial/Instruction.js | 3 +- src/components/Tutorial/Requirement.js | 123 +++++++++++++ src/components/Tutorial/StepperHorizontal.js | 20 +-- src/components/Tutorial/TutorialHome.js | 3 +- src/components/Tutorial/tutorials.js | 175 ------------------- 8 files changed, 144 insertions(+), 194 deletions(-) create mode 100644 src/components/Tutorial/Requirement.js delete mode 100644 src/components/Tutorial/tutorials.js diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index 7b66b81..3746676 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -32,10 +32,12 @@ class BlocklyWindow extends Component { componentDidUpdate(props) { const workspace = Blockly.getMainWorkspace(); - if(props.initialXml !== this.props.initialXml){ + var initialXML = this.props.initialXml + if(props.initialXml !== initialXml){ // guarantees that the current xml-code (this.props.initialXml) is rendered workspace.clear(); - Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace); + if(!initialXML) initialXML = initialXml; + Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXML), workspace) ; } Blockly.svgResize(workspace); } diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js index bc3874d..71a57ea 100644 --- a/src/components/Breadcrumbs.js +++ b/src/components/Breadcrumbs.js @@ -15,7 +15,9 @@ class MyBreadcrumbs extends Component { {content.title} ))} - {this.props.content.slice(-1)[0].title} + + {this.props.content.slice(-1)[0].title} + : null ); diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index 3e2db26..0ff93e0 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -18,14 +18,14 @@ class Assessment extends Component { 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 (
{currentTask.headline} - + diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js index c250d1c..ee5c82a 100644 --- a/src/components/Tutorial/Instruction.js +++ b/src/components/Tutorial/Instruction.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import Hardware from './Hardware'; +import Requirement from './Requirement'; import BlocklyWindow from '../Blockly/BlocklyWindow'; import Grid from '@material-ui/core/Grid'; @@ -21,7 +22,7 @@ class Instruction extends Component { {isHardware ? : null} {areRequirements > 0 ? - Voraussetzungen: todo : null} + : null} {step.xml ? diff --git a/src/components/Tutorial/Requirement.js b/src/components/Tutorial/Requirement.js new file mode 100644 index 0000000..c0c70aa --- /dev/null +++ b/src/components/Tutorial/Requirement.js @@ -0,0 +1,123 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import clsx from 'clsx'; +import { withRouter, Link } from 'react-router-dom'; + +import tutorials from './tutorials.json'; + +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import List from '@material-ui/core/List'; +import Tooltip from '@material-ui/core/Tooltip'; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; + +const styles = theme => ({ + outerDiv: { + width: '50px', + height: '50px', + position: 'absolute', + color: fade(theme.palette.secondary.main, 0.6) + }, + outerDivError: { + stroke: fade(theme.palette.error.dark, 0.2), + color: fade(theme.palette.error.dark, 0.2) + }, + outerDivSuccess: { + stroke: fade(theme.palette.primary.main, 0.2), + color: fade(theme.palette.primary.main, 0.2) + }, + outerDivOther: { + stroke: fade(theme.palette.secondary.main, 0.2) + }, + innerDiv: { + width: 'inherit', + height: 'inherit', + display: 'table-cell', + verticalAlign: 'middle', + textAlign: 'center' + }, + link: { + color: theme.palette.text.primary, + position: 'relative', + height: '50px', + display: 'flex', + margin: '5px 0 5px 10px', + textDecoration: 'none' + }, + hoverLink: { + '&:hover': { + background: fade(theme.palette.secondary.main, 0.5), + borderRadius: '0 25px 25px 0 ' + } + } +}); + + +class Requirement extends Component { + + render() { + var tutorialIds = this.props.tutorialIds; + return ( +
+ Es bietet sich an folgende Tutorials vorab erfolgreich gelöst zu haben: + + {tutorialIds.map((tutorialId, i) => { + var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title; + var status = this.props.status.filter(status => status.id === tutorialId)[0]; + var tasks = status.tasks; + var error = status.tasks.filter(task => task.type === 'error').length > 0; + var success = status.tasks.filter(task => task.type === 'success').length/tasks.length + var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other'; + return( + + +
+
+ + {error || success === 1 ? + + : } + {success < 1 && !error ? + + + : null} + +
+
+
+ {error || success === 1 ? + + : 0 ? this.props.classes.outerDivSuccess : {}}>{Math.round(success*100)}% + } +
+
+
+ +
+ {title} +
+ + )} + )} + +
+ ); + }; +} + +Requirement.propTypes = { + status: PropTypes.array.isRequired, + change: PropTypes.number.isRequired, +}; + +const mapStateToProps = state => ({ + change: state.tutorial.change, + status: state.tutorial.status +}); + +export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(withRouter(Requirement))); diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index b54c1f7..46e73dc 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -10,10 +10,9 @@ import tutorials from './tutorials.json'; import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Tooltip from '@material-ui/core/Tooltip'; import Button from '@material-ui/core/Button'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -57,6 +56,7 @@ class StepperHorizontal extends Component { var error = tasks.filter(task => task.type === 'error').length > 0; var success = tasks.filter(task => task.type === 'success').length / tasks.length; var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other'; + var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title; return (
{error || success > 0 ? @@ -74,14 +74,12 @@ class StepperHorizontal extends Component { > {'<'} - - -
: ''}> -

{tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title}

- - - + +
+ {tutorialStatus !== 'Other' ?
: null} + {title} +
+