add ota settings

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 +

src/components/Home.js

@@ -45,17 +45,23 @@ const styles = (theme) => ({
 });
 
 class Home extends Component {
-  state = {
+  constructor(props) {
-    codeOn: true,
+    super(props);
-    snackbar: false,
+    this.state = {
-    type: "",
+      codeOn: true,
-    key: "",
+      snackbar: false,
-    message: "",
+      type: "",
-    open: true,
+      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}
           >
-            <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>

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);

src/components/Settings/Settings.js

@@ -1,22 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+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 Breadcrumbs from "../Breadcrumbs";
-import LanguageSelector from './LanguageSelector';
+import LanguageSelector from "./LanguageSelector";
-import RenderSelector from './RenderSelector';
+import RenderSelector from "./RenderSelector";
-import StatsSelector from './StatsSelector';
+import StatsSelector from "./StatsSelector";
+import OtaSelector from "./OtaSelector";
 
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
-import Paper from '@material-ui/core/Paper';
+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 (
       <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));

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") {
+    if (this.props.platform === true) {
-      const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
+      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
           </Button>
         )}
-        <Backdrop
+
-          className={this.props.classes.backdrop}
+        {this.props.platform === false ? (
-          open={this.state.progress}
+          <Backdrop
-        >
+            className={this.props.classes.backdrop}
-          <div className="overlay">
+            open={this.state.progress}
-            <img src={Copy} width="400" alt="copyimage"></img>
+          >
-            <h2>{Blockly.Msg.compile_overlay_head}</h2>
+            <div className="overlay">
-            <p>{Blockly.Msg.compile_overlay_text}</p>
+              <img src={Copy} width="400" alt="copyimage"></img>
-            <p>
+              <h2>{Blockly.Msg.compile_overlay_head}</h2>
-              {Blockly.Msg.compile_overlay_help}
+              <p>{Blockly.Msg.compile_overlay_text}</p>
-              <a href="/faq" target="_blank">
+              <p>
-                FAQ
+                {Blockly.Msg.compile_overlay_help}
-              </a>
+                <a href="/faq" target="_blank">
-            </p>
+                  FAQ
-            <CircularProgress color="inherit" />
+                </a>
-          </div>
+              </p>
-        </Backdrop>
+              <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) => ({

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,