From e5204bb4d54db3eb917b53f89d2b6d03b2e84821 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 14 Dec 2020 13:50:44 +0100 Subject: [PATCH] add more translations and resolve issues --- src/actions/projectActions.js | 41 +++--- src/actions/tutorialActions.js | 30 ++-- src/components/Blockly/msg/de.js | 46 +++++- src/components/Navbar.js | 60 ++++---- src/components/Project/Project.js | 36 +++-- src/components/Project/ProjectHome.js | 50 +++---- src/components/Tutorial/Badge.js | 41 +++--- .../Tutorial/Builder/BlocklyExample.js | 71 +++++----- src/components/Tutorial/Builder/Builder.js | 133 +++++++++--------- src/components/Tutorial/Builder/Hardware.js | 6 +- .../Tutorial/Builder/Requirements.js | 8 +- src/components/Tutorial/Hardware.js | 2 +- src/components/Tutorial/HintTutorialExists.js | 36 ++--- src/components/Tutorial/Requirement.js | 3 +- src/components/Tutorial/SolutionCheck.js | 10 +- src/components/Tutorial/StepperHorizontal.js | 5 +- src/components/Tutorial/Tutorial.js | 61 ++++---- src/components/User/Login.js | 43 +++--- src/components/Workspace/OpenProject.js | 3 - src/reducers/tutorialReducer.js | 2 +- 20 files changed, 362 insertions(+), 325 deletions(-) diff --git a/src/actions/projectActions.js b/src/actions/projectActions.js index 8ab01cf..c56a06d 100644 --- a/src/actions/projectActions.js +++ b/src/actions/projectActions.js @@ -1,7 +1,6 @@ import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types'; import axios from 'axios'; -import { workspaceName } from './workspaceActions'; import { returnErrors, returnSuccess } from './messageActions'; export const setType = (type) => (dispatch) => { @@ -19,13 +18,13 @@ export const setDescription = (description) => (dispatch) => { }; export const getProject = (type, id) => (dispatch) => { - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); dispatch(setType(type)); axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`) .then(res => { var data = type === 'share' ? 'content' : type; var project = res.data[data]; - if(project){ + if (project) { dispatch({ type: GET_PROJECT, payload: project @@ -34,24 +33,24 @@ export const getProject = (type, id) => (dispatch) => { type: PROJECT_DESCRIPTION, payload: project.description }); - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS')); } - else{ - dispatch({type: PROJECT_PROGRESS}); + else { + dispatch({ type: PROJECT_PROGRESS }); dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY')); } }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECT_FAIL')); } - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); }); }; export const getProjects = (type) => (dispatch) => { - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`) .then(res => { var data = type === 'project' ? 'projects' : 'galleries'; @@ -60,14 +59,14 @@ export const getProjects = (type) => (dispatch) => { type: GET_PROJECTS, payload: projects }); - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); dispatch(returnSuccess(res.data.message, res.status)); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL')); } - dispatch({type: PROJECT_PROGRESS}); + dispatch({ type: PROJECT_PROGRESS }); }); }; @@ -78,7 +77,7 @@ export const updateProject = (type, id) => (dispatch, getState) => { title: workspace.name }; var project = getState().project; - if(type==='gallery'){ + if (type === 'gallery') { body.description = project.description; } axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body) @@ -91,15 +90,15 @@ export const updateProject = (type, id) => (dispatch, getState) => { type: GET_PROJECTS, payload: projects }); - if(type === 'project'){ + if (type === 'project') { dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS')); } else { dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS')); } }) .catch(err => { - if(err.response){ - if(type === 'project'){ + if (err.response) { + if (type === 'project') { dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL')); } else { dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL')); @@ -119,14 +118,14 @@ export const deleteProject = (type, id) => (dispatch, getState) => { type: GET_PROJECTS, payload: projects }); - if(type === 'project'){ + if (type === 'project') { dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS')); } else { dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS')); } }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL')); } }); @@ -137,7 +136,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => { var body = { title: title }; - if(type === 'project'){ + if (type === 'project') { body.projectId = id; } else { body.xml = getState().workspace.code.xml; @@ -145,7 +144,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => { axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body) .then(res => { var shareContent = res.data.content; - if(body.projectId){ + if (body.projectId) { var projects = getState().project.projects; var index = projects.findIndex(res => res._id === id); projects[index].shared = shareContent.expiresAt; @@ -157,7 +156,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => { dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS')); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL')); } }); diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 8983da9..7ef8c8e 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,10 +1,10 @@ -import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; +import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types'; import axios from 'axios'; import { returnErrors, returnSuccess } from './messageActions'; export const getTutorial = (id) => (dispatch, getState) => { - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) .then(res => { var tutorial = res.data.tutorial; @@ -13,7 +13,7 @@ export const getTutorial = (id) => (dispatch, getState) => { type: TUTORIAL_SUCCESS, payload: status }); - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); dispatch({ type: GET_TUTORIAL, payload: tutorial @@ -22,15 +22,15 @@ export const getTutorial = (id) => (dispatch, getState) => { }); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL')); } - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); }); }; export const getTutorials = () => (dispatch, getState) => { - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`) .then(res => { var tutorials = res.data.tutorials; @@ -44,15 +44,15 @@ export const getTutorials = () => (dispatch, getState) => { type: GET_TUTORIALS, payload: tutorials }); - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); dispatch(returnSuccess(res.data.message, res.status)); }); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL')); } - dispatch({type: TUTORIAL_PROGRESS}); + dispatch({ type: TUTORIAL_PROGRESS }); }); }; @@ -69,7 +69,7 @@ export const assigneBadge = (id) => (dispatch, getState) => { dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS')); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL')); } }); @@ -90,7 +90,7 @@ export const deleteTutorial = (id) => (dispatch, getState) => { dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS')); }) .catch(err => { - if(err.response){ + if (err.response) { dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL')); } }); @@ -128,7 +128,7 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => { payload: tutorialsStatus }); dispatch(tutorialChange()); - dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS')); + dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS')); }; export const storeTutorialXml = (code) => (dispatch, getState) => { @@ -161,9 +161,9 @@ export const tutorialStep = (step) => (dispatch) => { }; -const existingTutorials = (tutorials, status) => new Promise(function(resolve, reject){ +const existingTutorials = (tutorials, status) => new Promise(function (resolve, reject) { var newstatus; - new Promise(function(resolve, reject){ + new Promise(function (resolve, reject) { var existingTutorialIds = tutorials.map((tutorial, i) => { existingTutorial(tutorial, status).then(status => { newstatus = status; @@ -180,7 +180,7 @@ const existingTutorials = (tutorials, status) => new Promise(function(resolve, r }); }); -const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){ +const existingTutorial = (tutorial, status) => new Promise(function (resolve, reject) { var tutorialsId = tutorial._id; var statusIndex = status.findIndex(status => status._id === tutorialsId); if (statusIndex > -1) { diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index cca4e12..71212f9 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -859,7 +859,7 @@ Blockly.Msg.tooltip_copy_link = "Link kopieren" Blockly.Msg.tooltip_trashcan_hide = 'gelöschte Blöcke ausblenden' Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen' Blockly.Msg.tooltip_project_title = "Titel des Projektes" - +Blockly.Msg.tooltip_check_solution = "Lösung kontrollieren" /** * Messages @@ -879,6 +879,10 @@ Blockly.Msg.messages_SHARE_FAIL = "Fehler beim Erstellen eines Links zum Teilen Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.' Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in ' Blockly.Msg.messages_rename_success_02 = 'umbenannt.' +Blockly.Msg.messages_newblockly_head = "Willkommen zur neuen Version Blockly für die senseBox" +Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier:" +Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Zurück zur Tutorials-Übersicht' +Blockly.Msg.messages_LOGIN_FAIL = 'Der Benutzername oder das Passwort ist nicht korrekt.' /** * Share Dialog */ @@ -912,6 +916,8 @@ Blockly.Msg.button_accept = "Bestätigen"; Blockly.Msg.button_compile = "Kompilieren"; Blockly.Msg.button_create_variableCreate = "Erstelle Variable"; Blockly.Msg.button_back = "Zurück" +Blockly.Msg.button_next = "nächster Schritt" +Blockly.Msg.button_tutorial_overview = "Tutorial Übersicht" /** @@ -938,6 +944,21 @@ Blockly.Msg.notfound_head = "Die von Ihnen angeforderte Seite kann nicht gefunde Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar." +/** + * Labels + */ + +Blockly.Msg.labels_donotshowagain = 'Dialog nicht mehr anzeigen' +Blockly.Msg.labels_here = "hier" +Blockly.Msg.labels_username = 'E-Mail oder Nutzername' + +/** + * Badges + */ + +Blockly.Msg.badges_explaination = "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du " +Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01 = "Herzlichen Glückwunsch! Du hast den Badge " +Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02 = " erhalten." /** * Tutorials */ @@ -945,6 +966,27 @@ Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, Blockly.Msg.tutorials_assessment_task = "Aufgabe" Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:" Blockly.Msg.tutorials_hardware_moreInformation = "Weitere Informationen zur Hardware-Komponente findest du" -Blockly.Msg.tutorials_hardware_here = "hier" +Blockly.Msg.tutorials_hardware_here = "hier"; +Blockly.Msg.tutorials_requirements = "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:" + +/** + * Tutorial Builder + */ + +Blockly.Msg.builder_solution = "Lösung" +Blockly.Msg.builder_solution_submit = "Lösung einreichen" +Blockly.Msg.builder_example_submit = "Beispiel einreichen" +Blockly.Msg.builder_comment = "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird." +Blockly.Msg.builder_hardware_order = "Beachte, dass die Reihenfolge des Auswählens maßgebend ist." +Blockly.Msg.builder_hardware_helper = "Wähle mindestens eine Hardware-Komponente aus." +Blockly.Msg.builder_requirements_head = "Voraussetzungen" +Blockly.Msg.builder_requirements_order = "Beachte, dass die Reihenfolge des Anhakens maßgebend ist." + +/** + * Login + */ + + +Blockly.Msg.login_head = "Anmelden" export const De = Blockly.Msg; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 2bc7b62..a3e6949 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -21,7 +21,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import LinearProgress from '@material-ui/core/LinearProgress'; -import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons"; +import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const styles = (theme) => ({ @@ -101,46 +101,46 @@ class Navbar extends Component { {[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" }, - { text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated}, - { text: 'Galerie', icon: faLightbulb, link: "/gallery" }, - { text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => { - if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){ - return( - - - - - - - ); - } + { text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated }, + { text: 'Galerie', icon: faLightbulb, link: "/gallery" }, + { text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => { + if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { + return ( + + + + + + + ); } + } )} {[{ text: 'Anmelden', icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated }, - { text: 'Konto', icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated }, - { text: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated }, - { text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated }, - { text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => { - if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){ - return( - - {item.function(); this.toggleDrawer();} : this.toggleDrawer}> - - - - - ); - } + { text: 'Konto', icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated }, + { text: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated }, + { text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated }, + { text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => { + if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { + return ( + + { item.function(); this.toggleDrawer(); } : this.toggleDrawer}> + + + + + ); } + } )} {this.props.tutorialIsLoading || this.props.projectIsLoading ? - - : null} + + : null} ); } diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index a3a2403..fa2353c 100644 --- a/src/components/Project/Project.js +++ b/src/components/Project/Project.js @@ -5,9 +5,7 @@ import { workspaceName } from '../../actions/workspaceActions'; import { getProject, resetProject } from '../../actions/projectActions'; import { clearMessages, returnErrors } from '../../actions/messageActions'; -import axios from 'axios'; import { withRouter } from 'react-router-dom'; -import { createNameId } from 'mnemonic-id'; import Home from '../Home'; import Breadcrumbs from '../Breadcrumbs'; @@ -24,16 +22,16 @@ class Project extends Component { } componentDidUpdate(props) { - if(props.location.pathname !== this.props.location.pathname || - props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){ - if(this.props.message.msg){ + if (props.location.pathname !== this.props.location.pathname || + props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]) { + if (this.props.message.msg) { this.props.clearMessages(); } this.getProject(); } - if(this.props.message !== props.message){ - if(this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL'){ - if(this.props.type!=='share'){ + if (this.props.message !== props.message) { + if (this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL') { + if (this.props.type !== 'share') { this.props.returnErrors('', 404, 'GET_PROJECT_FAIL'); this.props.history.push(`/${this.props.type}`); } else { @@ -41,10 +39,10 @@ class Project extends Component { this.props.returnErrors('', 404, 'GET_SHARE_FAIL'); } } - else if(this.props.message.id === 'GET_PROJECT_SUCCESS'){ + else if (this.props.message.id === 'GET_PROJECT_SUCCESS') { this.props.workspaceName(this.props.project.title); } - else if(this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS'){ + else if (this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS') { this.props.history.push(`/${this.props.type}`); } } @@ -56,8 +54,8 @@ class Project extends Component { } getProject = () => { - var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//,''); - var param = this.props.location.pathname.replace(`/${id}`,'').replace('/',''); + var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, ''); + var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', ''); console.log('param', param); console.log(id); this.props.getProject(param, id); @@ -70,13 +68,13 @@ class Project extends Component { - : this.props.project ? -
- {this.props.type !== 'share' ? - - : null} - -
: null + : this.props.project ? +
+ {this.props.type !== 'share' ? + + : null} + +
: null ); }; } diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index 07e559b..1644b3e 100644 --- a/src/components/Project/ProjectHome.js +++ b/src/components/Project/ProjectHome.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { getProjects, resetProject } from '../../actions/projectActions'; import { clearMessages } from '../../actions/messageActions'; -import axios from 'axios'; + import { Link, withRouter } from 'react-router-dom'; import Breadcrumbs from '../Breadcrumbs'; @@ -42,31 +42,31 @@ class ProjectHome extends Component { } componentDidMount() { - var type = this.props.location.pathname.replace('/',''); + var type = this.props.location.pathname.replace('/', ''); this.props.getProjects(type); - if(this.props.message){ - if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){ + if (this.props.message) { + if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') { this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' }); } - else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){ + else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); } - else if(this.props.message.id === 'GET_PROJECT_FAIL'){ - this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-':''}Projekt konnte nicht gefunden werden.`, type: 'error' }); + else if (this.props.message.id === 'GET_PROJECT_FAIL') { + this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' }); } } } componentDidUpdate(props) { - if(props.location.pathname !== this.props.location.pathname){ - this.setState({snackbar: false}); - this.props.getProjects(this.props.location.pathname.replace('/','')); + if (props.location.pathname !== this.props.location.pathname) { + this.setState({ snackbar: false }); + this.props.getProjects(this.props.location.pathname.replace('/', '')); } - if(props.message !== this.props.message){ - if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){ + if (props.message !== this.props.message) { + if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') { this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' }); } - else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){ + else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); } } @@ -88,7 +88,7 @@ class ProjectHome extends Component { - : + :
{this.props.projects.length > 0 ? @@ -97,37 +97,37 @@ class ProjectHome extends Component { -

{project.title}

- +

{project.title}

+ - {project.description} + {project.description} {this.props.user && this.props.user.email === project.creator ?
- -
+ +
- : null} + : null} ) })} - :
- Es sind aktuell keine Projekte vorhanden. - {this.props.location.pathname.replace('/','') === 'project' ? + :
+ Es sind aktuell keine Projekte vorhanden. + {this.props.location.pathname.replace('/', '') === 'project' ? Erstelle jetzt dein eigenes Projekt oder lasse dich von Projektbeispielen in der Galerie inspirieren. - : null} + : null}
}
diff --git a/src/components/Tutorial/Badge.js b/src/components/Tutorial/Badge.js index 97103fa..2727fa5 100644 --- a/src/components/Tutorial/Badge.js +++ b/src/components/Tutorial/Badge.js @@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Avatar from '@material-ui/core/Avatar'; +import * as Blockly from 'blockly'; const styles = (theme) => ({ link: { @@ -32,22 +33,22 @@ class Badge extends Component { content: '' }; - componentDidUpdate(props){ - if(this.props.message.id === 'TUTORIAL_CHECK_SUCCESS'){ - if(this.props.tutorial.badge){ + componentDidUpdate(props) { + if (this.props.message.id === 'TUTORIAL_CHECK_SUCCESS') { + if (this.props.tutorial.badge) { // is connected to MyBadges? - if(this.props.isAuthenticated && this.props.user && this.props.user.badge){ - if(this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)){ - if(this.isSuccess()){ + if (this.props.isAuthenticated && this.props.user && this.props.user.badge) { + if (this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)) { + if (this.isSuccess()) { this.props.assigneBadge(this.props.tutorial.badge); } } } } } - if(props.message !== this.props.message){ - if(this.props.message.id === 'ASSIGNE_BADGE_SUCCESS'){ - this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true}); + if (props.message !== this.props.message) { + if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') { + this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true }); } } } @@ -57,7 +58,7 @@ class Badge extends Component { var status = this.props.status.filter(status => status._id === tutorialId)[0]; var tasks = status.tasks; var success = tasks.filter(task => task.type === 'success').length / tasks.length; - if(success===1){ + if (success === 1) { return true; } return false; @@ -74,21 +75,21 @@ class Badge extends Component { open={this.state.open} title={this.state.title} content={this.state.content} - onClose={() => {this.toggleDialog();}} - onClick={() => {this.toggleDialog();}} - button={'Schließen'} + onClose={() => { this.toggleDialog(); }} + onClick={() => { this.toggleDialog(); }} + button={Blockly.Msg.button_close} >
- + {this.props.message.msg.image && this.props.message.msg.image.path ? - - : } - -
{this.props.message.msg.name}
+ + : } + +
{this.props.message.msg.name}
 - - Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du hier. + + {Blockly.Msg.badges_explaination}{Blockly.Msg.labels_here}.
diff --git a/src/components/Tutorial/Builder/BlocklyExample.js b/src/components/Tutorial/Builder/BlocklyExample.js index 01f52f4..75dc222 100644 --- a/src/components/Tutorial/Builder/BlocklyExample.js +++ b/src/components/Tutorial/Builder/BlocklyExample.js @@ -29,7 +29,7 @@ const styles = (theme) => ({ marginTop: '5px', height: '40px', backgroundColor: theme.palette.error.dark, - '&:hover':{ + '&:hover': { backgroundColor: theme.palette.error.dark } } @@ -37,16 +37,16 @@ const styles = (theme) => ({ class BlocklyExample extends Component { - constructor(props){ + constructor(props) { super(props); - this.state={ + this.state = { checked: props.task ? props.task : props.value ? true : false, input: null, disabled: false }; } - componentDidMount(){ + componentDidMount() { moment.updateLocale('de', localization); this.isError(); // if(this.props.task){ @@ -54,42 +54,42 @@ class BlocklyExample extends Component { // } } - componentDidUpdate(props, state){ - if(props.task !== this.props.task || props.value !== this.props.value){ - this.setState({checked: this.props.task ? this.props.task : this.props.value ? true : false}, + componentDidUpdate(props, state) { + if (props.task !== this.props.task || props.value !== this.props.value) { + this.setState({ checked: this.props.task ? this.props.task : this.props.value ? true : false }, () => this.isError() ); } - if(state.checked !== this.state.checked && this.state.checked){ + if (state.checked !== this.state.checked && this.state.checked) { this.isError(); } - if(props.xml !== this.props.xml){ + if (props.xml !== this.props.xml) { // check if there is at least one block, otherwise the workspace cannot be submitted var workspace = Blockly.getMainWorkspace(); var areBlocks = workspace.getAllBlocks().length > 0; - this.setState({disabled: !areBlocks}); + this.setState({ disabled: !areBlocks }); } } isError = () => { - if(this.state.checked){ + if (this.state.checked) { var xml = this.props.value; // check if value is valid xml; - try{ + try { Blockly.Xml.textToDom(xml); this.props.deleteError(this.props.index, 'xml'); } - catch(err){ + catch (err) { xml = initialXml; // not valid xml, throw error in redux store this.props.setError(this.props.index, 'xml'); } - if(!this.props.task){ + if (!this.props.task) { // instruction can also display only one block, which does not necessarily // have to be the initial block xml = xml.replace('deletable="false"', 'deletable="true"'); } - this.setState({xml: xml}); + this.setState({ xml: xml }); } else { this.props.deleteError(this.props.index, 'xml'); @@ -98,8 +98,8 @@ class BlocklyExample extends Component { onChange = (value) => { var oldValue = this.state.checked; - this.setState({checked: value}); - if(oldValue !== value && !value){ + this.setState({ checked: value }); + if (oldValue !== value && !value) { this.props.deleteError(this.props.index, 'xml'); this.props.deleteProperty(this.props.index, 'xml'); } @@ -108,12 +108,12 @@ class BlocklyExample extends Component { setXml = () => { var xml = this.props.xml; this.props.changeContent(xml, this.props.index, 'xml'); - this.setState({input: moment(Date.now()).format('LTS')}); + this.setState({ input: moment(Date.now()).format('LTS') }); } render() { return ( -
+
{!this.props.task ? } /> - : Musterlösung} + : {Blockly.Msg.builder_solution}} {this.state.checked ? !this.props.value || this.props.error ? - {`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`} - : this.state.input ? Die letzte Einreichung erfolgte um {this.state.input} Uhr. : null - : null} + {`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}'-Button klickst.`} + : this.state.input ? Die letzte Einreichung erfolgte um {this.state.input} Uhr. : null + : null} {this.state.checked && !this.props.task ? - Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird. - : null} + {Blockly.Msg.builder_comment} + : null} {/* ensure that the correct xml-file is displayed in the workspace */} - {this.state.checked && this.state.xml? (() => { - return( -
+ {this.state.checked && this.state.xml ? (() => { + return ( +
- )})() - : null} + ) + })() + : null}
); }; @@ -179,4 +180,4 @@ const mapStateToProps = state => ({ }); -export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(BlocklyExample)); +export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, { withTheme: true })(BlocklyExample)); diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index 78c7657..d0d8885 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -1,15 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions'; +import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder } from '../../../actions/tutorialBuilderActions'; import { getTutorials, resetTutorial, deleteTutorial } from '../../../actions/tutorialActions'; import { clearMessages } from '../../../actions/messageActions'; import axios from 'axios'; import { withRouter } from 'react-router-dom'; -import { saveAs } from 'file-saver'; -import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace'; import Breadcrumbs from '../../Breadcrumbs'; import Textfield from './Textfield'; @@ -43,7 +41,7 @@ const styles = (theme) => ({ marginTop: '5px', height: '40px', backgroundColor: theme.palette.error.dark, - '&:hover':{ + '&:hover': { backgroundColor: theme.palette.error.dark } } @@ -72,16 +70,16 @@ class Builder extends Component { } componentDidUpdate(props, state) { - if(props.message !== this.props.message){ - if(this.props.message.id === 'GET_TUTORIALS_FAIL'){ + if (props.message !== this.props.message) { + if (this.props.message.id === 'GET_TUTORIALS_FAIL') { // alert(this.props.message.msg); this.props.clearMessages(); } - else if(this.props.message.id === 'TUTORIAL_DELETE_SUCCESS'){ + else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') { this.onChange('new'); this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' }); } - else if(this.props.message.id === 'TUTORIAL_DELETE_FAIL'){ + else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') { this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' }); } } @@ -90,7 +88,7 @@ class Builder extends Component { componentWillUnmount() { this.resetFull(); this.props.resetTutorial(); - if(this.props.message.msg){ + if (this.props.message.msg) { this.props.clearMessages(); } } @@ -143,12 +141,12 @@ class Builder extends Component { onChange = (value) => { this.props.resetTutorialBuilder(); this.props.tutorialId(''); - this.setState({tutorial: value}); + this.setState({ tutorial: value }); } onChangeId = (value) => { this.props.tutorialId(value); - if(this.state.tutorial === 'change'){ + if (this.state.tutorial === 'change') { this.props.progress(true); var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0]; this.props.readJSON(tutorial); @@ -186,8 +184,8 @@ class Builder extends Component { newTutorial.append(`steps[${i}][type]`, step.type); newTutorial.append(`steps[${i}][headline]`, step.headline); newTutorial.append(`steps[${i}][text]`, step.text); - if(i === 0 && step.type === 'instruction'){ - if(step.requirements){ // optional + if (i === 0 && step.type === 'instruction') { + if (step.requirements) { // optional step.requirements.forEach((requirement, j) => { newTutorial.append(`steps[${i}][requirements][${j}]`, requirement); }); @@ -196,14 +194,14 @@ class Builder extends Component { newTutorial.append(`steps[${i}][hardware][${j}]`, hardware); }); } - if(step.xml){ // optional + if (step.xml) { // optional newTutorial.append(`steps[${i}][xml]`, step.xml); } - if(step.media){ // optional - if(step.media.youtube){ + if (step.media) { // optional + if (step.media.youtube) { newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube); } - if(step.media.picture){ + if (step.media.picture) { newTutorial.append(`steps[${i}][media][picture]`, step.media.picture); } } @@ -214,7 +212,7 @@ class Builder extends Component { submitNew = () => { var newTutorial = this.submit(); - if(newTutorial){ + if (newTutorial) { axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial) .then(res => { var tutorial = res.data.tutorial; @@ -229,7 +227,7 @@ class Builder extends Component { submitUpdate = () => { var updatedTutorial = this.submit(); - if(updatedTutorial){ + if (updatedTutorial) { axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial) .then(res => { var tutorial = res.data.tutorial; @@ -251,30 +249,30 @@ class Builder extends Component {

Tutorial-Builder

this.onChange(e.target.value)}> - } label="neues Tutorial erstellen" labelPlacement="end" /> {filteredTutorials.length > 0 ? -
- } - label="bestehendes Tutorial ändern" - labelPlacement="end" - /> - } - label="bestehendes Tutorial löschen" - labelPlacement="end" - /> -
- : null} +
+ } + label="bestehendes Tutorial ändern" + labelPlacement="end" + /> + } + label="bestehendes Tutorial löschen" + labelPlacement="end" + /> +
+ : null} @@ -294,7 +292,7 @@ class Builder extends Component {
- : + : Tutorial