add language and mcu settings to navbar

package.json

@@ -29,6 +29,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^17.0.2",
     "react-cookie-consent": "^7.2.1",
+    "react-country-flag": "^3.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.0",
     "react-markdown-editor-lite": "^1.3.3",

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

@@ -13,8 +13,8 @@ export const IO = {
   ARD_DIGITALREAD_TIP: "Read digital value on a pin: HIGH or LOW",
   ARD_DIGITALWRITE: "set digitial pin#",
   ARD_DIGITALWRITE_TIP: "Write digital value HIGH or LOW to a specific Port",
-  ARD_FUN_RUN_LOOP: "Arduino loop forever:",
-  ARD_FUN_RUN_SETUP: "Arduino run first:",
+  ARD_FUN_RUN_LOOP: "Loop()",
+  ARD_FUN_RUN_SETUP: "Setup()",
   ARD_FUN_RUN_TIP: "Defines the Arduino setup() and loop() functions.",
   ARD_HIGH: "HIGH",
   ARD_HIGHLOW_TIP: "Set a pin state logic High or Low.",

src/components/Navbar.js

@@ -41,6 +41,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import Tooltip from "@material-ui/core/Tooltip";
+import NavbarSettings from "./NavbarSettings";
 
 const styles = (theme) => ({
   drawerWidth: {
@@ -127,6 +128,7 @@ class Navbar extends Component {
             <Link to={"/"} style={{ marginLeft: "10px" }}>
               <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
+            <NavbarSettings />
             {isTutorial ? (
               <Link
                 to={"/tutorial"}
@@ -149,7 +151,7 @@ class Navbar extends Component {
                   onClick={() => {
                     this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  style={{ margin: "0 30px 0 0" }}
                 >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
@@ -163,7 +165,7 @@ class Navbar extends Component {
                   onClick={() => {
                     this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  style={{ margin: "0 30px 0 0" }}
                 >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
@@ -214,11 +216,11 @@ class Navbar extends Component {
           </div>
           <List>
             {[
-                 {
-                  text: Blockly.Msg.navbar_blockly,
-                  icon: faPuzzlePiece,
-                  link: "/",
-                },
+              {
+                text: Blockly.Msg.navbar_blockly,
+                icon: faPuzzlePiece,
+                link: "/",
+              },
               {
                 text: Blockly.Msg.navbar_tutorials,
                 icon: faChalkboardTeacher,
@@ -329,9 +331,9 @@ class Navbar extends Component {
                       onClick={
                         item.function
                           ? () => {
-                              item.function();
-                              this.toggleDrawer();
-                            }
+                            item.function();
+                            this.toggleDrawer();
+                          }
                           : this.toggleDrawer
                       }
                     >

src/components/NavbarSettings.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { setLanguage } from '../actions/generalActions';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import { setBoard } from '../actions/boardAction';
+import ReactCountryFlag from "react-country-flag";
+
+class NavbarSettings 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();
+    }
+
+    handleChange = (event) => {
+        this.props.setLanguage(event.target.value);
+    }
+
+    render() {
+        return (
+            <div style={{ margin: "0 0 0 auto", display: "flex" }}>
+                <div style={{ margin: "0 30px 0 auto", display: "flex" }}>
+                    <Select
+                        value={this.props.selectedBoard}
+                        onChange={(e) => this.props.setBoard(e.target.value)}
+                        disableUnderline={true}
+                    >
+                        <MenuItem value="mcu">senseBox MCU</MenuItem>
+                        <MenuItem value="mini">senseBox MCU mini</MenuItem>
+                    </Select>
+                </div>
+                <div style={{ margin: "0 0 0 auto", display: "flex" }}>
+                    <Select
+                        value={this.props.language}
+                        onChange={this.handleChange}
+                        disableUnderline={true}
+                        IconComponent={() => null}
+                    >
+                        <MenuItem value={'en_US'} >
+                            <ReactCountryFlag
+                                countryCode="US"
+                                svg
+                                cdnSuffix="svg"
+                                title="US"
+                            />
+                        </MenuItem>
+                        <MenuItem value={'de_DE'}>
+                            <ReactCountryFlag
+                                countryCode="DE"
+                                svg
+                                cdnSuffix="svg"
+                                title="DE"
+                            />
+                        </MenuItem>
+                    </Select>
+                </div>
+            </div >
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    language: state.general.language,
+    selectedBoard: state.board.board
+});
+
+export default connect(mapStateToProps, { setLanguage, setBoard })(NavbarSettings);