Merge pull request #216 from sensebox/development-deviceSelection

Development device selection

src/actions/boardAction.js

@@ -1,10 +1,15 @@
 import {
-    BOARD,
+  BOARD,
-  } from "./types";
+} from "./types";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 export const setBoard = (board) => (dispatch) => {
-    dispatch({
+  window.sessionStorage.setItem("board", board);
-      type: BOARD,
+  const root = document.querySelector(':root');
-      payload: board,
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
-    });
+  dispatch({
-  };
+    type: BOARD,
+    payload: board,
+  });
+};

src/components/CodeEditor/CodeEditor.js

@@ -11,6 +11,7 @@ import Sidebar from "./Sidebar";
 import Dialog from "../Dialog";
 import SaveIcon from "./SaveIcon";
 import store from "../../store";
+import DeviceSelection from "../DeviceSelection";
 
 const CodeEditor = (props) => {
   //const [filehandle, setFileHandle] = useState();
@@ -192,6 +193,7 @@ void loop() {
             }}
           />
         </Grid>
+        <DeviceSelection />
         <Grid item lg={4} md={4}>
           <Button
             style={{ padding: "1rem", margin: "1rem" }}

src/components/DeviceSelection.js

@@ -7,8 +7,6 @@ import { withStyles } from "@material-ui/core/styles";
 import * as Blockly from "blockly";
 import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";
