diff --git a/src/components/User/Account.js b/src/components/User/Account.js
new file mode 100644
index 0000000..09a9545
--- /dev/null
+++ b/src/components/User/Account.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import Breadcrumbs from '../Breadcrumbs';
+import Alert from '../Alert';
+
+import Grid from '@material-ui/core/Grid';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+
+export class Account extends Component {
+
+ render(){
+ const {user} = this.props;
+ return(
+
+
+
+
Account
+
+ Alle Angaben stammen von
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.props.user.boxes.length < 1 ?
+
+ Du hast noch keine senseBox registriert. Besuche
+ :
+ Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
+ }
+
+
+ {this.props.user.boxes.map((box, i) => {
+ var sensors = box.sensors.map(sensor => sensor.title );
+ return (
+
+
+
+
+ {box.name}
+
+
+
+
+
+
+
+ Modell:
+ {box.model}
+
+
+
+
+
+
+
+
+ Standort:
+ {`${box.exposure} (lon: ${box.currentLocation.coordinates[0]}, lat: ${box.currentLocation.coordinates[1]})`}
+
+
+
+
+
+
+
+
+ Sensoren:
+ {sensors.join(', ')}
+
+
+
+
+
+
+ )
+ })}
+
+
+ );
+ }
+}
+
+Account.propTypes = {
+ user: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+ user: state.auth.user
+});
+
+export default connect(mapStateToProps, null)(Account);
diff --git a/src/components/User/Login.js b/src/components/User/Login.js
new file mode 100644
index 0000000..13d4497
--- /dev/null
+++ b/src/components/User/Login.js
@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { login } from '../../actions/authActions'
+import { clearMessages } from '../../actions/messageActions'
+
+import { withRouter } from 'react-router-dom';
+
+import Snackbar from '../Snackbar';
+import Alert from '../Alert';
+import Breadcrumbs from '../Breadcrumbs';
+
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import TextField from '@material-ui/core/TextField';
+import Divider from '@material-ui/core/Divider';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Link from '@material-ui/core/Link';
+
+
+export class Login extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ redirect: props.location.state ? props.location.state.from.pathname : null,
+ email: '',
+ password: '',
+ snackbar: false,
+ type: '',
+ key: '',
+ message: '',
+ showPassword: false
+ };
+ }
+
+ componentDidUpdate(props){
+ console.log(this.state.redirect);
+ const { message } = this.props;
+ if (message !== props.message) {
+ if(message.id === 'LOGIN_SUCCESS'){
+ if(this.state.redirect){
+ this.props.history.push(this.state.redirect);
+ }
+ else{
+ this.props.history.goBack();
+ }
+ }
+ // Check for login error
+ 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' });
+ }
+ }
+ }
+
+ onChange = e => {
+ this.setState({ [e.target.name]: e.target.value });
+ };
+
+ onSubmit = e => {
+ e.preventDefault();
+ const {email, password} = this.state;
+ if(email !== '' && password !== ''){
+ // create user object
+ const user = {
+ email,
+ password
+ };
+ this.props.login(user);
+ } else {
+ this.setState({ snackbar: true, key: Date.now(), message: 'Gib sowohl ein Benutzername als auch ein Passwort ein.', type: 'error' });
+ }
+ };
+
+ handleClickShowPassword = () => {
+ this.setState({ showPassword: !this.state.showPassword });
+ };
+
+ handleMouseDownPassword = (e) => {
+ e.preventDefault();
+ };
+
+ render(){
+ return(
+
+
+
+
+
Anmelden
+
+ Zur Anmeldung ist ein Konto auf
+
+
+
+
+
+
+ }}
+ onChange={this.onChange}
+ fullWidth={true}
+ />
+
+
+ {this.props.progress ?
+
+ : 'Anmelden'}
+
+
+
+
+
+ Du hast noch kein Konto? Registriere dich auf
+
+
+ );
+ }
+}
+
+Login.propTypes = {
+ message: PropTypes.object.isRequired,
+ login: PropTypes.func.isRequired,
+ clearMessages: PropTypes.func.isRequired,
+ message: PropTypes.object.isRequired,
+ progress: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+ message: state.message,
+ progress: state.auth.progress
+});
+
+export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
diff --git a/src/components/User/MyBadges.js b/src/components/User/MyBadges.js
new file mode 100644
index 0000000..4d7dc47
--- /dev/null
+++ b/src/components/User/MyBadges.js
@@ -0,0 +1,260 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { connectMyBadges, disconnectMyBadges } from '../../actions/authActions';
+
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';
+
+import Breadcrumbs from '../Breadcrumbs';
+import Alert from '../Alert';
+
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import Divider from '@material-ui/core/Divider';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Avatar from '@material-ui/core/Avatar';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+const styles = (theme) => ({
+ root: {
+ '& label.Mui-focused': {
+ color: '#aed9c8'
+ },
+ '& .MuiOutlinedInput-root': {
+ '&.Mui-focused fieldset': {
+ borderColor: '#aed9c8'
+ },
+ borderRadius: '0.75rem'
+ }
+ },
+ text: {
+ fontFamily: [
+ '"Open Sans"',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ ].join(','),
+ fontSize: 16
+ }
+});
+
+export class MyBadges extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ username: '',
+ password: '',
+ showPassword: false,
+ msg: '',
+ badges: [],
+ progress: false
+ };
+ }
+
+ componentDidMount(){
+ if(this.props.user.badge){
+ this.getBadges();
+ }
+ }
+
+ componentDidUpdate(props){
+ const { message } = this.props;
+ if (message !== props.message) {
+ // Check for login error
+ if(message.id === 'MYBADGES_CONNECT_FAIL'){
+ this.setState({msg: 'Der Benutzername oder das Passwort ist nicht korrekt.', username: '', password: '', showPassword: false});
+ }
+ else if(message.id === 'MYBADGES_CONNECT_SUCCESS'){
+ this.getBadges();
+ }
+ else if(message.id === 'MYBADGES_DISCONNECT_SUCCESS' || message.id === 'MYBADGES_DISCONNECT_FAIL'){
+ this.setState({progress: false});
+ }
+ else {
+ this.setState({msg: null});
+ }
+ }
+ }
+
+ getBadges = () => {
+ this.setState({progress: true});
+ axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`)
+ .then(res => {
+ this.setState({badges: res.data.badges, progress: false});
+ })
+ .catch(err => {
+ this.setState({progress: false});
+ console.log(err);
+ });
+ };
+
+ onChange = e => {
+ this.setState({ [e.target.name]: e.target.value, msg: '' });
+ };
+
+ onSubmit = e => {
+ e.preventDefault();
+ const {username, password} = this.state;
+ // create user object
+ const user = {
+ username,
+ password
+ };
+ this.props.connectMyBadges(user);
+ };
+
+ handleClickShowPassword = () => {
+ this.setState({ showPassword: !this.state.showPassword });
+ };
+
+ handleMouseDownPassword = (e) => {
+ e.preventDefault();
+ };
+
+ render(){
+ return(
+
+
+
+
+
+ {!this.props.user.badge ?
+
+ Du kannst dein Blockly-Konto mit deinem
+ : null}
+
+
+
+
+
+ {!this.props.user.badge ?
+
+ {this.state.msg ?
+
+ {this.state.msg}
+
: null
+ }
+
+
+
+
+
+ }}
+ onChange={this.onChange}
+ fullWidth={true}
+ />
+
+
+ Anmelden
+
+
+
+
+
+ Du hast noch kein Konto?
+
+ :
+ MyBadges-Konto ist erfolgreich verknüpft.
+ {this.props.disconnectMyBadges(); this.setState({badges: [], progress: true});}}>Konto trennen
+
}
+
+
+
+ {this.props.user.badge && !this.state.progress ?
+
+
+ {this.state.badges && this.state.badges.length > 0 ?
+
+ Du hast {this.state.badges.length} {this.state.badges.length === 1 ? 'Badge' : 'Badges'} im Kontext Blockly for senseBox erreicht.
+
+ : null}
+
+
+ {this.state.badges && this.state.badges.length > 0 ?
+ this.state.badges.map(badge => (
+
+
+ {badge.image && badge.image.path ?
+
+ {badge.name}
+
+
+
+ ))
+ :
+
+
+ Du hast noch keine Badges im Kontext senseBox for Blockly erreicht.
+
+ }
+
+
+ : null}
+
+
+ );
+ }
+}
+
+MyBadges.propTypes = {
+ connectMyBadges: PropTypes.func.isRequired,
+ disconnectMyBadges: PropTypes.func.isRequired,
+ message: PropTypes.object.isRequired,
+ user: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+ message: state.message,
+ user: state.auth.user
+});
+
+export default connect(mapStateToProps, { connectMyBadges, disconnectMyBadges })(withStyles(styles, { withTheme: true })(withRouter(MyBadges)));
diff --git a/src/components/Compile.js b/src/components/Workspace/Compile.js
similarity index 81%
rename from src/components/Compile.js
rename to src/components/Workspace/Compile.js
index 946466f..f8a204a 100644
--- a/src/components/Compile.js
+++ b/src/components/Workspace/Compile.js
@@ -1,11 +1,11 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
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 Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
@@ -15,7 +15,7 @@ import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
-import { faCogs } from "@fortawesome/free-solid-svg-icons";
+import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
@@ -23,13 +23,21 @@ const styles = (theme) => ({
zIndex: theme.zIndex.drawer + 1,
color: '#fff',
},
- button: {
- backgroundColor: theme.palette.primary.main,
+ iconButton: {
+ backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
width: '40px',
height: '40px',
'&:hover': {
- backgroundColor: theme.palette.primary.main,
+ backgroundColor: theme.palette.button.compile,
+ color: theme.palette.primary.contrastText,
+ }
+ },
+ button: {
+ backgroundColor: theme.palette.button.compile,
+ color: theme.palette.primary.contrastText,
+ '&:hover': {
+ backgroundColor: theme.palette.button.compile,
color: theme.palette.primary.contrastText,
}
}
@@ -99,7 +107,7 @@ class Compile extends Component {
this.download();
}
else {
- this.setState({ file: true, open: true, title: 'Blöcke kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
+ 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\'.' });
}
}
@@ -111,17 +119,17 @@ class Compile extends Component {
return (
{this.props.iconButton ?
-
+
this.compile()}
>
-
:
- this.compile()}>
- this.compile()}>
+
}
diff --git a/src/components/Workspace/DeleteProject.js b/src/components/Workspace/DeleteProject.js
new file mode 100644
index 0000000..3df813d
--- /dev/null
+++ b/src/components/Workspace/DeleteProject.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { deleteProject } from '../../actions/projectActions';
+
+import { withRouter } from 'react-router-dom';
+
+import Snackbar from '../Snackbar';
+
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ buttonTrash: {
+ backgroundColor: theme.palette.error.dark,
+ color: theme.palette.primary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.error.dark,
+ color: theme.palette.primary.contrastText,
+ }
+ }
+});
+
+
+
+class DeleteProject extends Component {
+
+ constructor(props) {
+ super(props);
+ this.inputRef = React.createRef();
+ this.state = {
+ snackbar: false,
+ type: '',
+ key: '',
+ message: ''
+ };
+ }
+
+ componentDidUpdate(props) {
+ if(this.props.message !== props.message){
+ if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+ this.props.history.push(`/${this.props.projectType}`);
+ }
+ else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){
+ this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' });
+ }
+ }
+ }
+
+ render() {
+ return (
+
+
+ this.props.deleteProject(this.props.projectType, this.props.project._id)}
+ >
+
+
+
+
+ );
+ };
+}
+
+DeleteProject.propTypes = {
+ deleteProject: PropTypes.func.isRequired,
+ message: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+ message: state.message,
+});
+
+
+export default connect(mapStateToProps, { deleteProject })(withStyles(styles, { withTheme: true })(withRouter(DeleteProject)));
diff --git a/src/components/Workspace/DownloadProject.js b/src/components/Workspace/DownloadProject.js
new file mode 100644
index 0000000..9b30273
--- /dev/null
+++ b/src/components/Workspace/DownloadProject.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { saveAs } from 'file-saver';
+
+import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
+
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ button: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ }
+ }
+});
+
+
+class DownloadProject extends Component {
+
+ downloadXmlFile = () => {
+ var code = this.props.xml;
+ var fileName = detectWhitespacesAndReturnReadableResult(this.props.name);
+ fileName = `${fileName}.xml`
+ var blob = new Blob([code], { type: 'text/xml' });
+ saveAs(blob, fileName);
+ }
+
+ render() {
+ return (
+
+
+ this.downloadXmlFile()}
+ >
+
+
+
+ );
+ };
+}
+
+DownloadProject.propTypes = {
+ xml: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+ xml: state.workspace.code.xml,
+ name: state.workspace.name
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(DownloadProject));
diff --git a/src/components/Workspace/OpenProject.js b/src/components/Workspace/OpenProject.js
new file mode 100644
index 0000000..6038a49
--- /dev/null
+++ b/src/components/Workspace/OpenProject.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { clearStats, workspaceName } from '../../actions/workspaceActions';
+
+import * as Blockly from 'blockly/core';
+
+import Snackbar from '../Snackbar';
+import Dialog from '../Dialog';
+
+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 Typography from '@material-ui/core/Typography';
+
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ button: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ }
+ }
+});
+
+
+class OpenProject extends Component {
+
+ constructor(props) {
+ super(props);
+ this.inputRef = React.createRef();
+ this.state = {
+ title: '',
+ content: '',
+ open: false,
+ snackbar: false,
+ type: '',
+ key: '',
+ message: ''
+ };
+ }
+
+ toggleDialog = () => {
+ this.setState({ open: !this.state, title: '', content: '' });
+ }
+
+ uploadXmlFile = (xmlFile) => {
+ if (xmlFile.type !== 'text/xml') {
+ this.setState({ open: true, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
+ }
+ else {
+ var reader = new FileReader();
+ reader.readAsText(xmlFile);
+ reader.onloadend = () => {
+ var xmlDom = null;
+ try {
+ xmlDom = Blockly.Xml.textToDom(reader.result);
+ const workspace = Blockly.getMainWorkspace();
+ var xmlBefore = this.props.xml;
+ workspace.clear();
+ this.props.clearStats();
+ Blockly.Xml.domToWorkspace(xmlDom, workspace);
+ if (workspace.getAllBlocks().length < 1) {
+ Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace)
+ this.setState({ open: true, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
+ }
+ else {
+ if (!this.props.assessment) {
+ var extensionPosition = xmlFile.name.lastIndexOf('.');
+ this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
+ }
+ this.setState({ snackbar: true, type: 'success', key: Date.now(), message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
+ }
+ } catch (err) {
+ this.setState({ open: true, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
+ }
+ };
+ }
+ }
+
+ render() {
+ return (
+
+
+
{ this.uploadXmlFile(e.target.files[0]) }}
+ id="open-blocks"
+ type="file"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ this.resetWorkspace()}
+ >
+
+
+
+
+ );
+ };
+}
+
+ResetWorkspace.propTypes = {
+ clearStats: PropTypes.func.isRequired,
+ onChangeCode: PropTypes.func.isRequired,
+ workspaceName: PropTypes.func.isRequired
+};
+
+export default connect(null, { clearStats, onChangeCode, workspaceName })(withStyles(styles, { withTheme: true })(ResetWorkspace));
diff --git a/src/components/Workspace/SaveProject.js b/src/components/Workspace/SaveProject.js
new file mode 100644
index 0000000..0a46cf0
--- /dev/null
+++ b/src/components/Workspace/SaveProject.js
@@ -0,0 +1,200 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { updateProject, setDescription } from '../../actions/projectActions';
+
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';
+
+import Snackbar from '../Snackbar';
+import Dialog from '../Dialog';
+
+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 TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import { faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ button: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ }
+ }
+});
+
+
+
+class SaveProject extends Component {
+
+ constructor(props) {
+ super(props);
+ this.inputRef = React.createRef();
+ this.state = {
+ title: '',
+ content: '',
+ open: false,
+ description: props.description,
+ snackbar: false,
+ type: '',
+ key: '',
+ message: '',
+ menuOpen: false,
+ anchor: '',
+ projectType: props.projectType
+ };
+ }
+
+ componentDidUpdate(props) {
+ if (props.projectType !== this.props.projectType) {
+ this.setState({ projectType: this.props.projectType });
+ }
+ if (props.description !== this.props.description) {
+ this.setState({ description: this.props.description });
+ }
+ if(this.props.message !== props.message){
+ if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
+ this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+ }
+ else if(this.props.message.id === 'GALLERY_UPDATE_SUCCESS'){
+ this.setState({ snackbar: true, key: Date.now(), message: `Das Galerie-Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+ }
+ else if(this.props.message.id === 'PROJECT_UPDATE_FAIL'){
+ this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.`, type: 'error' });
+ }
+ else if(this.props.message.id === 'GALLERY_UPDATE_FAIL'){
+ this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.`, type: 'error' });
+ }
+ }
+ }
+
+ toggleMenu = (e) => {
+ this.setState({ menuOpen: !this.state.menuOpen, anchor: e.currentTarget });
+ };
+
+ toggleDialog = () => {
+ this.setState({ open: !this.state, title: '', content: '' });
+ }
+
+ saveProject = () => {
+ var body = {
+ xml: this.props.xml,
+ title: this.props.name
+ };
+ if(this.state.projectType === 'gallery'){
+ body.description = this.state.description;
+ }
+ axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body)
+ .then(res => {
+ var project = res.data[this.state.projectType];
+ this.props.history.push(`/${this.state.projectType}/${project._id}`);
+ })
+ .catch(err => {
+ this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Speichern des ${this.state.projectType === 'gallery' ? 'Galerie-':''}Projektes. Versuche es noch einmal.`, type: 'error' });
+ window.scrollTo(0, 0);
+ });
+ }
+
+ setDescription = (e) => {
+ this.setState({ description: e.target.value });
+ }
+
+ workspaceDescription = () => {
+ this.props.setDescription(this.state.description);
+ this.setState({projectType: 'gallery'},
+ () => this.saveProject()
+ );
+ }
+
+ render() {
+ console.log(1, this.props);
+ return (
+
+
+ this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => {this.setState({projectType: 'project'}, () => this.saveProject())}}
+ >
+
+
+
+ {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({projectType: 'project'}, () => this.saveProject())}}
+ >
+ {this.state.projectType === 'project' ? 'Projekt aktualisieren' : 'Projekt erstellen'}
+
+ {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.'});}}
+ >
+ {this.state.projectType === 'gallery' ? 'Galerie-Projekt aktualisieren' : 'Galerie-Projekt erstellen'}
+
+
+
+
+
{this.toggleDialog(); this.setState({ description: this.props.description });}}
+ onClick={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
+ button={'Abbrechen'}
+ >
+
+ {this.workspaceDescription(); this.toggleDialog();}}>Eingabe
+
+
+
+ ${css}">${content} `;
+ var fileName = detectWhitespacesAndReturnReadableResult(this.props.name);
+ // this.props.workspaceName(this.state.name);
+ fileName = `${fileName}.svg`
+ var blob = new Blob([xml], { type: 'image/svg+xml;base64' });
+ saveAs(blob, fileName);
+ }
+ }
+
+ render() {
+ return (
+
+
+ this.getSvg()}
+ >
+
+
+
+ );
+ };
+}
+
+Screenshot.propTypes = {
+ name: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+ name: state.workspace.name,
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(Screenshot));
diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js
new file mode 100644
index 0000000..060e0e9
--- /dev/null
+++ b/src/components/Workspace/ShareProject.js
@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { shareProject } from '../../actions/projectActions';
+import { clearMessages } from '../../actions/messageActions';
+
+import moment from 'moment';
+
+import Dialog from '../Dialog';
+import Snackbar from '../Snackbar';
+
+import { Link } from 'react-router-dom';
+
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+
+import { faShareAlt, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ button: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ }
+ },
+ link: {
+ color: theme.palette.primary.main,
+ textDecoration: 'none',
+ '&:hover': {
+ color: theme.palette.primary.main,
+ textDecoration: 'underline'
+ }
+ }
+});
+
+
+class WorkspaceFunc extends Component {
+
+ constructor(props) {
+ super(props);
+ this.inputRef = React.createRef();
+ this.state = {
+ snackbar: false,
+ type: '',
+ key: '',
+ message: '',
+ title: '',
+ content: '',
+ open: false,
+ id: '',
+ };
+ }
+
+ componentDidUpdate(props) {
+ if(this.props.message !== props.message){
+ if(this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
+ this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.message.status });
+ }
+ else if(this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
+ this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
+ window.scrollTo(0, 0);
+ }
+ }
+ }
+
+ componentWillUnmount(){
+ this.props.clearMessages();
+ }
+
+ toggleDialog = () => {
+ this.setState({ open: !this.state, title: '', content: '' });
+ }
+
+ shareBlocks = () => {
+ if(this.props.projectType === 'project' && this.props.project.shared){
+ // project is already shared
+ this.setState({ open: true, title: 'Programm teilen', id: this.props.project._id });
+ }
+ else {
+ this.props.shareProject(this.props.name || this.props.project.title, this.props.projectType, this.props.project ? this.props.project._id : undefined);
+ }
+ }
+
+ render() {
+ return (
+
+
+ this.shareBlocks()}
+ >
+
+
+
+
+
+
+ Über den folgenden Link kannst du dein Programm teilen:
+
+ {
+ navigator.clipboard.writeText(`${window.location.origin}/share/${this.state.id}`);
+ this.setState({ snackbar: true, key: Date.now(), message: 'Link erfolgreich in Zwischenablage gespeichert.', type: 'success' });
+ }}
+ >
+
+
+ {this.props.project && this.props.project.shared && this.props.message.id !== 'SHARE_SUCCESS' ?
+ {`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
+ moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
+ moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
+ `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
+ : `${moment(this.props.project.shared).diff(moment().utc(), 'hours')} Stunden`
+ : `${moment(this.props.project.shared).diff(moment().utc(), 'days')} Tage`} gültig.`}
+ : {`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`} }
+
+
+
+
+ {!this.props.assessment ?
+
+ );
+ };
+}
+
+WorkspaceFunc.propTypes = {
+ user: PropTypes.object
+};
+
+const mapStateToProps = state => ({
+ user: state.auth.user
+});
+
+export default connect(mapStateToProps, null)(WorkspaceFunc);
diff --git a/src/components/Workspace/WorkspaceName.js b/src/components/Workspace/WorkspaceName.js
new file mode 100644
index 0000000..9efe915
--- /dev/null
+++ b/src/components/Workspace/WorkspaceName.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
+import { setDescription, updateProject } from '../../actions/projectActions';
+
+import Snackbar from '../Snackbar';
+import Dialog from '../Dialog';
+
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+
+import { faPen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+ workspaceName: {
+ backgroundColor: theme.palette.secondary.main,
+ borderRadius: '25px',
+ display: 'inline-flex',
+ cursor: 'pointer',
+ '&:hover': {
+ color: theme.palette.primary.main,
+ }
+ }
+});
+
+
+class WorkspaceName extends Component {
+
+ constructor(props) {
+ super(props);
+ this.inputRef = React.createRef();
+ this.state = {
+ title: '',
+ content: '',
+ open: false,
+ name: props.name,
+ description: props.description,
+ snackbar: false,
+ type: '',
+ key: '',
+ message: ''
+ };
+ }
+
+ componentDidUpdate(props) {
+ if (props.name !== this.props.name) {
+ this.setState({ name: this.props.name });
+ }
+ if (props.description !== this.props.description) {
+ this.setState({ description: this.props.description });
+ }
+ }
+
+ toggleDialog = () => {
+ this.setState({ open: !this.state, title: '', content: '' });
+ }
+
+ setFileName = (e) => {
+ this.setState({ name: e.target.value });
+ }
+
+ setDescription = (e) => {
+ this.setState({ description: e.target.value });
+ }
+
+ renameWorkspace = () => {
+ this.props.workspaceName(this.state.name);
+ this.toggleDialog();
+ if(this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
+ if(this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
+ this.props.setDescription(this.state.description);
+ }
+ if(this.state.projectType === 'gallery'){
+ this.saveGallery();
+ } else {
+ this.props.updateProject(this.props.projectType, this.props.project._id);
+ }
+ } else {
+ this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
+ }
+ }
+
+ render() {
+ return (
+
+
+ {if(this.props.multiple){this.props.workspaceName(this.props.project.title);if(this.props.projectType === 'gallery'){this.props.setDescription(this.props.project.description);}} this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern': this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
+ >
+ {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ?
+
{this.props.name}
+ : null}
+
+
+
+
+
+
{this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
+ onClick={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
+ button={'Abbrechen'}
+ >
+
+ {this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ?
+
+
+ :
}
+
{ this.renameWorkspace(); this.toggleDialog(); }}>Eingabe
+
+
- ${css}">${content} `;
- var fileName = detectWhitespacesAndReturnReadableResult(this.state.name);
- this.props.workspaceName(this.state.name);
- fileName = `${fileName}.svg`
- var blob = new Blob([xml], { type: 'image/svg+xml;base64' });
- saveAs(blob, fileName);
- }
- }
-
- createFileName = (filetype) => {
- this.setState({ file: filetype }, () => {
- if (this.state.name) {
- this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg()
- }
- else {
- this.setState({ saveFile: true, file: filetype, open: true, title: this.state.file === 'xml' ? 'Blöcke speichern' : 'Screenshot erstellen', content: `Bitte gib einen Namen für die Bennenung der ${this.state.file === 'xml' ? 'XML' : 'SVG'}-Datei ein und bestätige diesen mit einem Klick auf 'Eingabe'.` });
- }
- });
- }
-
- setFileName = (e) => {
- this.setState({ name: e.target.value });
- }
-
- uploadXmlFile = (xmlFile) => {
- if (xmlFile.type !== 'text/xml') {
- this.setState({ open: true, file: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
- }
- else {
- var reader = new FileReader();
- reader.readAsText(xmlFile);
- reader.onloadend = () => {
- var xmlDom = null;
- try {
- xmlDom = Blockly.Xml.textToDom(reader.result);
- const workspace = Blockly.getMainWorkspace();
- var xmlBefore = this.props.xml;
- workspace.clear();
- this.props.clearStats();
- Blockly.Xml.domToWorkspace(xmlDom, workspace);
- if (workspace.getAllBlocks().length < 1) {
- Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace)
- this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
- }
- else {
- if (!this.props.assessment) {
- var extensionPosition = xmlFile.name.lastIndexOf('.');
- this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
- }
- this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
- }
- } catch (err) {
- this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
- }
- };
- }
- }
-
- renameWorkspace = () => {
- this.props.workspaceName(this.state.name);
- this.toggleDialog();
- this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
- }
-
- resetWorkspace = () => {
- const workspace = Blockly.getMainWorkspace();
- Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y
- // if events are disabled, then the workspace will be cleared AND the blocks are not in the trashcan
- const xmlDom = Blockly.Xml.textToDom(initialXml)
- Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
- Blockly.Events.enable();
- workspace.options.maxBlocks = Infinity;
- this.props.onChangeCode();
- this.props.clearStats();
- if (!this.props.assessment) {
- this.props.workspaceName(null);
- }
- this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
- }
-
-
-
- render() {
- return (
-
- {!this.props.assessment ?
-
- { this.setState({ file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
- {this.props.name && !isWidthDown('xs', this.props.width) ?
{this.props.name} : null}
-
-
-
- : null}
- {this.props.assessment ?
:
}
-
- { this.createFileName('xml'); }}
- >
-
-
- {!this.props.assessment?
-
-
{ this.uploadXmlFile(e.target.files[0]) }}
- id="open-blocks"
- type="file"
- />
-
-
-
-
-
-
-
- : null}
- {!this.props.assessment?
-
- { this.createFileName('svg'); }}
- >
-
-
- : null}
-
- this.resetWorkspace()}
- >
-
-
- {!this.props.assessment?
-
- this.shareBlocks()}
- >
-
-
- :null}
-
-
- Dein Link wurde erstellt.
-
-
- Über den folgenden Link kannst du dein Programm teilen.
-
-
-
-
- Cancel
-
-
-
-
-
{ this.toggleDialog(); this.setState({ name: this.props.name }) } : this.toggleDialog}
- button={this.state.file ? 'Abbrechen' : 'Schließen'}
- >
- {this.state.file ?
-
- { this.state.saveFile ? this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg() : this.renameWorkspace(); this.toggleDialog(); }}>Eingabe
-
- : null}
-
-
-
-
-