add first translations

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/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) => {
@@ -95,7 +95,7 @@ class Hardware extends Component {
         >
           <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: {
@@ -60,7 +61,7 @@ class HintTutorialExists extends Component {
         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.