diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d4fc8381cfa68e7aa5f834a4010d04a1607d2f8c..c1c6460dd38cadb3c281b913edfa665f66830a4b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1327,6 +1327,14 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz", "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -2923,6 +2931,11 @@ } } }, + "follow-redirects": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index cff6686cadc69f4c42295439f1348365196d5735..ff3266db50df27b2cfa7c1249cd9dd05a6972f00 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "author": "Matt Grau", "license": "ISC", "dependencies": { + "axios": "^0.21.1", "parcel-bundler": "^1.12.5", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/frontend/src/device.jsx b/frontend/src/device.jsx index 4ab83b17780c90ac2d746070f57b0125bfba131e..cedad0da5b5cc093237ab498b5190bdccc63bf33 100644 --- a/frontend/src/device.jsx +++ b/frontend/src/device.jsx @@ -1,27 +1,49 @@ -import React from 'react' +import React from "react"; +import axios from "axios"; export default class Device extends React.Component { - render() { - return ( - <div> - <div> - <h3>Device Name</h3> - </div> - <div> - <div> - <label>Voltage</label> - <input></input> - </div> - <div> - <label>Current</label> - <input></input> - </div> - <div> - <label>Resistance</label> - <input></input> - </div> - </div> - </div> - ) - } -} \ No newline at end of file + constructor(props) { + super(props); + + this.state = { + voltage: 0, + current: 0, + resistance: 0, + }; + } + + async componentDidMount() { + const voltage = await axios.get("http://localhost:8000/get_voltage"); + const current = await axios.get("http://localhost:8000/get_current"); + const resistance = await axios.get("http://localhost:8000/calculate_resistance"); + this.setState({ + voltage: voltage.data, + current: current.data, + resistance: resistance.data + }) + } + + render() { + return ( + <div> + <div> + <h3>{this.props.name}</h3> + </div> + <div> + <div> + <label>Voltage</label> + <input value={this.state.voltage}></input> + </div> + <div> + <label>Current</label> + <input value={this.state.current}></input> + </div> + <div> + <label>Resistance</label> + <input value={this.state.resistance}></input> + </div> + </div> + </div> + ); + } +} diff --git a/frontend/src/index.js b/frontend/src/index.js index 5aef46490c8f622a7a81748a0067fdc6fa4d7e01..28197254a7e7dca822c35e2d97c7bddf2b78abeb 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,6 +1,7 @@ +import 'regenerator-runtime/runtime' import React from "react"; import ReactDOM from "react-dom"; import Device from './device' -ReactDOM.render(<Device />, document.getElementById("root")); +ReactDOM.render(<Device name="My Device" />, document.getElementById("root")); diff --git a/server.py b/server.py index d55f0f64713d43f4ab744a210cf6a53b8236a84b..75b5f61ef19bead6ccef1526312183a571b28125 100644 --- a/server.py +++ b/server.py @@ -1,8 +1,10 @@ import flask +import flask_cors from device import Device device = Device() app = flask.Flask(__name__) +flask_cors.CORS(app) @app.route('/')