add feature to hide Workspace stats

src/components/Blockly/generator/procedures.js

@@ -29,7 +29,7 @@ Blockly.Arduino['arduino_functions'] = function (block) {
     return loopBranch;
 };
 
-Blockly.Arduino['procedures_defreturn'] = function (block: Block | any) {
+Blockly.Arduino['procedures_defreturn'] = function (block) {
     // Define a procedure with a return value.
     const funcName = Blockly.Arduino.variableDB_.getName(
         block.getFieldValue('NAME'),

src/components/Home.js

@@ -49,7 +49,8 @@ class Home extends Component {
     codeOn: false,
     gallery: [],
     share: [],
-    projectToLoad: undefined
+    projectToLoad: undefined,
+    stats: window.localStorage.getItem('stats'),
   }
 
   componentDidMount() {
@@ -90,8 +91,11 @@ class Home extends Component {
   render() {
     return (
       <div>
+        {this.state.stats ?
+          <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
+          : null
+        }
         <div style={{ float: 'right', height: '40px', marginBottom: '20px' }}><WorkspaceFunc /></div>
-        <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
         <Grid container spacing={2}>
           <Grid item xs={12} md={this.state.codeOn ? 8 : 12} style={{ position: 'relative' }}>
             <Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >

src/components/Settings/RenderSelector.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-export default function LanguageSelector() {
+export default function RenderSelector() {
     const classes = useStyles();
     const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
 

src/components/Settings/Settings.js

@@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import LanguageSelector from './LanguageSelector';
 import RenderSelector from './RenderSelector';
+import StatsSelector from './StatsSelector';
 
 
 class Settings extends Component {
@@ -14,6 +15,7 @@ class Settings extends Component {
                 <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
                 <LanguageSelector />
                 <RenderSelector />
+                <StatsSelector />
                 <Button
                     style={{ marginTop: '20px' }}
                     variant="contained"

src/components/Settings/StatsSelector.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 400,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function StatsSelector() {
+    const classes = useStyles();
+    const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
+
+    const handleChange = (event) => {
+        setStats(event.target.value);
+        window.localStorage.setItem('stats', event.target.value);
+    };
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={stats}
+                    onChange={handleChange}
+                >
+                    <MenuItem value={true}>On</MenuItem>
+                    <MenuItem value={false}>Off</MenuItem>
+                </Select>
+            </FormControl>
+            <p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
+        </div>
+    );
+}

src/components/WorkspaceStats.js

@@ -37,7 +37,7 @@ const styles = (theme) => ({
 
 class WorkspaceStats extends Component {
 
-  state={
+  state = {
     anchor: null
   }
 
@@ -53,69 +53,69 @@ class WorkspaceStats extends Component {
     const bigDisplay = !isWidthDown('sm', this.props.width);
     const workspace = Blockly.getMainWorkspace();
     const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
-    const stats =  <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
+    const stats = <div style={bigDisplay ? { display: 'flex' } : { display: 'inline' }}>
-                    <Tooltip title="Anzahl aktueller Blöcke" arrow>
+      <Tooltip title="Anzahl aktueller Blöcke" arrow>
-                      <Chip
+        <Chip
-                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+          style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
-                        color="primary"
+          color="primary"
-                        avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
+          avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
-                        label={workspace ? workspace.getAllBlocks().length : 0}>
+          label={workspace ? workspace.getAllBlocks().length : 0}>
-                      </Chip>
+        </Chip>
-                    </Tooltip>
+      </Tooltip>
-                    <Tooltip title="Anzahl neuer Blöcke" arrow>
+      <Tooltip title="Anzahl neuer Blöcke" arrow>
-                      <Chip
+        <Chip
-                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+          style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
-                        color="primary"
+          color="primary"
-                        avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
+          avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
-                        label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
+          label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
-                      </Chip>
+        </Chip>
-                    </Tooltip>
+      </Tooltip>
-                    <Tooltip title="Anzahl veränderter Blöcke" arrow>
+      <Tooltip title="Anzahl veränderter Blöcke" arrow>
-                      <Chip
+        <Chip
-                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+          style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
-                        color="primary"
+          color="primary"
-                        avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
+          avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
-                        label={this.props.change}>
+          label={this.props.change}>
-                      </Chip>
+        </Chip>
-                    </Tooltip>
+      </Tooltip>
-                    <Tooltip title="Anzahl bewegter Blöcke" arrow>
+      <Tooltip title="Anzahl bewegter Blöcke" arrow>
-                      <Chip
+        <Chip
-                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+          style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
-                        color="primary"
+          color="primary"
-                        avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
+          avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
-                        label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
+          label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
-                      </Chip>
+        </Chip>
-                    </Tooltip>
+      </Tooltip>
-                    <Tooltip title="Anzahl gelöschter Blöcke" arrow>
+      <Tooltip title="Anzahl gelöschter Blöcke" arrow>
-                      <Chip
+        <Chip
-                        style={remainingBlocksInfinity ? bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'} : {}}
+          style={remainingBlocksInfinity ? bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' } : {}}
-                        color="primary"
+          color="primary"
-                        avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
+          avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
-                        label={this.props.delete}>
+          label={this.props.delete}>
-                      </Chip>
+        </Chip>
-                    </Tooltip>
+      </Tooltip>
-                    {remainingBlocksInfinity ?
+      {remainingBlocksInfinity ?
-                      <Tooltip title="Verbleibende Blöcke" arrow>
+        <Tooltip title="Verbleibende Blöcke" arrow>
-                        <Chip
+          <Chip
-                          style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+            style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
-                          color="primary"
+            color="primary"
-                          label={workspace.remainingCapacity()}>
+            label={workspace.remainingCapacity()}>
-                        </Chip>
+          </Chip>
-                      </Tooltip> : null}
+        </Tooltip> : null}
-                    </div>
+    </div>
     return (
       bigDisplay ?
-        <div style={{bottom: 0, position: 'absolute'}}>
+        <div style={{ bottom: 0, position: 'absolute' }}>
           {stats}
         </div>
-      :
+        :
         <div>
           <Tooltip title='Statistiken anzeigen' arrow>
             <IconButton
               className={this.props.classes.menu}
               onClick={(event) => this.handleClick(event)}
             >
-              <FontAwesomeIcon icon={faEllipsisH} size="xs"/>
+              <FontAwesomeIcon icon={faEllipsisH} size="xs" />
             </IconButton>
           </Tooltip>
           <Popover
@@ -131,10 +131,10 @@ class WorkspaceStats extends Component {
               horizontal: 'center',
             }}
             PaperProps={{
-              style: {margin: '5px'}
+              style: { margin: '5px' }
             }}
           >
-            <div style={{margin: '10px'}}>
+            <div style={{ margin: '10px' }}>
               {stats}
             </div>
           </Popover>