From 9989ce52a0803781e5171c4dcf8bc8faa400f151 Mon Sep 17 00:00:00 2001
From: Matt Grau <graum@phys.ethz.ch>
Date: Tue, 13 Jul 2021 14:44:46 +0200
Subject: [PATCH] connect device to backend (write)
---
frontend/src/device.jsx | 46 ++++++++++++++++++++++++++++++++++-------
1 file changed, 38 insertions(+), 8 deletions(-)
diff --git a/frontend/src/device.jsx b/frontend/src/device.jsx
index cedad0d..b0e89bb 100644
--- a/frontend/src/device.jsx
+++ b/frontend/src/device.jsx
@@ -10,17 +10,25 @@ export default class Device extends React.Component {
current: 0,
resistance: 0,
};
+
+ this.getValues = this.getValues.bind(this);
}
async componentDidMount() {
+ this.getValues();
+ }
+
+ async getValues() {
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");
+ const resistance = await axios.get(
+ "http://localhost:8000/calculate_resistance"
+ );
this.setState({
- voltage: voltage.data,
- current: current.data,
- resistance: resistance.data
- })
+ voltage: voltage.data,
+ current: current.data,
+ resistance: resistance.data,
+ });
}
render() {
@@ -32,15 +40,37 @@ export default class Device extends React.Component {
<div>
<div>
<label>Voltage</label>
- <input value={this.state.voltage}></input>
+ <input
+ value={this.state.voltage}
+ onChange={(event) =>
+ this.setState({ voltage: event.target.value })
+ }
+ onBlur={async () => {
+ await axios.get(
+ `http://localhost:8000/set_voltage/${this.state.voltage}`
+ );
+ await this.getValues();
+ }}
+ ></input>
</div>
<div>
<label>Current</label>
- <input value={this.state.current}></input>
+ <input
+ value={this.state.current}
+ onChange={(event) =>
+ this.setState({ current: event.target.value })
+ }
+ onBlur={async () => {
+ await axios.get(
+ `http://localhost:8000/set_current/${this.state.current}`
+ );
+ await this.getValues();
+ }}
+ ></input>
</div>
<div>
<label>Resistance</label>
- <input value={this.state.resistance}></input>
+ <input value={this.state.resistance} readOnly></input>
</div>
</div>
</div>
--
GitLab