smarti/src/components/Settings/OtaSelector.js
2021-11-03 12:22:51 +01:00

67 lines
2.1 KiB
JavaScript

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { setPlatform } from "../../actions/generalActions";
import * as Blockly from "blockly/core";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import Typography from "@material-ui/core/Typography";
import FormHelperText from "@material-ui/core/FormHelperText";
class OtaSelector extends Component {
componentDidMount() {
// Ensure that Blockly.setLocale is adopted in the component.
// Otherwise, the text will not be displayed until the next update of the component.
this.forceUpdate();
}
render() {
return (
<div>
<Typography style={{ fontWeight: "bold" }}>
{Blockly.Msg.settings_ota_head}
</Typography>
<FormHelperText
style={{ color: "black", lineHeight: 1.3, marginBottom: "8px" }}
>
{Blockly.Msg.settings_ota_text}
<a href="https://sensebox.de/app" target="_blank" rel="noreferrer">
https://sensebox.de/app
</a>
</FormHelperText>
<FormControl>
<InputLabel id="demo-simple-select-label">
{Blockly.Msg.settings_statistics}
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={this.props.platform}
onChange={(e) => this.props.setPlatform(e.target.value)}
>
<MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
<MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
</Select>
</FormControl>
</div>
);
}
}
OtaSelector.propTypes = {
setPlatform: PropTypes.func.isRequired,
language: PropTypes.string.isRequired,
platform: PropTypes.bool.isRequired,
};
const mapStateToProps = (state) => ({
language: state.general.language,
platform: state.general.platform,
});
export default connect(mapStateToProps, { setPlatform })(OtaSelector);