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

add sound selector

src/actions/generalActions.js

@@ -1,4 +1,11 @@
-import { VISIT, LANGUAGE, RENDERER, STATISTICS, PLATFORM } from "./types";
+import {
+  VISIT,
+  LANGUAGE,
+  RENDERER,
+  SOUNDS,
+  STATISTICS,
+  PLATFORM,
+} from "./types";
 
 export const visitPage = () => (dispatch) => {
   dispatch({
@@ -30,6 +37,13 @@ export const setRenderer = (renderer) => (dispatch) => {
   });
 };
 
+export const setSounds = (sounds) => (dispatch) => {
+  dispatch({
+    type: SOUNDS,
+    payload: sounds,
+  });
+};
+
 export const setStatistics = (showStatistics) => (dispatch) => {
   dispatch({
     type: STATISTICS,

src/actions/types.js

@@ -45,6 +45,7 @@ export const VISIT = "VISIT";
 export const LANGUAGE = "LANGUAGE";
 export const PLATFORM = "PLATFORM";
 export const RENDERER = "RENDERER";
+export const SOUNDS = "SOUNDS";
 export const STATISTICS = "STATISTICS";
 
 // messages

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

src/reducers/generalReducer.js

@@ -2,6 +2,7 @@ import {
   VISIT,
   LANGUAGE,
   RENDERER,
+  SOUNDS,
   STATISTICS,
   PLATFORM,
 } from "../actions/types";
@@ -20,6 +21,14 @@ const initialPlatform = () => {
   return getPlatform();
 };
 
+const initialSounds = () => {
+  if (window.localStorage.getItem("sounds")) {
+    return window.localStorage.getItem("sounds");
+  } else {
+    return "off";
+  }
+};
+
 const getPlatform = () => {
   if (window.localStorage.getItem("platform")) {
     return JSON.parse(window.localStorage.getItem("platform"));
@@ -62,6 +71,7 @@ const initialState = {
   pageVisits: 0, // detect if previous URL was
   language: initialLanguage(),
   renderer: initialRenderer(),
+  sounds: initialSounds(),
   statistics: initialStatistics(),
   platform: initialPlatform(),
 };
@@ -90,6 +100,12 @@ export default function foo(state = initialState, action) {
         ...state,
         renderer: action.payload,
       };
+    case SOUNDS:
+      window.localStorage.setItem("sounds", action.payload);
+      return {
+        ...state,
+        sounds: action.payload,
+      };
     case STATISTICS:
       window.localStorage.setItem("statistics", action.payload);
       return {