From c60d2ddba69e3cce126cad07aeeb00e4ab31a763 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Thu, 7 Oct 2021 11:11:14 +0200 Subject: [PATCH] add ota settings --- src/components/Blockly/generator/generator.js | 2 + src/components/Home.js | 36 +++--- src/components/Settings/OtaSelector.js | 61 ++++++++++ src/components/Settings/Settings.js | 60 ++++++---- src/components/Workspace/Compile.js | 106 ++++++++++-------- src/reducers/generalReducer.js | 20 +++- 6 files changed, 196 insertions(+), 89 deletions(-) create mode 100644 src/components/Settings/OtaSelector.js diff --git a/src/components/Blockly/generator/generator.js b/src/components/Blockly/generator/generator.js index e1073c9..c779334 100644 --- a/src/components/Blockly/generator/generator.js +++ b/src/components/Blockly/generator/generator.js @@ -259,6 +259,8 @@ Blockly["Arduino"].finish = function (code) { code = devVariables + "\n" + + "#include " + + "\n" + libraryCode + "\n" + variablesCode + diff --git a/src/components/Home.js b/src/components/Home.js index 8fd25d7..ba1f44c 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -45,17 +45,23 @@ const styles = (theme) => ({ }); class Home extends Component { - state = { - codeOn: true, - snackbar: false, - type: "", - key: "", - message: "", - open: true, - }; + constructor(props) { + super(props); + this.state = { + codeOn: true, + snackbar: false, + type: "", + key: "", + message: "", + open: true, + }; + } componentDidMount() { console.log(this.props.platform); + if (this.props.platform === true) { + this.setState({ codeOn: false }); + } this.setState({ stats: window.localStorage.getItem("stats") }); if (!this.props.project) { this.props.workspaceName(createNameId()); @@ -88,6 +94,14 @@ class Home extends Component { this.setState({ open: !this.state }); }; + onChangeCheckbox = (e) => { + if (e.target.checked) { + window.localStorage.setItem("ota", e.target.checked); + } else { + window.localStorage.removeItem("ota"); + } + }; + onChange = () => { this.setState({ codeOn: !this.state.codeOn }); const workspace = Blockly.getMainWorkspace(); @@ -175,12 +189,8 @@ class Home extends Component { onClick={this.toggleDialog} button={Blockly.Msg.button_close} > -
Du verwendest: {this.props.platform}
+
OTA Modus aktiviert.
Lade die App hier herunter:
-
- Testlink:{" "} - Öffne App -
) : null} diff --git a/src/components/Settings/OtaSelector.js b/src/components/Settings/OtaSelector.js new file mode 100644 index 0000000..a8d989c --- /dev/null +++ b/src/components/Settings/OtaSelector.js @@ -0,0 +1,61 @@ +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 ( +
+ OTA + + Aktiviere OTA Modus{" "} + + + + {Blockly.Msg.settings_statistics} + + + +
+ ); + } +} + +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); diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index 24b3bfa..ac1a538 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -1,22 +1,22 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; -import { withRouter } from 'react-router-dom'; +import { withRouter } from "react-router-dom"; -import * as Blockly from 'blockly/core'; +import * as Blockly from "blockly/core"; -import Breadcrumbs from '../Breadcrumbs'; -import LanguageSelector from './LanguageSelector'; -import RenderSelector from './RenderSelector'; -import StatsSelector from './StatsSelector'; +import Breadcrumbs from "../Breadcrumbs"; +import LanguageSelector from "./LanguageSelector"; +import RenderSelector from "./RenderSelector"; +import StatsSelector from "./StatsSelector"; +import OtaSelector from "./OtaSelector"; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; +import Button from "@material-ui/core/Button"; +import Paper from "@material-ui/core/Paper"; class Settings extends Component { - - componentDidMount(){ + 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(); @@ -25,41 +25,55 @@ class Settings extends Component { render() { return (
- +

{Blockly.Msg.settings_head}

- + - + - + + + +
); - }; + } } Settings.propTypes = { language: PropTypes.string.isRequired, - pageVisits: PropTypes.number.isRequired + pageVisits: PropTypes.number.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ language: state.general.language, - pageVisits: state.general.pageVisits + pageVisits: state.general.pageVisits, }); export default connect(mapStateToProps, null)(withRouter(Settings)); diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index dd81e49..fe8e772 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -22,6 +22,7 @@ import "prismjs/plugins/line-numbers/prism-line-numbers"; import "prismjs/plugins/line-numbers/prism-line-numbers.css"; import MuiDrawer from "@material-ui/core/Drawer"; import Dialog from "../Dialog"; +import { Link } from "react-router-dom"; const styles = (theme) => ({ backdrop: { @@ -133,8 +134,10 @@ class Compile extends Component { }; createFileName = () => { - if (this.props.platform === "iOS") { - const filename = detectWhitespacesAndReturnReadableResult(this.state.name); + if (this.props.platform === true) { + const filename = detectWhitespacesAndReturnReadableResult( + this.state.name + ); this.setState({ link: `blocklyconnect-app://sketch/${filename}/${this.state.id}`, }); @@ -211,23 +214,44 @@ class Compile extends Component { Kompilieren )} - -
- copyimage -

{Blockly.Msg.compile_overlay_head}

-

{Blockly.Msg.compile_overlay_text}

-

- {Blockly.Msg.compile_overlay_help} - - FAQ - -

- -
- + + {this.props.platform === false ? ( + +
+ copyimage +

{Blockly.Msg.compile_overlay_head}

+

{Blockly.Msg.compile_overlay_text}

+

+ {Blockly.Msg.compile_overlay_help} + + FAQ + +

+ +
+ + ) : ( + +
+ {/* copyimage */} +

Dein Code wird kompiliert!

+

übertrage ihn anschließend mithlfe der senseBoxConnect-App

+

+ {Blockly.Msg.compile_overlay_help} + + FAQ + +

+ +
+ + )} -
Du verwendest: {this.props.platform}
-
Lade die App hier herunter:
- Testlink: Öffne App +

Dein Code wurde erfolgreich kompiliert

+ + +
- - {/* { this.toggleDialog(); this.setState({ name: this.props.name }) } : this.toggleDialog} - button={this.state.file ? Blockly.Msg.button_cancel : Blockly.Msg.button_close} - > - {this.state.file ? -
- - -
- : - - 

-                {`${this.state.error}`}
-
- - - - } - */} ); } @@ -313,7 +325,7 @@ Compile.propTypes = { arduino: PropTypes.string.isRequired, name: PropTypes.string, workspaceName: PropTypes.func.isRequired, - platform: PropTypes.object.isRequired, + platform: PropTypes.bool.isRequired, }; const mapStateToProps = (state) => ({ diff --git a/src/reducers/generalReducer.js b/src/reducers/generalReducer.js index cb80536..555d093 100644 --- a/src/reducers/generalReducer.js +++ b/src/reducers/generalReducer.js @@ -16,7 +16,14 @@ const initialLanguage = () => { return "en_US"; }; +const initialPlatform = () => { + return getPlatform(); +}; + const getPlatform = () => { + if (window.localStorage.getItem("platform")) { + return JSON.parse(window.localStorage.getItem("platform")); + } var userAgent = window.navigator.userAgent, platform = window.navigator.platform, macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"], @@ -24,15 +31,15 @@ const getPlatform = () => { iosPlatforms = ["iPhone", "iPad", "iPod"], os = null; if (macosPlatforms.indexOf(platform) !== -1) { - os = "Mac OS"; + os = false; } else if (iosPlatforms.indexOf(platform) !== -1) { - os = "iOS"; + os = true; } else if (windowsPlatforms.indexOf(userAgent) !== -1) { - os = "Windows"; + os = false; } else if (/Android/.test(userAgent)) { - os = "Android"; + os = true; } else if (!os && /Linux/.test(platform)) { - os = "Linux"; + os = false; } return os; }; @@ -56,7 +63,7 @@ const initialState = { language: initialLanguage(), renderer: initialRenderer(), statistics: initialStatistics(), - platform: getPlatform(), + platform: initialPlatform(), }; export default function foo(state = initialState, action) { @@ -72,6 +79,7 @@ export default function foo(state = initialState, action) { language: action.payload, }; case PLATFORM: + window.localStorage.setItem("platform", action.payload); return { ...state, platform: action.payload,