schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'development-featSensorWiki' of https://github.com/sensebox/React-Ardublockly into development-featSensorWiki

Browse Source
This commit is contained in:
Mario Pesch 2022-11-16 12:07:44 +01:00
commit 8571f0430f
7 changed files with 49 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/actions/boardAction.js
View File

@ -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,
});
};

2
src/components/CodeEditor/CodeEditor.js
View File

@ -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" }}

29
src/components/DeviceSelection.js
View File

@ -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>

14
src/components/Project/ProjectHome.js
View File

@ -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={{

24
src/components/Tutorial/TutorialHome.js
View File

@ -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>

6
src/helpers/compareXml.js
View File

@ -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'};
}
}
};

14
src/reducers/boardReducer.js
View File

@ -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()
};