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

add more translations and resolve issues

Browse Source
This commit is contained in:
Mario 2020-12-14 13:50:44 +01:00
parent 7d1d2409e4
commit e5204bb4d5
20 changed files with 362 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/actions/projectActions.js
View File

@ -1,7 +1,6 @@
import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types'; import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';
import axios from 'axios'; import axios from 'axios';
import { workspaceName } from './workspaceActions';
import { returnErrors, returnSuccess } from './messageActions'; import { returnErrors, returnSuccess } from './messageActions';
export const setType = (type) => (dispatch) => { export const setType = (type) => (dispatch) => {
@ -19,13 +18,13 @@ export const setDescription = (description) => (dispatch) => {
}; };
export const getProject = (type, id) => (dispatch) => { export const getProject = (type, id) => (dispatch) => {
dispatch({type: PROJECT_PROGRESS}); dispatch({ type: PROJECT_PROGRESS });
dispatch(setType(type)); dispatch(setType(type));
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`) axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`)
.then(res => { .then(res => {
var data = type === 'share' ? 'content' : type; var data = type === 'share' ? 'content' : type;
var project = res.data[data]; var project = res.data[data];
if(project){ if (project) {
dispatch({ dispatch({
type: GET_PROJECT, type: GET_PROJECT,
payload: project payload: project
@ -34,24 +33,24 @@ export const getProject = (type, id) => (dispatch) => {
type: PROJECT_DESCRIPTION, type: PROJECT_DESCRIPTION,
payload: project.description payload: project.description
}); });
dispatch({type: PROJECT_PROGRESS}); dispatch({ type: PROJECT_PROGRESS });
dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS'));
} }
else{ else {
dispatch({type: PROJECT_PROGRESS}); dispatch({ type: PROJECT_PROGRESS });
dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY')); dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY'));
} }
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECT_FAIL')); 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) => { export const getProjects = (type) => (dispatch) => {
dispatch({type: PROJECT_PROGRESS}); dispatch({ type: PROJECT_PROGRESS });
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`) axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`)
.then(res => { .then(res => {
var data = type === 'project' ? 'projects' : 'galleries'; var data = type === 'project' ? 'projects' : 'galleries';
@ -60,14 +59,14 @@ export const getProjects = (type) => (dispatch) => {
type: GET_PROJECTS, type: GET_PROJECTS,
payload: projects payload: projects
}); });
dispatch({type: PROJECT_PROGRESS}); dispatch({ type: PROJECT_PROGRESS });
dispatch(returnSuccess(res.data.message, res.status)); dispatch(returnSuccess(res.data.message, res.status));
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL')); 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 title: workspace.name
}; };
var project = getState().project; var project = getState().project;
if(type==='gallery'){ if (type === 'gallery') {
body.description = project.description; body.description = project.description;
} }
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body) 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, type: GET_PROJECTS,
payload: projects payload: projects
}); });
if(type === 'project'){ if (type === 'project') {
dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
} else { } else {
dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
} }
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
if(type === 'project'){ if (type === 'project') {
dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL')); dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL'));
} else { } else {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL')); 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, type: GET_PROJECTS,
payload: projects payload: projects
}); });
if(type === 'project'){ if (type === 'project') {
dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
} else { } else {
dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS'));
} }
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL')); 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 = { var body = {
title: title title: title
}; };
if(type === 'project'){ if (type === 'project') {
body.projectId = id; body.projectId = id;
} else { } else {
body.xml = getState().workspace.code.xml; 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) axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
.then(res => { .then(res => {
var shareContent = res.data.content; var shareContent = res.data.content;
if(body.projectId){ if (body.projectId) {
var projects = getState().project.projects; var projects = getState().project.projects;
var index = projects.findIndex(res => res._id === id); var index = projects.findIndex(res => res._id === id);
projects[index].shared = shareContent.expiresAt; 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')); dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL')); dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
} }
}); });

30
src/actions/tutorialActions.js
View File

