From f19842ccaebdbfd8a4badd763142db33d3bd0de6 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Fri, 11 Sep 2020 17:31:06 +0200 Subject: [PATCH] status of tutorial and belonging tasks --- src/actions/tutorialActions.js | 39 +++++++++---- src/components/Tutorial/Assessment.js | 16 +++-- src/components/Tutorial/StepperHorizontal.js | 61 ++++++++++++-------- src/components/Tutorial/StepperVertical.js | 30 +++++++--- src/components/Tutorial/Tutorial.js | 4 +- src/components/Tutorial/TutorialHome.js | 56 ++++++++++++------ src/reducers/tutorialReducer.js | 13 ++--- 7 files changed, 147 insertions(+), 72 deletions(-) diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 147c97b..31e3b6e 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,15 +1,25 @@ import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; +import tutorials from '../components/Tutorial/tutorials.json'; + export const tutorialChange = () => (dispatch) => { dispatch({ type: TUTORIAL_CHANGE }); }; -export const tutorialCheck = (status) => (dispatch, getState) => { +export const tutorialCheck = (status, step) => (dispatch, getState) => { var tutorialsStatus = getState().tutorial.status; var id = getState().tutorial.currentId; - tutorialsStatus[id] = {...tutorialsStatus[id], status: status}; + var activeStep = getState().tutorial.activeStep; + var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps; + var tasks = steps.filter(step => step.type === 'task'); + var tasksIndex = tasks.indexOf(steps[activeStep]); + var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id); + tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { + ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], + type: status + }; dispatch({ type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, payload: tutorialsStatus @@ -19,14 +29,23 @@ export const tutorialCheck = (status) => (dispatch, getState) => { export const storeTutorialXml = (code) => (dispatch, getState) => { var id = getState().tutorial.currentId; - var level = getState().tutorial.level; - if(id !== null && level === 'assessment'){ - var tutorialsStatus = getState().tutorial.status; - tutorialsStatus[id] = {...tutorialsStatus[id], xml: code}; - dispatch({ - type: TUTORIAL_XML, - payload: tutorialsStatus - }); + if(id !== null){ + var activeStep = getState().tutorial.activeStep; + var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps; + if(steps[activeStep].type === 'task'){ + var tutorialsStatus = getState().tutorial.status; + var tasks = steps.filter(step => step.type === 'task'); + var tasksIndex = tasks.indexOf(steps[activeStep]); + var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id); + tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { + ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], + xml: code + }; + dispatch({ + type: TUTORIAL_XML, + payload: tutorialsStatus + }); + } } }; diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index 88c3cc9..f15f79b 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -13,20 +13,26 @@ import Typography from '@material-ui/core/Typography'; class Assessment extends Component { render() { - var currentTutorialId = this.props.currentTutorialId; - var step = this.props.step + var tutorialId = this.props.currentTutorialId; + var steps = this.props.steps; + var currentTask = this.props.step; + var tasks = steps.filter(task => task.type === 'task'); + var taskIndex = tasks.indexOf(currentTask); + var status = this.props.status.filter(status => status.id === tutorialId)[0]; + var statusTask = status.tasks[taskIndex] + return (
- {step.headline} + {currentTask.headline} - + Arbeitsauftrag - {step.text1} + {currentTask.text1}
diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index cd520ae..10aa0ff 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -21,6 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const styles = (theme) => ({ stepper: { width: 'calc(100% - 40px)', + height: '40px', borderRadius: '25px', padding: '0 20px', margin: '20px 0', @@ -51,30 +52,44 @@ class StepperHorizontal extends Component { render() { var tutorialId = this.props.currentTutorialId; - var tutorialStatus = this.props.status[tutorialId].status === 'success' ? 'Success' : - this.props.status[tutorialId].status === 'error' ? 'Error' : 'Other'; + var steps = this.props.steps; + var tasks = steps.filter(task => task.type === 'task'); + var status = this.props.status.filter(status => status.id === tutorialId)[0]; + 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 ( -
- - - -
: ''}> -

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

- - - - +
+ {error || success > 0 ? +
+
+ : null} + {success < 1 && !error ? +
+
+ : null} +
+ + + +
: ''}> +

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

+ + + + +
); }; diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 2c2c952..dad7caa 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom'; import clsx from 'clsx'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; @@ -31,12 +32,24 @@ const styles = (theme) => ({ width: '24px', height: '24px' }, - stepIconActive: { + stepIconLargeSuccess: { + borderColor: theme.palette.primary.main, + }, + stepIconLargeError: { + borderColor: theme.palette.error.dark, + }, + stepIconActiveOther: { backgroundColor: theme.palette.secondary.main }, + stepIconActiveSuccess: { + backgroundColor: fade(theme.palette.primary.main, 0.6) + }, + stepIconActiveError: { + backgroundColor: fade(theme.palette.error.dark, 0.6) + }, connector: { height: '10px', - borderLeft: `3px solid ${theme.palette.primary.main}`, + borderLeft: `2px solid black`, margin: 'auto' } }); @@ -56,6 +69,8 @@ class StepperVertical extends Component { render() { var steps = this.props.steps; var activeStep = this.props.activeStep; + var tasks = steps.filter(task => task.type === 'task'); + var tutorialStatus = this.props.status.filter(status => status.id === this.props.currentTutorialId)[0]; return (
{steps.map((step, i) => { - // var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' : - // this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other'; + var tasksIndex = tasks.indexOf(step); + var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null; + var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other'; return ( @@ -76,10 +92,10 @@ class StepperVertical extends Component { classes={{ root: step.type === 'task' ? i === activeStep ? - clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes.stepIconActive) - : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge) + clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus], this.props.classes['stepIconActive'+taskStatus]) + : clsx(this.props.classes.stepIcon, this.props.classes.stepIconLarge, this.props.classes['stepIconLarge'+taskStatus]) : i === activeStep ? - clsx(this.props.classes.stepIcon, this.props.classes.stepIconActive) + clsx(this.props.classes.stepIcon, this.props.classes.stepIconActiveOther) : clsx(this.props.classes.stepIcon) }} > diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index 41a560a..743e6f2 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -43,7 +43,7 @@ class Tutorial extends Component {
- +
@@ -52,7 +52,7 @@ class Tutorial extends Component { {step ? step.type === 'instruction' ? - : // if step.type === 'assessment' + : // if step.type === 'assessment' : null}
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js index 6eec3e0..da4ccfb 100644 --- a/src/components/Tutorial/TutorialHome.js +++ b/src/components/Tutorial/TutorialHome.js @@ -14,6 +14,7 @@ import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -21,20 +22,23 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const styles = (theme) => ({ outerDiv: { position: 'absolute', - right: '-29px', - bottom: '-29px', - width: '140px', - height: '140px', - borderStyle: 'solid', - borderWidth: '10px', - borderRadius: '50%', - borderColor: fade(theme.palette.primary.main, 0.2), - color: fade(theme.palette.primary.main, 0.2) + right: '-30px', + bottom: '-30px', + width: '160px', + height: '160px', + color: fade(theme.palette.secondary.main, 0.6) }, outerDivError: { - borderColor: fade(theme.palette.error.dark, 0.2), + 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', @@ -55,21 +59,37 @@ class TutorialHome extends Component {

Tutorial-Übersicht

{tutorials.map((tutorial, i) => { - var tutorialStatus = this.props.status[i].status === 'success' ? 'Success' : - this.props.status[i].status === 'error' ? 'Error' : 'Other'; + var steps = tutorial.steps; + var tasks = steps.filter(task => task.type === 'task'); + var status = this.props.status.filter(status => status.id === tutorial.id)[0]; + 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'; + console.log(success); return ( {tutorial.title} - {tutorialStatus !== 'Other' ? -
-
+
+ + {error || success === 1 ? + + : } + {success < 1 && !error ? + + + : null} + +
+
+
+ {error || success === 1 ? -
+ : 0 ? this.props.classes.outerDivSuccess : {}}>{Math.round(success*100)}% + }
- : null - } +
diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index 3769c05..470b727 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -1,13 +1,12 @@ import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types'; -import { tutorials } from '../components/Tutorial/tutorials'; +import tutorials from '../components/Tutorial/tutorials.json'; const initialState = { - status: window.localStorage.getItem('tutorial') ? - JSON.parse(window.localStorage.getItem('tutorial')) - : new Array(tutorials.length).fill({}), - level: 'instruction', - currentId: 0, + status: window.localStorage.getItem('status') ? + JSON.parse(window.localStorage.getItem('status')) + : tutorials.map(tutorial => {return {id: tutorial.id, tasks: new Array(tutorial.steps.filter(step => step.type === 'task').length).fill({}) };}), + currentId: null, activeStep: 0, change: 0 }; @@ -18,7 +17,7 @@ export default function(state = initialState, action){ case TUTORIAL_ERROR: case TUTORIAL_XML: // update locale storage - sync with redux store - window.localStorage.setItem('tutorial', JSON.stringify(action.payload)); + window.localStorage.setItem('status', JSON.stringify(action.payload)); return { ...state, status: action.payload