Merge pull request #216 from sensebox/development-deviceSelection
Development device selection
This commit is contained in:
Mario Pesch
GitHub
commit
50b70b4ee3
@ -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,
|
||||
});
|
||||
};
|
||||
@ -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" }}
|
||||
|
||||
@ -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",
|
||||
height: "20vw"
|
||||
}}
|
||||
/>
|
||||
<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
|
||||
@ -100,42 +89,27 @@ 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"
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
</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));
|
||||
|
||||
@ -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={{
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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()
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user