Merge pull request #131 from sensebox/add-sound-selector

add sound selector

src/components/Blockly/BlocklyWindow.js

@@ -72,6 +72,7 @@ class BlocklyWindow extends Component {
             this.props.trashcan !== undefined ? this.props.trashcan : true
           }
           renderer={this.props.renderer}
+          sounds={this.props.sounds}
           maxInstances={getMaxInstances()}
           zoom={{
             // https://developers.google.com/blockly/guides/configure/web/zoom
@@ -123,11 +124,13 @@ BlocklyWindow.propTypes = {
   onChangeWorkspace: PropTypes.func.isRequired,
   clearStats: PropTypes.func.isRequired,
   renderer: PropTypes.string.isRequired,
+  sounds: PropTypes.string.isRequired,
   language: PropTypes.string.isRequired,
 };
 
 const mapStateToProps = (state) => ({
   renderer: state.general.renderer,
+  sounds: state.general.sounds,
   language: state.general.language,
 });
 

src/components/Blockly/msg/de/ui.js

@@ -177,6 +177,9 @@ export const UI = {
     "Der Tablet Modus deaktiviert die Code anzeige und aktiviert die Möglichkeit den Programmcode über die senseBox Connect App zu übertragen. Weitere Informationen dazu findest du unter: ",
   settings_ota_on: "Aktiviert",
   settings_ota_off: "Deaktiviert",
+  settings_sounds: "Töne",
+  settings_sounds_text:
+    "Aktiviere oder Deaktiviere Töne beim hinzufügen und löschen von Blöcken. Standardmäßig deaktiviert",
 
   /**
    * 404

src/components/Blockly/msg/en/ui.js

@@ -167,11 +167,14 @@ export const UI = {
     "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
   settings_statistics_on: "On",
   settings_statistics_off: "Off",
-  settings_ota_head: "tablet mode",
+  settings_ota_head: "Tablet mode",
   settings_ota_text:
     "Tablet mode disables the code display and enables the possibility to transfer the program code via the senseBox Connect app. You can find more information on: ",
   settings_ota_on: "Activated",
   settings_ota_off: "Deactivated",
+  settings_sounds: "Sound",
+  settings_sounds_text:
+    "Enable or disable sounds when adding and deleting blocks. Disabled by default",
 
   /**
    * 404

src/components/Blockly/toolbox/Toolbox.js

@@ -94,7 +94,7 @@ class Toolbox extends React.Component {
           <Block type="sensebox_wifi" />
           <Block type="sensebox_wifi_status" />
           <Block type="sensebox_wifi_rssi" />
-          <Block type="sensebox_wifi_ip" />
+          <Block type="sensebox_get_ip" />
           <Block type="sensebox_startap" />
         </Category>
         <Category name="SD" colour={getColour().sensebox}>

src/components/Settings/Settings.js

@@ -11,6 +11,7 @@ import LanguageSelector from "./LanguageSelector";
 import RenderSelector from "./RenderSelector";
 import StatsSelector from "./StatsSelector";
 import OtaSelector from "./OtaSelector";
+import SoundsSelector from "./SoundsSelector";
 
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
@@ -48,6 +49,9 @@ class Settings extends Component {
         <Paper style={{ margin: "10px 0px", padding: "10px" }}>
           <OtaSelector />
         </Paper>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
+          <SoundsSelector />
+        </Paper>
 
         <Button
           style={{ marginTop: "10px" }}

src/components/Settings/SoundsSelector.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { setSounds } 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 SoundsSelector 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_sounds}
+        </Typography>
+        <FormHelperText
+          style={{ color: "black", lineHeight: 1.3, marginBottom: "8px" }}
+        >
+          {Blockly.Msg.settings_sounds_text}
+        </FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">
+            {Blockly.Msg.settings_sounds}
+          </InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.sounds}
+            onChange={(e) => this.props.setSounds(e.target.value)}
+          >
+            <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
+            <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+SoundsSelector.propTypes = {
+  setSounds: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  sounds: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  sounds: state.general.sounds,
+  language: state.general.language,
+});
+
+export default connect(mapStateToProps, { setSounds })(SoundsSelector);