Commit d05bb08a authored by Matej Genci's avatar Matej Genci

Merge branch 'IO_console' into 'master'

IO console material ui

See merge request !1
parents 7f2a0d07 9079035c
......@@ -17,7 +17,7 @@
.env.development.local
.env.test.local
.env.production.local
.idea
npm-debug.log*
yarn-debug.log*
yarn-error.log*
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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.
......
......@@ -17,7 +17,7 @@ body {
.tree-wrapper {
background: white;
margin-top: 10px;
height: 20em;
height: auto;
}
.ace-editor {
......
......@@ -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;
/*!
=========================================================
* 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;
left: auto;
width: 290px;
border-radius: 0.1875rem;
padding: 0 10px;
position: absolute;
color: rgba(0, 0, 0, 0.87);
display: inline-block;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
background: #fff;
border-radius: 3px;
}
.fixed-plugin .fa-circle-thin {
color: #ffffff;
}
.fixed-plugin .active .fa-circle-thin {
color: #00bbff;
}
.fixed-plugin .dropdown-menu > .active > a,
.fixed-plugin .dropdown-menu > .active > a:hover,
.fixed-plugin .dropdown-menu > .active > a:focus {
color: #777777;
text-align: center;
}
.fixed-plugin img {
border-radius: 0;
width: 100%;
height: 100px;
margin: 0 auto;
}
.fixed-plugin .dropdown-menu li > a:hover,
.fixed-plugin .dropdown-menu li > a:focus {
box-shadow: none;
}
.fixed-plugin .badge {
border: 3px solid #ffffff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 23px;
margin-right: 5px;
position: relative;
width: 23px;
background-color: rgba(30, 30, 30, 0.97);