schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add first translations

Browse Source
This commit is contained in:
Mario 2020-12-14 08:51:31 +01:00
parent 3d2a18c1db
commit 7d1d2409e4
20 changed files with 344 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/Blockly/msg/de.js
View File

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

83
src/components/Blockly/msg/en.js
View File

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

16
src/components/Blockly/toolbox/Toolbox.js
View File

@ -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>

19
src/components/NotFound.js
View File

@ -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'}]}/>
<Typography variant='h4' style={{marginBottom: '5px'}}>Die von Ihnen angeforderte Seite kann nicht gefunden werden.</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>
<Breadcrumbs content={[{ link: this.props.location.pathname, title: 'Error' }]} />
<Typography variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.notfound_head}</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>

5
src/components/Settings/LanguageSelector.js
View File

@ -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>

4
src/components/Settings/RenderSelector.js
View File

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

8
src/components/Settings/Settings.js
View File

@ -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
</Button>
{Blockly.Msg.button_back}
</Button>
</div>
);
};

3
src/components/Tutorial/Assessment.js
View File

@ -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%' }}>

6
src/components/Tutorial/Hardware.js
View File

@ -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>

3
src/components/Tutorial/HintTutorialExists.js
View File

@ -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.

7
src/components/Workspace/Compile.js
View File

@ -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' }}>

11
src/components/Workspace/DeleteProject.js
View File

@ -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.id === 'PROJECT_DELETE_SUCCESS'){
if (this.props.message !== props.message) {
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
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' });
else if (this.props.message.id === 'PROJECT_DELETE_FAIL') {
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)}

4
src/components/Workspace/DownloadProject.js
View File

@ -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()}

4
src/components/Workspace/OpenProject.js
View File

@ -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}

4
src/components/Workspace/ResetWorkspace.js
View File

@ -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()}

43
src/components/Workspace/SaveProject.js
View File

@ -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.id === 'PROJECT_UPDATE_SUCCESS'){
this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
if (this.props.message !== props.message) {
if (this.props.message.id === 'PROJECT_UPDATE_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' });
else if (this.props.message.id === 'GALLERY_UPDATE_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' });
else if (this.props.message.id === 'PROJECT_UPDATE_FAIL') {
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' });
else if (this.props.message.id === 'GALLERY_UPDATE_FAIL') {
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 });}}
onClick={() => {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 }); }}
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>

2
src/components/Workspace/Screenshot.js
View File

@ -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()}

35
src/components/Workspace/ShareProject.js
View File

@ -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.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 });
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: 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' });
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: 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 ${
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`
<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(), 'hours') === 0 ?
`${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>

18
src/components/Workspace/TrashcanButtons.js
View File

@ -36,8 +36,8 @@ class TrashcanButtons extends Component {
componentDidUpdate(previousProps, previousState) {
const workspace = Blockly.getMainWorkspace();
const contentsIsOpen = workspace.trashcan.contentsIsOpen();
if(previousState.closeTrashFlyout !== contentsIsOpen){
this.setState({ closeTrashFlyout: contentsIsOpen });
if (previousState.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
);
};
}

25
src/components/Workspace/WorkspaceName.js
View File

@ -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 === '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') {
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 });}}
onClick={() => {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 }); }}
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>