first Blockly functionalities

Attention: the buttons currently trigger an error

src/components/ClearWorkspace.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { clearStats } from '../actions/workspaceActions';
+
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+
+import { faTrashRestore } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+class ClearWorkspace extends Component {
+
+  clearWorkspace = () => {
+    this.props.newWorkspace.clear();
+    this.props.clearStats();
+  }
+
+  render() {
+    return (
+      <ListItem button onClick={() => {this.clearWorkspace(); this.props.onClick();}}>
+        <ListItemIcon><FontAwesomeIcon icon={faTrashRestore} /></ListItemIcon>
+        <ListItemText primary='Zurücksetzen' />
+      </ListItem>
+    );
+  };
+}
+
+ClearWorkspace.propTypes = {
+  newWorkspace: PropTypes.object.isRequired,
+  clearStats: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+  newWorkspace: state.workspace.new
+});
+
+export default connect(mapStateToProps, { clearStats })(ClearWorkspace);

src/components/Home.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
 
+import WorkspaceStats from './WorkspaceStats';
+import WorkspaceFunc from './WorkspaceFunc';
+
 class Home extends Component {
   render() {
     return (
       <div>
+        <WorkspaceStats />
+        <WorkspaceFunc />
       </div>
     );
   };

src/components/MaxBlocks.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setWorkspace } from '../actions/workspaceActions';
+
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+
+class MaxBlocks extends Component {
+
+  state = {
+    max: 1,
+  }
+
+  onChange = (e) => {
+    this.setState({ [e.target.name]: e.target.value});
+  }
+
+  render() {
+    // var blockLeft = Object.keys(this.props.newWorkspace).length > 0 ? <p>{this.props.newWorkspace.remainingCapacity()} verbleibende Blöcke möglich</p> : null
+    // var error = this.state.error ? <div>{this.state.error}</div> : null;
+    return (
+      <div style={{display: 'inline', marginLeft: '10px'}}>
+        <TextField
+          style={{width: '50px'}}
+          name="max"
+          type="number"
+          onChange={this.onChange}
+          value={this.state.max}
+          variant='filled'
+        />
+        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={() => {this.props.newWorkspace.options.maxBlocks = this.state.max; this.props.setWorkspace(this.props.newWorkspace)}}>
+          Maximale Blöcke
+        </Button>
+      </div>
+    );
+  };
+}
+
+MaxBlocks.propTypes = {
+  newWorkspace: PropTypes.object.isRequired,
+  setWorkspace: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+  newWorkspace: state.workspace.new
+});
+
+export default connect(mapStateToProps, { setWorkspace })(MaxBlocks);

src/components/Navbar.js

