From 4a2b6052e6a36313b5e10b0ddc2011933001c03c Mon Sep 17 00:00:00 2001
From: Matt Grau <graum@phys.ethz.ch>
Date: Tue, 13 Jul 2021 14:32:04 +0200
Subject: [PATCH] connect device frontend object to backend (readonly)
---
frontend/package-lock.json | 13 +++++++
frontend/package.json | 1 +
frontend/src/device.jsx | 72 +++++++++++++++++++++++++-------------
frontend/src/index.js | 3 +-
server.py | 2 ++
5 files changed, 65 insertions(+), 26 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d4fc838..c1c6460 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 cff6686..ff3266d 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 4ab83b1..cedad0d 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 5aef464..2819725 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 d55f0f6..75b5f61 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('/')
--
GitLab