Merge pull request #138 from sensebox/change-tutorial-view

Change tutorial view

package.json

@@ -1,13 +1,14 @@
 {
   "name": "blockly-react",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@blockly/block-plus-minus": "^2.0.10",
+    "@blockly/block-plus-minus": "^2.0.39",
-    "@blockly/field-slider": "^2.1.1",
+    "@blockly/field-slider": "^2.1.30",
-    "@blockly/plugin-scroll-options": "^1.0.2",
+    "@blockly/plugin-scroll-options": "^1.0.4",
-    "@blockly/plugin-typed-variable-modal": "^3.1.26",
+    "@blockly/plugin-typed-variable-modal": "^3.1.29",
-    "@blockly/zoom-to-fit": "^2.0.7",
+    "@blockly/workspace-backpack": "^1.0.12",
+    "@blockly/zoom-to-fit": "^2.0.9",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
@@ -19,7 +20,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.22.0",
-    "blockly": "^6.20210701.0",
+    "blockly": "^7.20211209.0",
     "file-saver": "^2.0.2",
     "mnemonic-id": "^3.2.7",
     "moment": "^2.28.0",
@@ -48,16 +49,11 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
+  "browserslist": 
-    "production": [
+    [
       ">0.2%",
       "not dead",
       "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
     ]
-  }
+  
 }

src/components/Blockly/BlocklyWindow.js

@@ -12,6 +12,7 @@ import "./generator/index";
 import { ZoomToFitControl } from "@blockly/zoom-to-fit";
 import { initialXml } from "./initialXml.js";
 import { getMaxInstances } from "./helpers/maxInstances";