@ -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 axios from 'axios';
import { returnErrors, returnSuccess } from './messageActions'; import { returnErrors, returnSuccess } from './messageActions';
export const getTutorial = (id) => (dispatch, getState) => { export const getTutorial = (id) => (dispatch, getState) => {
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
.then(res => { .then(res => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
@ -13,7 +13,7 @@ export const getTutorial = (id) => (dispatch, getState) => {
type: TUTORIAL_SUCCESS, type: TUTORIAL_SUCCESS,
payload: status payload: status
}); });
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
dispatch({ dispatch({
type: GET_TUTORIAL, type: GET_TUTORIAL,
payload: tutorial payload: tutorial
@ -22,15 +22,15 @@ export const getTutorial = (id) => (dispatch, getState) => {
}); });
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL')); 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) => { export const getTutorials = () => (dispatch, getState) => {
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`) axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
.then(res => { .then(res => {
var tutorials = res.data.tutorials; var tutorials = res.data.tutorials;
@ -44,15 +44,15 @@ export const getTutorials = () => (dispatch, getState) => {
type: GET_TUTORIALS, type: GET_TUTORIALS,
payload: tutorials payload: tutorials
}); });
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
dispatch(returnSuccess(res.data.message, res.status)); dispatch(returnSuccess(res.data.message, res.status));
}); });
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL')); 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')); dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS'));
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL')); 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')); dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS'));
}) })
.catch(err => { .catch(err => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL')); 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 payload: tutorialsStatus
}); });
dispatch(tutorialChange()); dispatch(tutorialChange());
dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS')); dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS'));
}; };
export const storeTutorialXml = (code) => (dispatch, getState) => { 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; var newstatus;
new Promise(function(resolve, reject){ new Promise(function (resolve, reject) {
var existingTutorialIds = tutorials.map((tutorial, i) => { var existingTutorialIds = tutorials.map((tutorial, i) => {
existingTutorial(tutorial, status).then(status => { existingTutorial(tutorial, status).then(status => {
newstatus = 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 tutorialsId = tutorial._id;
var statusIndex = status.findIndex(status => status._id === tutorialsId); var statusIndex = status.findIndex(status => status._id === tutorialsId);
if (statusIndex > -1) { if (statusIndex > -1) {

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

@ -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_hide = 'gelöschte Blöcke ausblenden'
Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen' Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen'
Blockly.Msg.tooltip_project_title = "Titel des Projektes" Blockly.Msg.tooltip_project_title = "Titel des Projektes"
Blockly.Msg.tooltip_check_solution = "Lösung kontrollieren"
/** /**
* Messages * 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_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.'
Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in ' Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in '
Blockly.Msg.messages_rename_success_02 = 'umbenannt.' 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 * Share Dialog
*/ */
@ -912,6 +916,8 @@ Blockly.Msg.button_accept = "Bestätigen";
Blockly.Msg.button_compile = "Kompilieren"; Blockly.Msg.button_compile = "Kompilieren";
Blockly.Msg.button_create_variableCreate = "Erstelle Variable"; Blockly.Msg.button_create_variableCreate = "Erstelle Variable";
Blockly.Msg.button_back = "Zurück" 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." 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 * 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_assessment_task = "Aufgabe"
Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:" 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_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; export const De = Blockly.Msg;

60
src/components/Navbar.js
View File

@ -21,7 +21,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import LinearProgress from '@material-ui/core/LinearProgress'; 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"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({ const styles = (theme) => ({
@ -101,46 +101,46 @@ class Navbar extends Component {
</div> </div>
<List> <List>
{[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" }, {[{ 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: '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: 'Galerie', icon: faLightbulb, link: "/gallery" },
{ text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => { { 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){ if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
return( return (
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}> <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
<ListItem button onClick={this.toggleDrawer}> <ListItem button onClick={this.toggleDrawer}>
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon> <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</ListItem> </ListItem>
</Link> </Link>
); );
}
} }
}
)} )}
</List> </List>
<Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} /> <Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
<List> <List>
{[{ text: 'Anmelden', icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated }, {[{ text: 'Anmelden', icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated },
{ text: 'Konto', icon: faUserCircle, link: '/user', 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: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
{ text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, 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) => { { text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => {
if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){ if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
return( return (
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}> <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
<ListItem button onClick={item.function ? () => {item.function(); this.toggleDrawer();} : this.toggleDrawer}> <ListItem button onClick={item.function ? () => { item.function(); this.toggleDrawer(); } : this.toggleDrawer}>
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon> <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</ListItem> </ListItem>
</Link> </Link>
); );
}
} }
}
)} )}
</List> </List>
</Drawer> </Drawer>
{this.props.tutorialIsLoading || this.props.projectIsLoading ? {this.props.tutorialIsLoading || this.props.projectIsLoading ?
<LinearProgress style={{marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)'}}/> <LinearProgress style={{ marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }} />
: null} : null}
</div> </div>
); );
} }

36
src/components/Project/Project.js
View File

@ -5,9 +5,7 @@ import { workspaceName } from '../../actions/workspaceActions';
import { getProject, resetProject } from '../../actions/projectActions'; import { getProject, resetProject } from '../../actions/projectActions';
import { clearMessages, returnErrors } from '../../actions/messageActions'; import { clearMessages, returnErrors } from '../../actions/messageActions';
import axios from 'axios';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { createNameId } from 'mnemonic-id';
import Home from '../Home'; import Home from '../Home';
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from '../Breadcrumbs';
@ -24,16 +22,16 @@ class Project extends Component {
} }
componentDidUpdate(props) { componentDidUpdate(props) {
if(props.location.pathname !== this.props.location.pathname || if (props.location.pathname !== this.props.location.pathname ||
props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){ props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]) {
if(this.props.message.msg){ if (this.props.message.msg) {
this.props.clearMessages(); this.props.clearMessages();
} }
this.getProject(); this.getProject();
} }
if(this.props.message !== props.message){ if (this.props.message !== props.message) {
if(this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL'){ if (this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL') {
if(this.props.type!=='share'){ if (this.props.type !== 'share') {
this.props.returnErrors('', 404, 'GET_PROJECT_FAIL'); this.props.returnErrors('', 404, 'GET_PROJECT_FAIL');
this.props.history.push(`/${this.props.type}`); this.props.history.push(`/${this.props.type}`);
} else { } else {
@ -41,10 +39,10 @@ class Project extends Component {
this.props.returnErrors('', 404, 'GET_SHARE_FAIL'); 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); 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}`); this.props.history.push(`/${this.props.type}`);
} }
} }
@ -56,8 +54,8 @@ class Project extends Component {
} }
getProject = () => { getProject = () => {
var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//,''); var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, '');
var param = this.props.location.pathname.replace(`/${id}`,'').replace('/',''); var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', '');
console.log('param', param); console.log('param', param);
console.log(id); console.log(id);
this.props.getProject(param, id); this.props.getProject(param, id);
@ -70,13 +68,13 @@ class Project extends Component {
<Backdrop open invisible> <Backdrop open invisible>
<CircularProgress color="primary" /> <CircularProgress color="primary" />
</Backdrop> </Backdrop>
: this.props.project ? : this.props.project ?
<div> <div>
{this.props.type !== 'share' ? {this.props.type !== 'share' ?
<Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.pathname, title: this.props.project.title }]} /> <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data }, { link: this.props.location.pathname, title: this.props.project.title }]} />
: null} : null}
<Home project={this.props.project} projectType={this.props.type}/> <Home project={this.props.project} projectType={this.props.type} />
</div> : null </div> : null
); );
}; };
} }

