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

save board model to localstorage

Browse Source
This commit is contained in:
fbruc03 2022-11-15 16:11:35 +01:00
parent e00617ac78
commit 6fcaff9cc3
3 changed files with 71 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/actions/boardAction.js
View File

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

124
src/components/DeviceSelection.js
View File

@ -30,68 +30,67 @@ class DeviceSeclection extends Component {
super(props); super(props);
this.state = { this.state = {
open: true, open: true,
selectedBoard : "", selectedBoard: "",
saveSettings: false, saveSettings: false,
}; };
} }
toggleDialog = () => { toggleDialog = () => {
this.props.setBoard(this.state.selectedBoard) this.props.setBoard(this.state.selectedBoard)
}; };
onChange = (e) => { onChange = (e) => {
if (e.target.checked) { if (e.target.checked) {
this.setState({ saveSettings: true}); this.setState({ saveSettings: true });
} else { } else {
this.setState({ saveSettings: false}); this.setState({ saveSettings: false });
} }
}; };
onclick = (e, value) => { onclick = (e, value) => {
console.log(e, value) console.log(e, value)
const root = document.querySelector(':root'); const root = document.querySelector(':root');
root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`); root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity})`);
this.setState({selectedBoard: value}) this.setState({ selectedBoard: value })
this.props.setBoard(value) this.props.setBoard(value)
this.setState({ open: !this.state }); this.setState({ open: !this.state });
}; };
render() { render() {
return ( const board = this.props.selectedBoard;
<Dialog if (board) {
style={{ zIndex: 9999999 }} return null;
fullWidth }
maxWidth={"xl"} else {
open={this.state.open} return (
title={Blockly.Msg.deviceselection_head} <Dialog
content={""} style={{ zIndex: 9999999 }}
onClick={this.toggleDialog} fullWidth
disabled={this.state.selectedBoard===""} maxWidth={"xl"}
> open={this.state.open}
<div> title={Blockly.Msg.deviceselection_head}
<Grid container spacing={2} style={{ textAlign : "center" }}> content={""}
<Grid item xs={6}> onClick={this.toggleDialog}
<IconButton onClick={(e) => this.onclick(e, "mcu")}> disabled={this.state.selectedBoard === ""}
<Avatar >
alt="Sensebox MCU" <div>
src="/media/hardware/senseboxmcu.png" <Grid container spacing={2} style={{ textAlign: "center" }}>
style={{ <Grid item xs={6}>
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray", <IconButton onClick={(e) => this.onclick(e, "mcu")}>
width:"20vw", <Avatar
height: "20vw" alt="Sensebox MCU"
}} src="/media/hardware/senseboxmcu.png"
/> style={{
</IconButton> border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
<p>senseBox MCU</p> width: "20vw",
</Grid> height: "20vw"
}}
{/* <Grid item xs={4}> />
</IconButton>
<p>senseBox MCU</p>
</Grid>
{/* <Grid item xs={4}>
<IconButton onClick={(e) => this.onclick(e, "esp")}> <IconButton onClick={(e) => this.onclick(e, "esp")}>
<Avatar <Avatar
alt="Sensebox ESP" alt="Sensebox ESP"
@ -100,28 +99,28 @@ class DeviceSeclection extends Component {
border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray", border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw", width:"20vw",
height: "20vw" height: "20vw"
}} }}
/> />
</IconButton> </IconButton>
<p>Sensebox ESP</p> <p>Sensebox ESP</p>
</Grid> */} </Grid> */}
<Grid item xs={6}> <Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mini")}> <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> </IconButton>
<p>senseBox MCU:mini</p> <p>senseBox MCU:mini</p>
</Grid>
</Grid> </Grid>
</Grid> </div>
</div> {/* <FormControlLabel
{/* <FormControlLabel
style={{ marginTop: "20px" }} style={{ marginTop: "20px" }}
classes={{ label: this.props.classes.label }} classes={{ label: this.props.classes.label }}
control={ control={
@ -136,11 +135,12 @@ class DeviceSeclection extends Component {
} }
label={Blockly.Msg.deviceselection_keep_selection} label={Blockly.Msg.deviceselection_keep_selection}
/> */} /> */}
<Typography variant="body1" > <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> {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> </Typography>
</Dialog> </Dialog>
); );
}
} }
} }
@ -155,5 +155,5 @@ const mapStateToProps = (state) => ({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
{setBoard} { setBoard }
)(withStyles(styles, { withTheme: true })(DeviceSeclection)); )(withStyles(styles, { withTheme: true })(DeviceSeclection));

2
src/reducers/boardReducer.js
View File

@ -4,7 +4,7 @@ const initialValue = () => {
if (window.localStorage.getItem("board")) { if (window.localStorage.getItem("board")) {
return window.localStorage.getItem("board"); return window.localStorage.getItem("board");
} }
return "bla"; return null;
}; };
const initialState = { const initialState = {