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

own blocklyWindow for an instruction

Browse Source
This commit is contained in:
Delucse 2020-09-09 13:36:41 +02:00
parent 2908bc464f
commit f14508a5ca
6 changed files with 115 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/actions/tutorialActions.js
View File

@ -1,4 +1,4 @@
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID } from './types';
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from './types';
export const tutorialChange = () => (dispatch) => {
dispatch({
@ -19,7 +19,8 @@ export const tutorialCheck = (status) => (dispatch, getState) => {
export const storeTutorialXml = (code) => (dispatch, getState) => {
var id = getState().tutorial.currentId;
if(id !== null){
var level = getState().tutorial.level;
if(id !== null && level === 'assessment'){
var tutorialsStatus = getState().tutorial.status;
tutorialsStatus[id] = {...tutorialsStatus[id], xml: code};
dispatch({
@ -29,6 +30,14 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
}
};
// level = "instruction" or "assessment"
export const setTutorialLevel = (level) => (dispatch) => {
dispatch({
type: TUTORIAL_LEVEL,
payload: level
});
}
export const tutorialId = (id) => (dispatch) => {
dispatch({
type: TUTORIAL_ID,

1
src/actions/types.js
View File

@ -12,3 +12,4 @@ export const TUTORIAL_ERROR = 'TUTORIAL_ERROR';
export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE';
export const TUTORIAL_XML = 'TUTORIAL_XML';
export const TUTORIAL_ID = 'TUTORIAL_ID';
export const TUTORIAL_LEVEL = 'TUTORIAL_LEVEL';

52
src/components/Tutorial/Instruction.js Normal file
View File

@ -0,0 +1,52 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as Blockly from 'blockly/core';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import { tutorials } from './tutorials';
import Grid from '@material-ui/core/Grid';
class Instruction extends Component {
render() {
var currentTutorialId = this.props.currentTutorialId;
console.log(currentTutorialId);
return (
tutorials[currentTutorialId].instruction ?
<div>
<p>{tutorials[currentTutorialId].instruction.description}</p>
{tutorials[currentTutorialId].instruction.xml ?
<Grid container spacing={2}>
<Grid item xs={12}>
<BlocklyWindow
trashcan={false}
readOnly={true}
zoomControls={false}
grid={false}
move={false}
blocklyCSS={{minHeight: '300px'}}
initialXml={tutorials[this.props.currentTutorialId].instruction.xml}
/>
</Grid>
</Grid>
: null }
</div>
: null
);
};
}
Instruction.propTypes = {
currentTutorialId: PropTypes.number,
};
const mapStateToProps = state => ({
currentTutorialId: state.tutorial.currentId
});
export default connect(mapStateToProps, null)(Instruction);

31
src/components/Tutorial/Tutorial.js
View File

@ -1,11 +1,12 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialId } from '../../actions/tutorialActions';
import { tutorialId, setTutorialLevel } from '../../actions/tutorialActions';
import Breadcrumbs from '../Breadcrumbs';
import StepperHorizontal from './StepperHorizontal';
import StepperVertical from './StepperVertical';
import Instruction from './Instruction';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import SolutionCheck from './SolutionCheck';
import CodeViewer from '../CodeViewer';
@ -21,10 +22,6 @@ import Card from '@material-ui/core/Card';
class Tutorial extends Component {
state={
value: 'introduction'
}
componentDidMount(){
this.props.tutorialId(Number(this.props.match.params.tutorialId)-1);
}
@ -32,7 +29,7 @@ class Tutorial extends Component {
componentDidUpdate(props, state){
if(props.currentTutorialId+1 !== Number(this.props.match.params.tutorialId)){
this.props.tutorialId(Number(this.props.match.params.tutorialId)-1);
this.setState({ value: 'introduction' });
this.props.setTutorialLevel('instruction');
}
}
@ -41,11 +38,12 @@ class Tutorial extends Component {
}
onChange = (e, value) => {
this.setState({ value: value });
this.props.setTutorialLevel(value);
}
render() {
var currentTutorialId = this.props.currentTutorialId;
console.log(this.props);
return (
!Number.isInteger(currentTutorialId) || currentTutorialId+1 < 1 || currentTutorialId+1 > tutorials.length ?
<NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
@ -61,20 +59,20 @@ class Tutorial extends Component {
{/* width of vertical stepper is 30px*/}
<Card style={{width: isWidthUp('sm', this.props.width) ? 'calc(100% - 30px)' : '100%', padding: '10px'}}>
<Tabs
value={this.state.value}
value={this.props.level}
indicatorColor="primary"
textColor="inherit"
variant='fullWidth'
onChange={this.onChange}
>
<Tab label="Anleitung" value='introduction' disableRipple/>
<Tab label="Anleitung" value='instruction' disableRipple/>
<Tab label="Aufgabe" value='assessment' disableRipple/>
</Tabs>
<div style={{marginTop: '20px'}}>
{this.state.value === 'introduction' ?
'Hier könnte eine Anleitung stehen.': null }
{this.state.value === 'assessment' ?
{this.props.level === 'instruction' ?
<Instruction /> : null }
{this.props.level === 'assessment' ?
<Grid container spacing={2}>
<Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
<SolutionCheck />
@ -100,15 +98,18 @@ class Tutorial extends Component {
Tutorial.propTypes = {
tutorialId: PropTypes.func.isRequired,
setTutorialLevel: PropTypes.func.isRequired,
currentTutorialId: PropTypes.number,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired
change: PropTypes.number.isRequired,
level: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId
currentTutorialId: state.tutorial.currentId,
level: state.tutorial.level
});
export default connect(mapStateToProps, { tutorialId })(withWidth()(Tutorial));
export default connect(mapStateToProps, { tutorialId, setTutorialLevel })(withWidth()(Tutorial));

28
src/components/Tutorial/tutorials.js
View File

@ -4,6 +4,20 @@ export const tutorials = [
},
{
"title": "WLAN",
"instruction":
{
"description": 'Hier könnte eine Anleitung stehen.',
"xml": `<xml xmlns="https://developers.google.com/blockly/xml">
<block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" deletable="false" movable="false" editable="false" x="27" y="16">
<statement name="LOOP_FUNC">
<block type="sensebox_wifi" id="f{U%tp!7XbCJhaJbKS:,">
<field name="SSID">SSID</field>
<field name="Password">Password</field>
</block>
</statement>
</block>
</xml>`
},
"test": function(workspace){
var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects
if(wifi.length > 0){
@ -26,6 +40,20 @@ export const tutorials = [
},
{
"title": "spezifisches WLAN",
"instruction":
{
"description": 'Hier könnte eine Anleitung stehen.',
"xml": `<xml xmlns="https://developers.google.com/blockly/xml">
<block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" deletable="false" movable="false" editable="false" x="27" y="16">
<statement name="LOOP_FUNC">
<block type="sensebox_wifi" id="f{U%tp!7XbCJhaJbKS:,">
<field name="SSID">bestimmte SSID</field>
<field name="Password">bestimmtes Passwort</field>
</block>
</statement>
</block>
</xml>`
},
"test": function(workspace){
var wifi = workspace.getBlocksByType('sensebox_wifi'); // result is an array with Blocks as objects
if(wifi.length > 0){

8
src/reducers/tutorialReducer.js
View File

@ -1,4 +1,4 @@
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID } from '../actions/types';
import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_LEVEL } from '../actions/types';
import { tutorials } from '../components/Tutorial/tutorials';
@ -6,6 +6,7 @@ const initialState = {
status: window.localStorage.getItem('tutorial') ?
JSON.parse(window.localStorage.getItem('tutorial'))
: new Array(tutorials.length).fill({}),
level: 'instruction',
currentId: null,
change: 0
};
@ -31,6 +32,11 @@ export default function(state = initialState, action){
...state,
currentId: action.payload
}
case TUTORIAL_LEVEL:
return {
...state,
level: action.payload
}
default:
return state;
}