@@ -1,28 +1,27 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 
+import ClearWorkspace from './ClearWorkspace';
+
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import MailIcon from '@material-ui/icons/Mail';
+
+import { faBars, faChevronLeft, faBuilding, faIdCard, faEnvelope, faCog, faChalkboardTeacher } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = (theme) => ({
   drawerWidth: {
     // color: theme.palette.primary.main,
-    width: window.innerWidth < 600 ? '100%' : '220px',
+    width: window.innerWidth < 600 ? '100%' : '240px',
     borderRight: `1px solid ${theme.palette.primary.main}`
   },
   appBarColor: {
@@ -58,7 +57,7 @@ class Navbar extends Component {
               onClick={this.toggleDrawer}
               style={{margin: '0 10px'}}
             >
-              <MenuIcon />
+              <FontAwesomeIcon icon={faBars} />
             </IconButton>
             <Link to={"/"} style={{textDecoration: 'none', color: 'inherit'}}>
               <Typography variant="h6" noWrap>
@@ -81,23 +80,24 @@ class Navbar extends Component {
                 Menü
               </Typography>
               <div style={{float: 'right'}}>
-                <ChevronLeftIcon style={{verticalAlign: 'middle'}}/>
+                <FontAwesomeIcon icon={faChevronLeft} />
               </div>
             </div>
           </div>
           <List>
-            {[{text: 'Tutorials', icon: <InboxIcon />}, {text: 'Einstellungen', icon: <InboxIcon />}].map((item, index) => (
+            {[{text: 'Tutorials', icon: faChalkboardTeacher}, {text: 'Einstellungen', icon: faCog}].map((item, index) => (
               <ListItem button key={index} onClick={this.toggleDrawer}>
-                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
                 <ListItemText primary={item.text} />
               </ListItem>
             ))}
+            <ClearWorkspace onClick={this.toggleDrawer}/>
           </List>
           <Divider classes={{root: this.props.classes.appBarColor}} style={{marginTop: 'auto'}}/>
           <List>
-            {[{text: 'Über uns', icon: <InboxIcon />},{text: 'Kontakt', icon: <MailIcon />}, {text: 'Impressum', icon: <InboxIcon />}].map((item, index) => (
+            {[{text: 'Über uns', icon: faBuilding},{text: 'Kontakt', icon: faEnvelope}, {text: 'Impressum', icon: faIdCard}].map((item, index) => (
               <ListItem button key={index} onClick={this.toggleDrawer}>
-                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
                 <ListItemText primary={item.text} />
               </ListItem>
             ))}

src/components/WorkspaceFunc.js

@@ -0,0 +1,72 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import MaxBlocks from './MaxBlocks';
+
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+
+class WorkspaceFunc extends Component {
+
+  state={
+    title: '',
+    content: '',
+    open: false
+  }
+
+  getArdurinoCode = () => {
+    var code = window.Ardublockly.generateArduino();
+    this.setState({title: 'Ardurino Code', content: code, open: true});
+  }
+
+  getXMLCode = () => {
+    var code = window.Ardublockly.generateXml();
+    this.setState({title: 'XML Code', content: code, open: true});
+  }
+
+  toggleDialog = () => {
+    this.setState({open: !this.state});
+  }
+
+  render() {
+    return (
+      <div style={{marginTop: '20px'}}>
+        <Dialog onClose={this.toggleDialog} open={this.state.open}>
+          <DialogTitle>{this.state.title}</DialogTitle>
+          <DialogContent dividers>
+            {this.state.content}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.toggleDialog} color="primary">
+              Schließen
+            </Button>
+          </DialogActions>
+        </Dialog>
+        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={()=>this.getArdurinoCode()}>
+          Get Adurino Code
+        </Button>
+        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={()=>this.getXMLCode()}>
+          Get XML Code
+        </Button>
+        <Button variant="contained" color="primary" onClick={()=>{var blocks = this.props.newWorkspace; console.log(blocks);}}>
+          Get workspace
+        </Button>
+        <MaxBlocks />
+      </div>
+    );
+  };
+}
+
+WorkspaceFunc.propTypes = {
+  newWorkspace: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+  newWorkspace: state.workspace.new
+});
+
+export default connect(mapStateToProps, null)(WorkspaceFunc);

src/components/WorkspaceStats.js

@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+
+import { faPuzzlePiece, faTrash, faPlus, faPen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+  stats: {
+    backgroundColor: theme.palette.primary.main,
+    display: 'inline',
+    marginLeft: '50px',
+    padding: '3px 10px',
+    borderRadius: '25%'
+  }
+});
+
+class WorkspaceStats extends Component {
+
+  render() {
+    // var check = Object.keys(this.props.newWorkspace).length > 0 && this.props.create - this.props.delete !== this.props.newWorkspace.getAllBlocks().length ?  <h1>FEHLER!</h1> : null;
+    return (
+      <div style={{marginBottom: '20px'}}>
+        <Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
+          <div>
+            <FontAwesomeIcon icon={faPuzzlePiece} />
+            <Typography style={{display: 'inline'}}> {Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.getAllBlocks().length : 0}</Typography>
+          </div>
+        </Tooltip>
+        <Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
+          <div>
+            <FontAwesomeIcon icon={faPlus} style={{marginRight: '5px'}}/>
+            <FontAwesomeIcon icon={faPuzzlePiece} />
+            <Typography style={{display: 'inline'}}> {this.props.create}</Typography>
+          </div>
+        </Tooltip>
+        <Tooltip title="Anzahl veränderter Blöcke" className={this.props.classes.stats}>
+          <div>
+            <FontAwesomeIcon icon={faPen} style={{marginRight: '5px'}}/>
+            <FontAwesomeIcon icon={faPuzzlePiece} />
+            <Typography style={{display: 'inline'}}> {this.props.change}</Typography>
+          </div>
+        </Tooltip>
+        <Tooltip title="Anzahl gelöschter Blöcke" className={this.props.classes.stats}>
+          <div>
+            <FontAwesomeIcon icon={faTrash} style={{marginRight: '5px'}}/>
+            <FontAwesomeIcon icon={faPuzzlePiece} />
+            <Typography style={{display: 'inline'}}> {this.props.delete}</Typography>
+          </div>
+        </Tooltip>
+        {Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.remainingCapacity() !== Infinity ?
+          <Tooltip title="verbleibende Blöcke" className={this.props.classes.stats}>
+            <Typography style={{display: 'inline'}}>{this.props.delete} verbleibende Blöcke</Typography>
+          </Tooltip> : null : null}
+      </div>
+    );
+  };
+}
+
+WorkspaceStats.propTypes = {
+  newWorkspace: PropTypes.object.isRequired,
+  create: PropTypes.number.isRequired,
+  change: PropTypes.number.isRequired,
+  delete: PropTypes.number.isRequired,
+  test: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  newWorkspace: state.workspace.new,
+  create: state.workspace.stats.create,
+  change: state.workspace.stats.change,
+  delete: state.workspace.stats.delete,
+  test: state.workspace.test
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(WorkspaceStats));