Skip to content

Commit b8c32eb

Browse files
albireoxalbireox
authored
Merge pull request #10 from UWMRO/albireox/filter_wheel
Use new filter wheel routes in server
2 parents 6b69d61 + 0689f32 commit b8c32eb

File tree

4 files changed

+196
-122
lines changed

4 files changed

+196
-122
lines changed

‎src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,7 @@ body {
136136
.display div {
137137
margin: auto;
138138
}
139+
140+
fieldset.filter > label,button {
141+
margin-left: 10px;
142+
}

‎src/apiClient.js‎

Lines changed: 91 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,115 @@
1+
// Creates a POST request.
2+
export function buildPostPayload(data) {
3+
return {
4+
method: 'POST',
5+
credentials: 'include',
6+
body: JSON.stringify(data),
7+
cache: 'no-cache',
8+
headers: new Headers({
9+
'content-type': 'application/json',
10+
}),
11+
};
12+
}
13+
114
// export makes this available for import from other files, e.g. App.js
215
// async makes it so we can use "await" inside. It also makes it return a Promise.
316
export async function getTemperature() {
4-
// if we got this page from localhost:3001, this will request localhost:3001/temperature
5-
// await is kind of like a dotted line where the interpreter snips the function in two.
6-
// Everything that would execute after the await keyword is shelved until the network
7-
// request completes.
8-
const response = await fetch('/api/getTemperature')
9-
// The same applies here - we make another dotted line between trying to read the response
10-
// body as JSON and the remainder of the function
11-
const data = await response.json()
12-
console.log(data)
13-
// Remember that async makes this return a Promise. This return statement "resolves" the
14-
// promise. If some other part of our code awaits getTemperature(), it will resume after
15-
// after this return statement.
16-
return JSON.stringify(data)
17-
// return await response.json()
17+
// if we got this page from localhost:3001, this will request localhost:3001/temperature
18+
// await is kind of like a dotted line where the interpreter snips the function in two.
19+
// Everything that would execute after the await keyword is shelved until the network
20+
// request completes.
21+
const response = await fetch('/api/getTemperature');
22+
// The same applies here - we make another dotted line between trying to read the response
23+
// body as JSON and the remainder of the function
24+
const data = await response.json();
25+
console.log(data);
26+
// Remember that async makes this return a Promise. This return statement "resolves" the
27+
// promise. If some other part of our code awaits getTemperature(), it will resume after
28+
// after this return statement.
29+
return JSON.stringify(data);
30+
// return await response.json()
1831
}
1932

2033
export async function setTemperature(input) {
21-
//need to pass in input variable into Flask server
22-
console.log(typeof input)
23-
const response = await fetch('/api/setTemperature', {
24-
method:"POST",
25-
credentials:"include",
26-
body: JSON.stringify({'temperature' : input.toString()}),
27-
cache: "no-cache",
28-
headers: new Headers({
29-
"content-type": "application/json"
30-
})
31-
})
32-
33-
const data = await response.json()
34-
35-
return JSON.stringify(data)
34+
//need to pass in input variable into Flask server
35+
console.log(typeof input);
36+
const response = await fetch('/api/setTemperature', {
37+
method: 'POST',
38+
credentials: 'include',
39+
body: JSON.stringify({ temperature: input.toString() }),
40+
cache: 'no-cache',
41+
headers: new Headers({
42+
'content-type': 'application/json',
43+
}),
44+
});
45+
46+
const data = await response.json();
47+
48+
return JSON.stringify(data);
3649
}
3750

3851
export async function capture(input) {
39-
const response = await fetch('/api/capture', {
40-
method:"POST",
41-
credentials:"include",
42-
body: JSON.stringify(input),
43-
cache: "no-cache",
44-
headers: new Headers({
45-
"content-type": "application/json"
46-
})
47-
})
48-
49-
const data = await response.json()
50-
51-
return data
52+
const response = await fetch('/api/capture', {
53+
method: 'POST',
54+
credentials: 'include',
55+
body: JSON.stringify(input),
56+
cache: 'no-cache',
57+
headers: new Headers({
58+
'content-type': 'application/json',
59+
}),
60+
});
61+
62+
const data = await response.json();
63+
64+
return data;
5265
}
5366

5467
export async function setFilter(input) {
55-
56-
const response = await fetch('/api/setFilter', {
57-
method:"POST",
58-
credentials:"include",
59-
body: JSON.stringify(input),
60-
cache: "no-cache",
61-
headers: new Headers({
62-
"content-type": "application/json"
63-
})
64-
})
65-
66-
const data = await response.json()
67-
68-
return data
68+
const response = await fetch('/api/setFilter', {
69+
method: 'POST',
70+
credentials: 'include',
71+
body: JSON.stringify(input),
72+
cache: 'no-cache',
73+
headers: new Headers({
74+
'content-type': 'application/json',
75+
}),
76+
});
77+
78+
const data = await response.json();
79+
80+
return data;
6981
}
7082

7183
export async function getStatusTEC() {
84+
const response = await fetch('/api/getStatusTEC');
7285

73-
const response = await fetch('/api/getStatusTEC')
86+
const data = await response.json();
7487

75-
const data = await response.json()
76-
77-
return data
88+
return data;
7889
}
7990

8091
export async function getStatus() {
81-
const response = await fetch('/api/getStatus')
82-
const data = await response.json()
83-
return JSON.stringify(data)
92+
const response = await fetch('/api/getStatus');
93+
const data = await response.json();
94+
return JSON.stringify(data);
8495
}
8596

86-
export async function getFilterWheelStatus() {
87-
88-
const response = await fetch('/api/fw_test')
97+
export async function getFilterWheel() {
98+
const response = await fetch('/api/getFilterWheel');
99+
const data = await response.json();
100+
return data;
101+
}
89102

90-
const data = await response.json()
103+
export async function setFilterWheel(filter) {
104+
const payload = buildPostPayload({ filter });
105+
console.log(payload);
106+
const response = await fetch('/api/setFilterWheel', payload);
107+
const data = await response.json();
108+
return data;
109+
}
91110

92-
return data
93-
}
111+
export async function homeFilterWheel() {
112+
const response = await fetch('/api/homeFilterWheel');
113+
const data = await response.json();
114+
return data;
115+
}

‎src/components/FilterControls.jsx‎

Lines changed: 97 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,101 @@
11
//import { setFilter } from "../apiClient";
22

3-
function FilterTypeSelector({filterType, setFilterType}) {
3+
import { useEffect, useState } from 'react';
4+
import { getFilterWheel, homeFilterWheel, setFilterWheel } from '../apiClient';
45

5-
function GetFilterTypeClicked(e) {
6-
setFilterType(e.target.value)
7-
console.log(e.target.value)
8-
//const filt = setFilter(e.target.value)
9-
//console.log(filt)
10-
}
6+
function FilterTypeSelector({ filterType, setFilterType }) {
7+
const [moving, setMoving] = useState(false);
118

12-
return (
13-
<fieldset>
14-
<legend>
15-
Filters
16-
</legend>
17-
<label> Ha
18-
<input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='Ha'
19-
checked={
20-
filterType === 'Ha'
21-
}/>
22-
</label>
23-
<label> B
24-
<input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='B'
25-
checked={
26-
filterType === 'B'
27-
}/>
28-
</label>
29-
<label> V
30-
<input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='V'
31-
checked={
32-
filterType === 'V'
33-
}/>
34-
</label>
35-
<label> g
36-
<input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='g'
37-
checked={
38-
filterType === 'g'
39-
}/>
40-
</label>
41-
<label> r
42-
<input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='r'
43-
checked={
44-
filterType === 'r'
45-
}/>
46-
</label>
47-
</fieldset>
48-
);
49-
}
50-
51-
52-
53-
export default FilterTypeSelector;
9+
useEffect(() => {
10+
setInterval(() => {
11+
getFilterWheel()
12+
.then((reply) => setFilterType(reply.filter))
13+
.catch((err) => console.log(err));
14+
}, 1000);
15+
}, [setFilterType]);
16+
17+
const handleFilterChange = (filter) => {
18+
setMoving(true);
19+
setFilterWheel(filter)
20+
.then(() => {
21+
setMoving(false);
22+
setFilterType(filter);
23+
})
24+
.catch((err) => console.log(err));
25+
};
26+
27+
const handleHome = () => {
28+
setMoving(true);
29+
homeFilterWheel()
30+
.then(() => setMoving(false))
31+
.catch((err) => console.log(err));
32+
};
33+
34+
return (
35+
<fieldset disabled={moving} className="filter">
36+
<legend>Filters</legend>
37+
<label disabled>
38+
Home
39+
<input
40+
type="radio"
41+
name="FilterType"
42+
value="Home"
43+
checked={filterType === 'Home'}
44+
/>
45+
</label>
46+
<label>
47+
Ha
48+
<input
49+
type="radio"
50+
name="FilterType"
51+
onChange={() => handleFilterChange('Ha')}
52+
value="Ha"
53+
checked={filterType === 'Ha'}
54+
/>
55+
</label>
56+
<label>
57+
B
58+
<input
59+
type="radio"
60+
name="FilterType"
61+
onChange={() => handleFilterChange('B')}
62+
value="B"
63+
checked={filterType === 'B'}
64+
/>
65+
</label>
66+
<label>
67+
V
68+
<input
69+
type="radio"
70+
name="FilterType"
71+
onChange={() => handleFilterChange('V')}
72+
value="V"
73+
checked={filterType === 'V'}
74+
/>
75+
</label>
76+
<label>
77+
g
78+
<input
79+
type="radio"
80+
name="FilterType"
81+
onChange={() => handleFilterChange('g')}
82+
value="g"
83+
checked={filterType === 'g'}
84+
/>
85+
</label>
86+
<label>
87+
r
88+
<input
89+
type="radio"
90+
name="FilterType"
91+
onChange={() => handleFilterChange('r')}
92+
value="r"
93+
checked={filterType === 'r'}
94+
/>
95+
</label>
96+
<button onClick={handleHome}>Home</button>
97+
</fieldset>
98+
);
99+
}
100+
101+
export default FilterTypeSelector;

‎src/components/PingServer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getStatusTEC, getFilterWheelStatus } from "../apiClient"
1+
import { getStatusTEC, getFilterWheel } from "../apiClient"
22

33
function PingServer() {
44

@@ -7,10 +7,10 @@ function PingServer() {
77
const msg = await getStatusTEC()
88
console.log(msg)
99
}
10-
10+
1111
async function fwOnPing() {
1212
console.log("Pinging Filter Wheel Connection")
13-
const msg = await getFilterWheelStatus()
13+
const msg = await getFilterWheel()
1414
console.log(msg.message)
1515
}
1616

@@ -26,4 +26,4 @@ function PingServer() {
2626
)
2727
}
2828

29-
export default PingServer
29+
export default PingServer

0 commit comments

Comments
 (0)