add selected Board to settings and solve component rerender

src/components/Blockly/BlocklyWindow.js

@@ -43,8 +43,16 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-
     var xml = this.props.initialXml;
+    if (props.selectedBoard !== this.props.selectedBoard) {
+      // change board
+      if(!xml) xml = initialXml;
+      var xmlDom = Blockly.Xml.textToDom(xml);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // var toolbox = workspace.getToolbox();
+      // workspace.updateToolbox(toolbox.toolboxDef_);
+    }
+ 
     // if svg is true, then the update process is done in the BlocklySvg component
     if (props.initialXml !== xml && !this.props.svg) {
       // guarantees that the current xml-code (this.props.initialXml) is rendered
@@ -55,7 +63,7 @@ class BlocklyWindow extends Component {
     if (props.language !== this.props.language) {
       // change language
       if (!xml) xml = initialXml;
-      var xmlDom = Blockly.Xml.textToDom(xml);
+       xmlDom = Blockly.Xml.textToDom(xml);
       Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
       // var toolbox = workspace.getToolbox();
       // workspace.updateToolbox(toolbox.toolboxDef_);
@@ -130,12 +138,14 @@ BlocklyWindow.propTypes = {
   renderer: PropTypes.string.isRequired,
   sounds: PropTypes.bool.isRequired,
   language: PropTypes.string.isRequired,
+  selectedBoard: PropTypes.string.isRequired,
 };
 
 const mapStateToProps = (state) => ({
   renderer: state.general.renderer,
   sounds: state.general.sounds,
   language: state.general.language,
+  selectedBoard: state.board.board,
 });
 
 export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(

src/components/Blockly/blocks/sensebox-led.js

@@ -45,15 +45,11 @@ Blockly.Blocks['sensebox_rgb_led'] = {
 
 Blockly.Blocks['sensebox_ws2818_led_init'] = {
     init: function () {
-
-        var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
-        [Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
-
         this.setColour(getColour().sensebox);
         this.appendDummyInput()
             .appendField(Blockly.Msg.senseBox_ws2818_rgb_led_init)
             .appendField("Port:")
-            .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
         this.appendValueInput("BRIGHTNESS", "brightness")
             .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_brightness));
         this.appendValueInput("NUMBER", "number")
@@ -66,15 +62,11 @@ Blockly.Blocks['sensebox_ws2818_led_init'] = {
 
 Blockly.Blocks['sensebox_ws2818_led'] = {
     init: function () {
-
-        var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
-        [Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
-
         this.setColour(getColour().sensebox);
         this.appendDummyInput()
             .appendField(Blockly.Msg.senseBox_ws2818_rgb_led)
             .appendField("Port:")
-            .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
         this.appendValueInput("POSITION", "position")
             .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_position));
         this.appendValueInput("COLOR", 'Number')

src/components/Blockly/generator/sensebox-ble.js

@@ -101,7 +101,6 @@ Blockly.Arduino.sensebox_phyphox_graph = function () {
 Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
   var branch = Blockly.Arduino.statementToCode(this, "sendValues");
   var blocks = this.getDescendants();
-  console.log(blocks);
   var count = 0;
   if (blocks !== undefined) {
     for (var i = 0; i < blocks.length; i++) {
@@ -115,7 +114,6 @@ Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
   var string = "";
 
   for (var j = 1; j <= count; j++) {
-    console.log("append");
     if (string === "") {
       string += `channel${j}`;
     } else if (string !== "") {

src/components/Blockly/generator/sensebox-sd.js

@@ -203,6 +203,5 @@ Blockly.Arduino.sensebox_sd_save_for_osem = function (block) {
   Blockly.Arduino.definitions_["SENSOR_ID" + id + ""] =
     "const char SENSOR_ID" + id + '[] PROGMEM = "' + sensor_id + '";';
   code += "addMeasurement(SENSOR_ID" + id + "," + sensor_value + ");\n";
-  console.log(code);
   return code;
 };

src/components/Blockly/generator/sensebox-web.js

@@ -1,4 +1,12 @@
 import Blockly from "blockly";
+//import store from "../../../store";
+
+// preperations for the esp board
+// var selectedBoard = store.getState().board.board;
+// store.subscribe(() => {
+//   selectedBoard = store.getState().board.board;
+// });
+
 
 /* Wifi connection and openSenseMap Blocks*/
 Blockly.Arduino.sensebox_wifi = function (block) {
@@ -110,3 +118,5 @@ Blockly.Arduino.sensebox_ethernetIp = function () {
   var code = "Ethernet.localIP()";
   return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
+
+

src/components/Blockly/generator/variables.js

@@ -23,7 +23,6 @@ const setVariableFunction = function (defaultValue) {
       .getVariableMap()
       .getAllVariables();
     const myVar = allVars.filter((v) => v.name === variableName)[0];
-    console.log(myVar);
     var code = "";
     if (myVar !== undefined) {
       Blockly.Arduino.variables_[variableName + myVar.type] =

src/components/Blockly/helpers/board.js

@@ -23,6 +23,11 @@ const sensebox_mcu = {
     ["C5", "5"],
     ["C6", "6"],
   ],
+  digitalPinsRGB: [
+    ["A", "1"],
+    ["B", "3"],
+    ["C", "5"],
+  ],
   digitalPinsButton: [
     ["on Board", "0"],
     ["A1", "1"],
@@ -131,7 +136,7 @@ const sensebox_mini = {
   description: "senseBox Mini",
   compilerFlag: "arduino:samd",
   digitalPins: [
-    ["A1", "1"],
+    ["Test", "1"],
     ["A2", "2"],
     ["B3", "3"],
     ["B4", "4"],
@@ -148,6 +153,11 @@ const sensebox_mini = {
     ["C5", "5"],
     ["C6", "6"],
   ],
+  digitalPinsRGB: [
+    ["on Board", "7"],
+    ["B", "8"],
+    ["C", "1"],
+  ],
   digitalPinsButton: [
     ["on Board", "0"],
     ["A1", "1"],
@@ -247,7 +257,6 @@ const sensebox_mini = {
 var board = sensebox_mcu
 
 export const setBoard = (selectedBoard) => {
-  console.log(board)
   if (selectedBoard === "mini"){
     board = sensebox_mini
   }
@@ -258,6 +267,5 @@ export const setBoard = (selectedBoard) => {
 
 
 export const selectedBoard = () => {
-  console.log(board)
   return board;
 };

src/components/Blockly/msg/de/ui.js

@@ -182,7 +182,8 @@ export const UI = {
   settings_sounds: "Töne",
   settings_sounds_text:
     "Aktiviere oder Deaktiviere Töne beim hinzufügen und löschen von Blöcken. Standardmäßig deaktiviert",
-
+  settings_board: "Board",
+  settings_board_text: "Wähle dein verwendetes Board aus",
   /**
    * 404
    */

src/components/Blockly/msg/en/ui.js

@@ -176,6 +176,8 @@ export const UI = {
   settings_sounds: "Sound",
   settings_sounds_text:
     "Enable or disable sounds when adding and deleting blocks. Disabled by default",
+  settings_board: "Board",
+  settings_board_text: "Choose your board",
 
   /**
    * 404
@@ -296,4 +298,11 @@ export const UI = {
   codeeditor_blockly_code: "Load blockly code",
   codeeditor_compile_progress:
     "Your code will now be compiled and then downloaded to your computer",
+
+      /**
+   * Device Selction
+   *  */
+  deviceselection_head: "Which board are you using?",
+  deviceselection_keep_selection: "Save my choice",
+
 };

src/components/CodeEditor/CodeEditor.js

@@ -38,7 +38,6 @@ const CodeEditor = (props) => {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           setProgress(false);
           setOpen(true);

src/components/CodeEditor/Compile.js

@@ -89,7 +89,6 @@ class Compile extends Component {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           this.setState({
             progress: false,

src/components/CodeEditor/SerialMonitor.js

@@ -27,7 +27,6 @@ const SerialMonitor = () => {
             if (value) {
               //   byte array to string: https://stackoverflow.com/a/37542820
               const text = String.fromCharCode.apply(null, value);
-              console.log(text);
               setSerialPortContent((prevContent) => [
                 ...prevContent,
                 [new Date(), text],

src/components/DeviceSelection.js

@@ -7,8 +7,7 @@ import { withStyles } from "@material-ui/core/styles";
 import Checkbox from "@material-ui/core/Checkbox";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import * as Blockly from "blockly";
-import ReactMarkdown from "react-markdown";
+import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
-import { IconButton, Grid, Avatar } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";
 
 const styles = (theme) => ({
@@ -65,7 +64,6 @@ class DeviceSeclection extends Component {
     this.setState({selectedBoard: value})
   };
 
-
   render() {
     return (
       <Dialog
@@ -76,27 +74,27 @@ class DeviceSeclection extends Component {
         title={Blockly.Msg.deviceselection_head}
         content={""}
         onClick={this.toggleDialog}
-        button={Blockly.Msg.button_save}
+        button={Blockly.Msg.button_accept}
         disabled={this.state.selectedBoard===""}
       >
         <div>
           <Grid container spacing={2} style={{  textAlign : "center" }}>
-            <Grid item xs={4}>
+            <Grid item xs={6}>
             <IconButton onClick={(e) => this.onclick(e, "mcu")}>
               <Avatar
                 alt="Sensebox MCU"
                 src="/media/hardware/senseboxmcu.png"
                 style={{
-                  border: this.state.selectedBoard == "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
                   width:"20vw",
                   height: "20vw"
                }}
               />
               </IconButton>
-              <p>Sensebox MCU</p>
+              <p>senseBox MCU</p>
             </Grid>
 
-            <Grid item xs={4}>
+            {/* <Grid item xs={4}>
             <IconButton onClick={(e) => this.onclick(e, "esp")}>
               <Avatar
                 alt="Sensebox ESP"
@@ -109,20 +107,20 @@ class DeviceSeclection extends Component {
               />
               </IconButton>
               <p>Sensebox ESP</p>
-            </Grid>
+            </Grid> */}
-            <Grid item xs={4}>
+            <Grid item xs={6}>
               <IconButton onClick={(e) => this.onclick(e, "mini")}>
               <Avatar
                 alt="Sensebox Mini"
-                src="/media/hardware/senseboxmcu.png"
+                src="/media/hardware/senseboxmcumini.png"
                  style={{
-                  border: this.state.selectedBoard == "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
                   width:"20vw",
                   height: "20vw"
                }}
               />
               </IconButton>
-              <p>Sensebox Mini</p>
+              <p>senseBox MCU:mini</p>
             </Grid>
           </Grid>
         </div>
@@ -141,6 +139,9 @@ class DeviceSeclection extends Component {
           }
           label={Blockly.Msg.deviceselection_keep_selection}
         />
+        <Typography variant="body1" >
+          Hier kommst du zur alten Blockly Version für den <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> oder die <a href="/">senseBox MCU</a>
+        </Typography>
       </Dialog>
     );
   }

src/components/Home.js

@@ -12,7 +12,7 @@ import BlocklyWindow from "./Blockly/BlocklyWindow";
 import CodeViewer from "./CodeViewer";
 import TrashcanButtons from "./Workspace/TrashcanButtons";
 import HintTutorialExists from "./Tutorial/HintTutorialExists";
-import DeviceSelction from "./DeviceSelction";
+import DeviceSelection from "./DeviceSelection";
 
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
@@ -187,7 +187,7 @@ class Home extends Component {
             </Grid>
           ) : null}
         </Grid>
-        <DeviceSelction />
+        <DeviceSelection />
         <HintTutorialExists />
         {this.props.platform ? (
           <Dialog

src/components/Settings/DeviceSelector.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setBoard } from '../../actions/boardAction';
+
+import * as Blockly from 'blockly/core';
+
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+class DeviceSelector extends Component {
+
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
+
+
+  render(){
+    return(
+      <div>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.selectedBoard}
+            onChange={(e) => this.props.setBoard(e.target.value)}
+          >
+            <MenuItem value="mcu">senseBox MCU</MenuItem>
+            <MenuItem value="mini">senseBox MCU mini</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+DeviceSelector.propTypes = {
+  setBoard: PropTypes.func.isRequired,
+  selectedBoard: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  selectedBoard: state.board.board
+});
+
+export default connect(mapStateToProps, { setBoard })(DeviceSelector);

src/components/Settings/Settings.js

@@ -12,6 +12,7 @@ import RenderSelector from "./RenderSelector";
 import StatsSelector from "./StatsSelector";
 import OtaSelector from "./OtaSelector";
 import SoundsSelector from "./SoundsSelector";
+import DeviceSelector from "./DeviceSelector";
 
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
@@ -52,6 +53,9 @@ class Settings extends Component {
         <Paper style={{ margin: "10px 0px", padding: "10px" }}>
           <SoundsSelector />
         </Paper>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
+          <DeviceSelector />
+        </Paper>
 
         <Button
           style={{ marginTop: "10px" }}

src/components/Tutorial/Builder/Builder.js

@@ -304,7 +304,6 @@ class Builder extends Component {
           newTutorial.append(`steps[${i}][xml]`, step.xml);
         }
       });
-      console.log(newTutorial);
       return newTutorial;
     }
   };

src/components/Tutorial/Builder/Difficulty.js

@@ -34,13 +34,11 @@ const styles = (theme) => ({
 
 class Difficulty extends Component {
   ratingChanged = (newRating) => {
-    console.log(newRating);
     this.handleChange(newRating);
   };
 
   handleChange = (e) => {
     var value = e;
-    console.log(value);
     if (this.props.property === "difficulty") {
       this.props.tutorialDifficulty(value);
     } else if (this.props.property === "json") {

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -44,7 +44,6 @@ const MarkdownEditor = (props) => {
         headers: { "Content-Type": "multipart/form-data" },
       })
         .then((res) => {
-          console.log(res);
           resolve(
             `${process.env.REACT_APP_BLOCKLY_API}/upload/` + res.data.filename
           );

src/components/Tutorial/Builder/Public.js

@@ -36,7 +36,6 @@ const styles = (theme) => ({
 class Public extends Component {
   handleChange = (e) => {
     var value = e.target.checked;
-    console.log(value);
     if (this.props.property === "public") {
       this.props.tutorialPublic(value);
     } else if (this.props.property === "json") {

src/components/Tutorial/TutorialHome.js

@@ -147,7 +147,6 @@ class TutorialHome extends Component {
     if (this.props.message.id === "GET_TUTORIALS_FAIL") {
       alert(this.props.message.msg);
     }
-    console.log(this.props.user);
   }
 
   componentWillUnmount() {

src/components/User/Login.js

@@ -50,7 +50,6 @@ export class Login extends Component {
       }
       // Check for login error
       else if (message.id === "LOGIN_FAIL") {
-        console.log("login fail");
         this.setState({
           email: "",
           password: "",

src/components/Workspace/AutoSave.js

@@ -37,7 +37,6 @@ class AutoSave extends Component {
   };
 
   componentDidMount() {
-    console.log(this.props.xml);
   }
 
   componentDidUpdate(prevProps) {

src/components/Workspace/Compile.js

@@ -89,7 +89,6 @@ class Compile extends Component {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           this.setState({
             progress: false,

src/components/Workspace/WorkspaceFunc.js

@@ -15,9 +15,6 @@ import DeleteProject from "./DeleteProject";
 import CopyCode from "./CopyCode";
 import AutoSave from "./AutoSave";
 class WorkspaceFunc extends Component {
-  componentDidUpdate() {
-    console.log(this.props.autosave);
-  }
 
   render() {
     return (

src/reducers/boardReducer.js

@@ -2,9 +2,9 @@ import { BOARD } from '../actions/types';
 
 const initialValue = () => {
   if (window.localStorage.getItem("board")) {
-    return window.localStorage.getItem("locale");
+    return window.localStorage.getItem("board");
   }
-  return "";
+  return "bla";
 };
 
 const initialState = {