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

Merge pull request #216 from sensebox/development-deviceSelection

Browse Source 
Development device selection
This commit is contained in:
Mario Pesch 2022-11-16 11:56:38 +01:00 committed by GitHub
commit 50b70b4ee3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 71 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/actions/boardAction.js
View File

@ -1,10 +1,15 @@
import {
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) => {
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" }}

50
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,37 +27,29 @@ class DeviceSeclection extends Component {
constructor(props) {
super(props);
this.state = {
open: true,
selectedBoard : "",
open: props.selectedBoard ? false : true,
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)
const root = document.querySelector(':root');
root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
this.setState({selectedBoard: value})
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")}>
<Avatar
alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png"
style={{
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
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
@ -111,8 +100,8 @@ class DeviceSeclection extends Component {
alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png"
style={{
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width: "20vw",
height: "20vw"
}}
/>
@ -121,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>
@ -155,5 +129,5 @@ const mapStateToProps = (state) => ({
export default connect(
mapStateToProps,
{setBoard}
{ setBoard }
)(withStyles(styles, { withTheme: true })(DeviceSeclection));

8
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,8 +61,7 @@ class ProjectHome extends Component {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein angefragtes ${
type === "gallery" ? "Galerie-" : ""
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,8 +128,7 @@ class ProjectHome extends Component {
}}
>
<Link
to={`/${
data === "Projekte" ? "project" : "gallery"
to={`/${data === "Projekte" ? "project" : "gallery"
}/${project._id}`}
style={{ textDecoration: "none", color: "inherit" }}
>

14
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,13 +244,10 @@ 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 * (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))
} ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
}`}
></circle>
)}
@ -265,8 +263,7 @@ 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>
@ -311,6 +308,7 @@ class TutorialHome extends Component {
);
})}
</Grid>
<DeviceSelection />
{this.props.user ? (
<div>
<h2>User Tutorials</h2>

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