diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 272c3ad..70cb661 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -21,7 +21,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import LinearProgress from '@material-ui/core/LinearProgress'; import Tour from 'reactour' -import * as steps from './Tour'; +import { home, assessment } from './Tour'; import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faQuestionCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from 'blockly' @@ -68,6 +68,11 @@ class Navbar extends Component { } render() { + var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname); + var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname); + var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) && + !this.props.tutorialIsLoading && this.props.tutorial && + this.props.tutorial.steps[this.props.activeStep].type === 'task'; return (
senseBox-Logo - {/^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname) ? + {isTutorial ? Tutorial : null} - {/^\/(\/.*$|$)/g.test(this.props.location.pathname) ? + {isHome ? { this.openTour(); }} style={{ margin: '0 30px 0 auto' }} > - + - : null} + + : null} + {isAssessment ? + + { this.openTour(); }} + style={{ margin: '0 30px 0 auto' }} + > + + + + : null} { this.closeTour(); }} /> @@ -184,14 +202,18 @@ Navbar.propTypes = { tutorialIsLoading: PropTypes.bool.isRequired, projectIsLoading: PropTypes.bool.isRequired, isAuthenticated: PropTypes.bool.isRequired, - user: PropTypes.object + user: PropTypes.object, + tutorial: PropTypes.object.isRequired, + activeStep: PropTypes.number.isRequired }; const mapStateToProps = state => ({ tutorialIsLoading: state.tutorial.progress, projectIsLoading: state.project.progress, isAuthenticated: state.auth.isAuthenticated, - user: state.auth.user + user: state.auth.user, + tutorial: state.tutorial.tutorials[0], + activeStep: state.tutorial.activeStep, }); export default connect(mapStateToProps, { logout })(withStyles(styles, { withTheme: true })(withRouter(Navbar))); diff --git a/src/components/Tour.js b/src/components/Tour.js index a33d7c8..a8ac7c9 100644 --- a/src/components/Tour.js +++ b/src/components/Tour.js @@ -1,4 +1,4 @@ -export const steps = [ +export const home = [ { selector: '.workspaceFunc', content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen', @@ -20,3 +20,10 @@ export const steps = [ content: 'Im Menü findest du Tutorials und eine Gallery mit verschiedenen Beispiel Programmen.', }, ]; + +export const assessment = [ + { + selector: '.workspaceFunc', + content: 'Hier findest du alle Buttons um dein Programm zu übertragen, zu speichern oder zu teilen', + } +];