Merge branch 'add-translations' into backend-connection

src/App.js

@@ -11,10 +11,7 @@ import './App.css';
 
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
-import Navbar from './components/Navbar';
+import Content from './components/Content';
-import Footer from './components/Footer';
-import Routes from './components/Route/Routes';
-import Cookies from './components/Cookies';
 
 const theme = createMuiTheme({
   palette: {
@@ -43,12 +40,7 @@ class App extends Component {
       <ThemeProvider theme={theme}>
         <Provider store={store}>
           <Router history={customHistory}>
-            <div className="wrapper">
+            <Content />
-              <Navbar />
-              <Routes />
-              <Cookies />
-              <Footer />
-            </div>
           </Router>
         </Provider>
       </ThemeProvider>

src/actions/authActions.js

@@ -1,8 +1,8 @@
 import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, GET_STATUS, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
 
 import axios from 'axios';
-import { returnErrors, returnSuccess } from './messageActions'
+import { returnErrors, returnSuccess } from './messageActions';
-
+import { setLanguage } from './generalActions';
 
 // Check token & load user
 export const loadUser = () => (dispatch) => {
@@ -20,6 +20,7 @@ export const loadUser = () => (dispatch) => {
         type: USER_LOADED,
         payload: res.data.user
       });
+      dispatch(setLanguage(res.data.user.language));
     },
     error: err => {
       if(err.response){
@@ -77,6 +78,7 @@ export const login = ({ email, password }) => (dispatch) => {
       type: GET_STATUS,
       payload: res.data.user.status
     });
+    dispatch(setLanguage(res.data.user.language));
     dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
   })
   .catch(err => {
@@ -170,6 +172,11 @@ export const logout = () => (dispatch) => {
         type: GET_STATUS,
         payload: status
       });
+      var locale = 'de_DE';
+      if (window.localStorage.getItem('locale')) {
+        locale = window.localStorage.getItem('locale');
+      }
+      dispatch(setLanguage(locale));
       dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
       clearTimeout(logoutTimerId);
     },

src/actions/generalActions.js

@@ -1,4 +1,4 @@
-import { VISIT } from './types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from './types';
 
 
 export const visitPage = () => (dispatch) => {
@@ -6,3 +6,27 @@ export const visitPage = () => (dispatch) => {
     type: VISIT
   });
 };
+
+export const setLanguage = (language) => (dispatch, getState) => {
+  if(!getState().auth.isAuthenticated){
+    window.localStorage.setItem('locale', language);
+  }
+  dispatch({
+    type: LANGUAGE,
+    payload: language
+  });
+};
+
+export const setRenderer = (renderer) => (dispatch) => {
+  dispatch({
+    type: RENDERER,
+    payload: renderer
+  });
+};
+
+export const setStatistics = (showStatistics) => (dispatch) => {
+  dispatch({
+    type: STATISTICS,
+    payload: showStatistics
+  });
+};

src/actions/projectActions.js

@@ -1,7 +1,6 @@
 import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';
 
 import axios from 'axios';
-import { workspaceName } from './workspaceActions';
 import { returnErrors, returnSuccess } from './messageActions';
 
 export const setType = (type) => (dispatch) => {

src/actions/tutorialActions.js

@@ -1,4 +1,4 @@
-import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
+import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types';
 
 import axios from 'axios';
 import { returnErrors, returnSuccess } from './messageActions';
@@ -12,15 +12,11 @@ export const getTutorial = (id) => (dispatch, getState) => {
   axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
     .then(res => {
       var tutorial = res.data.tutorial;
-      console.log('status', getState().tutorial.status);
       existingTutorial(tutorial, getState().tutorial.status).then(status => {
-        console.log('progress',getState().auth.progress);
-        console.log('status');
         dispatch({
           type: TUTORIAL_SUCCESS,
           payload: status
         });
-        console.log('eins');
         dispatch(updateStatus(status));
         dispatch({
           type: GET_TUTORIAL,
@@ -228,7 +224,6 @@ const existingTutorials = (tutorials, status) => new Promise(function(resolve, r
 });
 
 const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
-  console.log('st',status);
   var tutorialsId = tutorial._id;
   var statusIndex = status.findIndex(status => status._id === tutorialsId);
   if (statusIndex > -1) {

src/actions/types.js

@@ -47,6 +47,9 @@ export const PROGRESS = 'PROGRESS';
 
 
 export const VISIT = 'VISIT';
+export const LANGUAGE = 'LANGUAGE';
+export const RENDERER = 'RENDERER';
+export const STATISTICS = 'STATISTICS';
 
 // messages
 export const GET_ERRORS = 'GET_ERRORS';

src/components/Blockly/BlocklyWindow.js

@@ -18,26 +18,14 @@ class BlocklyWindow extends Component {
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    var locale = window.localStorage.getItem('locale');
+    if (this.props.language === 'de_DE') {
-    this.state = {
-      renderer: window.localStorage.getItem('renderer'),
-    };
-    if (locale === null) {
-      if (navigator.language === 'de-DE') {
-        locale = 'de';
-      } else {
-        locale = 'en';
-      }
-    }
-    if (locale === 'de') {
       Blockly.setLocale(De);
-    } else if (locale === 'en') {
+    } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
   }
 
   componentDidMount() {
-
     const workspace = Blockly.getMainWorkspace();
     this.props.onChangeWorkspace({});
     this.props.clearStats();
@@ -72,7 +60,7 @@ class BlocklyWindow extends Component {
           style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
           readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
           trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
-          renderer={this.state.renderer}
+          renderer={this.props.renderer}
           zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
             controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
             wheel: false,
@@ -106,8 +94,14 @@ class BlocklyWindow extends Component {
 
 BlocklyWindow.propTypes = {
   onChangeWorkspace: PropTypes.func.isRequired,
-  clearStats: PropTypes.func.isRequired
+  clearStats: PropTypes.func.isRequired,
+  renderer: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
 };
 
+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});
 
-export default connect(null, { onChangeWorkspace, clearStats })(BlocklyWindow);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);

src/components/Blockly/blocks/sensebox-osem.js

@@ -138,6 +138,12 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
                 }
                 console.log(dropdown)
             }
+            if (dropdown.length > 1) {
+                var options = dropdown.slice(1)
+                return options
+            } else {
+                return dropdown
+            }
         }
         return dropdown
     },

src/components/Blockly/msg/de.js

@@ -800,4 +800,199 @@ Blockly.Msg.senseBox_mqtt_password = "Passwort";
 Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
 Blockly.Msg.senseBox_mqtt_publish = "Sende an Feed/Topic";
 
+
+
+/**
+ * Typed Variable Modal
+ *
+ */
+
+
+Blockly.Msg.TYPED_VAR_MODAL_CONFIRM_BUTTON = "Ok";
+Blockly.Msg.TYPED_VAR_MODAL_VARIABLE_NAME_LABEL = "Variablen Name: ";
+Blockly.Msg.TYPED_VAR_MODAL_TYPES_LABEL = "Variable Typen";
+Blockly.Msg.TYPED_VAR_MODAL_CANCEL_BUTTON = "Abbrechen";
+Blockly.Msg.TYPED_VAR_MODAL_TITLE = "Erstelle Variable";
+Blockly.Msg.TYPED_VAR_MODAL_INVALID_NAME = "Der Name ist ungültig, bitte versuche einen anderen."
+
+/**
+ * Add Translation for Blocks above
+ * ---------------------------------------------------------------
+ * Add Translation for the UI below
+ */
+
+/**
+ * Toolbox
+ */
+Blockly.Msg.toolbox_sensors = "Sensoren";
+Blockly.Msg.toolbox_logic = "Logik";
+Blockly.Msg.toolbox_loops = "Schleifen";
+Blockly.Msg.toolbox_math = "Mathematik";
+Blockly.Msg.toolbox_io = "Eingang/Ausgang";
+Blockly.Msg.toolbox_time = "Zeit";
+Blockly.Msg.toolbox_functions = "Funktionen";
+Blockly.Msg.toolbox_variables = "Variablen";
+
+/**
+ * Tooltips
+ *
+ */
+
+Blockly.Msg.tooltip_compile_code = "Code kompilieren"
+Blockly.Msg.tooltip_save_blocks = "Blöcke speichern";
+Blockly.Msg.tooltip_open_blocks = "Blöcke öffnen";
+Blockly.Msg.tooltip_screenshot = "Screenshot erstellen";
+Blockly.Msg.tooltip_clear_workspace = "Workspace zurücksetzen";
+Blockly.Msg.tooltip_share_blocks = "Blöcke teilen";
+Blockly.Msg.tooltip_show_code = "Code anzeigen";
+Blockly.Msg.tooltip_hide_code = "Code ausblenden"
+Blockly.Msg.tooltip_delete_project = "Projekt löschen"
+Blockly.Msg.tooltip_project_name = "Name des Projektes"
+Blockly.Msg.tooltip_download_project = "Projekt herunterladen"
+Blockly.Msg.tooltip_open_project = "Projekt öffnen"
+Blockly.Msg.tooltip_update_project = "Projekt aktualisieren"
+Blockly.Msg.tooltip_save_project = "Projekt speichern"
+Blockly.Msg.tooltip_create_project = "Projekt erstellen"
+Blockly.Msg.tooltip_share_project = "Projekt teilen"
+Blockly.Msg.tooltip_reset_workspace = "Workspace zurücksetzen"
+Blockly.Msg.tooltip_copy_link = "Link kopieren"
+Blockly.Msg.tooltip_trashcan_hide = 'gelöschte Blöcke ausblenden'
+Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen'
+Blockly.Msg.tooltip_project_title = "Titel des Projektes"
+Blockly.Msg.tooltip_check_solution = "Lösung kontrollieren"
+
+/**
+ * Messages
+ *
+ */
+
+Blockly.Msg.messages_delete_project_failed = "Fehler beim Löschen des Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_reset_workspace_success = "Das Projekt wurde erfolgreich zurückgesetzt"
+Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS = "Das Projekt wurde erfolgreich aktualisiert."
+Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS = "Das Galerie-Projekt wurde erfolgreich aktualisiert."
+Blockly.Msg.messages_PROJECT_UPDATE_FAIL = "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_GALLERY_UPDATE_FAIL = "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_gallery_save_fail_1 = "Fehler beim Speichern des "
+Blockly.Msg.messages_gallery_save_fail_2 = "Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_SHARE_SUCCESS = 'Programm teilen'
+Blockly.Msg.messages_SHARE_FAIL = "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal."
+Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.'
+Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in '
+Blockly.Msg.messages_rename_success_02 = 'umbenannt.'
+Blockly.Msg.messages_newblockly_head = "Willkommen zur neuen Version Blockly für die senseBox"
+Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier:"
+Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Zurück zur Tutorials-Übersicht'
+Blockly.Msg.messages_LOGIN_FAIL = 'Der Benutzername oder das Passwort ist nicht korrekt.'
+/**
+ * Share Dialog
+ */
+
+Blockly.Msg.sharedialog_headline = "Dein Link wurde erstellt.";
+Blockly.Msg.sharedialog_text = "Über den folgenden Link kannst du dein Programm teilen.";
+
+/**
+ * Project rename Dialog
+ */
+
+Blockly.Msg.renamedialog_headline = "Projekt benennen";
+Blockly.Msg.renamedialog_text = "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'."
+
+/**
+ * Compile Dialog
+ *
+ */
+
+Blockly.Msg.compiledialog_headline = "Fehler"
+Blockly.Msg.compiledialog_text = "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut"
+
+/**
+ * Buttons
+ *
+ */
+
+Blockly.Msg.button_cancel = "Abbrechen";
+Blockly.Msg.button_close = "Schließen";
+Blockly.Msg.button_accept = "Bestätigen";
+Blockly.Msg.button_compile = "Kompilieren";
+Blockly.Msg.button_create_variableCreate = "Erstelle Variable";
+Blockly.Msg.button_back = "Zurück"
+Blockly.Msg.button_next = "nächster Schritt"
+Blockly.Msg.button_tutorial_overview = "Tutorial Übersicht"
+
+
+/**
+ *
+ */
+
+Blockly.Msg.filename = "Dateiname";
+Blockly.Msg.projectname = "Projektname";
+
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Einstellungen"
+Blockly.Msg.settings_language = "Sprache"
+Blockly.Msg.settings_language_text = "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden."
+Blockly.Msg.settings_language_de = "Deutsch"
+Blockly.Msg.settings_language_en = "Englisch"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist."
+Blockly.Msg.settings_statistics = "Statistiken"
+Blockly.Msg.settings_statistics_text = "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden."
+Blockly.Msg.settings_statistics_on = "An"
+Blockly.Msg.settings_statistics_off = "Aus"
+
+/**
+ * 404
+ */
+
+Blockly.Msg.notfound_head = "Die von Ihnen angeforderte Seite kann nicht gefunden werden."
+Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar."
+
+
+/**
+ * Labels
+ */
+
+Blockly.Msg.labels_donotshowagain = 'Dialog nicht mehr anzeigen'
+Blockly.Msg.labels_here = "hier"
+Blockly.Msg.labels_username = 'E-Mail oder Nutzername'
+
+/**
+ * Badges
+ */
+
+Blockly.Msg.badges_explaination = "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01 = "Herzlichen Glückwunsch! Du hast den Badge "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02 = " erhalten."
+/**
+ * Tutorials
+ */
+
+Blockly.Msg.tutorials_assessment_task = "Aufgabe"
+Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:"
+Blockly.Msg.tutorials_hardware_moreInformation = "Weitere Informationen zur Hardware-Komponente findest du"
+Blockly.Msg.tutorials_hardware_here = "hier";
+Blockly.Msg.tutorials_requirements = "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:"
+
+
+/**
+ * Tutorial Builder
+ */
+
+Blockly.Msg.builder_solution = "Lösung"
+Blockly.Msg.builder_solution_submit = "Lösung einreichen"
+Blockly.Msg.builder_example_submit = "Beispiel einreichen"
+Blockly.Msg.builder_comment = "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird."
+Blockly.Msg.builder_hardware_order = "Beachte, dass die Reihenfolge des Auswählens maßgebend ist."
+Blockly.Msg.builder_hardware_helper = "Wähle mindestens eine Hardware-Komponente aus."
+Blockly.Msg.builder_requirements_head = "Voraussetzungen"
+Blockly.Msg.builder_requirements_order = "Beachte, dass die Reihenfolge des Anhakens maßgebend ist."
+
+/**
+ * Login
+ */
+
+
+Blockly.Msg.login_head = "Anmelden"
 export const De = Blockly.Msg;

src/components/Blockly/msg/en.js

@@ -782,4 +782,101 @@ Blockly.Msg.senseBox_mqtt_password = "Password";
 Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
 Blockly.Msg.senseBox_mqtt_publish = "Publish to Feed/Topic";
 
+
+/**
+ * Add Translation for Blocks above
+ * ---------------------------------------------------------------
+ * Add Translation for the UI below
+ */
+
+
+/**
+ * Toolbox
+ */
+Blockly.Msg.toolbox_sensors = "Sensors";
+Blockly.Msg.toolbox_logic = "Logic";
+Blockly.Msg.toolbox_loops = "Loops";
+Blockly.Msg.toolbox_math = "Math";
+Blockly.Msg.toolbox_io = "Input/Output";
+Blockly.Msg.toolbox_time = "Time";
+Blockly.Msg.toolbox_functions = "Functions";
+Blockly.Msg.toolbox_variables = "Variables";
+
+
+/**
+ * Tooltips
+ *
+ */
+
+Blockly.Msg.tooltip_compile_code = "Compile Code"
+Blockly.Msg.tooltip_save_blocks = "Save Blocks";
+Blockly.Msg.tooltip_open_blocks = "Open Blocks";
+Blockly.Msg.tooltip_screenshot = "Download Screenshot";
+Blockly.Msg.tooltip_clear_workspace = "Reset Workspace";
+Blockly.Msg.tooltip_share_blocks = "Share Blocks";
+Blockly.Msg.tooltip_show_code = "Show Code";
+Blockly.Msg.tooltip_hide_code = "Hide Code"
+
+Blockly.Msg.tooltip_project_name = "Projectname"
+/**
+ * Share Dialog
+ */
+
+Blockly.Msg.sharedialog_headline = "Your Share-Link was created";
+Blockly.Msg.sharedialog_text = "Share your project with the following link";
+
+/**
+ * Project rename Dialog
+ */
+
+Blockly.Msg.renamedialog_headline = "Rename Project";
+Blockly.Msg.renamedialog_text = "Please enter a name for the project and confirm it by clicking on 'Confirm'."
+
+/**
+ * Compile Dialog
+ *
+ */
+
+Blockly.Msg.compiledialog_headline = "Error"
+Blockly.Msg.compiledialog_text = "While compiling an error occured. Please check your blocks and try again"
+
+
+
+/**
+ * Buttons
+ *
+ */
+
+Blockly.Msg.button_cancel = "Cancel";
+Blockly.Msg.button_close = "Close";
+Blockly.Msg.button_accept = "Confirm";
+Blockly.Msg.button_compile = "Compile";
+Blockly.Msg.button_create_variableCreate = "Create Variable";
+
+
+/**
+ *
+ */
+
+Blockly.Msg.filename = "Filename";
+Blockly.Msg.projectname = "Projectname";
+
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Settings"
+Blockly.Msg.settings_language = "Language"
+Blockly.Msg.settings_language_text = "Selection of the language applies to the entire application. A distinction can be made between German and English."
+Blockly.Msg.settings_language_de = "German"
+Blockly.Msg.settings_language_en = "English"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application."
+Blockly.Msg.settings_statistics = "Statistics"
+Blockly.Msg.settings_statistics_text = "The display of statistics on the usage of the blocks above the workspace can be shown or hidden."
+Blockly.Msg.settings_statistics_on = "On"
+Blockly.Msg.settings_statistics_off = "Off"
+
+
+
+
 export const En = Blockly.Msg;

src/components/Blockly/toolbox/Toolbox.js

@@ -38,7 +38,7 @@ class Toolbox extends React.Component {
     render() {
         return (
             <xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
-                <Category name="Sensoren" colour={getColour().sensebox}>
+                <Category name={Blockly.Msg.toolbox_sensors} colour={getColour().sensebox}>
                     <Block type="sensebox_sensor_temp_hum" />
                     <Block type="sensebox_sensor_uv_light" />
                     <Block type="sensebox_sensor_bmx055_accelerometer" />
@@ -301,7 +301,7 @@ class Toolbox extends React.Component {
                     <Block type="sensebox_mqtt_publish" />
                     {/* <Block type="sensebox_mqtt_subscribe" /> */}
                 </Category>
-                <Category name="Logik" colour={getColour().logic}>
+                <Category name={Blockly.Msg.toolbox_logic} colour={getColour().logic}>
                     <Block type="controls_if" />
                     <Block type="controls_ifelse" />
                     <Block type="logic_compare" />
@@ -310,7 +310,7 @@ class Toolbox extends React.Component {
                     <Block type="logic_boolean" />
                     <Block type="switch_case" />
                 </Category>
-                <Category id="loops" name="Schleifen" colour={getColour().loops}>
+                <Category id="loops" name={Blockly.Msg.toolbox_loops} colour={getColour().loops}>
                     <Block type="controls_repeat_ext">
                         <Value name="TIMES">
                             <Block type="math_number">
@@ -349,7 +349,7 @@ class Toolbox extends React.Component {
                     <Block type="text_length" />
                     <Block type="text_isEmpty" />
                 </Category>
-                <Category id="time" name="Zeit" colour={getColour().time}>
+                <Category id="time" name={Blockly.Msg.toolbox_time} colour={getColour().time}>
                     <Block type="time_delay">
                         <Value name="DELAY_TIME_MILI">
                             <Block type="math_number">
@@ -369,7 +369,7 @@ class Toolbox extends React.Component {
                     <Block type="infinite_loop"></Block>
                     <Block type="sensebox_interval_timer"></Block>
                 </Category>
-                <Category id="catMath" name="Mathematik" colour={getColour().math}>
+                <Category id="math" name={Blockly.Msg.toolbox_math} colour={getColour().math}>
                     <Block type="math_number"></Block>
                     <Block type="math_arithmetic"></Block>
                     <Block type="math_single"></Block>
@@ -422,15 +422,15 @@ class Toolbox extends React.Component {
                     </Block>
                     <Block type="io_notone"></Block>
                 </Category>
-                <Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
+                <Category name={Blockly.Msg.toolbox_variables} colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
                 <Category name="Arrays" colour={getColour().arrays} >
                     <Block type="lists_create_empty" />
                     <Block type="array_getIndex" />
                     <Block type="lists_length" />
                 </Category>
-                <Category name="Functions" colour={getColour().procedures} custom="PROCEDURE"></Category>
+                <Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
                 <sep></sep>
-                <Category name="Eingang/Ausgang" colour={getColour().io}>
+                <Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
                     <Block type="io_digitalwrite"></Block>
                     <Block type="io_digitalread"></Block>
                     <Block type="io_builtin_led"></Block>

src/components/Content.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as Blockly from 'blockly/core';
+import { De } from './Blockly/msg/de';
+import { En } from './Blockly/msg/en';
+
+import Navbar from './Navbar';
+import Footer from './Footer';
+import Routes from './Route/Routes';
+import Cookies from './Cookies';
+
+class Content extends Component {
+
+  componentDidMount() {
+    if (this.props.language === 'de_DE') {
+      Blockly.setLocale(De);
+    } else if (this.props.language === 'en_US') {
+      Blockly.setLocale(En);
+    }
+  }
+
+  componentDidUpdate(props){
+    if(props.language !== this.props.language){
+      if (this.props.language === 'de_DE') {
+        Blockly.setLocale(De);
+      } else if (this.props.language === 'en_US') {
+        Blockly.setLocale(En);
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="wrapper">
+        <Navbar />
+        <Routes />
+        <Cookies />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+Content.propTypes = {
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, null)(Content);

src/components/Home.js

@@ -48,7 +48,6 @@ class Home extends Component {
 
   state = {
     codeOn: false,
-    stats: window.localStorage.getItem('stats'),
     snackbar: false,
     type: '',
     key: '',
@@ -91,7 +90,7 @@ class Home extends Component {
   render() {
     return (
       <div>
-        {this.state.stats ?
+        {this.props.statistics ?
           <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
           : null
         }
@@ -136,11 +135,13 @@ class Home extends Component {
 Home.propTypes = {
   clearStats: PropTypes.func.isRequired,
   workspaceName: PropTypes.func.isRequired,
-  message: PropTypes.object.isRequired
+  message: PropTypes.object.isRequired,
+  statistics: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
-  message: state.message
+  message: state.message,
+  statistics: state.general.statistics
 });
 
 

src/components/Navbar.js

@@ -21,7 +21,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = (theme) => ({

src/components/NotFound.js

@@ -6,14 +6,22 @@ import { withRouter } from 'react-router-dom';
 
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly'
 
 class NotFound 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>
         <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'Error' }]} />
-        <Typography variant='h4' style={{marginBottom: '5px'}}>Die von Ihnen angeforderte Seite kann nicht gefunden werden.</Typography>
+        <Typography variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.notfound_head}</Typography>
-        <Typography variant='body1'>Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.</Typography>
+        <Typography variant='body1'>{Blockly.Msg.notfound_text}</Typography>
         {this.props.button ?
           <Button
             style={{ marginTop: '20px' }}
@@ -30,7 +38,7 @@ class NotFound extends Component {
             color="primary"
             onClick={() => { this.props.history.push('/') }}
           >
-            Zurück zur Startseite
+            {Blockly.Msg.button_back}
           </Button>
         }
       </div>

src/components/Project/Project.js

@@ -6,7 +6,6 @@ import { getProject, resetProject } from '../../actions/projectActions';
 import { clearMessages, returnErrors } from '../../actions/messageActions';
 
 import { withRouter } from 'react-router-dom';
-import { createNameId } from 'mnemonic-id';
 
 import Home from '../Home';
 import Breadcrumbs from '../Breadcrumbs';

src/components/Settings/LanguageSelector.js

@@ -1,43 +1,58 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setLanguage } 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';
 
-const useStyles = makeStyles((theme) => ({
+class LanguageSelector extends Component {
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 120,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function LanguageSelector() {
+  componentDidMount(){
-    const classes = useStyles();
+    // Ensure that Blockly.setLocale is adopted in the component.
-    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
 
-    const handleChange = (event) => {
+  handleChange = (event) => {
-        setLang(event.target.value);
+    this.props.setLanguage(event.target.value);
-        window.localStorage.setItem('locale', event.target.value);
+  }
-    };
 
+  render(){
     return(
       <div>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
-                <InputLabel id="demo-simple-select-label">Sprache</InputLabel>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={lang}
+            value={this.props.language}
-                    onChange={handleChange}
+            onChange={this.handleChange}
           >
-                    <MenuItem value={'de'}>Deutsch</MenuItem>
+            <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
-                    <MenuItem value={'en'}>English</MenuItem>
+            <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
           </Select>
         </FormControl>
       </div>
     );
   }
+}
+
+LanguageSelector.propTypes = {
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setLanguage })(LanguageSelector);

src/components/Settings/RenderSelector.js

@@ -1,45 +1,57 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setRenderer } 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';
 
-const useStyles = makeStyles((theme) => ({
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function RenderSelector() {
+class RenderSelector extends Component {
-    const classes = useStyles();
-    const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
 
-    const handleChange = (event) => {
+  componentDidMount(){
-        setRenderer(event.target.value);
+    // Ensure that Blockly.setLocale is adopted in the component.
-        window.localStorage.setItem('renderer', event.target.value);
+    // Otherwise, the text will not be displayed until the next update of the component.
-    };
+    this.forceUpdate();
+  }
 
+  render(){
     return (
       <div>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
-                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={renderer}
+            value={this.props.renderer}
-                    onChange={handleChange}
+            onChange={(e) => this.props.setRenderer(e.target.value)}
-
           >
             <MenuItem value={'geras'}>Geras</MenuItem>
             <MenuItem value={'zelos'}>Zelos</MenuItem>
           </Select>
         </FormControl>
-            <p>Der Renderer bestimmt das aussehen der Blöcke</p>
       </div>
     );
   }
+}
+
+RenderSelector.propTypes = {
+  setRenderer: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  renderer: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setRenderer })(RenderSelector);

src/components/Settings/Settings.js

@@ -1,32 +1,65 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
 import { withRouter } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
+import * as Blockly from 'blockly/core';
-import Typography from '@material-ui/core/Typography';
+
+import Breadcrumbs from '../Breadcrumbs';
 import LanguageSelector from './LanguageSelector';
 import RenderSelector from './RenderSelector';
 import StatsSelector from './StatsSelector';
 
+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.
+    this.forceUpdate();
+  }
+
   render() {
     return (
       <div>
-                <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
+        <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'}}>
           <LanguageSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
           <RenderSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
           <StatsSelector />
+        </Paper>
+
         <Button
-                    style={{ marginTop: '20px' }}
+          style={{ marginTop: '10px' }}
           variant="contained"
           color="primary"
-                    onClick={() => { this.props.history.push('/') }}
+          onClick={this.props.pageVisits > 0 ? () => this.props.history.goBack() : () => this.props.history.push('/')}
         >
-                    Zurück zur Startseite
+          {Blockly.Msg.button_back}
         </Button>
       </div>
     );
   };
 }
 
-export default withRouter(Settings);
+Settings.propTypes = {
+  language: PropTypes.string.isRequired,
+  pageVisits: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language,
+  pageVisits: state.general.pageVisits
+});
+
+export default connect(mapStateToProps, null)(withRouter(Settings));

src/components/Settings/StatsSelector.js

@@ -1,44 +1,56 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setStatistics } 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';
 
-const useStyles = makeStyles((theme) => ({
+class StatsSelector extends Component {
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function StatsSelector() {
+  componentDidMount(){
-    const classes = useStyles();
+    // Ensure that Blockly.setLocale is adopted in the component.
-    const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
+    // Otherwise, the text will not be displayed until the next update of the component.
-
+    this.forceUpdate();
-    const handleChange = (event) => {
+  }
-        setStats(event.target.value);
-        window.localStorage.setItem('stats', event.target.value);
-    };
 
+  render(){
     return (
       <div>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
-                <InputLabel id="demo-simple-select-label">Statistiken</InputLabel>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={stats}
+            value={this.props.statistics}
-                    onChange={handleChange}
+            onChange={(e) => this.props.setStatistics(e.target.value)}
           >
-                    <MenuItem value={true}>On</MenuItem>
+            <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
-                    <MenuItem value={false}>Off</MenuItem>
+            <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
           </Select>
         </FormControl>
-            <p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
       </div>
     );
   }
+}
+
+StatsSelector.propTypes = {
+  setStatistics: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  statistics: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  statistics: state.general.statistics,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setStatistics })(StatsSelector);

src/components/Tutorial/Assessment.js

@@ -11,6 +11,7 @@ import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly'
 
 class Assessment extends Component {
 
@@ -45,7 +46,7 @@ class Assessment extends Component {
           </Grid>
           <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
             <Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
-              <Typography variant='h5'>Arbeitsauftrag</Typography>
+              <Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
               <Typography>{currentTask.text}</Typography>
             </Card>
             <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>

src/components/Tutorial/Badge.js

@@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
+import * as Blockly from 'blockly';
 
 const styles = (theme) => ({
   link: {
@@ -47,7 +48,7 @@ class Badge extends Component {
     }
     if (props.message !== this.props.message) {
       if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') {
-        this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true});
+        this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
       }
     }
   }
@@ -76,7 +77,7 @@ class Badge extends Component {
         content={this.state.content}
         onClose={() => { this.toggleDialog(); }}
         onClick={() => { this.toggleDialog(); }}
-        button={'Schließen'}
+        button={Blockly.Msg.button_close}
       >
         <div style={{ marginTop: '10px' }}>
           <Paper style={{ textAlign: 'center' }}>
@@ -88,7 +89,7 @@ class Badge extends Component {
             </Typography>
           </Paper>
           <Typography style={{ marginTop: '10px' }}>
-            Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du <Link to={'/user/badge'} className={this.props.classes.link}>hier</Link>.
+            {Blockly.Msg.badges_explaination}<Link to={'/user/badge'} className={this.props.classes.link}>{Blockly.Msg.labels_here}</Link>.
           </Typography>
         </div>
       </Dialog>

src/components/Tutorial/Builder/BlocklyExample.js

@@ -126,13 +126,13 @@ class BlocklyExample extends Component {
               />
             }
           />
-        : <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
+          : <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_solution}</FormLabel>}
         {this.state.checked ? !this.props.value || this.props.error ?
-          <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
+          <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}'-Button klickst.`}</FormHelperText>
           : this.state.input ? <FormHelperText style={{ lineHeight: 'initial' }}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
           : null}
         {this.state.checked && !this.props.task ?
-          <FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
+          <FormHelperText style={{ lineHeight: 'initial' }}>{Blockly.Msg.builder_comment}</FormHelperText>
           : null}
         {/* ensure that the correct xml-file is displayed in the workspace */}
         {this.state.checked && this.state.xml ? (() => {
@@ -156,10 +156,11 @@ class BlocklyExample extends Component {
                 disabled={this.state.disabled}
                 onClick={() => this.setXml()}
               >
-                {this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}
+                {this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}
               </Button>
             </div>
-          )})()
+          )
+        })()
           : null}
       </div>
     );

src/components/Tutorial/Builder/Builder.js

@@ -8,8 +8,6 @@ import { clearMessages } from '../../../actions/messageActions';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 
-import { saveAs } from 'file-saver';
-import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
 
 import Breadcrumbs from '../../Breadcrumbs';
 import Badge from './Badge';
@@ -357,19 +355,6 @@ class Builder extends Component {
             <Step step={step} index={i} key={i} />
           )}
 
-          {/*submit or reset*/}
-          <Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
-          {this.state.tutorial === 'new' ?
-            <div>
-              <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
-              <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
-            </div>
-          : <div>
-            <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
-            <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
-          </div>
-          }
-
             <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
               <CircularProgress color="inherit" />
             </Backdrop>

src/components/Tutorial/Builder/Hardware.js

@@ -12,6 +12,8 @@ import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormLabel from '@material-ui/core/FormLabel';
+import * as Blockly from 'blockly'
+
 
 const styles = theme => ({
   multiGridListTile: {
@@ -67,8 +69,8 @@ class Requirements extends Component {
     return (
       <div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
         <FormLabel style={{ color: 'black' }}>Hardware</FormLabel>
-        <FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
+        <FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>{Blockly.Msg.builder_hardware_order}</FormHelperText>
-        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware-Komponente aus.</FormHelperText> : null}
+        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>{Blockly.Msg.builder_hardware_helper}</FormHelperText> : null}
         <GridList cellHeight={100} cols={cols} spacing={10}>
           {hardware.map((picture, i) => (
             <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{ tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border }}>

src/components/Tutorial/Builder/Requirements.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent } from '../../../actions/tutorialBuilderActions';
-import { getTutorials, resetTutorial } from '../../../actions/tutorialActions';
-import { clearMessages } from '../../../actions/messageActions';
 
 import FormGroup from '@material-ui/core/FormGroup';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -11,7 +9,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
-
+import * as Blockly from 'blockly'
 class Requirements extends Component {
 
   onChange = (e) => {
@@ -29,8 +27,8 @@ class Requirements extends Component {
   render() {
     return (
       <FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
-        <FormLabel style={{ color: 'black' }}>Voraussetzungen</FormLabel>
+        <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
-        <FormHelperText style={{ marginTop: '5px' }}>Beachte, dass die Reihenfolge des Anhakens maßgebend ist.</FormHelperText>
+        <FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
         <FormGroup>
           {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) =>
             <FormControlLabel

src/components/Tutorial/Hardware.js

@@ -15,7 +15,7 @@ import GridListTileBar from '@material-ui/core/GridListTileBar';
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
-
+import * as Blockly from 'blockly'
 const styles = theme => ({
   expand: {
     '&:hover': {
@@ -56,7 +56,7 @@ class Hardware extends Component {
     var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
     return (
       <div style={{ marginTop: '10px', marginBottom: '5px' }}>
-        <Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>
+        <Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>
 
         <GridList cellHeight={100} cols={cols} spacing={10}>
           {this.props.picture.map((picture, i) => {
@@ -91,11 +91,11 @@ class Hardware extends Component {
           content={this.state.content}
           onClose={this.handleClose}
           onClick={this.handleClose}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
         >
           <div>
             <img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
-            Weitere Informationen zur Hardware-Komponente findest du <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">hier</Link>.
+            {Blockly.Msg.tutorials_hardware_moreInformation} <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">{Blockly.Msg.tutorials_hardware_here}</Link>.
           </div>
         </Dialog>
 

src/components/Tutorial/HintTutorialExists.js

@@ -9,6 +9,7 @@ import Dialog from '../Dialog';
 import { withStyles } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import * as Blockly from 'blockly'
 
 const styles = (theme) => ({
   link: {
@@ -45,7 +46,7 @@ class HintTutorialExists extends Component {
       window.localStorage.setItem('news', e.target.checked);
     }
     else {
-      window.localStorage.deleteItem('news');
+      window.localStorage.removeItem('news');
     }
   }
 
@@ -56,14 +57,15 @@ class HintTutorialExists extends Component {
         fullWidth
         maxWidth={'sm'}
         open={this.state.open}
-        title={'Neuigkeiten'}
+        title={Blockly.Msg.messages_newblockly_head}
         content={''}
         onClose={this.toggleDialog}
         onClick={this.toggleDialog}
-        button={'Schließen'}
+        button={Blockly.Msg.button_close}
       >
         <div>
-          Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei.
+          {Blockly.Msg.messages_newblockly_text}<Link to="/tutorial" className={this.props.classes.link}>test</Link>
+        </div>
         <FormControlLabel
           style={{ marginTop: '20px' }}
           classes={{ label: this.props.classes.label }}
@@ -77,9 +79,8 @@ class HintTutorialExists extends Component {
               color="primary"
             />
           }
-            label={'Dialog nicht mehr anzeigen'}
+          label={Blockly.Msg.labels_donotshowagain}
         />
-        </div>
       </Dialog>
     );
   };

src/components/Tutorial/Requirement.js

@@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import * as Blockly from 'blockly'
 
 const styles = theme => ({
   outerDiv: {
@@ -63,7 +64,7 @@ class Requirement extends Component {
     var tutorialIds = requirements.map(requirement => requirement._id);
     return (
       <div style={{ marginTop: '20px', marginBottom: '5px' }}>
-        <Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
+        <Typography>{Blockly.Msg.tutorials_requirements}</Typography>
         <List component="div">
           {tutorialIds.map((tutorialId, i) => {
             var title = requirements[i].title

src/components/Tutorial/SolutionCheck.js

@@ -18,6 +18,8 @@ import Button from '@material-ui/core/Button';
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import * as Blockly from 'blockly'
+
 const styles = (theme) => ({
   compile: {
     backgroundColor: theme.palette.button.compile,
@@ -57,7 +59,7 @@ class SolutionCheck extends Component {
     const steps = this.props.tutorial.steps;
     return (
       <div>
-        <Tooltip title='Lösung kontrollieren' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_check_solution} arrow>
           <IconButton
             className={this.props.classes.compile}
             style={{ width: '40px', height: '40px', marginRight: '5px' }}
@@ -76,7 +78,7 @@ class SolutionCheck extends Component {
           content={this.state.msg.text}
           onClose={this.toggleDialog}
           onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
         >
           {this.state.msg.type === 'success' ?
             <div style={{ marginTop: '20px', display: 'flex' }}>
@@ -88,7 +90,7 @@ class SolutionCheck extends Component {
                   color="primary"
                   onClick={() => { this.toggleDialog(); this.props.history.push(`/tutorial/`) }}
                 >
-                  Tutorials-Übersicht
+                  {Blockly.Msg.button_tutorial_overview}
                 </Button>
                 :
                 <Button
@@ -97,7 +99,7 @@ class SolutionCheck extends Component {
                   color="primary"
                   onClick={() => { this.toggleDialog(); this.props.tutorialStep(this.props.activeStep + 1) }}
                 >
-                  nächster Schritt
+                  {Blockly.Msg.button_next}
                 </Button>
               }
             </div>

src/components/Tutorial/StepperHorizontal.js

@@ -51,7 +51,6 @@ class StepperHorizontal extends Component {
 
   render() {
     var tutorialId = this.props.tutorial._id;
-    var tutorialIndex = this.props.currentTutorialIndex;
     var status = this.props.status.filter(status => status._id === tutorialId)[0];
     var tasks = status.tasks;
     var error = tasks.filter(task => task.type === 'error').length > 0;

src/components/Tutorial/Tutorial.js

@@ -12,7 +12,7 @@ import Instruction from './Instruction';
 import Assessment from './Assessment';
 import Badge from './Badge';
 import NotFound from '../NotFound';
-
+import * as Blockly from 'blockly'
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
 
 
@@ -56,7 +56,7 @@ class Tutorial extends Component {
       <div>
         {this.props.isLoading ? null :
           !this.props.tutorial ?
-            this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> : null
+            this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null
             : (() => {
               var tutorial = this.props.tutorial;
               var steps = this.props.tutorial.steps;
@@ -86,7 +86,8 @@ class Tutorial extends Component {
                     </Card>
                   </div>
                 </div>
-              )})()
+              )
+            })()
         }
       </div>
     );

src/components/User/Login.js

@@ -19,7 +19,7 @@ import Divider from '@material-ui/core/Divider';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Link from '@material-ui/core/Link';
-
+import * as Blockly from 'blockly'
 
 export class Login extends Component {
 
@@ -51,7 +51,7 @@ export class Login extends Component {
       }
       // Check for login error
       else if (message.id === 'LOGIN_FAIL') {
-        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: 'Der Benutzername oder das Passwort ist nicht korrekt.', type: 'error' });
+        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
       }
     }
   }
@@ -89,7 +89,7 @@ export class Login extends Component {
         <Breadcrumbs content={[{ link: '/user/login', title: 'Anmelden' }]} />
 
         <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
-          <h1>Anmelden</h1>
+          <h1>{Blockly.Msg.login_head}</h1>
           <Alert>
             Zur Anmeldung ist ein Konto auf <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> Voraussetzung.
           </Alert>
@@ -103,7 +103,7 @@ export class Login extends Component {
             style={{ marginBottom: '10px' }}
             // variant='outlined'
             type='text'
-            label='E-Mail oder Nutzername'
+            label={Blockly.Msg.labels_username}
             name='email'
             value={this.state.email}
             onChange={this.onChange}
@@ -156,7 +156,6 @@ Login.propTypes = {
   message: PropTypes.object.isRequired,
   login: PropTypes.func.isRequired,
   clearMessages: PropTypes.func.isRequired,
-  message: PropTypes.object.isRequired,
   progress: PropTypes.bool.isRequired
 };
 

src/components/Workspace/Compile.js

@@ -17,6 +17,7 @@ import TextField from '@material-ui/core/TextField';
 
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';
 
 const styles = (theme) => ({
   backdrop: {
@@ -85,7 +86,7 @@ class Compile extends Component {
       })
       .catch(err => {
         console.log(err);
-        this.setState({ progress: false, file: false, open: true, title: 'Fehler', content: 'Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.' });
+        this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
       });
   }
 
@@ -119,7 +120,7 @@ class Compile extends Component {
     return (
       <div style={{}}>
         {this.props.iconButton ?
-          <Tooltip title='Projekt kompilieren' arrow style={{ marginRight: '5px' }}>
+          <Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}>
             <IconButton
               className={this.props.classes.iconButton}
               onClick={() => this.compile()}
@@ -141,7 +142,7 @@ class Compile extends Component {
           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 ? 'Abbrechen' : 'Schließen'}
+          button={this.state.file ? Blockly.Msg.button_cancel : Blockly.Msg.button_close}
         >
           {this.state.file ?
             <div style={{ marginTop: '10px' }}>

src/components/Workspace/DeleteProject.js

@@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';
 
 const styles = (theme) => ({
   buttonTrash: {
@@ -48,7 +49,7 @@ class DeleteProject extends Component {
         this.props.history.push(`/${this.props.projectType}`);
       }
       else if (this.props.message.id === 'PROJECT_DELETE_FAIL') {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_delete_project_failed, type: 'error' });
       }
     }
   }
@@ -56,7 +57,7 @@ class DeleteProject extends Component {
   render() {
     return (
       <div>
-        <Tooltip title='Projekt löschen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_delete_project} arrow>
           <IconButton
             className={this.props.classes.buttonTrash}
             onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}

src/components/Workspace/DownloadProject.js

@@ -12,6 +12,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';
+
 
 const styles = (theme) => ({
   button: {
@@ -40,7 +42,7 @@ class DownloadProject extends Component {
   render() {
     return (
       <div style={this.props.style}>
-        <Tooltip title='Projekt herunterladen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_download_project} arrow>
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.downloadXmlFile()}

src/components/Workspace/OpenProject.js

@@ -9,10 +9,7 @@ import Snackbar from '../Snackbar';
 import Dialog from '../Dialog';
 
 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
 
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -97,7 +94,7 @@ class OpenProject extends Component {
             type="file"
           />
           <label htmlFor="open-blocks">
-            <Tooltip title='Projekt öffnen' arrow style={this.props.style}>
+            <Tooltip title={Blockly.Msg.tooltip_open_project} arrow style={this.props.style}>
               <div className={this.props.classes.button} style={{
                 borderRadius: '50%', cursor: 'pointer', display: 'table-cell',
                 verticalAlign: 'middle',
@@ -115,7 +112,7 @@ class OpenProject extends Component {
           content={this.state.content}
           onClose={this.toggleDialog}
           onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
         />
         <Snackbar
           open={this.state.snackbar}

src/components/Workspace/ResetWorkspace.js

@@ -58,7 +58,7 @@ class ResetWorkspace extends Component {
     if (!this.props.assessment) {
       this.props.workspaceName(createNameId());
     }
-    this.setState({ snackbar: true, type: 'success', key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
+    this.setState({ snackbar: true, type: 'success', key: Date.now(), message: Blockly.Msg.messages_reset_workspace_success });
   }
 
 
@@ -66,7 +66,7 @@ class ResetWorkspace extends Component {
   render() {
     return (
       <div style={this.props.style}>
-        <Tooltip title='Workspace zurücksetzen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_reset_workspace} arrow>
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.resetWorkspace()}

src/components/Workspace/SaveProject.js

@@ -14,13 +14,14 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import * as Blockly from 'blockly/core'
+
 const styles = (theme) => ({
   button: {
     backgroundColor: theme.palette.primary.main,
@@ -65,16 +66,16 @@ class SaveProject extends Component {
     }
     if (this.props.message !== props.message) {
       if (this.props.message.id === 'PROJECT_UPDATE_SUCCESS') {
-        this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS, type: 'success' });
       }
       else if (this.props.message.id === 'GALLERY_UPDATE_SUCCESS') {
-        this.setState({ snackbar: true, key: Date.now(), message: `Das Galerie-Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS, type: 'success' });
       }
       else if (this.props.message.id === 'PROJECT_UPDATE_FAIL') {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.`, type: 'error' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_FAIL, type: 'error' });
       }
       else if (this.props.message.id === 'GALLERY_UPDATE_FAIL') {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.`, type: 'error' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_FAIL, type: 'error' });
       }
     }
   }
@@ -99,9 +100,9 @@ class SaveProject extends Component {
       success: res => {
         var project = res.data[this.state.projectType];
         this.props.history.push(`/${this.state.projectType}/${project._id}`);
-      },
+      })
-      error: err => {
+      .catch(err => {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Speichern des ${this.state.projectType === 'gallery' ? 'Galerie-':''}Projektes. Versuche es noch einmal.`, type: 'error' });
+        this.setState({ snackbar: true, key: Date.now(), message: `${Blockly.Msg.messages_gallery_save_fail_1} ${this.state.projectType === 'gallery' ? 'Galerie-' : ''} ${Blockly.Msg.messages_gallery_save_fail_2}`, type: 'error' });
         window.scrollTo(0, 0);
       }
     };
@@ -129,7 +130,7 @@ class SaveProject extends Component {
     console.log(1, this.props);
     return (
       <div style={this.props.style}>
-        <Tooltip title={this.state.projectType === 'project'? 'Projekt aktualisieren':'Projekt speichern'} arrow>
+        <Tooltip title={this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_save_project} arrow>
           <IconButton
             className={this.props.classes.button}
             onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
@@ -154,7 +155,7 @@ class SaveProject extends Component {
           <MenuItem
             onClick={this.state.projectType === 'project' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ projectType: 'project' }, () => this.saveProject()) }}
           >
-            {this.state.projectType === 'project' ? 'Projekt aktualisieren' : 'Projekt erstellen'}
+            {this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_create_project}
           </MenuItem>
           <MenuItem
             onClick={this.state.projectType === 'gallery' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.' }); }}

src/components/Workspace/Screenshot.js

@@ -73,7 +73,7 @@ class Screenshot extends Component {
   render() {
     return (
       <div style={this.props.style}>
-        <Tooltip title='Screenshot erstellen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_screenshot} arrow>
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.getSvg()}

src/components/Workspace/ShareProject.js

@@ -19,6 +19,8 @@ import Typography from '@material-ui/core/Typography';
 import { faShareAlt, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import * as Blockly from 'blockly/core';
+
 const styles = (theme) => ({
   button: {
     backgroundColor: theme.palette.primary.main,
@@ -61,10 +63,10 @@ class WorkspaceFunc extends Component {
   componentDidUpdate(props) {
     if (this.props.message !== props.message) {
       if (this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
-        this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.message.status });
+        this.setState({ share: true, open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.message.status });
       }
       else if (this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_SHARE_FAIL, type: 'error' });
         window.scrollTo(0, 0);
       }
     }
@@ -81,7 +83,7 @@ class WorkspaceFunc extends Component {
   shareBlocks = () => {
     if (this.props.projectType === 'project' && this.props.project.shared) {
       // project is already shared
-      this.setState({ open: true, title: 'Programm teilen', id: this.props.project._id });
+      this.setState({ open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.project._id });
     }
     else {
       this.props.shareProject(this.props.name || this.props.project.title, this.props.projectType, this.props.project ? this.props.project._id : undefined);
@@ -91,7 +93,7 @@ class WorkspaceFunc extends Component {
   render() {
     return (
       <div style={this.props.style}>
-        <Tooltip title='Projekt teilen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_share_project} arrow>
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.shareBlocks()}
@@ -112,24 +114,23 @@ class WorkspaceFunc extends Component {
           content={this.state.content}
           onClose={this.toggleDialog}
           onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
         >
           <div style={{ marginTop: '10px' }}>
             <Typography>Über den folgenden Link kannst du dein Programm teilen:</Typography>
             <Link to={`/share/${this.state.id}`} onClick={() => this.toggleDialog()} className={this.props.classes.link}>{`${window.location.origin}/share/${this.state.id}`}</Link>
-            <Tooltip title='Link kopieren' arrow style={{ marginRight: '5px' }}>
+            <Tooltip title={Blockly.Msg.tooltip_copy_link} arrow style={{ marginRight: '5px' }}>
               <IconButton
                 onClick={() => {
                   navigator.clipboard.writeText(`${window.location.origin}/share/${this.state.id}`);
-                  this.setState({ snackbar: true, key: Date.now(), message: 'Link erfolgreich in Zwischenablage gespeichert.', type: 'success' });
+                  this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_copylink_success, type: 'success' });
                 }}
               >
                 <FontAwesomeIcon icon={faCopy} size="xs" />
               </IconButton>
             </Tooltip>
             {this.props.project && this.props.project.shared && this.props.message.id !== 'SHARE_SUCCESS' ?
-              <Typography variant='body2' style={{marginTop: '20px'}}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
+              <Typography variant='body2' style={{ marginTop: '20px' }}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
-                moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
                 moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
                   `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
                   : `${moment(this.props.project.shared).diff(moment().utc(), 'hours')} Stunden`

src/components/Workspace/TrashcanButtons.js

@@ -59,7 +59,7 @@ class TrashcanButtons extends Component {
     return (
       this.state.closeTrashFlyout ?
         <div>
-          <Tooltip title='gelöschte Blöcke ausblenden'>
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
             <IconButton
               className={this.props.classes.closeTrash}
               style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
@@ -68,7 +68,7 @@ class TrashcanButtons extends Component {
               <FontAwesomeIcon icon={faTimes} size="xs" />
             </IconButton>
           </Tooltip>
-          <Tooltip title='Blöcke endgültig löschen'>
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
             <IconButton
               className={this.props.classes.deleteTrash}
               style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}

src/components/Workspace/WorkspaceName.js

@@ -16,6 +16,7 @@ import Typography from '@material-ui/core/Typography';
 
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core'
 
 const styles = (theme) => ({
   workspaceName: {
@@ -82,14 +83,14 @@ class WorkspaceName extends Component {
         this.props.updateProject(this.props.projectType, this.props.project._id);
       }
     } else {
-      this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
+      this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}` });
     }
   }
 
   render() {
     return (
       <div style={this.props.style}>
-        <Tooltip title={`Titel des Projektes${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{height: '100%'}}>
+        <Tooltip title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ height: '100%' }}>
           <div
             className={this.props.classes.workspaceName}
             onClick={() => { if (this.props.multiple) { this.props.workspaceName(this.props.project.title); if (this.props.projectType === 'gallery') { this.props.setDescription(this.props.project.description); } } this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern' : this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.' : 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}

src/reducers/generalReducer.js

@@ -1,8 +1,35 @@
-import { VISIT } from '../actions/types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
+
+const initialLanguage = () => {
+  if (window.localStorage.getItem('locale')) {
+    return window.localStorage.getItem('locale');
+  }
+  if (navigator.language === 'de-DE'){
+    return 'de_DE';
+  }
+  return 'en_US';
+};
+
+const initialRenderer = () => {
+  if (window.localStorage.getItem('renderer')) {
+    return window.localStorage.getItem('renderer');
+  }
+  return 'geras';
+};
+
+const initialStatistics = () => {
+  if (window.localStorage.getItem('statistics')) {
+    return JSON.parse(window.localStorage.getItem('statistics'));
+  }
+  return false;
+};
 
 
 const initialState = {
-  pageVisits: 0 // detect if previous URL was
+  pageVisits: 0, // detect if previous URL was
+  language: initialLanguage(),
+  renderer: initialRenderer(),
+  statistics: initialStatistics()
 };
 
 export default function(state = initialState, action){
@@ -12,6 +39,23 @@ export default function(state = initialState, action){
         ...state,
         pageVisits: state.pageVisits += 1
       };
+    case LANGUAGE:
+      return {
+        ...state,
+        language: action.payload
+      };
+    case RENDERER:
+      window.localStorage.setItem('renderer', action.payload);
+      return {
+        ...state,
+        renderer: action.payload
+      };
+    case STATISTICS:
+      window.localStorage.setItem('statistics', action.payload);
+      return {
+        ...state,
+        statistics: action.payload
+      };
     default:
       return state;
   }