50
src/components/Project/ProjectHome.js
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { getProjects, resetProject } from '../../actions/projectActions'; import { getProjects, resetProject } from '../../actions/projectActions';
import { clearMessages } from '../../actions/messageActions'; import { clearMessages } from '../../actions/messageActions';
import axios from 'axios';
import { Link, withRouter } from 'react-router-dom'; import { Link, withRouter } from 'react-router-dom';
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from '../Breadcrumbs';
@ -42,31 +42,31 @@ class ProjectHome extends Component {
} }
componentDidMount() { componentDidMount() {
var type = this.props.location.pathname.replace('/',''); var type = this.props.location.pathname.replace('/', '');
this.props.getProjects(type); this.props.getProjects(type);
if(this.props.message){ if (this.props.message) {
if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){ if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: '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' }); 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'){ 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' }); this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' });
} }
} }
} }
componentDidUpdate(props) { componentDidUpdate(props) {
if(props.location.pathname !== this.props.location.pathname){ if (props.location.pathname !== this.props.location.pathname) {
this.setState({snackbar: false}); this.setState({ snackbar: false });
this.props.getProjects(this.props.location.pathname.replace('/','')); this.props.getProjects(this.props.location.pathname.replace('/', ''));
} }
if(props.message !== this.props.message){ if (props.message !== this.props.message) {
if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){ if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: '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' }); 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 {
<Backdrop open invisible> <Backdrop open invisible>
<CircularProgress color="primary" /> <CircularProgress color="primary" />
</Backdrop> </Backdrop>
: :
<div> <div>
{this.props.projects.length > 0 ? {this.props.projects.length > 0 ?
<Grid container spacing={2}> <Grid container spacing={2}>
@ -97,37 +97,37 @@ class ProjectHome extends Component {
<Grid item xs={12} sm={6} md={4} xl={3} key={i}> <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}> <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}> <Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<h3 style={{marginTop: 0}}>{project.title}</h3> <h3 style={{ marginTop: 0 }}>{project.title}</h3>
<Divider style={{marginTop: '1rem', marginBottom: '10px'}}/> <Divider style={{ marginTop: '1rem', marginBottom: '10px' }} />
<BlocklyWindow <BlocklyWindow
svg svg
blockDisabled blockDisabled
initialXml={project.xml} initialXml={project.xml}
/> />
<Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-10px'}}>{project.description}</Typography> <Typography variant='body2' style={{ fontStyle: 'italic', margin: 0, marginTop: '-10px' }}>{project.description}</Typography>
</Link> </Link>
{this.props.user && this.props.user.email === project.creator ? {this.props.user && this.props.user.email === project.creator ?
<div> <div>
<Divider style={{marginTop: '10px', marginBottom: '10px'}}/> <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
<div style={{float: 'right'}}> <div style={{ float: 'right' }}>
<WorkspaceFunc <WorkspaceFunc
multiple multiple
project={project} project={project}
projectType={this.props.location.pathname.replace('/','')} projectType={this.props.location.pathname.replace('/', '')}
/> />
</div> </div>
</div> </div>
: null} : null}
</Paper> </Paper>
</Grid> </Grid>
) )
})} })}
</Grid> </Grid>
: <div> : <div>
<Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography> <Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography>
{this.props.location.pathname.replace('/','') === 'project' ? {this.props.location.pathname.replace('/', '') === 'project' ?
<Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography> <Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
: null} : null}
</div> </div>
} }
</div> </div>

41
src/components/Tutorial/Badge.js
View File

