add first translations

src/components/Blockly/msg/de.js

@@ -800,4 +800,151 @@ 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"
+
+
+/**
+ * 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.'
+/**
+ * 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.filename = "Dateiname";
+Blockly.Msg.projectname = "Projektname";
+
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Einstellungen"
+Blockly.Msg.settings_language = "Sprache"
+Blockly.Msg.settings_language_de = "Deutsch"
+Blockly.Msg.settings_language_en = "Englisch"
+Blockly.Msg.settings_renderer_text = "Der Renderer bestimmt das aussehen der Blöcke"
+
+/**
+ * 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."
+
+
+/**
+ * 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"
+
 export const De = Blockly.Msg;

src/components/Blockly/msg/en.js

@@ -782,4 +782,87 @@ 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";
+
+
+
+
+
 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/NotFound.js

@@ -6,31 +6,32 @@ 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 {
   render() {
     return (
       <div>
-        <Breadcrumbs content={[{link: this.props.location.pathname, title: 'Error'}]}/>
+        <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'}}
+            style={{ marginTop: '20px' }}
             variant="contained"
             color="primary"
-            onClick={() => {this.props.history.push(this.props.button.link)}}
+            onClick={() => { this.props.history.push(this.props.button.link) }}
           >
             {this.props.button.title}
           </Button>
-        :
+          :
           <Button
-            style={{marginTop: '20px'}}
+            style={{ marginTop: '20px' }}
             variant="contained"
             color="primary"
-            onClick={() => {this.props.history.push('/')}}
+            onClick={() => { this.props.history.push('/') }}
           >
-            Zurück zur Startseite
+            {Blockly.Msg.button_back}
           </Button>
         }
       </div>

src/components/Settings/LanguageSelector.js

@@ -4,6 +4,7 @@ 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 * as Blockly from 'blockly/core';
 
 const useStyles = makeStyles((theme) => ({
     formControl: {
@@ -27,7 +28,7 @@ export default function LanguageSelector() {
     return (
         <div>
             <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">Sprache</InputLabel>
+                <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
                 <Select
                     labelId="demo-simple-select-label"
                     id="demo-simple-select"
@@ -35,7 +36,7 @@ export default function LanguageSelector() {
                     onChange={handleChange}
                 >
                     <MenuItem value={'de'}>Deutsch</MenuItem>
-                    <MenuItem value={'en'}>English</MenuItem>
+                    <MenuItem value={'en'}>Englisch</MenuItem>
                 </Select>
             </FormControl>
         </div>

src/components/Settings/RenderSelector.js

@@ -4,7 +4,7 @@ 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 * as Blockly from 'blockly/core'
 const useStyles = makeStyles((theme) => ({
     formControl: {
         margin: theme.spacing(1),
@@ -39,7 +39,7 @@ export default function RenderSelector() {
                     <MenuItem value={'zelos'}>Zelos</MenuItem>
                 </Select>
             </FormControl>
-            <p>Der Renderer bestimmt das aussehen der Blöcke</p>
+            <p>{Blockly.Msg.settings_renderer_text}</p>
         </div>
     );
 }

src/components/Settings/Settings.js

@@ -6,13 +6,13 @@ import Typography from '@material-ui/core/Typography';
 import LanguageSelector from './LanguageSelector';
 import RenderSelector from './RenderSelector';
 import StatsSelector from './StatsSelector';
-
+import * as Blockly from 'blockly'
 
 class Settings extends Component {
     render() {
         return (
             <div>
-                <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
+                <Typography variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.settings_head}</Typography>
                 <LanguageSelector />
                 <RenderSelector />
                 <StatsSelector />
@@ -22,8 +22,8 @@ class Settings extends Component {
                     color="primary"
                     onClick={() => { this.props.history.push('/') }}
                 >
-                    Zurück zur Startseite
+                    {Blockly.Msg.button_back}
-            </Button>
+                </Button>
             </div>
         );
     };

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.

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: {
@@ -43,12 +44,12 @@ class DeleteProject extends Component {
   }
 
   componentDidUpdate(props) {
-    if(this.props.message !== props.message){
+    if (this.props.message !== props.message) {
-      if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
         this.props.history.push(`/${this.props.projectType}`);
       }
-      else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){
+      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

@@ -97,7 +97,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 +115,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,
@@ -63,18 +64,18 @@ class SaveProject extends Component {
     if (props.description !== this.props.description) {
       this.setState({ description: this.props.description });
     }
-    if(this.props.message !== props.message){
+    if (this.props.message !== props.message) {
-      if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
+      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'){
+      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'){
+      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'){
+      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' });
       }
     }
   }
@@ -92,7 +93,7 @@ class SaveProject extends Component {
       xml: this.props.xml,
       title: this.props.name
     };
-    if(this.state.projectType === 'gallery'){
+    if (this.state.projectType === 'gallery') {
       body.description = this.state.description;
     }
     axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body)
@@ -101,7 +102,7 @@ class SaveProject extends Component {
         this.props.history.push(`/${this.state.projectType}/${project._id}`);
       })
       .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);
       });
   }
@@ -112,7 +113,7 @@ class SaveProject extends Component {
 
   workspaceDescription = () => {
     this.props.setDescription(this.state.description);
-    this.setState({projectType: 'gallery'},
+    this.setState({ projectType: 'gallery' },
       () => this.saveProject()
     );
   }
@@ -121,10 +122,10 @@ 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())}}
+            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()) }}
           >
             <FontAwesomeIcon icon={faSave} size="xs" />
           </IconButton>
@@ -144,12 +145,12 @@ class SaveProject extends Component {
           onClose={this.toggleMenu}
         >
           <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())}}
+            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\'.'});}}
+            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\'.' }); }}
           >
             {this.state.projectType === 'gallery' ? 'Galerie-Projekt aktualisieren' : 'Galerie-Projekt erstellen'}
           </MenuItem>
@@ -165,13 +166,13 @@ class SaveProject extends Component {
           open={this.state.open}
           title={this.state.title}
           content={this.state.content}
-          onClose={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
+          onClose={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
-          onClick={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
+          onClick={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
           button={'Abbrechen'}
         >
           <div style={{ marginTop: '10px' }}>
             <TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
-            <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => {this.workspaceDescription(); this.toggleDialog();}}>Eingabe</Button>
+            <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button>
           </div>
         </Dialog>
       </div>

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,
@@ -59,18 +61,18 @@ class WorkspaceFunc extends Component {
   }
 
   componentDidUpdate(props) {
-    if(this.props.message !== props.message){
+    if (this.props.message !== props.message) {
-      if(this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
+      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)){
+      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);
       }
     }
   }
 
-  componentWillUnmount(){
+  componentWillUnmount() {
     this.props.clearMessages();
   }
 
@@ -79,9 +81,9 @@ class WorkspaceFunc extends Component {
   }
 
   shareBlocks = () => {
-    if(this.props.projectType === 'project' && this.props.project.shared){
+    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,29 +114,28 @@ 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(), 'hours') === 0 ?
+                  `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
-                    `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
                   : `${moment(this.props.project.shared).diff(moment().utc(), 'hours')} Stunden`
                 : `${moment(this.props.project.shared).diff(moment().utc(), 'days')} Tage`} gültig.`}</Typography>
-            : <Typography variant='body2' style={{marginTop: '20px'}}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
+              : <Typography variant='body2' style={{ marginTop: '20px' }}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
           </div>
         </Dialog>
       </div>

src/components/Workspace/TrashcanButtons.js

@@ -36,8 +36,8 @@ class TrashcanButtons extends Component {
   componentDidUpdate(previousProps, previousState) {
     const workspace = Blockly.getMainWorkspace();
     const contentsIsOpen = workspace.trashcan.contentsIsOpen();
-    if(previousState.closeTrashFlyout !== contentsIsOpen){
+    if (previousState.closeTrashFlyout !== contentsIsOpen) {
-      this.setState({ closeTrashFlyout:  contentsIsOpen });
+      this.setState({ closeTrashFlyout: contentsIsOpen });
     }
   }
 
@@ -59,26 +59,26 @@ 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 }}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
               onClick={() => this.closeTrashcan()}
             >
-              <FontAwesomeIcon icon={faTimes} size="xs"/>
+              <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 }}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
               onClick={() => this.clearTrashcan()}
             >
-              <FontAwesomeIcon icon={faTrash} size="xs"/>
+              <FontAwesomeIcon icon={faTrash} size="xs" />
             </IconButton>
           </Tooltip>
         </div>
-      : null
+        : null
     );
   };
 }

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: {
@@ -72,31 +73,31 @@ class WorkspaceName extends Component {
   renameWorkspace = () => {
     this.props.workspaceName(this.state.name);
     this.toggleDialog();
-    if(this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
+    if (this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
-      if(this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
+      if (this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
         this.props.setDescription(this.state.description);
       }
-      if(this.state.projectType === 'gallery'){
+      if (this.state.projectType === 'gallery') {
         this.saveGallery();
       } else {
         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\'.' }) }}
+            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\'.' }) }}
           >
-            {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ?
+            {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl' : 'xs', this.props.width) ?
               <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography>
-            : null}
+              : null}
             <div style={{ width: '40px', display: 'flex' }}>
               <FontAwesomeIcon icon={faPen} style={{ height: '18px', width: '18px', margin: 'auto' }} />
             </div>
@@ -113,17 +114,17 @@ class WorkspaceName extends Component {
           open={this.state.open}
           title={this.state.title}
           content={this.state.content}
-          onClose={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
+          onClose={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
-          onClick={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
+          onClick={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
           button={'Abbrechen'}
         >
           <div style={{ marginTop: '10px' }}>
             {this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ?
               <div>
-                <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{marginBottom: '10px'}}/>
+                <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginBottom: '10px' }} />
                 <TextField fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
               </div>
-            : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
+              : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
             <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => { this.renameWorkspace(); this.toggleDialog(); }}>Eingabe</Button>
           </div>
         </Dialog>