dialog for device selction

src/actions/boardAction.js

@@ -0,0 +1,10 @@
+import {
+    BOARD,
+  } from "./types";
+
+export const setBoard = (board) => (dispatch) => {
+    dispatch({
+      type: BOARD,
+      payload: board,
+    });
+  };

src/actions/types.js

@@ -63,3 +63,6 @@ export const GET_PROJECT = "GET_PROJECT";
 export const GET_PROJECTS = "GET_PROJECTS";
 export const PROJECT_TYPE = "PROJECT_TYPE";
 export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";
+
+//board
+export const BOARD = "BOARD";

src/components/Blockly/helpers/board.js

@@ -126,6 +126,138 @@ const sensebox_mcu = {
   parseKey: "_*_",
 };
 
-export const selectedBoard = () => {
+//Just for test purposes
-  return sensebox_mcu;
+const sensebox_mini = {
+  description: "senseBox Mini",
+  compilerFlag: "arduino:samd",
+  digitalPins: [
+    ["A1", "1"],
+    ["A2", "2"],
+    ["B3", "3"],
+    ["B4", "4"],
+    ["C5", "5"],
+    ["C6", "6"],
+  ],
+  digitalPinsLED: [
+    ["BUILTIN_1", "7"],
+    ["BUILTIN_2", "8"],
+    ["A1", "1"],
+    ["A2", "2"],
+    ["B3", "3"],
+    ["B4", "4"],
+    ["C5", "5"],
+    ["C6", "6"],
+  ],
+  digitalPinsButton: [
+    ["on Board", "0"],
+    ["A1", "1"],
+    ["A2", "2"],
+
+  ],
+  pwmPins: [
+    ["A1", "1"],
+    ["A2", "2"],
+    ["B3", "3"],
+    ["B4", "4"],
+    ["C5", "5"],
+    ["C6", "6"],
+  ],
+  serial: [
+    ["serial", "SerialUSB"],
+    ["serial_1", "Serial1"],
+    ["serial_2", "Serial2"],
+  ],
+  serialPins: {
+    SerialUSB: [
+      ["RX", ""],
+      ["TX", ""],
+    ],
+    Serial1: [
+      ["RX", "11"],
+      ["TX", "10"],
+    ],
+    Serial2: [
+      ["RX", "13"],
+      ["TX", "12"],
+    ],
+  },
+  serialSpeed: [
+    ["300", "300"],
+    ["600", "600"],
+    ["1200", "1200"],
+    ["2400", "2400"],
+    ["4800", "4800"],
+    ["9600", "9600"],
+    ["14400", "14400"],
+    ["19200", "19200"],
+    ["28800", "28800"],
+    ["31250", "31250"],
+    ["38400", "38400"],
+    ["57600", "57600"],
+    ["115200", "115200"],
+  ],
+  spi: [["SPI", "SPI"]],
+  spiPins: {
+    SPI: [
+      ["MOSI", "19"],
+      ["MISO", "21"],
+      ["SCK", "20"],
+    ],
+  },
+  spiClockDivide: [
+    ["2 (8MHz)", "SPI_CLOCK_DIV2"],
+    ["4 (4MHz)", "SPI_CLOCK_DIV4"],
+    ["8 (2MHz)", "SPI_CLOCK_DIV8"],
+    ["16 (1MHz)", "SPI_CLOCK_DIV16"],
+    ["32 (500KHz)", "SPI_CLOCK_DIV32"],
+    ["64 (250KHz)", "SPI_CLOCK_DIV64"],
+    ["128 (125KHz)", "SPI_CLOCK_DIV128"],
+  ],
+  i2c: [["I2C", "Wire"]],
+  i2cPins: {
+    Wire: [
+      ["SDA", "17"],
+      ["SCL", "16"],
+    ],
+  },
+  i2cSpeed: [
+    ["100kHz", "100000L"],
+    ["400kHz", "400000L"],
+  ],
+  builtinLed: [
+    ["BUILTIN_1", "7"],
+    ["BUILTIN_2", "8"],
+  ],
+  interrupt: [
+    ["interrupt1", "1"],
+    ["interrupt2", "2"],
+    ["interrupt3", "3"],
+    ["interrupt4", "4"],
+    ["interrupt5", "5"],
+    ["interrupt6", "6"],
+  ],
+  analogPins: [
+    ["A1", "A1"],
+    ["A2", "A2"],
+  ],
+  serial_baud_rate: 9600,
+  parseKey: "_*_",
+};
+
+var board = sensebox_mcu
+
+export const setBoard = (selectedBoard) => {
+  console.log(board)
+  if (selectedBoard === "mini"){
+    board = sensebox_mini
+  }
+  else {
+    board = sensebox_mcu
+  }
+}
+
+
+export const selectedBoard = () => {
+  console.log(board)
+  return board;
 };

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

@@ -141,6 +141,7 @@ export const UI = {
 
   button_cancel: "Abbrechen",
   button_close: "Schließen",
+  button_save: "Speichern",
   button_accept: "Bestätigen",
   button_compile: "Kompilieren",
   button_create_variableCreate: "Erstelle Variable",
@@ -301,4 +302,10 @@ export const UI = {
   codeeditor_blockly_code: "Lade Blockly Code",
   codeeditor_compile_progress:
     "Dein Code wird nun kompiliert und anschließend auf deinen Computer heruntergeladen",
+
+  /**
+   * Device Selction
+   *  */
+  deviceselection_head: "Welches Board benutzt du?",
+  deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal"
 };

src/components/Content.js

@@ -10,6 +10,7 @@ import Navbar from './Navbar';
 import Footer from './Footer';
 import Routes from './Route/Routes';
 import Cookies from './Cookies';
+import { setBoard } from './Blockly/helpers/board';
 
 class Content extends Component {
 
@@ -19,6 +20,7 @@ class Content extends Component {
     } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
+    setBoard(this.props.board)
   }
 
   componentDidUpdate(props) {
@@ -29,6 +31,7 @@ class Content extends Component {
         Blockly.setLocale(En);
       }
     }
+    setBoard(this.props.board)
   }
 
   render() {
@@ -48,7 +51,8 @@ Content.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  language: state.general.language
+  language: state.general.language,
+  board: state.board.board
 });
 
 export default connect(mapStateToProps, null)(Content);

