added code editor in simulator screen

frg-fossee · Jun 5, 2020 · 6397e4f · 6397e4f
1 parent 6d163ab
commit 6397e4f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 14 deletions.
diff --git a/eda-frontend/package.json b/eda-frontend/package.json
@@ -17,11 +17,14 @@
     "mxgraph": "^4.1.1",
     "query-string": "^6.12.1",
     "react": "^16.13.1",
+    "react-ace": "^9.0.0",
+    "react-brace": "^3.6.6",
     "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",

diff --git a/eda-frontend/src/App.js b/eda-frontend/src/App.js
@@ -8,7 +8,9 @@ import Home from './pages/Home'
 import Login from './pages/Login'
 import NotFound from './pages/NotFound'
 import SchematicEditor from './pages/SchematiEditor'
+
 import Simulator from './pages/Simulator'
+
 import Dashboard from './pages/Dashboard'
 import SignUp from './pages/signUp'
 
@@ -62,7 +64,7 @@ function App () {
           ? <PublicRoute exact path="/editor" restricted={false} nav={false} component={SchematicEditor} />
           : <Route path="/editor" component={SchematicEditor} />
         }
-        <PublicRoute exact path="/simulator" restricted={false} nav={true} component={Simulator} />
+        <PublicRoute exact path="/simulator/ngspice" restricted={false} nav={true} component={Simulator} />
         <PrivateRoute path="/dashboard" component={Dashboard} />
         <PublicRoute restricted={false} nav={true} component={NotFound} />
       </Switch>

diff --git a/eda-frontend/src/components/Shared/Navbar.js b/eda-frontend/src/components/Shared/Navbar.js
@@ -85,27 +85,27 @@ export function Header () {
               >
                 Editor
               </Link>
+
               <Link
                 variant="button"
                 color="textPrimary"
-                to="/simulator"
+                to="/dashboard"
                 component={RouterLink}
                 className={classes.link}
               >
-                Simulator
+                Dashboard
               </Link>
+            </>)
+            : (<>
               <Link
                 variant="button"
                 color="textPrimary"
-                to="/dashboard"
+                to="/simulator/ngspice"
                 component={RouterLink}
                 className={classes.link}
               >
-                Dashboard
+                Spice Simulator
               </Link>
-            </>)
-            : (<>
-              <span />
             </>
             )
           )

diff --git a/eda-frontend/src/components/Simulator/Editor.js b/eda-frontend/src/components/Simulator/Editor.js
@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import AceEditor from 'react-ace'
+import PropertiesSidebar from '../SchematicEditor/PropertiesSidebar'
+
+export default function Editor (props) {
+  // code={netlistCode} onCodeChange={onCodeChange}
+  return (
+    <div>
+      <AceEditor
+        onChange = {props.onCodeChange}
+        value = {props.code}
+      />
+    </div>
+  )
+}
diff --git a/eda-frontend/src/components/Simulator/NetlistUpload.js b/eda-frontend/src/components/Simulator/NetlistUpload.js
@@ -147,12 +147,12 @@ class NetlistUpload extends Component {
         <Grid item xs={12} sm={7}>
           <Paper className={classes.paper}>
             <h2>GRAPH OUTPUT</h2>
-            <Graph
+            {/* <Graph
               labels= {['time', 'V (In)', 'V (OP)']}
               x={this.state.x_1}
               y1={this.state.y1_1}
               y2={this.state.y2_1}
-            />
+            /> */}
           </Paper>
         </Grid>
       </>

diff --git a/eda-frontend/src/pages/Simulator.js b/eda-frontend/src/pages/Simulator.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Container, Grid, Paper } from '@material-ui/core'
+import React, { useState } from 'react'
+import { Container, Grid, Button, Paper } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-
+import Editor from '../components/Simulator/Editor'
 import NetlistUpload from '../components/Simulator/NetlistUpload'
 
 const useStyles = makeStyles((theme) => ({
@@ -19,7 +19,12 @@ const useStyles = makeStyles((theme) => ({
 
 export default function Simulator () {
   const classes = useStyles()
+  const [netlistCode, setNetlistCode] = useState('')
 
+  const onCodeChange = (code) => {
+    setNetlistCode(code)
+    console.log(netlistCode)
+  }
   return (
     <Container maxWidth="lg" className={classes.header}>
       <Grid
@@ -35,7 +40,29 @@ export default function Simulator () {
             <p>Upload Netlist to Simulate</p>
           </Paper>
         </Grid>
-        <NetlistUpload />
+        {/* <NetlistUpload /> */}
+        <>
+          <Grid item xs={12} sm={5}>
+            <Paper className={classes.paper}>
+              <h2>Enter Netlist</h2>
+              <Editor code={netlistCode} onCodeChange={onCodeChange}/>
+              <br />
+            </Paper>
+          </Grid>
+
+          <Grid item xs={12} sm={7}>
+            <Paper className={classes.paper}>
+              <h2>GRAPH OUTPUT</h2>
+              {/* <Graph
+              labels= {['time', 'V (In)', 'V (OP)']}
+              x={this.state.x_1}
+              y1={this.state.y1_1}
+              y2={this.state.y2_1}
+            /> */}
+            </Paper>
+          </Grid>
+
+        </>
       </Grid>
     </Container>
   )