+import { Backpack } from "@blockly/workspace-backpack";
 
 class BlocklyWindow extends Component {
   constructor(props) {
@@ -35,6 +36,9 @@ class BlocklyWindow extends Component {
     Blockly.svgResize(workspace);
     const zoomToFit = new ZoomToFitControl(workspace);
     zoomToFit.init();
+    // Initialize plugin.
+    const backpack = new Backpack(workspace);
+    backpack.init();
   }
 
   componentDidUpdate(props) {

src/components/Blockly/generator/variables.js

@@ -2,10 +2,17 @@ import Blockly from "blockly";
 
 const setVariableFunction = function (defaultValue) {
   return function (block) {
-    const variableName = Blockly["Arduino"].nameDB_.getName(
+    var id = block.getFieldValue("VAR");
-      block.getFieldValue("VAR"),
+
-      Blockly.Variables.NAME_TYPE
+    const variableName = Blockly.Variables.getVariable(
-    );
+      Blockly.getMainWorkspace(),
+      id
+    ).name;
+
+    // const variableName = Blockly["Arduino"].nameDB_.getName(
+    //   id,
+    //   Blockly.Variables.NAME_TYPE
+    // );
     const variableValue = Blockly["Arduino"].valueToCode(
       block,
       "VALUE",
@@ -16,32 +23,12 @@ const setVariableFunction = function (defaultValue) {
       .getVariableMap()
       .getAllVariables();
     const myVar = allVars.filter((v) => v.name === variableName)[0];
+    console.log(myVar);
     var code = "";
-
+    if (myVar !== undefined) {
-    switch (myVar.type) {
-      default:
       Blockly.Arduino.variables_[variableName + myVar.type] =
         myVar.type + " " + myVar.name + ";\n";
       code = variableName + " = " + (variableValue || defaultValue) + ";\n";
-        break;
-      case "Array":
-        var arrayType;
-        var number;
-
-        if (this.getChildren().length > 0) {
-          if (this.getChildren()[0].type === "lists_create_empty") {
-            arrayType = this.getChildren()[0].getFieldValue("type");
-            number = Blockly.Arduino.valueToCode(
-              this.getChildren()[0],
-              "NUMBER",
-              Blockly["Arduino"].ORDER_ATOMIC
-            );
-            Blockly.Arduino.variables_[
-              myVar + myVar.type
-            ] = `${arrayType} ${myVar.name} [${number}];\n`;
-          }
-        }
-        break;
     }
     return code;
   };

src/components/CodeViewer.js

@@ -11,6 +11,7 @@ import { Card } from "@material-ui/core";
 import * as Blockly from "blockly";
 import { default as MonacoEditor } from "@monaco-editor/react";
 
+
 const Accordion = withStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.secondary.main}`,

src/components/Tutorial/Assessment.js

@@ -4,7 +4,6 @@ import { connect } from "react-redux";
 import { workspaceName } from "../../actions/workspaceActions";
 
 import BlocklyWindow from "../Blockly/BlocklyWindow";
-import CodeViewer from "../CodeViewer";
 import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
 import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
@@ -13,8 +12,44 @@ import Card from "@material-ui/core/Card";
 import Typography from "@material-ui/core/Typography";
 import * as Blockly from "blockly";
 import { initialXml } from "../Blockly/initialXml";
+import IconButton from "@material-ui/core/IconButton";
+import CodeViewer from "../CodeViewer";
+import TooltipViewer from "../TooltipViewer";
+import Tooltip from "@material-ui/core/Tooltip";
+import ReactMarkdown from "react-markdown";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { withStyles } from "@material-ui/core/styles";
+
+const styles = (theme) => ({
+  codeOn: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.contrastText,
+      color: theme.palette.primary.main,
+      border: `1px solid ${theme.palette.secondary.main}`,
+    },
+  },
+  codeOff: {
+    backgroundColor: theme.palette.primary.contrastText,
+    color: theme.palette.primary.main,
+    border: `1px solid ${theme.palette.secondary.main}`,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+});
 
 class Assessment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      codeOn: false,
+    };
+  }
+
   componentDidMount() {
     this.props.workspaceName(this.props.name);
   }
@@ -25,6 +60,10 @@ class Assessment extends Component {
     }
   }
 
+  onChange = () => {
+    this.setState({ codeOn: !this.state.codeOn });
+  };
+
   render() {
     var tutorialId = this.props.tutorial._id;
     var currentTask = this.props.step;
@@ -38,50 +77,41 @@ class Assessment extends Component {
 
     return (
       <div className="assessmentDiv" style={{ width: "100%" }}>
-        <Typography
-          variant="h4"
-          style={{
-            float: "left",
-            marginBottom: "5px",
-            height: "40px",
-            display: "table",
-          }}
-        >
-          {currentTask.headline}
-        </Typography>
         <div style={{ float: "right", height: "40px" }}>
           <WorkspaceFunc assessment />
         </div>
         <Grid container spacing={2} style={{ marginBottom: "5px" }}>
-          <Grid item xs={12} md={6} lg={8}>
-            <BlocklyWindow
-              initialXml={initialXml}
-              blockDisabled
-              blocklyCSS={{ height: "65vH" }}
-            />
-          </Grid>
           <Grid
             item
             xs={12}
             md={6}
-            lg={4}
+            lg={3}
-            style={
+            style={{
-              isWidthDown("sm", this.props.width)
+              position: "relative",
-                ? { height: "max-content" }
+              // isWidthDown("sm", this.props.width)
-                : {}
+              //   ? { height: "max-content" }
-            }
+              //   : {}
+            }}
           >
             <Card
               style={{
-                height: "calc(50% - 30px)",
+                height: "calc(45vH - 30px)",
                 padding: "10px",
                 marginBottom: "10px",
               }}
             >
-              <Typography variant="h5">
+              <Typography>
-                {Blockly.Msg.tutorials_assessment_task}
+                <ReactMarkdown>{currentTask.text}</ReactMarkdown>
               </Typography>
-              <Typography>{currentTask.text}</Typography>
+            </Card>
+            <Card
+              style={{
+                height: "20vH",
+                padding: "10px",
+                marginBottom: "10px",
+              }}
+            >
+              <TooltipViewer />
             </Card>
             <div
               style={
@@ -89,10 +119,52 @@ class Assessment extends Component {
                   ? { height: "500px" }
                   : { height: "50%" }
               }
-            >
+            ></div>
-              <CodeViewer />
-            </div>
           </Grid>
+          <Grid
+            item
+            xs={12}
+            md={this.state.codeOn ? 6 : 6}
+            lg={this.state.codeOn ? 6 : 9}
+            style={{ position: "relative" }}
+          >
+            <Tooltip
+              title={
+                this.state.codeOn
+                  ? Blockly.Msg.tooltip_hide_code
+                  : Blockly.Msg.tooltip_show_code
+              }
+            >
+              <IconButton
+                className={`showCode ${
+                  this.state.codeOn
+                    ? this.props.classes.codeOn
+                    : this.props.classes.codeOff
+                }`}
+                style={{
+                  width: "40px",
+                  height: "40px",
+                  position: "absolute",
+                  top: 6,
+                  right: 8,
+                  zIndex: 21,
+                }}
+                onClick={() => this.onChange()}
+              >
+                <FontAwesomeIcon icon={faCode} size="xs" />
+              </IconButton>
+            </Tooltip>
+            <BlocklyWindow
+              initialXml={initialXml}
+              blockDisabled
+              blocklyCSS={{ height: "65vH" }}
+            />
+          </Grid>
+          {this.state.codeOn ? (
+            <Grid item xs={12} md={4} lg={3}>
+              <CodeViewer />
+            </Grid>
+          ) : null}
         </Grid>
       </div>
     );
@@ -113,5 +185,5 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps, { workspaceName })(
-  withWidth()(Assessment)
+  withWidth()(withStyles(styles, { withTheme: true })(Assessment))
 );

src/components/Tutorial/Instruction.js

@@ -15,9 +15,9 @@ class Instruction extends Component {
     var areRequirements = step.requirements && step.requirements.length > 0;
     return (
       <div>
-        <Typography variant="h4" style={{ marginBottom: "5px" }}>
+        {/* <Typography variant="h4" style={{ marginBottom: "5px" }}>
           {step.headline}
-        </Typography>
+        </Typography> */}
         <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
           <ReactMarkdown
             className={"tutorial"}

src/components/Tutorial/StepperHorizontal.js

@@ -1,31 +1,31 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import clsx from 'clsx';
+import clsx from "clsx";
 
 // import tutorials from '../../data/tutorials';
 
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { fade } from "@material-ui/core/styles/colorManipulator";
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from "@material-ui/core/styles";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from "@material-ui/core/Tooltip";
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = (theme) => ({
   stepper: {
-    width: 'calc(100% - 40px)',
+    width: "calc(100% - 40px)",
-    height: '40px',
+    height: "40px",
-    borderRadius: '25px',
+    borderRadius: "25px",
-    padding: '0 20px',
+    padding: "0 20px",
-    margin: '20px 0',
+    margin: "20px 0",
-    display: 'flex',
+    display: "flex",
-    justifyContent: 'space-between'
+    justifyContent: "space-between",
   },
   stepperSuccess: {
     backgroundColor: fade(theme.palette.primary.main, 0.6),
@@ -37,73 +37,147 @@ const styles = (theme) => ({
     backgroundColor: fade(theme.palette.secondary.main, 0.6),
   },
   color: {
-    backgroundColor: 'transparent '
+    backgroundColor: "transparent ",
   },
   iconDivSuccess: {
-    color: theme.palette.primary.main
+    color: theme.palette.primary.main,
   },
   iconDivError: {
-    color: theme.palette.error.dark
+    color: theme.palette.error.dark,
-  }
+  },
 });
 
 class StepperHorizontal extends Component {
-
   render() {
     var tutorialId = this.props.tutorial._id;
-    var status = this.props.status.filter(status => status._id === tutorialId)[0];
+    var status = this.props.status.filter(
+      (status) => status._id === tutorialId
+    )[0];
     var tasks = status.tasks;
-    var error = tasks.filter(task => task.type === 'error').length > 0;
+    var error = tasks.filter((task) => task.type === "error").length > 0;
-    var success = tasks.filter(task => task.type === 'success').length / tasks.length;
+    var success =
-    var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
+      tasks.filter((task) => task.type === "success").length / tasks.length;
+    var tutorialStatus = success === 1 ? "Success" : error ? "Error" : "Other";
     var title = this.props.tutorial.title;
+    var activeStep = this.props.activeStep;
     return (
-      <div style={{ position: 'relative' }}>
+      <div style={{ position: "relative" }}>
-        {error || success > 0 ?
+        {error || success > 0 ? (
-          <div style={{ zIndex: -1, width: error ? 'calc(100% - 40px)' : `calc(${success * 100}% - 40px)`, borderRadius: success === 1 || error ? '25px' : '25px 0 0 25px', position: 'absolute', margin: 0, left: 0 }} className={clsx(this.props.classes.stepper, error ? this.props.classes.stepperError : this.props.classes.stepperSuccess)}>
+          <div
-          </div>
+            style={{
-          : null}
+              zIndex: -1,
-        {success < 1 && !error ?
+              width: error
-          <div style={{ zIndex: -2, width: `calc(${(1 - success) * 100}% - 40px)`, borderRadius: success === 0 ? '25px' : '0px 25px 25px 0', position: 'absolute', margin: 0, right: 0 }} className={clsx(this.props.classes.stepper, this.props.classes.stepperOther)}>
+                ? "calc(100% - 40px)"
-          </div>
+                : `calc(${success * 100}% - 40px)`,
-          : null}
+              borderRadius: success === 1 || error ? "25px" : "25px 0 0 25px",
+              position: "absolute",
+              margin: 0,
+              left: 0,
+            }}
+            className={clsx(
+              this.props.classes.stepper,
+              error
+                ? this.props.classes.stepperError
+                : this.props.classes.stepperSuccess
+            )}
+          ></div>
+        ) : null}
+        {success < 1 && !error ? (
+          <div
+            style={{
+              zIndex: -2,
+              width: `calc(${(1 - success) * 100}% - 40px)`,
+              borderRadius: success === 0 ? "25px" : "0px 25px 25px 0",
+              position: "absolute",
+              margin: 0,
+              right: 0,
+            }}
+            className={clsx(
+              this.props.classes.stepper,
+              this.props.classes.stepperOther
+            )}
+          ></div>
+        ) : null}
         <div className={this.props.classes.stepper}>
           <Button
             disabled //={tutorialIndex === 0}
             //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
           >
-            {'<'}
+            {"<"}
           </Button>
-          <Tooltip style={{ display: 'flex', width: 'calc(100% - 64px - 64px)', justifyContent: 'center' }} title={title} arrow>
+          <Tooltip
+            style={{
+              display: "flex",
+              width: "calc(100% - 64px - 64px)",
+              justifyContent: "center",
+            }}
+            title={title}
+            arrow
+          >
             <div>
-              {tutorialStatus !== 'Other' ? <div className={tutorialStatus === 'Success' && success === 1 ? this.props.classes.iconDivSuccess : this.props.classes.iconDivError} style={{ margin: 'auto 10px auto 0' }}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes} /></div> : null}
+              {tutorialStatus !== "Other" ? (
-              <Typography variant='body2' style={{ fontWeight: 'bold', fontSize: '1.75em', margin: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'rgba(0, 0, 0, 0.54)' }}>{title}</Typography>
+                <div
+                  className={
+                    tutorialStatus === "Success" && success === 1
+                      ? this.props.classes.iconDivSuccess
+                      : this.props.classes.iconDivError
+                  }
+                  style={{ margin: "auto 10px auto 0" }}
+                >
+                  <FontAwesomeIcon
+                    className={this.props.classes.icon}
+                    icon={tutorialStatus === "Success" ? faCheck : faTimes}
+                  />
+                </div>
+              ) : null}
+              <Typography
+                variant="body2"
+                style={{
+                  fontWeight: "bold",
+                  fontSize: "1.75em",
+                  margin: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: "rgba(0, 0, 0, 0.54)",
+                }}
+              >
+                {title}
+                {title !== this.props.tutorial.steps[activeStep].headline
+                  ? ` - ${this.props.tutorial.steps[activeStep].headline}`
+                  : null}
+              </Typography>
             </div>
           </Tooltip>
           <Button
             disabled //={tutorialIndex + 1 === tutorials.length}
             //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
           >
-            {'>'}
+            {">"}
           </Button>
         </div>
       </div>
     );
-  };
+  }
 }
 
 StepperHorizontal.propTypes = {
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
   currentTutorialIndex: PropTypes.number.isRequired,
-  tutorial: PropTypes.object.isRequired
+  tutorial: PropTypes.object.isRequired,
+  activeStep: PropTypes.number.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   change: state.tutorial.change,
   status: state.tutorial.status,
   currentTutorialIndex: state.tutorial.currentIndex,
-  tutorial: state.tutorial.tutorials[0]
+  activeStep: state.tutorial.activeStep,
+  tutorial: state.tutorial.tutorials[0],
 });
 
-export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));
+export default connect(
+  mapStateToProps,
+  null
+)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));