From 7300cade5d36f3f9c4736a3685a75ff3f8ac0ed0 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Sun, 13 Sep 2020 16:02:47 +0200 Subject: [PATCH] each task (step) has its own id within a tutorial --- src/actions/tutorialActions.js | 8 +--- src/components/Tutorial/Assessment.js | 8 ++-- src/components/Tutorial/SolutionCheck.js | 2 +- src/components/Tutorial/StepperHorizontal.js | 7 ++- src/components/Tutorial/StepperVertical.js | 3 +- src/components/Tutorial/Tutorial.js | 4 +- src/components/Tutorial/TutorialHome.js | 1 - src/components/Tutorial/tutorials.json | 47 ++++++++++++++++++++ src/reducers/tutorialReducer.js | 2 - 9 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 31e3b6e..b741c3e 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -11,11 +11,8 @@ export const tutorialChange = () => (dispatch) => { export const tutorialCheck = (status, step) => (dispatch, getState) => { var tutorialsStatus = getState().tutorial.status; var id = getState().tutorial.currentId; - 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); + var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === step.id); tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], type: status @@ -34,9 +31,8 @@ export const storeTutorialXml = (code) => (dispatch, getState) => { 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); + var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === steps[activeStep].id); tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], xml: code diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index f15f79b..3e2db26 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -14,13 +14,11 @@ class Assessment extends Component { render() { 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] - + var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id); + var statusTask = status.tasks[taskIndex]; + return (
{currentTask.headline} diff --git a/src/components/Tutorial/SolutionCheck.js b/src/components/Tutorial/SolutionCheck.js index b012af2..3156fc6 100644 --- a/src/components/Tutorial/SolutionCheck.js +++ b/src/components/Tutorial/SolutionCheck.js @@ -52,7 +52,7 @@ class SolutionCheck extends Component { const tutorial = tutorials.filter(tutorial => tutorial.id === this.props.currentTutorialId)[0]; const step = tutorial.steps[this.props.activeStep]; var msg = checkXml(step.xml, this.props.xml); - this.props.tutorialCheck(msg.type); + this.props.tutorialCheck(msg.type, step); this.setState({ msg, open: true }); } diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index 10aa0ff..b54c1f7 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -52,11 +52,10 @@ class StepperHorizontal extends Component { render() { var tutorialId = this.props.currentTutorialId; - 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 tasks = status.tasks; + 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'; return (
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index dad7caa..dcaf36e 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -69,7 +69,6 @@ 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 (
@@ -80,7 +79,7 @@ class StepperVertical extends Component { classes={{root: this.props.classes.verticalStepper}} > {steps.map((step, i) => { - var tasksIndex = tasks.indexOf(step); + var tasksIndex = tutorialStatus.tasks.findIndex(task => task.id === step.id); var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null; var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other'; return ( diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index c5c1d9e..e2a9d38 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 da4ccfb..3b73ac7 100644 --- a/src/components/Tutorial/TutorialHome.js +++ b/src/components/Tutorial/TutorialHome.js @@ -65,7 +65,6 @@ class TutorialHome extends Component { 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 ( diff --git a/src/components/Tutorial/tutorials.json b/src/components/Tutorial/tutorials.json index e2fcef8..bfba590 100644 --- a/src/components/Tutorial/tutorials.json +++ b/src/components/Tutorial/tutorials.json @@ -4,6 +4,7 @@ "title": "Erste Schritte", "steps": [ { + "id": 1, "type": "instruction", "headline": "Erste Schritte", "text1": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.", @@ -11,28 +12,74 @@ "requirements": [] }, { + "id": 2, "type": "instruction", "headline": "Aufbau der Schaltung", "text1": "Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1." }, { + "id": 3, "type": "instruction", "headline": "Programmierung", "text1": "Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.", "xml": "" }, { + "id": 4, "type": "instruction", "headline": "Leuchten der LED", "text1": "Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.", "xml": "" }, { + "id": 5, "type": "task", "headline": "Aufgabe 1", "text1": "Verwenden den Block zum leuchten der LED und übertrage dein erstes Programm auf die senseBox MCU.", "xml": "" } ] + }, + { + "id": 2, + "title": "WLAN einrichten", + "steps": [ + { + "id": 1, + "type": "instruction", + "headline": "Einführung", + "text1": "In diesem Tutorial lernst du wie man die senseBox mit dem Internet verbindest.", + "hardware": ["senseboxmcu"], + "requirements": [1] + }, + { + "id": 2, + "type": "instruction", + "headline": "Programmierung", + "text1": "Man benötigt folgenden Block:", + "xml": "SSIDPassword" + }, + { + "id": 3, + "type": "instruction", + "headline": "Block richtig einbinden", + "text1": "", + "xml": "SSIDPassword" + }, + { + "id": 4, + "type": "task", + "headline": "Aufgabe 1", + "text1": "Stelle eine WLAN-Verbindung mit einem beliebigen Netzwerk her.", + "xml": "SSIDPassword" + }, + { + "id": 5, + "type": "task", + "headline": "Aufgabe 2", + "text1": "Versuche das gleiche einfach nochmal. Übung macht den Meister! ;)", + "xml": "SSIDPassword" + } + ] } ] diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index f966fcc..ad80903 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -33,8 +33,6 @@ const initialStatus = () => { if(existingTutorialIds.length > 0){ status = status.filter(status => existingTutorialIds.indexOf(status.id) > -1); } - console.log('tutorial', existingTutorialIds); - console.log('tutorial', status); return status; } // window.localStorage.getItem('status') does not exist