-import mini_opacity from "../data/mini_opacity.png"
-import mcu_opacity from "../data/mcu_opacity.png"
 
 const styles = (theme) => ({
   link: {
@@ -29,37 +27,29 @@ class DeviceSeclection extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: true,
+      open: props.selectedBoard ? false : true,
-      selectedBoard : "",
+      selectedBoard: "",
       saveSettings: false,
 
     };
   }
 
   toggleDialog = () => {
-    
     this.props.setBoard(this.state.selectedBoard)
-
   };
 
   onChange = (e) => {
     if (e.target.checked) {
-      this.setState({ saveSettings: true});
+      this.setState({ saveSettings: true });
     } else {
-      this.setState({ saveSettings: false});
+      this.setState({ saveSettings: false });
     }
   };
 
   onclick = (e, value) => {
-    console.log(e, value)
+    this.setState({ selectedBoard: value })
-    const root = document.querySelector(':root');
-    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
-    this.setState({selectedBoard: value})
     this.props.setBoard(value)
     this.setState({ open: !this.state });
-   
-
-   
   };
 
   render() {
@@ -72,25 +62,24 @@ class DeviceSeclection extends Component {
         title={Blockly.Msg.deviceselection_head}
         content={""}
         onClick={this.toggleDialog}
-        disabled={this.state.selectedBoard===""}
+        disabled={this.state.selectedBoard === ""}
       >
         <div>
-          <Grid container spacing={2} style={{  textAlign : "center" }}>
+          <Grid container spacing={2} style={{ textAlign: "center" }}>
             <Grid item xs={6}>
-            <IconButton onClick={(e) => this.onclick(e, "mcu")}>
+              <IconButton onClick={(e) => this.onclick(e, "mcu")}>
-              <Avatar
+                <Avatar
-                alt="Sensebox MCU"
+                  alt="Sensebox MCU"
-                src="/media/hardware/senseboxmcu.png"
+                  src="/media/hardware/senseboxmcu.png"
-                style={{
+                  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",
+                    width: "20vw",
-                  height: "20vw"
+                    height: "20vw"
-               }}
+                  }}
-              />
+                />
               </IconButton>
               <p>senseBox MCU</p>
             </Grid>
-
             {/* <Grid item xs={4}>
             <IconButton onClick={(e) => this.onclick(e, "esp")}>
               <Avatar
@@ -100,42 +89,27 @@ class DeviceSeclection extends Component {
                   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={6}>
               <IconButton onClick={(e) => this.onclick(e, "mini")}>
-              <Avatar
+                <Avatar
-                alt="Sensebox Mini"
+                  alt="Sensebox Mini"
-                src="/media/hardware/senseboxmcumini.png"
+                  src="/media/hardware/senseboxmcumini.png"
-                 style={{
+                  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",
+                    width: "20vw",
-                  height: "20vw"
+                    height: "20vw"
-               }}
+                  }}
-              />
+                />
               </IconButton>
               <p>senseBox MCU: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}
-        /> */}
         <Typography variant="body1" >
           {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
         </Typography>
@@ -155,5 +129,5 @@ const mapStateToProps = (state) => ({
 
 export default connect(
   mapStateToProps,
-  {setBoard}
+  { setBoard }
 )(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/components/Project/ProjectHome.js

@@ -18,6 +18,7 @@ import Divider from "@material-ui/core/Divider";
 import Typography from "@material-ui/core/Typography";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   link: {
@@ -60,9 +61,8 @@ class ProjectHome extends Component {
         this.setState({
           snackbar: true,
           key: Date.now(),
-          message: `Dein angefragtes ${
+          message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
-            type === "gallery" ? "Galerie-" : ""
+            }Projekt konnte nicht gefunden werden.`,
-          }Projekt konnte nicht gefunden werden.`,
           type: "error",
         });
       }
@@ -108,6 +108,7 @@ class ProjectHome extends Component {
         />
 
         <h1>{data}</h1>
+        <DeviceSelection />
         {this.props.progress ? (
           <Backdrop open invisible>
             <CircularProgress color="primary" />
@@ -127,9 +128,8 @@ class ProjectHome extends Component {
                         }}
                       >
                         <Link
-                          to={`/${
+                          to={`/${data === "Projekte" ? "project" : "gallery"
-                            data === "Projekte" ? "project" : "gallery"
+                            }/${project._id}`}
-                          }/${project._id}`}
                           style={{ textDecoration: "none", color: "inherit" }}
                         >
                           <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@@ -153,7 +153,7 @@ class ProjectHome extends Component {
                           </Typography>
                         </Link>
                         {this.props.user &&
-                        this.props.user.email === project.creator ? (
+                          this.props.user.email === project.creator ? (
                           <div>
                             <Divider
                               style={{

src/components/Tutorial/TutorialHome.js

@@ -37,6 +37,7 @@ import Tooltip from "@material-ui/core/Tooltip";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "../Snackbar";
 import Divider from "@material-ui/core/Divider";
+import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   outerDiv: {
@@ -243,14 +244,11 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
+                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
-                            }`}
+                            stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
-                            stroke-dasharray={`${
+                              } ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                              75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
+                              }`}
-                            } ${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
                           ></circle>
                         )}
                         {success < 1 && !error ? (
@@ -265,9 +263,8 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
+                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
-                            }`}
                             stroke-dasharray={`${75 * 2 * Math.PI}`}
                           ></circle>
                         ) : null}
@@ -279,8 +276,8 @@ class TutorialHome extends Component {
                         tutorialStatus === "Error"
                           ? this.props.classes.outerDivError
                           : tutorialStatus === "Success"
-                          ? this.props.classes.outerDivSuccess
+                            ? this.props.classes.outerDivSuccess
-                          : null
+                            : null
                       )}
                     >
                       <div className={this.props.classes.innerDiv}>
@@ -311,6 +308,7 @@ class TutorialHome extends Component {
             );
           })}
         </Grid>
+        <DeviceSelection />
         {this.props.user ? (
           <div>
             <h2>User Tutorials</h2>

src/reducers/boardReducer.js

@@ -1,12 +1,20 @@
 import { BOARD } from '../actions/types';
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 const initialValue = () => {
-  if (window.localStorage.getItem("board")) {
+  if (window.sessionStorage.getItem("board")) {
-    return window.localStorage.getItem("board");
+    setBackgroundImage(window.sessionStorage.getItem("board"));
+    return window.sessionStorage.getItem("board");
   }
-  return "bla";
+  return null;
 };
 
+const setBackgroundImage = (board) => {
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
+}
+
 const initialState = {
     board: initialValue()
 };