add ota settings

2021-10-07 11:11:14 +02:00 · 2021-10-07 11:11:14 +02:00 · c60d2ddba6
commit c60d2ddba6
parent 508591f685
6 changed files with 196 additions and 89 deletions
--- 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 <SenseBoxOTA.h>" +
+    "\n" +
    libraryCode +
    "\n" +
    variablesCode +
--- a/src/components/Home.js
+++ b/src/components/Home.js
@ -45,7 +45,9 @@ const styles = (theme) => ({
 });

 class Home extends Component {
-  state = {
+  constructor(props) {
+    super(props);
+    this.state = {
      codeOn: true,
      snackbar: false,
      type: "",
@ -53,9 +55,13 @@ class Home extends Component {
      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}
          >
-            <div>Du verwendest: {this.props.platform}</div>
+            <div>OTA Modus aktiviert.</div>
            <div>Lade die App hier herunter: </div>
-            <div>
-              Testlink:{" "}
-              <a href="blocklyconnect-app://sketch/123456">Öffne App</a>
-            </div>
          </Dialog>
        ) : null}
      </div>
--- a/src/components/Settings/OtaSelector.js
+++ 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 (
+      <div>
+        <Typography style={{ fontWeight: "bold" }}>OTA</Typography>
+        <FormHelperText
+          style={{ color: "black", lineHeight: 1.3, marginBottom: "8px" }}
+        >
+          Aktiviere OTA Modus{" "}
+        </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}>true</MenuItem>
+            <MenuItem value={false}>false</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);
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@ -1,21 +1,21 @@
-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() {
    // Ensure that Blockly.setLocale is adopted in the component.
    // Otherwise, the text will not be displayed until the next update of the component.
@ -25,41 +25,55 @@ class Settings extends Component {
  render() {
    return (
      <div>
-        <Breadcrumbs content={[{ link: this.props.location.pathname, title: Blockly.Msg.settings_head }]} />
+        <Breadcrumbs
+          content={[
+            {
+              link: this.props.location.pathname,
+              title: Blockly.Msg.settings_head,
+            },
+          ]}
+        />

        <h1>{Blockly.Msg.settings_head}</h1>

-        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
          <LanguageSelector />
        </Paper>
-        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
          <RenderSelector />
        </Paper>
-        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
          <StatsSelector />
        </Paper>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
+          <OtaSelector />
+        </Paper>

        <Button
-          style={{ marginTop: '10px' }}
+          style={{ marginTop: "10px" }}
          variant="contained"
          color="primary"
-          onClick={this.props.pageVisits > 0 ? () => this.props.history.goBack() : () => this.props.history.push('/')}
+          onClick={
+            this.props.pageVisits > 0
+              ? () => this.props.history.goBack()
+              : () => this.props.history.push("/")
+          }
        >
          {Blockly.Msg.button_back}
        </Button>
      </div>
    );
-  };
+  }
 }

 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));
--- 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,6 +214,8 @@ class Compile extends Component {
            Kompilieren
          </Button>
        )}
+
+        {this.props.platform === false ? (
          <Backdrop
            className={this.props.classes.backdrop}
            open={this.state.progress}
@ -228,6 +233,25 @@ class Compile extends Component {
              <CircularProgress color="inherit" />
            </div>
          </Backdrop>
+        ) : (
+          <Backdrop
+            className={this.props.classes.backdrop}
+            open={this.state.progress}
+          >
+            <div className="overlay">
+              {/* <img src={Copy} width="400" alt="copyimage"></img> */}
+              <h2>Dein Code wird kompiliert!</h2>
+              <p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
+              <p>
+                {Blockly.Msg.compile_overlay_help}
+                <a href="/faq" target="_blank">
+                  FAQ
+                </a>
+              </p>
+              <CircularProgress color="inherit" />
+            </div>
+          </Backdrop>
+        )}
        <Drawer
          anchor={"bottom"}
          open={this.state.open}
@ -274,36 +298,24 @@ class Compile extends Component {
          onClick={this.toggleDialog}
          button={Blockly.Msg.button_close}
        >
-          <div>Du verwendest: {this.props.platform}</div>
-          <div>Lade die App hier herunter: </div>
          <div>
-            Testlink: <a href={this.state.link}>Öffne App</a>
+            <p>Dein Code wurde erfolgreich kompiliert</p>
+            <a href={this.state.link}>
+              <Button
+                style={{ color: "white" }}
+                variant="contained"
+                className={this.props.classes.button}
+                onClick={() => this.toggleDialog()}
+              >
+                <FontAwesomeIcon
+                  icon={faClipboardCheck}
+                  style={{ marginRight: "5px" }}
+                />{" "}
+                Starte Übertragung
+              </Button>
+            </a>
          </div>
        </Dialog>
-
-        {/* <Dialog
-          open={this.state.open}
-          title={this.state.title}
-          content={this.state.content}
-          onClose={this.toggleDialog}
-          onClick={this.state.file ? () => { 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 ?
-            <div style={{ marginTop: '10px' }}>
-              <TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />
-              <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
-            </div>
-            : 
-           
-        <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: '100%', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}><code className="language-json">
-                {`${this.state.error}`}
-              </code></pre>
-        </AccordionDetails>
-      </Accordion>
-      
-            }
-        </Dialog> */}
      </div>
    );
  }
@ -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) => ({
--- 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,