Merge branch 'IO_console' into 'master'

IO console material ui

See merge request !1

.gitignore

@@ -17,7 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
-
+.idea
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -8,11 +8,14 @@
     "@testing-library/user-event": "^7.2.1",
     "ace-builds": "^1.4.8",
     "axios": "^0.19.2",
+    "material-dashboard-react": "^1.8.0",
     "react": "^16.13.0",
     "react-ace": "^8.0.0",
     "react-d3-tree": "^1.16.1",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.0",
+    "terminal-in-react": "^4.3.1",
+    "prop-types": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script>
+      var EMULATOR_CONSOLE_READ = "";
+      var EMULATOR_IS_INPUT = false;
+    </script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -17,7 +17,7 @@ body {
 .tree-wrapper {
   background: white;
   margin-top: 10px;
-  height: 20em;
+  height: auto;
 }
 
 .ace-editor {

src/App.js

@@ -6,79 +6,171 @@ import Tree from 'react-d3-tree';
 import ButtonStrip from './view/ButonStrip'
 import CodeEditor from './view/CodeEditor'
 import UserIO from './view/UserIO'
+import Terminal from 'terminal-in-react';
+import {makeStyles} from "@material-ui/core/styles";
 
+import Card from "./components/Card/Card.js";
+import CardBody from "./components/Card/CardBody.js";
 import {sendWaccCode, astMetaToGraphData} from './Comm'
+import GridItem from "./components/Grid/GridItem";
+import GridContainer from "./components/Grid/GridContainer";
 
-import './App.css';
+const cardImagesStyles = {
+    cardImgTop: {
+        width: "100%",
+        borderTopLeftRadius: "calc(.25rem - 1px)",
+        borderTopRightRadius: "calc(.25rem - 1px)"
+    },
+    cardImgBottom: {
+        width: "100%",
+        borderBottomRightRadius: "calc(.25rem - 1px)",
+        borderBottomLeftRadius: "calc(.25rem - 1px)"
+    },
+    cardImgOverlay: {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+        padding: "1.25rem"
+    },
+    cardImg: {
+        width: "100%",
+        borderRadius: "calc(.25rem - 1px)"
+    }
+};
+const useStyles = makeStyles(cardImagesStyles);
 
 class App extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      wacc: {code: "", markers: [],},
-      js:   {code: "", markers: [],},
-      arm:  {code: "", markers: [],},
-      graphData: [{}],
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            wacc: {code: "", markers: [],},
+            js: {code: "", markers: [],},
+            arm: {code: "", markers: [],},
+            graphData: [{}],
+        }
+    }
+
+    onWaccCodeChange = (newCode) => {
+        this.setState({
+            wacc: {
+                code: newCode,
+                markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text'}]
+            },
+            graphData: [{}]
+        })
+    }
+
+    readInputCallBack = (input) => {
+
+        console.log(test)
+        test = "";
+    }
+
+    processWaccCode = (code) => {
+        let rsp = sendWaccCode(code)
+        let graph = astMetaToGraphData(rsp.astMeta)
+
+        this.setState({
+            arm: {code: rsp.armCode},
+            js: {code: rsp.jsCode},
+            graphData: graph
+        })
+    }
+
+    render() {
+        return (
+            <div className="App">
+
+
+                <div className="App-code-editors">
+                    <GridContainer>
+                        <GridItem lg={12}>
+                            <Card>
+                                <CardBody>
+                                    <ButtonStrip
+                                        onCompileClick={(e) => {
+                                            this.processWaccCode(this.state.wacc.code)
+                                        }}
+                                        onStepJsClick={(e) => {
+                                            this.setState({js: {code: "Hello World!"}})
+                                        }}
+                                        onStepOverAstClick={(e) => {
+                                            this.readInputCallBack(e)
+                                        }}/>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem xs={12} sm={12} md={4}>
+                            <Card>
+                                <CardBody>
+                                    <CodeEditor
+                                        heading='WACC Code'
+                                        onCodeChange={this.onWaccCodeChange}
+                                        value={this.state.wacc.code}
+                                        markers={this.state.wacc.markers}/>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem xs={12} sm={12} md={4}>
+
+                            <Card>
+                                <CardBody>
+                                    <CodeEditor
+                                        heading='JavaScript'
+                                        value={this.state.js.code}
+                                        markers={this.state.js.markers}
+                                        readOnly={true}/>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem xs={12} sm={12} md={4}>
+                            <Card>
+                                <CardBody>
+                                    <CodeEditor
+                                        heading='ARM Assembly'
+                                        value={this.state.arm.code}
+                                        markers={this.state.arm.markers}
+                                        readOnly={true}/>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem xs={12} sm={12} md={6}>
+                            <Card>
+                                <CardBody>
+                                  <div style={{height: '50em'}}>
+                                    <Tree
+                                        data={this.state.graphData}
+                                        orientation="vertical"/>
+                                  </div>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem xs={12} sm={12} md={6}>
+                            <Card>
+                                <CardBody>
+                                    <Terminal commandPassThrough={cmd => {
+                                        test = cmd[0]
+                                    }} watchConsoleLogging hideTopBar allowTabs={false}/>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+
+                    </GridContainer>
+                </div>
+
+                <div className="tree-wrapper">
+
+                </div>
+
+                <div id="inputoutput"></div>
+
+
+            </div>
+        )
     }