@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import * as Blockly from 'blockly';
const styles = (theme) => ({ const styles = (theme) => ({
link: { link: {
@ -32,22 +33,22 @@ class Badge extends Component {
content: '' content: ''
}; };
componentDidUpdate(props){ componentDidUpdate(props) {
if(this.props.message.id === 'TUTORIAL_CHECK_SUCCESS'){ if (this.props.message.id === 'TUTORIAL_CHECK_SUCCESS') {
if(this.props.tutorial.badge){ if (this.props.tutorial.badge) {
// is connected to MyBadges? // is connected to MyBadges?
if(this.props.isAuthenticated && this.props.user && this.props.user.badge){ 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.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)) {
if(this.isSuccess()){ if (this.isSuccess()) {
this.props.assigneBadge(this.props.tutorial.badge); this.props.assigneBadge(this.props.tutorial.badge);
} }
} }
} }
} }
} }
if(props.message !== this.props.message){ if (props.message !== this.props.message) {
if(this.props.message.id === 'ASSIGNE_BADGE_SUCCESS'){ if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') {
this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true}); this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
} }
} }
} }
@ -57,7 +58,7 @@ class Badge extends Component {
var status = this.props.status.filter(status => status._id === tutorialId)[0]; var status = this.props.status.filter(status => status._id === tutorialId)[0];
var tasks = status.tasks; var tasks = status.tasks;
var success = tasks.filter(task => task.type === 'success').length / tasks.length; var success = tasks.filter(task => task.type === 'success').length / tasks.length;
if(success===1){ if (success === 1) {
return true; return true;
} }
return false; return false;
@ -74,21 +75,21 @@ class Badge extends Component {
open={this.state.open} open={this.state.open}
title={this.state.title} title={this.state.title}
content={this.state.content} content={this.state.content}
onClose={() => {this.toggleDialog();}} onClose={() => { this.toggleDialog(); }}
onClick={() => {this.toggleDialog();}} onClick={() => { this.toggleDialog(); }}
button={'Schließen'} button={Blockly.Msg.button_close}
> >
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
<Paper style={{textAlign: 'center'}}> <Paper style={{ textAlign: 'center' }}>
{this.props.message.msg.image && this.props.message.msg.image.path ? {this.props.message.msg.image && this.props.message.msg.image.path ?
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/> <Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }} />
: <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>} : <Avatar style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }}></Avatar>}
<Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}> <Typography variant='h6' style={{ display: 'flex', cursor: 'default', paddingBottom: '6px' }}>
<div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{this.props.message.msg.name}</div> <div style={{ flexGrow: 1, marginLeft: '10px', marginRight: '10px' }}>{this.props.message.msg.name}</div>
</Typography> </Typography>
</Paper> </Paper>
<Typography style={{marginTop: '10px'}}> <Typography style={{ marginTop: '10px' }}>
Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du <Link to={'/user/badge'} className={this.props.classes.link}>hier</Link>. {Blockly.Msg.badges_explaination}<Link to={'/user/badge'} className={this.props.classes.link}>{Blockly.Msg.labels_here}</Link>.
</Typography> </Typography>
</div> </div>
</Dialog> </Dialog>

