From 393c89877eceea9af9af633661b9afbc377ead2a Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 12:24:14 +0200
Subject: [PATCH] code on/off

---
 src/components/CodeViewer.js |  2 +-
 src/components/Home.js       | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index caa920b..85b5950 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -7,7 +7,7 @@ class CodeViewer extends Component {
 
   render() {
     return (
-      <div>
+      <div style={{height: '500px', border: '1px solid black'}}>
         {this.props.arduino}
         <p>{this.props.xml}</p>
       </div>
diff --git a/src/components/Home.js b/src/components/Home.js
index 9d8f30b..8638b6d 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -3,23 +3,40 @@ import React, { Component } from 'react';
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
 import BlocklyWindow from './Blockly/BlocklyWindow';
+import CodeViewer from './CodeViewer';
 
 import Grid from '@material-ui/core/Grid';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 
 class Home extends Component {
 
+  state = {
+    codeOn: false
+  }
+
+  onChange = () => {
+    this.setState({ codeOn: !this.state.codeOn });
+  }
 
   render() {
     return (
       <div>
         <WorkspaceStats />
         <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{position: 'relative'}}>
+            <FormControlLabel
+              style={{margin: '5px 10px 0 0', position: 'absolute', top: 0, right:0, zIndex:1}}
+              control={<Switch checked={this.state.codeOn} onChange={this.onChange} color='primary'/>}
+              label="Code"
+            />
             <BlocklyWindow />
           </Grid>
-          <Grid item xs={12} md={6}>
-            <div style={{height: '500px', border: '1px solid black'}}></div>
-          </Grid>
+          {this.state.codeOn ?
+            <Grid item xs={12} md={6}>
+              <CodeViewer/>
+            </Grid>
+          : null}
         </Grid>
         <WorkspaceFunc />
       </div>