-  }
-
-  onWaccCodeChange = (newCode) => {
-    this.setState({
-      wacc: {
-        code: newCode,
-        markers: [{ startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text' }]
-      },
-      graphData: [{}]
-    })
-  }
-
-  processWaccCode = (code) => {
-    let rsp = sendWaccCode(code)
-    let graph = astMetaToGraphData(rsp.astMeta)
-
-    this.setState({
-      arm: {code: rsp.armCode},
-      js: {code: rsp.jsCode},
-      graphData: graph
-    })
-  }
-
-  render() {
-    return (
-      <div className="App">
-        <ButtonStrip
-          onCompileClick={(e) => { this.processWaccCode(this.state.wacc.code) }}
-          onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }} />
-
-        <div className="App-code-editors">
-          <CodeEditor
-            heading='WACC Code'
-            onCodeChange={this.onWaccCodeChange}
-            value={this.state.wacc.code}
-            markers={this.state.wacc.markers} />
-          <CodeEditor
-            heading='JavaScript'
-            value={this.state.js.code}
-            markers={this.state.js.markers}
-            readOnly={true} />
-          <CodeEditor
-            heading='ARM Assembly'
-            value={this.state.arm.code}
-            markers={this.state.arm.markers}
-            readOnly={true} />
-        </div>
-
-        <div className="tree-wrapper">
-          <Tree
-            data={this.state.graphData}
-            orientation="vertical" />
-        </div>
-
-        <UserIO />
-      </div>
-    )
-  }
 }
 
 export default App;

src/assets/css/material-dashboard-react.css

+/*!
+
+ =========================================================
+ * Material Dashboard React - v1.8.0 based on Material Dashboard - v1.2.0
+ =========================================================
+
+ * Product Page: http://www.creative-tim.com/product/material-dashboard-react
+ * Copyright 2019 Creative Tim (http://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+.ct-grid {
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 1px;
+  stroke-dasharray: 2px;
+}
+
+.ct-series-a .ct-point,
+.ct-series-a .ct-line,
+.ct-series-a .ct-bar,
+.ct-series-a .ct-slice-donut {
+  stroke: rgba(255, 255, 255, 0.8);
+}
+
+.ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start;
+}
+
+.ct-label {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.ct-chart-line .ct-label,
+.ct-chart-bar .ct-label {
+  display: block;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.ct-label {
+  fill: rgba(0, 0, 0, 0.4);
+  line-height: 1;
+}
+html * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  background-color: #eeeeee;
+  color: #3c4858;
+  margin: 0;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+}
+
+blockquote footer:before,
+blockquote small:before {
+  content: "\2014 \00A0";
+}
+
+small {
+  font-size: 80%;
+}
+
+h1 {
+  font-size: 3em;
+  line-height: 1.15em;
+}
+
+h2 {
+  font-size: 2.4em;
+}
+
+h3 {
+  font-size: 1.825em;
+  line-height: 1.4em;
+  margin: 20px 0 10px;
+}
+
+h4 {
+  font-size: 1.3em;
+  line-height: 1.4em;
+}
+
+h5 {
+  font-size: 1.25em;
+  line-height: 1.4em;
+  margin-bottom: 15px;
+}
+
+h6 {
+  font-size: 1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+body {
+  background-color: #eeeeee;
+  color: #3c4858;
+}
+
+blockquote p {
+  font-style: italic;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+}
+
+a {
+  color: #9c27b0;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: #89229b;
+  text-decoration: none;
+}
+
+legend {
+  border-bottom: 0;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+*:focus {
+  outline: 0;
+}
+
+a:focus,
+a:active,
+button:active,
+button:focus,
+button:hover,
+button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner {
+  outline: 0 !important;
+}
+
+legend {
+  margin-bottom: 20px;
+  font-size: 21px;
+}
+
+output {
+  padding-top: 8px;
+  font-size: 14px;
+  line-height: 1.42857;
+}
+
+label {
+  font-size: 14px;
+  line-height: 1.42857;
+  color: #aaaaaa;
+  font-weight: 400;
+}
+
+footer {
+  padding: 15px 0;
+}
+
+footer ul {
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+
+footer ul li {
+  display: inline-block;
+}
+
+footer ul li a {
+  color: inherit;
+  padding: 15px;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  border-radius: 3px;
+  text-decoration: none;
+  position: relative;
+  display: block;
+}
+
+footer ul li a:hover {
+  text-decoration: none;
+}
+
+@media (max-width: 991px) {
+  body,
+  html {
+    position: relative;
+    overflow-x: hidden;
+  }
+
+  #bodyClick {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    opacity: 0;
+    top: 0;
+    left: auto;
+    right: 260px;
+    content: "";
+    z-index: 9999;
+    overflow-x: hidden;
+  }
+}
+.fixed-plugin {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+  position: fixed;
+  top: 180px;
+  right: 0;
+  width: 64px;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1031;
+  border-radius: 8px 0 0 8px;
+  text-align: center;
+  top: 120px;
+  .badge-primary-background-color: #9c27b0;
+}
+
+.fixed-plugin .SocialMediaShareButton,
+.fixed-plugin .github-btn {
+  display: inline-block;
+}
+
+.fixed-plugin li > a,
+.fixed-plugin .badge {
+  transition: all 0.34s;
+  -webkit-transition: all 0.34s;
+  -moz-transition: all 0.34s;
+  text-decoration: none;
+}
+
+.fixed-plugin .fa-cog {
+  color: #ffffff;
+  padding: 10px;
+  border-radius: 0 0 6px 6px;
+  width: auto;
+}
+
+.fixed-plugin .dropdown-menu {
+  right: 80px;