Commit df299511 authored by Raghav Khanna's avatar Raghav Khanna

Use material ui react to display components in cards and lay them out

parent 12d44b21
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -7,88 +7,168 @@ 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";
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>
<Tree
data={this.state.graphData}
orientation="vertical"/>
</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: [{}]
})
}
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">
<ButtonStrip
onCompileClick={(e) => { this.processWaccCode(this.state.wacc.code) }}
onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }}
onStepOverAstClick = {(e) => { this.readInputCallBack(e)}}/>
<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>
<div id="inputoutput">
<Terminal commandPassThrough={cmd => {test = cmd[0]}} watchConsoleLogging/>
</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);
}
.fixed-plugin .badge.active,
.fixed-plugin .badge:hover {
border-color: #00bbff;
}
.fixed-plugin .badge-purple {
background-color: #9c27b0;
}
.fixed-plugin .badge-blue {
background-color: #00bcd4;
}
.fixed-plugin .badge-green {
background-color: #4caf50;
}
.fixed-plugin .badge-orange {
background-color: #ff9800;
}
.fixed-plugin .badge-red {
background-color: #f44336;