connect device to backend (write)

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>