71
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -29,7 +29,7 @@ const styles = (theme) => ({
marginTop: '5px', marginTop: '5px',
height: '40px', height: '40px',
backgroundColor: theme.palette.error.dark, backgroundColor: theme.palette.error.dark,
'&:hover':{ '&:hover': {
backgroundColor: theme.palette.error.dark backgroundColor: theme.palette.error.dark
} }
} }
@ -37,16 +37,16 @@ const styles = (theme) => ({
class BlocklyExample extends Component { class BlocklyExample extends Component {
constructor(props){ constructor(props) {
super(props); super(props);
this.state={ this.state = {
checked: props.task ? props.task : props.value ? true : false, checked: props.task ? props.task : props.value ? true : false,
input: null, input: null,
disabled: false disabled: false
}; };
} }
componentDidMount(){ componentDidMount() {
moment.updateLocale('de', localization); moment.updateLocale('de', localization);
this.isError(); this.isError();
// if(this.props.task){ // if(this.props.task){
@ -54,42 +54,42 @@ class BlocklyExample extends Component {
// } // }
} }
componentDidUpdate(props, state){ componentDidUpdate(props, state) {
if(props.task !== this.props.task || props.value !== this.props.value){ 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.setState({ checked: this.props.task ? this.props.task : this.props.value ? true : false },
() => this.isError() () => this.isError()
); );
} }
if(state.checked !== this.state.checked && this.state.checked){ if (state.checked !== this.state.checked && this.state.checked) {
this.isError(); 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 // check if there is at least one block, otherwise the workspace cannot be submitted
var workspace = Blockly.getMainWorkspace(); var workspace = Blockly.getMainWorkspace();
var areBlocks = workspace.getAllBlocks().length > 0; var areBlocks = workspace.getAllBlocks().length > 0;
this.setState({disabled: !areBlocks}); this.setState({ disabled: !areBlocks });
} }
} }
isError = () => { isError = () => {
if(this.state.checked){ if (this.state.checked) {
var xml = this.props.value; var xml = this.props.value;
// check if value is valid xml; // check if value is valid xml;
try{ try {
Blockly.Xml.textToDom(xml); Blockly.Xml.textToDom(xml);
this.props.deleteError(this.props.index, 'xml'); this.props.deleteError(this.props.index, 'xml');
} }
catch(err){ catch (err) {
xml = initialXml; xml = initialXml;
// not valid xml, throw error in redux store // not valid xml, throw error in redux store
this.props.setError(this.props.index, 'xml'); 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 // instruction can also display only one block, which does not necessarily
// have to be the initial block // have to be the initial block
xml = xml.replace('deletable="false"', 'deletable="true"'); xml = xml.replace('deletable="false"', 'deletable="true"');
} }
this.setState({xml: xml}); this.setState({ xml: xml });
} }
else { else {
this.props.deleteError(this.props.index, 'xml'); this.props.deleteError(this.props.index, 'xml');
@ -98,8 +98,8 @@ class BlocklyExample extends Component {
onChange = (value) => { onChange = (value) => {
var oldValue = this.state.checked; var oldValue = this.state.checked;
this.setState({checked: value}); this.setState({ checked: value });
if(oldValue !== value && !value){ if (oldValue !== value && !value) {
this.props.deleteError(this.props.index, 'xml'); this.props.deleteError(this.props.index, 'xml');
this.props.deleteProperty(this.props.index, 'xml'); this.props.deleteProperty(this.props.index, 'xml');
} }
@ -108,12 +108,12 @@ class BlocklyExample extends Component {
setXml = () => { setXml = () => {
var xml = this.props.xml; var xml = this.props.xml;
this.props.changeContent(xml, this.props.index, '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() { render() {
return ( return (
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}> <div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
{!this.props.task ? {!this.props.task ?
<FormControlLabel <FormControlLabel
labelPlacement="end" labelPlacement="end"
@ -126,41 +126,42 @@ class BlocklyExample extends Component {
/> />
} }
/> />
: <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>} : <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_solution}</FormLabel>}
{this.state.checked ? !this.props.value || this.props.error ? {this.state.checked ? !this.props.value || this.props.error ?
<FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText> <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}'-Button klickst.`}</FormHelperText>
: this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null : this.state.input ? <FormHelperText style={{ lineHeight: 'initial' }}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
: null} : null}
{this.state.checked && !this.props.task ? {this.state.checked && !this.props.task ?
<FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText> <FormHelperText style={{ lineHeight: 'initial' }}>{Blockly.Msg.builder_comment}</FormHelperText>
: null} : null}
{/* ensure that the correct xml-file is displayed in the workspace */} {/* ensure that the correct xml-file is displayed in the workspace */}
{this.state.checked && this.state.xml? (() => { {this.state.checked && this.state.xml ? (() => {
return( return (
<div style={{marginTop: '10px'}}> <div style={{ marginTop: '10px' }}>
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}> <Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
<Grid item xs={12}> <Grid item xs={12}>
<BlocklyWindow <BlocklyWindow
blockDisabled={this.props.task} blockDisabled={this.props.task}
trashcan={false} trashcan={false}
initialXml={this.state.xml} initialXml={this.state.xml}
blocklyCSS={{height: '500px'}} blocklyCSS={{ height: '500px' }}
/> />
</Grid> </Grid>
</Grid> </Grid>
<Button <Button
className={!this.props.value || this.props.error ? this.props.classes.errorButton : null } className={!this.props.value || this.props.error ? this.props.classes.errorButton : null}
style={{marginTop: '5px', height: '40px'}} style={{ marginTop: '5px', height: '40px' }}
variant='contained' variant='contained'
color='primary' color='primary'
disabled={this.state.disabled} disabled={this.state.disabled}
onClick={() => this.setXml()} onClick={() => this.setXml()}
> >
{this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'} {this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}
</Button> </Button>
</div> </div>
)})() )
: null} })()
: null}
</div> </div>
); );
}; };
@ -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));

133
src/components/Tutorial/Builder/Builder.js
View File

@ -1,15 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; 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 { getTutorials, resetTutorial, deleteTutorial } from '../../../actions/tutorialActions';
import { clearMessages } from '../../../actions/messageActions'; import { clearMessages } from '../../../actions/messageActions';
import axios from 'axios'; import axios from 'axios';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { saveAs } from 'file-saver';
import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
import Breadcrumbs from '../../Breadcrumbs'; import Breadcrumbs from '../../Breadcrumbs';
import Textfield from './Textfield'; import Textfield from './Textfield';
@ -43,7 +41,7 @@ const styles = (theme) => ({
marginTop: '5px', marginTop: '5px',
height: '40px', height: '40px',
backgroundColor: theme.palette.error.dark, backgroundColor: theme.palette.error.dark,
'&:hover':{ '&:hover': {
backgroundColor: theme.palette.error.dark backgroundColor: theme.palette.error.dark
} }
} }
@ -72,16 +70,16 @@ class Builder extends Component {
} }
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(props.message !== this.props.message){ if (props.message !== this.props.message) {
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){ if (this.props.message.id === 'GET_TUTORIALS_FAIL') {
// alert(this.props.message.msg); // alert(this.props.message.msg);
this.props.clearMessages(); 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.onChange('new');
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' }); 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' }); 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() { componentWillUnmount() {
this.resetFull(); this.resetFull();
this.props.resetTutorial(); this.props.resetTutorial();
if(this.props.message.msg){ if (this.props.message.msg) {
this.props.clearMessages(); this.props.clearMessages();
} }
} }
@ -143,12 +141,12 @@ class Builder extends Component {
onChange = (value) => { onChange = (value) => {
this.props.resetTutorialBuilder(); this.props.resetTutorialBuilder();
this.props.tutorialId(''); this.props.tutorialId('');
this.setState({tutorial: value}); this.setState({ tutorial: value });
} }
onChangeId = (value) => { onChangeId = (value) => {
this.props.tutorialId(value); this.props.tutorialId(value);
if(this.state.tutorial === 'change'){ if (this.state.tutorial === 'change') {
this.props.progress(true); this.props.progress(true);
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0]; var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
this.props.readJSON(tutorial); this.props.readJSON(tutorial);
@ -186,8 +184,8 @@ class Builder extends Component {
newTutorial.append(`steps[${i}][type]`, step.type); newTutorial.append(`steps[${i}][type]`, step.type);
newTutorial.append(`steps[${i}][headline]`, step.headline); newTutorial.append(`steps[${i}][headline]`, step.headline);
newTutorial.append(`steps[${i}][text]`, step.text); newTutorial.append(`steps[${i}][text]`, step.text);
if(i === 0 && step.type === 'instruction'){ if (i === 0 && step.type === 'instruction') {
if(step.requirements){ // optional if (step.requirements) { // optional
step.requirements.forEach((requirement, j) => { step.requirements.forEach((requirement, j) => {
newTutorial.append(`steps[${i}][requirements][${j}]`, requirement); newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
}); });
@ -196,14 +194,14 @@ class Builder extends Component {
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware); newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
}); });
} }
if(step.xml){ // optional if (step.xml) { // optional
newTutorial.append(`steps[${i}][xml]`, step.xml); newTutorial.append(`steps[${i}][xml]`, step.xml);
} }
if(step.media){ // optional if (step.media) { // optional
if(step.media.youtube){ if (step.media.youtube) {
newTutorial.append(`steps[${i}][media][youtube]`, 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); newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
} }
} }
@ -214,7 +212,7 @@ class Builder extends Component {
submitNew = () => { submitNew = () => {
var newTutorial = this.submit(); var newTutorial = this.submit();
if(newTutorial){ if (newTutorial) {
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial) axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial)
.then(res => { .then(res => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
@ -229,7 +227,7 @@ class Builder extends Component {
submitUpdate = () => { submitUpdate = () => {
var updatedTutorial = this.submit(); var updatedTutorial = this.submit();
if(updatedTutorial){ if (updatedTutorial) {
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial) axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial)
.then(res => { .then(res => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
@ -251,30 +249,30 @@ class Builder extends Component {
<h1>Tutorial-Builder</h1> <h1>Tutorial-Builder</h1>
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}> <RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{ color: 'black' }}
value="new" value="new"
control={<Radio color="primary" />} control={<Radio color="primary" />}
label="neues Tutorial erstellen" label="neues Tutorial erstellen"
labelPlacement="end" labelPlacement="end"
/> />
{filteredTutorials.length > 0 ? {filteredTutorials.length > 0 ?
<div> <div>
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{ color: 'black' }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="change" value="change"
control={<Radio color="primary" />} control={<Radio color="primary" />}
label="bestehendes Tutorial ändern" label="bestehendes Tutorial ändern"
labelPlacement="end" labelPlacement="end"
/> />
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{ color: 'black' }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="delete" value="delete"
control={<Radio color="primary" />} control={<Radio color="primary" />}
label="bestehendes Tutorial löschen" label="bestehendes Tutorial löschen"
labelPlacement="end" labelPlacement="end"
/> />
</div> </div>
: null} : null}
</RadioGroup> </RadioGroup>
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} /> <Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
@ -294,7 +292,7 @@ class Builder extends Component {
</label> </label>
<Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button> <Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
</div> </div>
: <FormControl variant="outlined" style={{width: '100%'}}> : <FormControl variant="outlined" style={{ width: '100%' }}>
<InputLabel id="select-outlined-label">Tutorial</InputLabel> <InputLabel id="select-outlined-label">Tutorial</InputLabel>
<Select <Select
color='primary' color='primary'
@ -313,37 +311,37 @@ class Builder extends Component {
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} /> <Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
{this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ? {this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ?
/*Tutorial-Builder-Form*/ /*Tutorial-Builder-Form*/
<div> <div>
{this.props.error.type ? {this.props.error.type ?
<FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText> <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
: null} : null}
{/* <Id error={this.props.error.id} value={this.props.id} /> */} {/* <Id error={this.props.error.id} value={this.props.id} /> */}
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} /> <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
<Textfield value={this.props.badge} property={'badge'} label={'Badge'} /> <Textfield value={this.props.badge} property={'badge'} label={'Badge'} />
{this.props.steps.map((step, i) => {this.props.steps.map((step, i) =>
<Step step={step} index={i} key={i} /> <Step step={step} index={i} key={i} />
)} )}
{/*submit or reset*/} {/*submit or reset*/}
<Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} /> <Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
{this.state.tutorial === 'new' ? {this.state.tutorial === 'new' ?
<div> <div>
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button> <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button> <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
</div> </div>
: <div> : <div>
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button> <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button> <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
</div>
}
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
<CircularProgress color="inherit" />
</Backdrop>
</div> </div>
} : null}
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
<CircularProgress color="inherit" />
</Backdrop>
</div>
: null}
{this.state.tutorial === 'delete' && this.props.id !== '' ? {this.state.tutorial === 'delete' && this.props.id !== '' ?
<Button <Button
@ -351,7 +349,7 @@ class Builder extends Component {
variant='contained' variant='contained'
color='primary' color='primary'
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button> onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
: null} : null}
<Dialog <Dialog
open={this.state.open} open={this.state.open}
@ -406,7 +404,6 @@ Builder.propTypes = {
change: PropTypes.number.isRequired, change: PropTypes.number.isRequired,
error: PropTypes.object.isRequired, error: PropTypes.object.isRequired,
json: PropTypes.string.isRequired, json: PropTypes.string.isRequired,
badge: PropTypes.string.isRequired,
isProgress: PropTypes.bool.isRequired, isProgress: PropTypes.bool.isRequired,
tutorials: PropTypes.array.isRequired, tutorials: PropTypes.array.isRequired,
message: PropTypes.object.isRequired, message: PropTypes.object.isRequired,

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

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

8
src/components/Tutorial/Builder/Requirements.js
View File

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

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

@ -91,7 +91,7 @@ class Hardware extends Component {
content={this.state.content} content={this.state.content}
onClose={this.handleClose} onClose={this.handleClose}
onClick={this.handleClose} onClick={this.handleClose}
button={'Schließen'} button={Blockly.Msg.button_close}
> >
<div> <div>
<img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} /> <img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />

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

@ -46,7 +46,7 @@ class HintTutorialExists extends Component {
window.localStorage.setItem('news', e.target.checked); window.localStorage.setItem('news', e.target.checked);
} }
else { else {
window.localStorage.deleteItem('news'); window.localStorage.removeItem('news');
} }
} }
@ -57,30 +57,30 @@ class HintTutorialExists extends Component {
fullWidth fullWidth
maxWidth={'sm'} maxWidth={'sm'}
open={this.state.open} open={this.state.open}
title={'Neuigkeiten'} title={Blockly.Msg.messages_newblockly_head}
content={''} content={''}
onClose={this.toggleDialog} onClose={this.toggleDialog}
onClick={this.toggleDialog} onClick={this.toggleDialog}
button={Blockly.Msg.button_close} button={Blockly.Msg.button_close}
> >
<div> <div>
Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei. {Blockly.Msg.messages_newblockly_text}<Link to="/tutorial" className={this.props.classes.link}>test</Link>
<FormControlLabel
style={{ marginTop: '20px' }}
classes={{ label: this.props.classes.label }}
control={
<Checkbox
size={'small'}
value={true}
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
label={'Dialog nicht mehr anzeigen'}
/>
</div> </div>
<FormControlLabel
style={{ marginTop: '20px' }}
classes={{ label: this.props.classes.label }}
control={
<Checkbox
size={'small'}
value={true}
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
label={Blockly.Msg.labels_donotshowagain}
/>
</Dialog> </Dialog>
); );
}; };

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

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

10
src/components/Tutorial/SolutionCheck.js
View File

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

5
src/components/Tutorial/StepperHorizontal.js
View File

@ -51,7 +51,6 @@ class StepperHorizontal extends Component {
render() { render() {
var tutorialId = this.props.tutorial._id; var tutorialId = this.props.tutorial._id;
var tutorialIndex = this.props.currentTutorialIndex;
var status = this.props.status.filter(status => status._id === tutorialId)[0]; var status = this.props.status.filter(status => status._id === tutorialId)[0];
var tasks = status.tasks; var tasks = status.tasks;
var error = tasks.filter(task => task.type === 'error').length > 0; var error = tasks.filter(task => task.type === 'error').length > 0;
@ -71,7 +70,7 @@ class StepperHorizontal extends Component {
<div className={this.props.classes.stepper}> <div className={this.props.classes.stepper}>
<Button <Button
disabled//={tutorialIndex === 0} disabled//={tutorialIndex === 0}
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }} //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
> >
{'<'} {'<'}
</Button> </Button>
@ -83,7 +82,7 @@ class StepperHorizontal extends Component {
</Tooltip> </Tooltip>
<Button <Button
disabled//={tutorialIndex + 1 === tutorials.length} disabled//={tutorialIndex + 1 === tutorials.length}
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }} //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
> >
{'>'} {'>'}
</Button> </Button>

61
src/components/Tutorial/Tutorial.js
View File

@ -12,7 +12,7 @@ import Instruction from './Instruction';
import Assessment from './Assessment'; import Assessment from './Assessment';
import Badge from './Badge'; import Badge from './Badge';
import NotFound from '../NotFound'; import NotFound from '../NotFound';
import * as Blockly from 'blockly'
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace'; import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
@ -26,10 +26,10 @@ class Tutorial extends Component {
} }
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) { if (this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
} }
if(this.props.message.id === 'GET_TUTORIAL_FAIL'){ if (this.props.message.id === 'GET_TUTORIAL_FAIL') {
alert(this.props.message.msg); alert(this.props.message.msg);
} }
} }
@ -37,7 +37,7 @@ class Tutorial extends Component {
componentWillUnmount() { componentWillUnmount() {
this.props.resetTutorial(); this.props.resetTutorial();
this.props.workspaceName(null); this.props.workspaceName(null);
if(this.props.message.msg){ if (this.props.message.msg) {
this.props.clearMessages(); this.props.clearMessages();
} }
} }
@ -47,37 +47,38 @@ class Tutorial extends Component {
<div> <div>
{this.props.isLoading ? null : {this.props.isLoading ? null :
!this.props.tutorial ? !this.props.tutorial ?
this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> : null this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null
: (() => { : (() => {
var tutorial = this.props.tutorial; var tutorial = this.props.tutorial;
var steps = this.props.tutorial.steps; var steps = this.props.tutorial.steps;
var step = steps[this.props.activeStep]; var step = steps[this.props.activeStep];
var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`; var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
return( return (
<div> <div>
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} /> <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
<StepperHorizontal /> <StepperHorizontal />
<Badge /> <Badge />
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<StepperVertical steps={steps} /> <StepperVertical steps={steps} />
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/} {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
<Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}> <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
{step ? {step ?
step.type === 'instruction' ? step.type === 'instruction' ?
<Instruction step={step} /> <Instruction step={step} />
: <Assessment step={step} name={name} /> // if step.type === 'assessment' : <Assessment step={step} name={name} /> // if step.type === 'assessment'
: null} : null}
<div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}> <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
<Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button> <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
<Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button> <Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
</div> </div>
</Card> </Card>
</div>
</div> </div>
)})() </div>
)
})()
} }
</div> </div>
); );

43
src/components/User/Login.js
View File

@ -19,7 +19,7 @@ import Divider from '@material-ui/core/Divider';
import InputAdornment from '@material-ui/core/InputAdornment'; import InputAdornment from '@material-ui/core/InputAdornment';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
import Link from '@material-ui/core/Link'; import Link from '@material-ui/core/Link';
import * as Blockly from 'blockly'
export class Login extends Component { export class Login extends Component {
@ -37,21 +37,21 @@ export class Login extends Component {
}; };
} }
componentDidUpdate(props){ componentDidUpdate(props) {
console.log(this.state.redirect); console.log(this.state.redirect);
const { message } = this.props; const { message } = this.props;
if (message !== props.message) { if (message !== props.message) {
if(message.id === 'LOGIN_SUCCESS'){ if (message.id === 'LOGIN_SUCCESS') {
if(this.state.redirect){ if (this.state.redirect) {
this.props.history.push(this.state.redirect); this.props.history.push(this.state.redirect);
} }
else{ else {
this.props.history.goBack(); this.props.history.goBack();
} }
} }
// Check for login error // Check for login error
else if(message.id === 'LOGIN_FAIL'){ else if (message.id === 'LOGIN_FAIL') {
this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: 'Der Benutzername oder das Passwort ist nicht korrekt.', type: 'error' }); this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
} }
} }
} }
@ -62,8 +62,8 @@ export class Login extends Component {
onSubmit = e => { onSubmit = e => {
e.preventDefault(); e.preventDefault();
const {email, password} = this.state; const { email, password } = this.state;
if(email !== '' && password !== ''){ if (email !== '' && password !== '') {
// create user object // create user object
const user = { const user = {
email, email,
@ -83,13 +83,13 @@ export class Login extends Component {
e.preventDefault(); e.preventDefault();
}; };
render(){ render() {
return( return (
<div> <div>
<Breadcrumbs content={[{ link: '/user/login', title: 'Anmelden' }]} /> <Breadcrumbs content={[{ link: '/user/login', title: 'Anmelden' }]} />
<div style={{maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto'}}> <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
<h1>Anmelden</h1> <h1>{Blockly.Msg.login_head}</h1>
<Alert> <Alert>
Zur Anmeldung ist ein Konto auf <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> Voraussetzung. Zur Anmeldung ist ein Konto auf <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> Voraussetzung.
</Alert> </Alert>
@ -100,10 +100,10 @@ export class Login extends Component {
key={this.state.key} key={this.state.key}
/> />
<TextField <TextField
style={{marginBottom: '10px'}} style={{ marginBottom: '10px' }}
// variant='outlined' // variant='outlined'
type='text' type='text'
label='E-Mail oder Nutzername' label={Blockly.Msg.labels_username}
name='email' name='email'
value={this.state.email} value={this.state.email}
onChange={this.onChange} onChange={this.onChange}
@ -133,17 +133,17 @@ export class Login extends Component {
fullWidth={true} fullWidth={true}
/> />
<p> <p>
<Button color="primary" variant='contained' onClick={this.onSubmit} style={{width: '100%'}}> <Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
{this.props.progress ? {this.props.progress ?
<div style={{height: '24.5px'}}><CircularProgress color="inherit" size={20}/></div> <div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
: 'Anmelden'} : 'Anmelden'}
</Button> </Button>
</p> </p>
<p style={{textAlign: 'center', fontSize: '0.8rem'}}> <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">Passwort vergessen?</Link> <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">Passwort vergessen?</Link>
</p> </p>
<Divider variant='fullWidth'/> <Divider variant='fullWidth' />
<p style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}> <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
Du hast noch kein Konto? Registriere dich auf <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>. Du hast noch kein Konto? Registriere dich auf <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
</p> </p>
</div> </div>
@ -156,7 +156,6 @@ Login.propTypes = {
message: PropTypes.object.isRequired, message: PropTypes.object.isRequired,
login: PropTypes.func.isRequired, login: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired, clearMessages: PropTypes.func.isRequired,
message: PropTypes.object.isRequired,
progress: PropTypes.bool.isRequired progress: PropTypes.bool.isRequired
}; };

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

@ -9,10 +9,7 @@ import Snackbar from '../Snackbar';
import Dialog from '../Dialog'; import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { faUpload } from "@fortawesome/free-solid-svg-icons"; import { faUpload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

2
src/reducers/tutorialReducer.js
View File

@ -1,4 +1,4 @@
import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types'; import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from '../actions/types';
const initialStatus = () => { const initialStatus = () => {