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

Change tutorial view
2022-01-28 15:34:50 +01:00 · 2022-01-28 15:34:50 +01:00 · 557d66d7d6
commit 557d66d7d6
parent 04b15dae0e a0dba75c80
9 changed files with 8880 additions and 9818 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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/field-slider": "^2.1.1",
-    "@blockly/plugin-scroll-options": "^1.0.2",
-    "@blockly/plugin-typed-variable-modal": "^3.1.26",
-    "@blockly/zoom-to-fit": "^2.0.7",
+    "@blockly/block-plus-minus": "^2.0.39",
+    "@blockly/field-slider": "^2.1.30",
+    "@blockly/plugin-scroll-options": "^1.0.4",
+    "@blockly/plugin-typed-variable-modal": "^3.1.29",
+    "@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": {
-    "production": [
+  "browserslist": 
+    [
      ">0.2%",
      "not dead",
      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
    ]
-  }
+  
 }
--- a/src/components/Blockly/BlocklyWindow.js
+++ b/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) {
--- a/src/components/Blockly/generator/variables.js
+++ b/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(
-      block.getFieldValue("VAR"),
-      Blockly.Variables.NAME_TYPE
-    );
+    var id = block.getFieldValue("VAR");
+
+    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 = "";
-
-    switch (myVar.type) {
-      default:
+    if (myVar !== undefined) {
      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;
  };
--- a/src/components/CodeViewer.js
+++ b/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}`,
--- a/src/components/Tutorial/Assessment.js
+++ b/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}
-            style={
-              isWidthDown("sm", this.props.width)
-                ? { height: "max-content" }
-                : {}
-            }
+            lg={3}
+            style={{
+              position: "relative",
+              // 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">
-                {Blockly.Msg.tutorials_assessment_task}
+              <Typography>
+                <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%" }
              }
-            >
-              <CodeViewer />
-            </div>
+            ></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))
 );
--- a/src/components/Tutorial/Instruction.js
+++ b/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"}
--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/src/components/Tutorial/StepperHorizontal.js
@ -1,31 +1,31 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+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 { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-import Button from '@material-ui/core/Button';
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import { withStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import Tooltip from "@material-ui/core/Tooltip";
+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)',
-    height: '40px',
-    borderRadius: '25px',
-    padding: '0 20px',
-    margin: '20px 0',
-    display: 'flex',
-    justifyContent: 'space-between'
+    width: "calc(100% - 40px)",
+    height: "40px",
+    borderRadius: "25px",
+    padding: "0 20px",
+    margin: "20px 0",
+    display: "flex",
+    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 success = tasks.filter(task => task.type === 'success').length / tasks.length;
-    var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
+    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";
    var title = this.props.tutorial.title;
+    var activeStep = this.props.activeStep;
    return (
-      <div style={{ position: 'relative' }}>
-        {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>
-          : 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 style={{ position: "relative" }}>
+        {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>
+        ) : 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}
+            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}
-              <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>
+              {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}
+              <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}
+            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)));
--- a/yarn.lock
+++ b/yarn.lock