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

add ide output fixes #71

Browse Source
This commit is contained in:
Mario Pesch 2021-03-25 10:38:32 +01:00
parent 6a6b2e2f58
commit 687ac32166
5 changed files with 748 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/Blockly/msg/de/ui.js
View File

@ -1,4 +1,3 @@
export const UI = { export const UI = {
/** /**
* Toolbox * Toolbox
@ -35,8 +34,8 @@ export const UI = {
tooltip_share_project: "Projekt teilen", tooltip_share_project: "Projekt teilen",
tooltip_reset_workspace: "Workspace zurücksetzen", tooltip_reset_workspace: "Workspace zurücksetzen",
tooltip_copy_link: "Link kopieren", tooltip_copy_link: "Link kopieren",
tooltip_trashcan_hide: 'gelöschte Blöcke ausblenden', tooltip_trashcan_hide: "gelöschte Blöcke ausblenden",
tooltip_trashcan_delete: 'Blöcke endgültig löschen', tooltip_trashcan_delete: "Blöcke endgültig löschen",
tooltip_project_title: "Titel des Projektes", tooltip_project_title: "Titel des Projektes",
tooltip_check_solution: "Lösung kontrollieren", tooltip_check_solution: "Lösung kontrollieren",
tooltip_copy_code: "Code in die Zwischenablage kopieren", tooltip_copy_code: "Code in die Zwischenablage kopieren",
@ -46,23 +45,32 @@ export const UI = {
* *
*/ */
messages_delete_project_failed: "Fehler beim Löschen des Projektes. Versuche es noch einmal.", messages_delete_project_failed:
messages_reset_workspace_success: "Das Projekt wurde erfolgreich zurückgesetzt", "Fehler beim Löschen des Projektes. Versuche es noch einmal.",
messages_PROJECT_UPDATE_SUCCESS: "Das Projekt wurde erfolgreich aktualisiert.", messages_reset_workspace_success:
messages_GALLERY_UPDATE_SUCCESS: "Das Galerie-Projekt wurde erfolgreich aktualisiert.", "Das Projekt wurde erfolgreich zurückgesetzt",
messages_PROJECT_UPDATE_FAIL: "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.", messages_PROJECT_UPDATE_SUCCESS:
messages_GALLERY_UPDATE_FAIL: "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.", "Das Projekt wurde erfolgreich aktualisiert.",
messages_GALLERY_UPDATE_SUCCESS:
"Das Galerie-Projekt wurde erfolgreich aktualisiert.",
messages_PROJECT_UPDATE_FAIL:
"Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.",
messages_GALLERY_UPDATE_FAIL:
"Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.",
messages_gallery_save_fail_1: "Fehler beim Speichern des ", messages_gallery_save_fail_1: "Fehler beim Speichern des ",
messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.", messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.",
messages_SHARE_SUCCESS: 'Programm teilen', messages_SHARE_SUCCESS: "Programm teilen",
messages_SHARE_FAIL: "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.", messages_SHARE_FAIL:
messages_copylink_success: 'Link erfolgreich in Zwischenablage gespeichert.', "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.",
messages_rename_success_01: 'Das Projekt wurde erfolgreich in ', messages_copylink_success: "Link erfolgreich in Zwischenablage gespeichert.",
messages_rename_success_02: 'umbenannt.', messages_rename_success_01: "Das Projekt wurde erfolgreich in ",
messages_newblockly_head: "Willkommen zur neuen Version Blockly für die senseBox", messages_rename_success_02: "umbenannt.",
messages_newblockly_text: "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)", messages_newblockly_head:
messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht', "Willkommen zur neuen Version Blockly für die senseBox",
messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.', messages_newblockly_text:
"Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
messages_GET_TUTORIAL_FAIL: "Zurück zur Tutorials-Übersicht",
messages_LOGIN_FAIL: "Der Benutzername oder das Passwort ist nicht korrekt.",
messages_copy_code: "Code wurde in die Zwischenablage kopiert", messages_copy_code: "Code wurde in die Zwischenablage kopiert",
/** /**
@ -70,7 +78,8 @@ export const UI = {
*/ */
resetDialog_headline: "Workspace zurücksetzen?", resetDialog_headline: "Workspace zurücksetzen?",
resetDialog_text: "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!", resetDialog_text:
"Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!",
/** /**
* Share Dialog * Share Dialog
@ -84,7 +93,8 @@ export const UI = {
*/ */
renamedialog_headline: "Projekt benennen", renamedialog_headline: "Projekt benennen",
renamedialog_text: "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.", renamedialog_text:
"Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.",
/** /**
* Compile Dialog * Compile Dialog
@ -92,7 +102,8 @@ export const UI = {
*/ */
compiledialog_headline: "Fehler", compiledialog_headline: "Fehler",
compiledialog_text: "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut", compiledialog_text:
"Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
/** /**
* Buttons * Buttons
@ -121,13 +132,16 @@ export const UI = {
*/ */
settings_head: "Einstellungen", settings_head: "Einstellungen",
settings_language: "Sprache", settings_language: "Sprache",
settings_language_text: "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.", settings_language_text:
"Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.",
settings_language_de: "Deutsch", settings_language_de: "Deutsch",
settings_language_en: "Englisch", settings_language_en: "Englisch",
settings_renderer: "Renderer", settings_renderer: "Renderer",
settings_renderer_text: "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.", settings_renderer_text:
"Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.",
settings_statistics: "Statistiken", settings_statistics: "Statistiken",
settings_statistics_text: "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.", settings_statistics_text:
"Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.",
settings_statistics_on: "An", settings_statistics_on: "An",
settings_statistics_off: "Aus", settings_statistics_off: "Aus",
@ -136,23 +150,24 @@ export const UI = {
*/ */
notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.", notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.",
notfound_text: "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.", notfound_text:
"Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.",
/** /**
* Labels * Labels
*/ */
labels_donotshowagain: 'Dialog nicht mehr anzeigen', labels_donotshowagain: "Dialog nicht mehr anzeigen",
labels_here: "hier", labels_here: "hier",
labels_username: 'E-Mail oder Nutzername', labels_username: "E-Mail oder Nutzername",
labels_password: "Passwort", labels_password: "Passwort",
/** /**
* Badges * Badges
*/ */
badges_explaination: "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ", badges_explaination:
"Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ",
badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ", badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ",
badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.", badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.",
/** /**
@ -161,10 +176,11 @@ export const UI = {
tutorials_assessment_task: "Aufgabe", tutorials_assessment_task: "Aufgabe",
tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:", tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:",
tutorials_hardware_moreInformation: "Weitere Informationen zur Hardware-Komponente findest du", tutorials_hardware_moreInformation:
"Weitere Informationen zur Hardware-Komponente findest du",
tutorials_hardware_here: "hier", tutorials_hardware_here: "hier",
tutorials_requirements: "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:", tutorials_requirements:
"Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:",
/** /**
* Tutorial Builder * Tutorial Builder
@ -173,17 +189,19 @@ export const UI = {
builder_solution: "Lösung", builder_solution: "Lösung",
builder_solution_submit: "Lösung einreichen", builder_solution_submit: "Lösung einreichen",
builder_example_submit: "Beispiel einreichen", builder_example_submit: "Beispiel einreichen",
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.", builder_comment:
builder_hardware_order: "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.", "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.",
builder_hardware_order:
"Beachte, dass die Reihenfolge des Auswählens maßgebend ist.",
builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.", builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.",
builder_requirements_head: "Voraussetzungen", builder_requirements_head: "Voraussetzungen",
builder_requirements_order: "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.", builder_requirements_order:
"Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",
/** /**
* Login * Login
*/ */
login_head: "Anmelden", login_head: "Anmelden",
login_osem_account_01: "Du benötigst einen ", login_osem_account_01: "Du benötigst einen ",
login_osem_account_02: "Account um dich einzuloggen", login_osem_account_02: "Account um dich einzuloggen",
@ -212,8 +230,6 @@ export const UI = {
codeviewer_arduino: "Arduino Quellcode", codeviewer_arduino: "Arduino Quellcode",
codeviewer_xml: "XML Blöcke", codeviewer_xml: "XML Blöcke",
/** /**
* Overlay * Overlay
*/ */
@ -229,4 +245,11 @@ export const UI = {
tooltip_viewer: "Hilfe", tooltip_viewer: "Hilfe",
tooltip_moreInformation: "Mehr Informationen findest du ", tooltip_moreInformation: "Mehr Informationen findest du ",
tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen", tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen",
}
/**
* IDEDrawer
*/
drawer_ideerror_head: "Hoppla da ist was schief gegangen.",
drawer_ideerror_text:
"Beim kompilieren ist ein Fehler aufgetreten, überprüfe deine Blöcke.",
};

103
src/components/Blockly/msg/en/ui.js
View File

@ -1,7 +1,4 @@
export const UI = { export const UI = {
/** /**
* Toolbox * Toolbox
*/ */
@ -51,30 +48,35 @@ export const UI = {
messages_delete_project_failed: "Error deleting the project. Try again.", messages_delete_project_failed: "Error deleting the project. Try again.",
messages_reset_workspace_success: "The project has been successfully reset.", messages_reset_workspace_success: "The project has been successfully reset.",
messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.", messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.",
messages_GALLERY_UPDATE_SUCCESS: "The gallery project was successfully updated.", messages_GALLERY_UPDATE_SUCCESS:
"The gallery project was successfully updated.",
messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.", messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.",
messages_GALLERY_UPDATE_FAIL: "Error updating the gallery project. Try again.", messages_GALLERY_UPDATE_FAIL:
"Error updating the gallery project. Try again.",
messages_gallery_save_fail_1: "Error saving the ", messages_gallery_save_fail_1: "Error saving the ",
messages_gallery_save_fail_2: "Project. Try again.", messages_gallery_save_fail_2: "Project. Try again.",
messages_SHARE_SUCCESS: 'Share program', messages_SHARE_SUCCESS: "Share program",
messages_SHARE_FAIL: "Error creating a link to share your program. Try again.", messages_SHARE_FAIL:
messages_copylink_success: 'Link successfully saved to clipboard.', "Error creating a link to share your program. Try again.",
messages_rename_success_01: 'The project was successfully saved to ', messages_copylink_success: "Link successfully saved to clipboard.",
messages_rename_success_02: 'renamed.', messages_rename_success_01: "The project was successfully saved to ",
messages_newblockly_head: 'Welcome to the new version Blockly for the senseBox', messages_rename_success_02: "renamed.",
messages_newblockly_text: "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)", messages_newblockly_head:
messages_GET_TUTORIAL_FAIL: 'Back to tutorials overview', "Welcome to the new version Blockly for the senseBox",
messages_LOGIN_FAIL: 'The username or password is incorrect.', messages_newblockly_text:
"The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)",
messages_GET_TUTORIAL_FAIL: "Back to tutorials overview",
messages_LOGIN_FAIL: "The username or password is incorrect.",
messages_login_error: "Enter both a username and a password.", messages_login_error: "Enter both a username and a password.",
messages_copy_code: "Copy code to clipboard succesfull", messages_copy_code: "Copy code to clipboard succesfull",
/** /**
* Reset Dialog * Reset Dialog
*/ */
resetDialog_headline: "Reset workspace?", resetDialog_headline: "Reset workspace?",
resetDialog_text: "Do you really want to reset the workspace? All blocks will be deleted!", resetDialog_text:
"Do you really want to reset the workspace? All blocks will be deleted!",
/** /**
* Share Dialog * Share Dialog
@ -88,16 +90,16 @@ export const UI = {
*/ */
renamedialog_headline: "Rename project", renamedialog_headline: "Rename project",
renamedialog_text: "Please enter a name for the project and confirm it by clicking 'Confirm'.", renamedialog_text:
"Please enter a name for the project and confirm it by clicking 'Confirm'.",
/** /**
* Compile Dialog * Compile Dialog
* *
*/ */
compiledialog_headline: "Error", compiledialog_headline: "Error",
compiledialog_text: "While compiling an error occured. Please check your blocks and try again", compiledialog_text:
"While compiling an error occured. Please check your blocks and try again",
/** /**
* Buttons * Buttons
@ -114,8 +116,6 @@ export const UI = {
button_tutorial_overview: "Tutorial overview", button_tutorial_overview: "Tutorial overview",
button_login: "Login", button_login: "Login",
/** /**
* *
*/ */
@ -127,50 +127,56 @@ export const UI = {
*/ */
settings_head: "Settings", settings_head: "Settings",
settings_language: "Language", settings_language: "Language",
settings_language_text: "Selection of the language applies to the entire application. A distinction can be made between German and English.", settings_language_text:
"Selection of the language applies to the entire application. A distinction can be made between German and English.",
settings_language_de: "German", settings_language_de: "German",
settings_language_en: "English", settings_language_en: "English",
settings_renderer: "Renderer", settings_renderer: "Renderer",
settings_renderer_text: "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.", settings_renderer_text:
"The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.",
settings_statistics: "Statistics", settings_statistics: "Statistics",
settings_statistics_text: "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.", settings_statistics_text:
"The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
settings_statistics_on: "On", settings_statistics_on: "On",
settings_statistics_off: "Off", settings_statistics_off: "Off",
/** /**
* 404 * 404
*/ */
notfound_head: "The page you requested cannot be found.", notfound_head: "The page you requested cannot be found.",
notfound_text: "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.", notfound_text:
"The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.",
/** /**
* Labels * Labels
*/ */
labels_donotshowagain: 'Do not show dialog again', labels_donotshowagain: "Do not show dialog again",
labels_here: 'here', labels_here: "here",
labels_username: 'Email or username', labels_username: "Email or username",
labels_password: "Password", labels_password: "Password",
/** /**
* Badges * Badges
*/ */
badges_explaination: "An overview of all badges received in the Blockly for senseBox context can be found ", badges_explaination:
badges_ASSIGNE_BADGE_SUCCESS_01: "Congratulations! You have received the badge ", "An overview of all badges received in the Blockly for senseBox context can be found ",
badges_ASSIGNE_BADGE_SUCCESS_01:
"Congratulations! You have received the badge ",
badges_ASSIGNE_BADGE_SUCCESS_02: ".", badges_ASSIGNE_BADGE_SUCCESS_02: ".",
/** /**
* Tutorials * Tutorials
*/ */
tutorials_assessment_task: "Task", tutorials_assessment_task: "Task",
tutorials_hardware_head: "For the implementation you need the following hardware:", tutorials_hardware_head:
tutorials_hardware_moreInformation: "You can find more information about the hardware component.", "For the implementation you need the following hardware:",
tutorials_hardware_moreInformation:
"You can find more information about the hardware component.",
tutorials_hardware_here: "here", tutorials_hardware_here: "here",
tutorials_requirements: "Before continuing with this tutorial, you should have successfully completed the following tutorials:", tutorials_requirements:
"Before continuing with this tutorial, you should have successfully completed the following tutorials:",
/** /**
* Tutorial Builder * Tutorial Builder
@ -179,24 +185,24 @@ export const UI = {
builder_solution: "Solution", builder_solution: "Solution",
builder_solution_submit: "Submit Solution", builder_solution_submit: "Submit Solution",
builder_example_submit: "Submit example", builder_example_submit: "Submit example",
builder_comment: "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.", builder_comment:
"Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.",
builder_hardware_order: "Note that the order of selection is authoritative.", builder_hardware_order: "Note that the order of selection is authoritative.",
builder_hardware_helper: "Select at least one hardware component.", builder_hardware_helper: "Select at least one hardware component.",
builder_requirements_head: "Requirements.", builder_requirements_head: "Requirements.",
builder_requirements_order: "Note that the order of ticking is authoritative.", builder_requirements_order:
"Note that the order of ticking is authoritative.",
/** /**
* Login * Login
*/ */
login_head: "Login", login_head: "Login",
login_osem_account_01: "You need to have an ", login_osem_account_01: "You need to have an ",
login_osem_account_02: "Account to login", login_osem_account_02: "Account to login",
login_lostpassword: "Lost your password?", login_lostpassword: "Lost your password?",
login_createaccount: "If you don't have an openSenseMap account please register on ", login_createaccount:
"If you don't have an openSenseMap account please register on ",
/** /**
* Navbar * Navbar
@ -221,9 +227,6 @@ export const UI = {
codeviewer_arduino: "Arduino Source Code", codeviewer_arduino: "Arduino Source Code",
codeviewer_xml: "XML Blocks", codeviewer_xml: "XML Blocks",
/** /**
* Overlay * Overlay
*/ */
@ -232,7 +235,6 @@ export const UI = {
compile_overlay_text: "Then copy it to your senseBox MCU", compile_overlay_text: "Then copy it to your senseBox MCU",
compile_overlay_help: "You need help? Have a look here: ", compile_overlay_help: "You need help? Have a look here: ",
/** /**
* Tooltip Viewer * Tooltip Viewer
*/ */
@ -241,4 +243,9 @@ export const UI = {
tooltip_moreInformation: "More informations can be found ", tooltip_moreInformation: "More informations can be found ",
tooltip_hint: "Select a Block to show the hint", tooltip_hint: "Select a Block to show the hint",
} /**
* IDEDrawer
*/
drawer_ideerror_head: "Oops something went wrong",
drawer_ideerror_text: "An error occurred while compiling, check your blocks",
};

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

@ -1,57 +1,70 @@
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 { getProjects, resetProject } from '../../actions/projectActions'; import { getProjects, resetProject } from "../../actions/projectActions";
import { clearMessages } from '../../actions/messageActions'; import { clearMessages } from "../../actions/messageActions";
import { Link, withRouter } from 'react-router-dom'; import { Link, withRouter } from "react-router-dom";
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from "../Breadcrumbs";
import BlocklyWindow from '../Blockly/BlocklyWindow'; import BlocklyWindow from "../Blockly/BlocklyWindow";
import Snackbar from '../Snackbar'; import Snackbar from "../Snackbar";
import WorkspaceFunc from '../Workspace/WorkspaceFunc'; import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from "@material-ui/core/styles";
import Grid from '@material-ui/core/Grid'; import Grid from "@material-ui/core/Grid";
import Paper from '@material-ui/core/Paper'; import Paper from "@material-ui/core/Paper";
import Divider from '@material-ui/core/Divider'; import Divider from "@material-ui/core/Divider";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from "@material-ui/core/CircularProgress";
const styles = (theme) => ({ const styles = (theme) => ({
link: { link: {
color: theme.palette.primary.main, color: theme.palette.primary.main,
textDecoration: 'none', textDecoration: "none",
'&:hover': { "&:hover": {
color: theme.palette.primary.main, color: theme.palette.primary.main,
textDecoration: 'underline' textDecoration: "underline",
} },
} },
}); });
class ProjectHome extends Component { class ProjectHome extends Component {
state = { state = {
snackbar: false, snackbar: false,
type: '', type: "",
key: '', key: "",
message: '' message: "",
} };
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,
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { key: Date.now(),
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); message: `Dein 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 === "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",
});
} }
} }
} }
@ -59,14 +72,23 @@ class ProjectHome extends Component {
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,
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { key: Date.now(),
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); message: `Dein Projekt wurde erfolgreich gelöscht.`,
type: "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",
});
} }
} }
} }
@ -77,60 +99,107 @@ class ProjectHome extends Component {
} }
render() { render() {
var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie'; var data =
this.props.location.pathname === "/project" ? "Projekte" : "Galerie";
return ( return (
<div> <div>
<Breadcrumbs content={[{ link: this.props.location.pathname, title: data }]} /> <Breadcrumbs
content={[{ link: this.props.location.pathname, title: data }]}
/>
<h1>{data}</h1> <h1>{data}</h1>
{this.props.progress ? {this.props.progress ? (
<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}>
{this.props.projects.map((project, i) => { {this.props.projects.map((project, i) => {
return ( return (
<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
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}> style={{
padding: "1rem",
position: "relative",
overflow: "hidden",
}}
>
<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
<div style={{ float: 'right' }}> style={{
marginTop: "10px",
marginBottom: "10px",
}}
/>
<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> ) : (
<Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography> <div>
{this.props.location.pathname.replace('/', '') === 'project' ? <Typography style={{ marginBottom: "10px" }}>
<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> Es sind aktuell keine Projekte vorhanden.
: null} </Typography>
{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>
) : null}
</div> </div>
} )}
</div> </div>
} )}
<Snackbar <Snackbar
open={this.state.snackbar} open={this.state.snackbar}
message={this.state.message} message={this.state.message}
@ -139,7 +208,7 @@ class ProjectHome extends Component {
/> />
</div> </div>
); );
}; }
} }
ProjectHome.propTypes = { ProjectHome.propTypes = {
@ -149,15 +218,18 @@ ProjectHome.propTypes = {
projects: PropTypes.array.isRequired, projects: PropTypes.array.isRequired,
progress: PropTypes.bool.isRequired, progress: PropTypes.bool.isRequired,
user: PropTypes.object, user: PropTypes.object,
message: PropTypes.object.isRequired message: PropTypes.object.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
projects: state.project.projects, projects: state.project.projects,
progress: state.project.progress, progress: state.project.progress,
user: state.auth.user, user: state.auth.user,
message: state.message message: state.message,
}); });
export default connect(mapStateToProps, {
export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome))); getProjects,
resetProject,
clearMessages,
})(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));

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

@ -85,7 +85,7 @@ class StepperVertical extends Component {
return ( return (
<Step key={i}> <Step key={i}>
<Tooltip title={step.headline} placement='right' arrow > <Tooltip title={step.headline} placement='right' arrow >
<div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {console.log(i); this.props.tutorialStep(i)}}> <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => { this.props.tutorialStep(i)}}>
<StepLabel <StepLabel
StepIconComponent={'div'} StepIconComponent={'div'}
classes={{ classes={{

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

@ -1,126 +1,172 @@
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 { workspaceName } from '../../actions/workspaceActions'; import { workspaceName } from "../../actions/workspaceActions";
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace'; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import Divider from "@material-ui/core/Divider";
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/core'; import * as Blockly from "blockly/core";
import Copy from '../copy.svg'; import Copy from "../copy.svg";
import Prism from "prismjs";
import "prismjs/themes/prism.css";
import "prismjs/plugins/line-numbers/prism-line-numbers";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import MuiDrawer from "@material-ui/core/Drawer";
const styles = (theme) => ({ const styles = (theme) => ({
backdrop: { backdrop: {
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
color: '#fff', color: "#fff",
}, },
iconButton: { iconButton: {
backgroundColor: theme.palette.button.compile, backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
width: '40px', width: "40px",
height: '40px', height: "40px",
'&:hover': { "&:hover": {
backgroundColor: theme.palette.button.compile, backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
} },
}, },
button: { button: {
backgroundColor: theme.palette.button.compile, backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
'&:hover': { "&:hover": {
backgroundColor: theme.palette.button.compile, backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
} },
} },
}); });
const Drawer = withStyles((theme) => ({
paperAnchorBottom: {
backgroundColor: "black",
height: "20vH",
},
}))(MuiDrawer);
class Compile extends Component { class Compile extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
progress: false, progress: false,
open: false, open: false,
file: false, file: false,
title: '', title: "",
content: '', content: "",
name: props.name name: props.name,
error: "",
}; };
} }
componentDidMount() {
Prism.highlightAll();
}
componentDidUpdate(props) { componentDidUpdate(props) {
if (props.name !== this.props.name) { if (props.name !== this.props.name) {
this.setState({ name: this.props.name }); this.setState({ name: this.props.name });
} }
Prism.highlightAll();
} }
compile = () => { compile = () => {
this.setState({ progress: true }); this.setState({ progress: true });
const data = { const data = {
"board": process.env.REACT_APP_BOARD, board: process.env.REACT_APP_BOARD,
"sketch": this.props.arduino sketch: this.props.arduino,
}; };
fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, { fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
method: "POST", method: "POST",
headers: { 'Content-Type': 'application/json' }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(data) body: JSON.stringify(data),
}) })
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
console.log(data);
if (data.code === "Internal Server Error") {
this.setState({
progress: false,
file: false,
open: true,
title: Blockly.Msg.compiledialog_headline,
content: Blockly.Msg.compiledialog_text,
error: data.message,
});
}
this.setState({ id: data.data.id }, () => { this.setState({ id: data.data.id }, () => {
this.createFileName(); this.createFileName();
}); });
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text }); //this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
}); });
} };
download = () => { download = () => {
const id = this.state.id; const id = this.state.id;
const filename = detectWhitespacesAndReturnReadableResult(this.state.name); const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
this.toggleDialog(); this.toggleDialog();
this.props.workspaceName(this.state.name); this.props.workspaceName(this.state.name);
window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self'); window.open(
`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
"_self"
);
this.setState({ progress: false }); this.setState({ progress: false });
} };
toggleDialog = () => { toggleDialog = () => {
this.setState({ open: !this.state, progress: false }); this.setState({ open: !this.state, progress: false });
} };
createFileName = () => { createFileName = () => {
if (this.state.name) { if (this.state.name) {
this.download(); this.download();
} else {
this.setState({
file: true,
open: true,
title: "Projekt kompilieren",
content:
"Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
});
} }
else { };
this.setState({ file: true, open: true, title: 'Projekt kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
}
}
setFileName = (e) => { setFileName = (e) => {
this.setState({ name: e.target.value }); this.setState({ name: e.target.value });
};
toggleDrawer = (anchor, open) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
} }
this.setState({ open: false });
};
render() { render() {
return ( return (
<div style={{}}> <div style={{}}>
{this.props.iconButton ? {this.props.iconButton ? (
<Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}> <Tooltip
title={Blockly.Msg.tooltip_compile_code}
arrow
style={{ marginRight: "5px" }}
>
<IconButton <IconButton
className={`compileBlocks ${this.props.classes.iconButton}`} className={`compileBlocks ${this.props.classes.iconButton}`}
onClick={() => this.compile()} onClick={() => this.compile()}
@ -128,21 +174,73 @@ class Compile extends Component {
<FontAwesomeIcon icon={faClipboardCheck} size="l" /> <FontAwesomeIcon icon={faClipboardCheck} size="l" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
: ) : (
<Button style={{ float: 'right', color: 'white' }} variant="contained" className={this.props.classes.button} onClick={() => this.compile()}> <Button
<FontAwesomeIcon icon={faClipboardCheck} style={{ marginRight: '5px' }} /> Kompilieren style={{ float: "right", color: "white" }}
variant="contained"
className={this.props.classes.button}
onClick={() => this.compile()}
>
<FontAwesomeIcon
icon={faClipboardCheck}
style={{ marginRight: "5px" }}
/>{" "}
Kompilieren
</Button> </Button>
} )}
<Backdrop className={this.props.classes.backdrop} open={this.state.progress}> <Backdrop
<div className='overlay'> className={this.props.classes.backdrop}
open={this.state.progress}
>
<div className="overlay">
<img src={Copy} width="400" alt="copyimage"></img> <img src={Copy} width="400" alt="copyimage"></img>
<h2>{Blockly.Msg.compile_overlay_head}</h2> <h2>{Blockly.Msg.compile_overlay_head}</h2>
<p>{Blockly.Msg.compile_overlay_text}</p> <p>{Blockly.Msg.compile_overlay_text}</p>
<p>{Blockly.Msg.compile_overlay_help}<a href="/faq" target="_blank">FAQ</a></p> <p>
{Blockly.Msg.compile_overlay_help}
<a href="/faq" target="_blank">
FAQ
</a>
</p>
<CircularProgress color="inherit" /> <CircularProgress color="inherit" />
</div> </div>
</Backdrop> </Backdrop>
<Dialog <Drawer
anchor={"bottom"}
open={this.state.open}
onClose={this.toggleDrawer("bottom", false)}
>
<h2
style={{
color: "#4EAF47",
paddingLeft: "1rem",
paddingRight: "1rem",
}}
>
{Blockly.Msg.drawer_ideerror_head}
</h2>
<p
style={{
color: "#4EAF47",
paddingLeft: "1rem",
paddingRight: "1rem",
}}
>
{Blockly.Msg.drawer_ideerror_text}
</p>
<Divider style={{ backgroundColor: "white" }} />
<p
style={{
backgroundColor: "black",
color: "#E47128",
padding: "1rem",
}}
>
{" "}
{`${this.state.error}`}{" "}
</p>
</Drawer>
{/* <Dialog
open={this.state.open} open={this.state.open}
title={this.state.title} title={this.state.title}
content={this.state.content} content={this.state.content}
@ -155,23 +253,32 @@ class Compile extends Component {
<TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} /> <TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />
<Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button> <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
</div> </div>
: null} :
</Dialog>
<pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: '100%', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}><code className="language-json">
{`${this.state.error}`}
</code></pre>
</AccordionDetails>
</Accordion>
}
</Dialog> */}
</div> </div>
); );
}; }
} }
Compile.propTypes = { Compile.propTypes = {
arduino: PropTypes.string.isRequired, arduino: PropTypes.string.isRequired,
name: PropTypes.string, name: PropTypes.string,
workspaceName: PropTypes.func.isRequired workspaceName: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
arduino: state.workspace.code.arduino, arduino: state.workspace.code.arduino,
name: state.workspace.name name: state.workspace.name,
}); });
export default connect(mapStateToProps, { workspaceName })(
export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(Compile)); withStyles(styles, { withTheme: true })(Compile)
);