Merge branch 'development' into development-featSensorWiki

2022-11-16 12:04:05 +01:00 · 2022-11-16 12:04:05 +01:00 · 564dcc4d4a
commit 564dcc4d4a
parent f95b1b36ca 50b70b4ee3
7 changed files with 49 additions and 59 deletions
--- a/src/actions/boardAction.js
+++ b/src/actions/boardAction.js
@ -1,10 +1,15 @@
 import {
-    BOARD,
-  } from "./types";
+  BOARD,
+} from "./types";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"

 export const setBoard = (board) => (dispatch) => {
-    dispatch({
-      type: BOARD,
-      payload: board,
-    });
-  };
+  window.sessionStorage.setItem("board", board);
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
+  dispatch({
+    type: BOARD,
+    payload: board,
+  });
+};
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/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" }}
--- a/src/components/DeviceSelection.js
+++ b/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,7 +27,7 @@ class DeviceSeclection extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      open: true,
+      open: props.selectedBoard ? false : true,
      selectedBoard: "",
      saveSettings: false,

@ -37,9 +35,7 @@ class DeviceSeclection extends Component {
  }

  toggleDialog = () => {
-
    this.props.setBoard(this.state.selectedBoard)
-
  };

  onChange = (e) => {
@ -51,14 +47,9 @@ class DeviceSeclection extends Component {
  };

  onclick = (e, 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() {
@ -89,7 +80,6 @@ class DeviceSeclection extends Component {
              </IconButton>
              <p>senseBox MCU</p>
            </Grid>
-
            {/* <Grid item xs={4}>
            <IconButton onClick={(e) => this.onclick(e, "esp")}>
              <Avatar
@ -99,7 +89,7 @@ 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>
@ -120,21 +110,6 @@ class DeviceSeclection extends Component {
            </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>
--- a/src/components/Project/ProjectHome.js
+++ b/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 ${
-            type === "gallery" ? "Galerie-" : ""
-          }Projekt konnte nicht gefunden werden.`,
+          message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
+            }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={`/${
-                            data === "Projekte" ? "project" : "gallery"
-                          }/${project._id}`}
+                          to={`/${data === "Projekte" ? "project" : "gallery"
+                            }/${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={{
--- a/src/components/Tutorial/TutorialHome.js
+++ b/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={`${
-                              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))
-                            }`}
+                            stroke-dashoffset={`${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))
+                              }`}
                          ></circle>
                        )}
                        {success < 1 && !error ? (
@ -265,9 +263,8 @@ class TutorialHome extends Component {
                            cy="50%"
                            fill="none"
                            stroke-width="10"
-                            stroke-dashoffset={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
+                            stroke-dashoffset={`${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
-                          : null
+                            ? this.props.classes.outerDivSuccess
+                            : 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>
--- a/src/helpers/compareXml.js
+++ b/src/helpers/compareXml.js
@ -15,11 +15,13 @@ const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
    var blocks;
    if(originalBlocks.length > userBlocks.length){
      blocks = originalBlocks.length-userBlocks.length;
-      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
+      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
+      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} weniger verwendet als in der hinterlegten Lösung.`, type: 'success'};
    }
    else {
      blocks = userBlocks.length-originalBlocks.length;
-      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
+      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
+      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} mehr verwendet als in der hinterlegten Lösung.`, type: 'success'};
    }
  }
 };
--- a/src/reducers/boardReducer.js
+++ b/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")) {
-    return window.localStorage.getItem("board");
+  if (window.sessionStorage.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()
 };