-
- :
+ ) : (
{data}
- {this.props.progress ? + {this.props.progress ? (
- {this.props.projects.length > 0 ?
+ {this.props.projects.length > 0 ? (
{this.props.projects.map((project, i) => {
return (
-
-
+
+
{project.description}
+
+ {project.description}
+
- {this.props.user && this.props.user.email === project.creator ?
+ {this.props.user &&
+ this.props.user.email === project.creator ? (
{project.title}
-
-
);
- };
+ }
}
ProjectHome.propTypes = {
@@ -149,15 +218,18 @@ ProjectHome.propTypes = {
projects: PropTypes.array.isRequired,
progress: PropTypes.bool.isRequired,
user: PropTypes.object,
- message: PropTypes.object.isRequired
+ message: PropTypes.object.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
projects: state.project.projects,
progress: state.project.progress,
user: state.auth.user,
- message: state.message
+ message: state.message,
});
-
-export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
+export default connect(mapStateToProps, {
+ getProjects,
+ resetProject,
+ clearMessages,
+})(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js
index fa4d1c4..5dd24b7 100644
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@@ -1,20 +1,20 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { workspaceName } from '../../actions/workspaceActions';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { workspaceName } from "../../actions/workspaceActions";
-import BlocklyWindow from '../Blockly/BlocklyWindow';
-import CodeViewer from '../CodeViewer';
-import WorkspaceFunc from '../Workspace/WorkspaceFunc';
+import BlocklyWindow from "../Blockly/BlocklyWindow";
+import CodeViewer from "../CodeViewer";
+import WorkspaceFunc from "../Workspace/WorkspaceFunc";
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
-import * as Blockly from 'blockly'
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import Typography from "@material-ui/core/Typography";
+import * as Blockly from "blockly";
+import { initialXml } from "../Blockly/initialXml";
class Assessment extends Component {
-
componentDidMount() {
this.props.workspaceName(this.props.name);
}
@@ -28,48 +28,90 @@ class Assessment extends Component {
render() {
var tutorialId = this.props.tutorial._id;
var currentTask = this.props.step;
- var status = this.props.status.filter(status => status._id === tutorialId)[0];
- var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
+ var status = this.props.status.filter(
+ (status) => status._id === tutorialId
+ )[0];
+ var taskIndex = status.tasks.findIndex(
+ (task) => task._id === currentTask._id
+ );
var statusTask = status.tasks[taskIndex];
return (
-
+
- : null}
+ ) : null}
- )
+ );
})}
- :
- Es sind aktuell keine Projekte vorhanden.
- {this.props.location.pathname.replace('/', '') === 'project' ?
- Erstelle jetzt dein eigenes Projekt oder lasse dich von Projektbeispielen in der Galerie inspirieren.
- : null}
+ ) : (
+
- }
+ )}
+
+ Es sind aktuell keine Projekte vorhanden.
+
+ {this.props.location.pathname.replace("/", "") === "project" ? (
+
+ Erstelle jetzt dein{" "}
+
+ eigenes Projekt
+ {" "}
+ oder lasse dich von Projektbeispielen in der{" "}
+
+ Galerie
+ {" "}
+ inspirieren.
+
+ ) : null}
- }
+ )}
- {currentTask.headline}
-
+
+
+ {currentTask.headline}
+
+
-
-
- {Blockly.Msg.tutorials_assessment_task}
+
+
+
+ {Blockly.Msg.tutorials_assessment_task}
+
{currentTask.text}
-
-
+
+
+
);
- };
+ }
}
Assessment.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
workspaceName: PropTypes.func.isRequired,
- tutorial: PropTypes.object.isRequired
+ tutorial: PropTypes.object.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
change: state.tutorial.change,
status: state.tutorial.status,
- tutorial: state.tutorial.tutorials[0]
+ tutorial: state.tutorial.tutorials[0],
});
-export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
+export default connect(mapStateToProps, { workspaceName })(
+ withWidth()(Assessment)
+);
diff --git a/src/components/Tutorial/Builder/Badge.js b/src/components/Tutorial/Builder/Badge.js
index 88386a3..4156864 100644
--- a/src/components/Tutorial/Builder/Badge.js
+++ b/src/components/Tutorial/Builder/Badge.js
@@ -60,7 +60,6 @@ class Badge extends Component {
this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
})
.catch(err => {
- console.log(err);
});
};
diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js
index ade6dfb..fc72447 100644
--- a/src/components/Tutorial/Instruction.js
+++ b/src/components/Tutorial/Instruction.js
@@ -1,57 +1,95 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Hardware from './Hardware';
-import Requirement from './Requirement';
-import BlocklyWindow from '../Blockly/BlocklyWindow';
-
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import ReactMarkdown from 'react-markdown'
+import Hardware from "./Hardware";
+import Requirement from "./Requirement";
+import BlocklyWindow from "../Blockly/BlocklyWindow";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import ReactMarkdown from "react-markdown";
class Instruction extends Component {
-
render() {
var step = this.props.step;
var isHardware = step.hardware && step.hardware.length > 0;
var areRequirements = step.requirements && step.requirements.length > 0;
return (
- {step.headline}
- {step.text}
-
-
+ {step.headline}
+
+
+
+ {step.text}
+
+
+ {isHardware ?
+
+
- : null}
+ ) : null}
);
- };
+ }
}
-
export default Instruction;
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js
index 19387a4..5735c3f 100644
--- a/src/components/Tutorial/StepperVertical.js
+++ b/src/components/Tutorial/StepperVertical.js
@@ -85,7 +85,7 @@ class StepperVertical extends Component {
return (
- 
-
- : step.media.youtube ?
- /*16:9; width: 800px; height: width/16*9=450px*/
-
-
-
- : null
- : null}
- {step.xml ?
-
-
-
-
+
+
+ ) : step.media.youtube ? (
+ /*16:9; width: 800px; height: width/16*9=450px*/
+
+
+
+ ) : null
+ ) : null}
+ {step.xml ? (
+
+
+
+ {console.log(i); this.props.tutorialStep(i)}}>
+
{ this.props.tutorialStep(i)}}>
{
+ onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
- onSubmit = e => {
+ onSubmit = (e) => {
e.preventDefault();
const { email, password } = this.state;
- if (email !== '' && password !== '') {
+ if (email !== "" && password !== "") {
// create user object
const user = {
email,
- password
+ password,
};
this.props.login(user);
} else {
- this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
+ this.setState({
+ snackbar: true,
+ key: Date.now(),
+ message: Blockly.Msg.messages_login_error,
+ type: "error",
+ });
}
};
@@ -86,12 +98,25 @@ export class Login extends Component {
render() {
return (
diff --git a/src/reducers/authReducer.js b/src/reducers/authReducer.js
index 5fc01bd..55e6450 100644
--- a/src/reducers/authReducer.js
+++ b/src/reducers/authReducer.js
@@ -1,59 +1,69 @@
-import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
-
+import {
+ MYBADGES_CONNECT,
+ MYBADGES_DISCONNECT,
+ USER_LOADED,
+ USER_LOADING,
+ AUTH_ERROR,
+ LOGIN_SUCCESS,
+ LOGIN_FAIL,
+ LOGOUT_SUCCESS,
+ LOGOUT_FAIL,
+ REFRESH_TOKEN_SUCCESS,
+} from "../actions/types";
const initialState = {
- token: localStorage.getItem('token'),
- refreshToken: localStorage.getItem('refreshToken'),
+ token: localStorage.getItem("token"),
+ refreshToken: localStorage.getItem("refreshToken"),
isAuthenticated: null,
progress: true,
- user: null
+ user: null,
};
-export default function foo(state = initialState, action){
- switch(action.type){
+export default function foo(state = initialState, action) {
+ switch (action.type) {
case USER_LOADING:
return {
...state,
- progress: true
+ progress: true,
};
case USER_LOADED:
return {
...state,
isAuthenticated: true,
progress: false,
- user: action.payload
+ user: action.payload,
};
case LOGIN_SUCCESS:
case REFRESH_TOKEN_SUCCESS:
- localStorage.setItem('token', action.payload.token);
- localStorage.setItem('refreshToken', action.payload.refreshToken);
+ localStorage.setItem("token", action.payload.token);
+ localStorage.setItem("refreshToken", action.payload.refreshToken);
return {
...state,
user: action.payload.user,
token: action.payload.token,
refreshToken: action.payload.refreshToken,
isAuthenticated: true,
- progress: false
+ progress: false,
};
case MYBADGES_CONNECT:
case MYBADGES_DISCONNECT:
return {
...state,
- user: action.payload
+ user: action.payload,
};
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT_SUCCESS:
case LOGOUT_FAIL:
- localStorage.removeItem('token');
- localStorage.removeItem('refreshToken');
+ localStorage.removeItem("token");
+ localStorage.removeItem("refreshToken");
return {
...state,
token: null,
refreshToken: null,
user: null,
isAuthenticated: false,
- progress: false
+ progress: false,
};
default:
return state;
diff --git a/yarn.lock b/yarn.lock
index 85a7198..b01521a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1022,6 +1022,11 @@
dependencies:
"@blockly/plugin-modal" "^1.20200427.4"
+"@blockly/zoom-to-fit@^1.0.5":
+ "integrity" "sha512-+dm8bpJB0AkrEMQPr7nEMYKiEA8Loh7V8ZVa0s25PkxGP9BLqt9NIxUCQjshInhCr11Dlctq7C7noqK+tTVS4w=="
+ "resolved" "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-1.0.5.tgz"
+ "version" "1.0.5"
+
"@cnakazawa/watch@^1.0.3":
version "1.0.4"
resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
-
this.resetWorkspace()}
+ onClick={() => this.openDialog()}
>
@@ -81,6 +92,17 @@ class ResetWorkspace extends Component {
type={this.state.type}
key={this.state.key}
/>
+
);
};
diff --git a/src/components/Workspace/SaveProject.js b/src/components/Workspace/SaveProject.js
index 733ff76..3f01ff8 100644
--- a/src/components/Workspace/SaveProject.js
+++ b/src/components/Workspace/SaveProject.js
@@ -127,7 +127,6 @@ class SaveProject extends Component {
}
render() {
- console.log(1, this.props);
return (
+
- {Blockly.Msg.login_osem_account_01} openSenseMap {Blockly.Msg.login_osem_account_02}.
+ {Blockly.Msg.login_osem_account_01}{" "}
+
+ openSenseMap
+ {" "}
+ {Blockly.Msg.login_osem_account_02}.
+ endAdornment: (
+
-
+ ),
}}
onChange={this.onChange}
fullWidth={true}
/>
@@ -156,12 +213,14 @@ Login.propTypes = {
message: PropTypes.object.isRequired,
login: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired,
- progress: PropTypes.bool.isRequired
+ progress: PropTypes.bool.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
message: state.message,
- progress: state.auth.progress
+ progress: state.auth.progress,
});
-export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
+export default connect(mapStateToProps, { login, clearMessages })(
+ withRouter(Login)
+);
diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js
index b4280f4..cf8014b 100644
--- a/src/components/Workspace/Compile.js
+++ b/src/components/Workspace/Compile.js
@@ -1,127 +1,172 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { workspaceName } from '../../actions/workspaceActions';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { workspaceName } from "../../actions/workspaceActions";
-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 { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Blockly from 'blockly/core';
-import Copy from '../copy.svg';
+import * as Blockly from "blockly/core";
+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) => ({
backdrop: {
zIndex: theme.zIndex.drawer + 1,
- color: '#fff',
+ color: "#fff",
},
iconButton: {
backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
- width: '40px',
- height: '40px',
- '&:hover': {
+ width: "40px",
+ height: "40px",
+ "&:hover": {
backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
- }
+ },
},
button: {
backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
- '&:hover': {
+ "&:hover": {
backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
- }
- }
+ },
+ },
});
+const Drawer = withStyles((theme) => ({
+ paperAnchorBottom: {
+ backgroundColor: "black",
+ height: "20vH",
+ },
+}))(MuiDrawer);
class Compile extends Component {
-
constructor(props) {
super(props);
this.state = {
progress: false,
open: false,
file: false,
- title: '',
- content: '',
- name: props.name
+ title: "",
+ content: "",
+ name: props.name,
+ error: "",
};
}
+ componentDidMount() {
+ Prism.highlightAll();
+ }
+
componentDidUpdate(props) {
if (props.name !== this.props.name) {
this.setState({ name: this.props.name });
}
+ Prism.highlightAll();
}
-
compile = () => {
this.setState({ progress: true });
const data = {
- "board": process.env.REACT_APP_BOARD,
- "sketch": this.props.arduino
+ board: process.env.REACT_APP_BOARD,
+ sketch: this.props.arduino,
};
fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
method: "POST",
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(data)
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data),
})
- .then(response => response.json())
- .then(data => {
+ .then((response) => response.json())
+ .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.createFileName();
});
})
- .catch(err => {
+ .catch((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 = () => {
const id = this.state.id;
const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
this.toggleDialog();
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 });
- }
+ };
toggleDialog = () => {
this.setState({ open: !this.state, progress: false });
- }
+ };
createFileName = () => {
if (this.state.name) {
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) => {
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() {
return (
{Blockly.Msg.login_head}
-
-- {Blockly.Msg.login_lostpassword} +
+ + {Blockly.Msg.login_lostpassword} +
-
- {Blockly.Msg.login_createaccount}openSenseMap.
+
+ {Blockly.Msg.login_createaccount} + + openSenseMap + + .
- {this.props.iconButton ?
-
+ {this.props.iconButton ? (
+
this.compile()}
@@ -129,21 +174,73 @@ class Compile extends Component {
- :
-
);
- };
+ }
}
Compile.propTypes = {
arduino: PropTypes.string.isRequired,
name: PropTypes.string,
- workspaceName: PropTypes.func.isRequired
+ workspaceName: PropTypes.func.isRequired,
};
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
arduino: state.workspace.code.arduino,
- name: state.workspace.name
+ name: state.workspace.name,
});
-
-export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(Compile));
+export default connect(mapStateToProps, { workspaceName })(
+ withStyles(styles, { withTheme: true })(Compile)
+);
diff --git a/src/components/Workspace/ResetWorkspace.js b/src/components/Workspace/ResetWorkspace.js
index 37a03e0..ba4161c 100644
--- a/src/components/Workspace/ResetWorkspace.js
+++ b/src/components/Workspace/ResetWorkspace.js
@@ -16,6 +16,8 @@ import Tooltip from '@material-ui/core/Tooltip';
import { faShare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Dialog from '../Dialog';
+import Button from '@material-ui/core/Button';
const styles = (theme) => ({
button: {
@@ -39,12 +41,21 @@ class ResetWorkspace extends Component {
this.inputRef = React.createRef();
this.state = {
snackbar: false,
+ open: false,
type: '',
key: '',
message: '',
};
}
+ toggleDialog = () => {
+ this.setState({ open: !this.state});
+ }
+
+ openDialog = () => {
+ this.setState({open: true});
+ }
+
resetWorkspace = () => {
const workspace = Blockly.getMainWorkspace();
Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y
@@ -69,7 +80,7 @@ class ResetWorkspace extends Component {