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 {
BOARD,
} from "./types";
BOARD,
} from "./types";
export const setBoard = (board) => (dispatch) => {
dispatch({
type: BOARD,
payload: board,
});
};
window.localStorage.setItem("board", board);
dispatch({
type: BOARD,
payload: board,
});
};

124
src/components/DeviceSelection.js
View File

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

2
src/reducers/boardReducer.js
View File

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