src/components/DeviceSelction.js

@@ -0,0 +1,161 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import Dialog from "./Dialog";
+
+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 } from "@material-ui/core";
+import { setBoard } from "../actions/boardAction";
+
+const styles = (theme) => ({
+  link: {
+    color: theme.palette.primary.main,
+    textDecoration: "none",
+    "&:hover": {
+      color: theme.palette.primary.main,
+      textDecoration: `underline`,
+    },
+  },
+  label: {
+    fontSize: "0.9rem",
+    color: "grey",
+  },
+});
+
+class DeviceSeclection extends Component {
+  constructor(props) {
+    var previousPageWasAnotherDomain = props.pageVisits === 0;
+    var userWantToKeepBoard = window.localStorage.getItem("board")
+      ? true
+      : false;
+    super(props);
+    this.state = {
+      open: userWantToKeepBoard
+        ? !userWantToKeepBoard
+        : previousPageWasAnotherDomain,
+      selectedBoard : "",
+      saveSettings: false,
+
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state });
+    if(this.state.saveSettings){
+      window.localStorage.setItem("board", this.state.selectedBoard) 
+    }
+    this.props.setBoard(this.state.selectedBoard)
+
+  };
+
+  onChange = (e) => {
+    if (e.target.checked) {
+      this.setState({ saveSettings: true});
+    } else {
+      this.setState({ saveSettings: false});
+    }
+  };
+
+  onclick = (e, value) => {
+    console.log(e, value)
+    this.setState({selectedBoard: value})
+  };
+
+
+  render() {
+    return (
+      <Dialog
+        style={{ zIndex: 9999999 }}
+        fullWidth
+        maxWidth={"xl"}
+        open={this.state.open}
+        title={Blockly.Msg.deviceselection_head}
+        content={""}
+        onClick={this.toggleDialog}
+        button={Blockly.Msg.button_save}
+        disabled={this.state.selectedBoard===""}
+      >
+        <div>
+          <Grid container spacing={2} style={{  textAlign : "center" }}>
+            <Grid item xs={4}>
+            <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",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>Sensebox MCU</p>
+            </Grid>
+
+            <Grid item xs={4}>
+            <IconButton onClick={(e) => this.onclick(e, "esp")}>
+              <Avatar
+                alt="Sensebox ESP"
+                src="/media/hardware/senseboxmcu.png"
+                style={{
+                  border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>Sensebox ESP</p>
+            </Grid>
+            <Grid item xs={4}>
+              <IconButton onClick={(e) => this.onclick(e, "mini")}>
+              <Avatar
+                alt="Sensebox Mini"
+                src="/media/hardware/senseboxmcu.png"
+                 style={{
+                  border: this.state.selectedBoard == "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>Sensebox Mini</p>
+            </Grid>
+          </Grid>
+        </div>
+        <FormControlLabel
+          style={{ marginTop: "20px" }}
+          classes={{ label: this.props.classes.label }}
+          control={
+            <Checkbox
+              size={"small"}
+              value={true}
+              checked={this.state.checked}
+              onChange={(e) => this.onChange(e)}
+              name="dialog"
+              color="primary"
+            />
+          }
+          label={Blockly.Msg.deviceselection_keep_selection}
+        />
+      </Dialog>
+    );
+  }
+}
+
+DeviceSeclection.propTypes = {
+  pageVisits: PropTypes.number.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  pageVisits: state.general.pageVisits,
+  selectedBoard: state.board.board
+});
+
+export default connect(
+  mapStateToProps,
+  {setBoard}
+)(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/components/Dialog.js

@@ -24,7 +24,7 @@ class Dialog extends Component {
         </DialogContent>
         <DialogActions>
           {this.props.actions ? this.props.actions :
-            <Button onClick={this.props.onClick} color="primary">
+            <Button onClick={this.props.onClick} disabled={this.props.disabled} color="primary">
               {this.props.button}
             </Button>
           }

src/components/Home.js

@@ -12,6 +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 Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
@@ -186,6 +187,7 @@ class Home extends Component {
             </Grid>
           ) : null}
         </Grid>
+        <DeviceSelction />
         <HintTutorialExists />
         {this.props.platform ? (
           <Dialog

src/reducers/boardReducer.js

@@ -0,0 +1,24 @@
+import { BOARD } from '../actions/types';
+
+const initialValue = () => {
+  if (window.localStorage.getItem("board")) {
+    return window.localStorage.getItem("locale");
+  }
+  return "";
+};
+
+const initialState = {
+    board: initialValue()
+};
+
+export default function foo(state = initialState, action){
+  switch(action.type){
+    case BOARD:
+      return {
+        ...state,
+        board: action.payload,
+      };
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -6,9 +6,11 @@ import generalReducer from './generalReducer';
 import projectReducer from './projectReducer';
 import messageReducer from './messageReducer';
 import authReducer from './authReducer';
+import boardReducer from './boardReducer'
 
 export default combineReducers({
   auth: authReducer,
+  board: boardReducer, 
   workspace: workspaceReducer,
   tutorial: tutorialReducer,
   builder: tutorialBuilderReducer,