schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated status reading

Browse Source
This commit is contained in:
Delucse 2020-11-27 12:06:13 +01:00
parent b8a2f87321
commit cbe091db27
4 changed files with 83 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/actions/tutorialActions.js
View File

@ -3,14 +3,21 @@ import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTOR
import axios from 'axios';
import { returnErrors, returnSuccess } from './messageActions';
export const getTutorial = (id) => (dispatch) => {
export const getTutorial = (id) => (dispatch, getState) => {
dispatch({type: TUTORIAL_PROGRESS});
axios.get(`https://api.blockly.sensebox.de/tutorial/${id}`)
.then(res => {
var tutorial = res.data;
existingTutorial(tutorial, getState().tutorial.status).then(status => {
dispatch({
type: TUTORIAL_SUCCESS,
payload: status
});
dispatch({type: TUTORIAL_PROGRESS});
dispatch({
type: GET_TUTORIAL,
payload: res.data
payload: tutorial
});
});
})
.catch(err => {
@ -21,14 +28,21 @@ export const getTutorial = (id) => (dispatch) => {
});
};
export const getTutorials = () => (dispatch) => {
export const getTutorials = () => (dispatch, getState) => {
dispatch({type: TUTORIAL_PROGRESS});
axios.get(`https://api.blockly.sensebox.de/tutorial`)
.then(res => {
dispatch({type: TUTORIAL_PROGRESS});
var tutorials = res.data;
existingTutorials(tutorials, getState().tutorial.status).then(status => {
dispatch({
type: TUTORIAL_SUCCESS,
payload: status
});
dispatch({
type: GET_TUTORIALS,
payload: res.data
payload: tutorials
});
dispatch({type: TUTORIAL_PROGRESS});
});
})
.catch(err => {
@ -44,6 +58,10 @@ export const resetTutorial = () => (dispatch) => {
type: GET_TUTORIALS,
payload: []
});
dispatch({
type: TUTORIAL_STEP,
payload: 0
});
};
export const tutorialChange = () => (dispatch) => {
@ -96,3 +114,47 @@ export const tutorialStep = (step) => (dispatch) => {
payload: step
});
};
const existingTutorials = (tutorials, status) => new Promise(function(resolve, reject){
var newstatus;
new Promise(function(resolve, reject){
var existingTutorialIds = tutorials.map((tutorial, i) => {
existingTutorial(tutorial, status).then(status => {
newstatus = status;
});
return tutorial.id;
});
resolve(existingTutorialIds)
}).then(existingTutorialIds => {
// deleting old tutorials which do not longer exist
if (existingTutorialIds.length > 0) {
status = newstatus.filter(status => existingTutorialIds.indexOf(status.id) > -1);
}
resolve(status);
});
});
const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
var tutorialsId = tutorial.id;
var statusIndex = status.findIndex(status => status.id === tutorialsId);
if (statusIndex > -1) {
var tasks = tutorial.steps.filter(step => step.type === 'task');
var existingTaskIds = tasks.map((task, j) => {
var tasksId = task.id;
if (status[statusIndex].tasks.findIndex(task => task.id === tasksId) === -1) {
// task does not exist
status[statusIndex].tasks.push({ id: tasksId });
}
return tasksId;
});
// deleting old tasks which do not longer exist
if (existingTaskIds.length > 0) {
status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task.id) > -1);
}
}
else {
status.push({ id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) });
}
resolve(status);
});

7
src/components/Tutorial/Requirement.js
View File

@ -5,8 +5,6 @@ import { connect } from 'react-redux';
import clsx from 'clsx';
import { withRouter, Link } from 'react-router-dom';
import tutorials from '../../data/tutorials';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
@ -67,7 +65,8 @@ class Requirement extends Component {
<Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
<List component="div">
{tutorialIds.map((tutorialId, i) => {
var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
// title must be provided together with ids
// 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;
@ -99,7 +98,7 @@ class Requirement extends Component {
</div>
</Tooltip>
<div style={{ height: '50px', width: 'calc(100% - 25px)', transform: 'translate(25px)' }} className={this.props.classes.hoverLink}>
<Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/ }}>{title}</Typography>
<Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/ }}>{/*title*/}Name hinzufügen über Datenbankeintrag</Typography>
</div>
</Link>
)

10
src/components/Tutorial/StepperHorizontal.js
View File

@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
import clsx from 'clsx';
import tutorials from '../../data/tutorials';
// import tutorials from '../../data/tutorials';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
@ -70,8 +70,8 @@ class StepperHorizontal extends Component {
: null}
<div className={this.props.classes.stepper}>
<Button
disabled={tutorialIndex === 0}
onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
disabled//={tutorialIndex === 0}
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
>
{'<'}
</Button>
@ -82,8 +82,8 @@ class StepperHorizontal extends Component {
</div>
</Tooltip>
<Button
disabled={tutorialIndex + 1 === tutorials.length}
onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
disabled//={tutorialIndex + 1 === tutorials.length}
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
>
{'>'}
</Button>

39
src/reducers/tutorialReducer.js
View File

@ -1,46 +1,18 @@
import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
import tutorials from '../data/tutorials';
const initialStatus = () => {
if (window.localStorage.getItem('status')) {
var status = JSON.parse(window.localStorage.getItem('status'));
var existingTutorialIds = tutorials.map((tutorial, i) => {
var tutorialsId = tutorial.id;
var statusIndex = status.findIndex(status => status.id === tutorialsId);
if (statusIndex > -1) {
var tasks = tutorial.steps.filter(step => step.type === 'task');
var existingTaskIds = tasks.map((task, j) => {
var tasksId = task.id;
if (status[statusIndex].tasks.findIndex(task => task.id === tasksId) === -1) {
// task does not exist
status[statusIndex].tasks.push({ id: tasksId });
}
return tasksId;
});
// deleting old tasks which do not longer exist
if (existingTaskIds.length > 0) {
status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task.id) > -1);
}
}
else {
status.push({ id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) });
}
return tutorialsId;
});
// deleting old tutorials which do not longer exist
if (existingTutorialIds.length > 0) {
status = status.filter(status => existingTutorialIds.indexOf(status.id) > -1);
}
return status;
}
// window.localStorage.getItem('status') does not exist
return tutorials.map(tutorial => { return { id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) }; });
return [];
// // window.localStorage.getItem('status') does not exist
// return tutorials.map(tutorial => { return { id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) }; });
};
const initialState = {
status: initialStatus(),
currentIndex: null,
activeStep: 0,
change: 0,
tutorials: [],
@ -78,11 +50,6 @@ export default function (state = initialState, action) {
...state,
change: state.change += 1
}
case TUTORIAL_ID:
return {
...state,
currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload)
}
case TUTORIAL_STEP:
return {
...state,