Merge pull request #10 from UWMRO/albireox/filter_wheel

Use new filter wheel routes in server

src/App.css

@@ -136,3 +136,7 @@ body {
 .display div {
   margin: auto;
 }
+
+fieldset.filter > label,button  {
+  margin-left: 10px;
+}

src/apiClient.js

@@ -1,93 +1,115 @@
+// Creates a POST request.
+export function buildPostPayload(data) {
+  return {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(data),
+    cache: 'no-cache',
+    headers: new Headers({
+      'content-type': 'application/json',
+    }),
+  };
+}
+
 // export makes this available for import from other files, e.g. App.js
 // async makes it so we can use "await" inside. It also makes it return a Promise.
 export async function getTemperature() {
-    // if we got this page from localhost:3001, this will request localhost:3001/temperature
-    // await is kind of like a dotted line where the interpreter snips the function in two.
-    // Everything that would execute after the await keyword is shelved until the network
-    // request completes.
-    const response = await fetch('/api/getTemperature')
-	// The same applies here - we make another dotted line between trying to read the response
-	// body as JSON and the remainder of the function
-    const data = await response.json()
-    console.log(data)
-	// Remember that async makes this return a Promise. This return statement "resolves" the
-	// promise. If some other part of our code awaits getTemperature(), it will resume after
-	// after this return statement. 
-    return JSON.stringify(data)
-    // return await response.json()
+  // if we got this page from localhost:3001, this will request localhost:3001/temperature
+  // await is kind of like a dotted line where the interpreter snips the function in two.
+  // Everything that would execute after the await keyword is shelved until the network
+  // request completes.
+  const response = await fetch('/api/getTemperature');
+  // The same applies here - we make another dotted line between trying to read the response
+  // body as JSON and the remainder of the function
+  const data = await response.json();
+  console.log(data);
+  // Remember that async makes this return a Promise. This return statement "resolves" the
+  // promise. If some other part of our code awaits getTemperature(), it will resume after
+  // after this return statement.
+  return JSON.stringify(data);
+  // return await response.json()
 }
 
 export async function setTemperature(input) {
-    //need to pass in input variable into Flask server
-    console.log(typeof input)
-    const response = await fetch('/api/setTemperature', {
-        method:"POST",
-        credentials:"include",
-        body: JSON.stringify({'temperature' : input.toString()}),
-        cache: "no-cache",
-        headers: new Headers({
-            "content-type": "application/json"
-        })
-    })
-
-    const data = await response.json()
-
-    return JSON.stringify(data)
+  //need to pass in input variable into Flask server
+  console.log(typeof input);
+  const response = await fetch('/api/setTemperature', {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify({ temperature: input.toString() }),
+    cache: 'no-cache',
+    headers: new Headers({
+      'content-type': 'application/json',
+    }),
+  });
+
+  const data = await response.json();
+
+  return JSON.stringify(data);
 }
 
 export async function capture(input) {
-    const response = await fetch('/api/capture', {
-        method:"POST",
-        credentials:"include",
-        body: JSON.stringify(input),
-        cache: "no-cache",
-        headers: new Headers({
-            "content-type": "application/json"
-        })
-    })
-
-    const data = await response.json()
-
-    return data
+  const response = await fetch('/api/capture', {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(input),
+    cache: 'no-cache',
+    headers: new Headers({
+      'content-type': 'application/json',
+    }),
+  });
+
+  const data = await response.json();
+
+  return data;
 }
 
 export async function setFilter(input) {
-
-    const response = await fetch('/api/setFilter', {
-        method:"POST",
-        credentials:"include",
-        body: JSON.stringify(input),
-        cache: "no-cache",
-        headers: new Headers({
-            "content-type": "application/json"
-        })
-    })
-
-    const data = await response.json()
-
-    return data
+  const response = await fetch('/api/setFilter', {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(input),
+    cache: 'no-cache',
+    headers: new Headers({
+      'content-type': 'application/json',
+    }),
+  });
+
+  const data = await response.json();
+
+  return data;
 }
 
 export async function getStatusTEC() {
+  const response = await fetch('/api/getStatusTEC');
 
-    const response = await fetch('/api/getStatusTEC')
+  const data = await response.json();
 
-    const data = await response.json()
-
-    return data
+  return data;
 }
 
 export async function getStatus() {
-    const response = await fetch('/api/getStatus')
-    const data = await response.json()
-    return JSON.stringify(data)
+  const response = await fetch('/api/getStatus');
+  const data = await response.json();
+  return JSON.stringify(data);
 }
 
-export async function getFilterWheelStatus() {
-
-    const response = await fetch('/api/fw_test')
+export async function getFilterWheel() {
+  const response = await fetch('/api/getFilterWheel');
+  const data = await response.json();
+  return data;
+}
 
-    const data = await response.json()
+export async function setFilterWheel(filter) {
+  const payload = buildPostPayload({ filter });
+  console.log(payload);
+  const response = await fetch('/api/setFilterWheel', payload);
+  const data = await response.json();
+  return data;
+}
 
-    return data
-}
+export async function homeFilterWheel() {
+  const response = await fetch('/api/homeFilterWheel');
+  const data = await response.json();
+  return data;
+}

src/components/FilterControls.jsx

@@ -1,53 +1,101 @@
 //import { setFilter } from "../apiClient";
 
-function FilterTypeSelector({filterType, setFilterType}) {
+import { useEffect, useState } from 'react';
+import { getFilterWheel, homeFilterWheel, setFilterWheel } from '../apiClient';
 
-    function GetFilterTypeClicked(e) {
-        setFilterType(e.target.value)
-        console.log(e.target.value)
-        //const filt = setFilter(e.target.value)
-        //console.log(filt)
-    }
+function FilterTypeSelector({ filterType, setFilterType }) {
+  const [moving, setMoving] = useState(false);
 
-    return (
-      <fieldset> 
-          <legend>
-              Filters
-          </legend>
-          <label> Ha
-              <input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='Ha'
-              checked={
-                filterType === 'Ha'
-              }/>
-          </label>
-          <label> B
-              <input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='B'
-              checked={
-                filterType === 'B'
-              }/>
-          </label>
-          <label> V
-              <input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='V'
-              checked={
-                filterType === 'V'
-              }/>
-          </label>
-          <label> g
-              <input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='g'
-              checked={
-                filterType === 'g'
-              }/>
-          </label>
-          <label> r
-              <input type='radio' name='FilterType' onChange={GetFilterTypeClicked} value='r'
-              checked={
-                filterType === 'r'
-              }/>
-          </label>
-      </fieldset>
-    );
-  }
-
-
-
-  export default FilterTypeSelector;
+  useEffect(() => {
+    setInterval(() => {
+      getFilterWheel()
+        .then((reply) => setFilterType(reply.filter))
+        .catch((err) => console.log(err));
+    }, 1000);
+  }, [setFilterType]);
+
+  const handleFilterChange = (filter) => {
+    setMoving(true);
+    setFilterWheel(filter)
+      .then(() => {
+        setMoving(false);
+        setFilterType(filter);
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const handleHome = () => {
+    setMoving(true);
+    homeFilterWheel()
+      .then(() => setMoving(false))
+      .catch((err) => console.log(err));
+  };
+
+  return (
+    <fieldset disabled={moving} className="filter">
+      <legend>Filters</legend>
+      <label disabled>
+        Home
+        <input
+          type="radio"
+          name="FilterType"
+          value="Home"
+          checked={filterType === 'Home'}
+        />
+      </label>
+      <label>
+        Ha
+        <input
+          type="radio"
+          name="FilterType"
+          onChange={() => handleFilterChange('Ha')}
+          value="Ha"
+          checked={filterType === 'Ha'}
+        />
+      </label>
+      <label>
+        B
+        <input
+          type="radio"
+          name="FilterType"
+          onChange={() => handleFilterChange('B')}
+          value="B"
+          checked={filterType === 'B'}
+        />
+      </label>
+      <label>
+        V
+        <input
+          type="radio"
+          name="FilterType"
+          onChange={() => handleFilterChange('V')}
+          value="V"
+          checked={filterType === 'V'}
+        />
+      </label>
+      <label>
+        g
+        <input
+          type="radio"
+          name="FilterType"
+          onChange={() => handleFilterChange('g')}
+          value="g"
+          checked={filterType === 'g'}
+        />
+      </label>
+      <label>
+        r
+        <input
+          type="radio"
+          name="FilterType"
+          onChange={() => handleFilterChange('r')}
+          value="r"
+          checked={filterType === 'r'}
+        />
+      </label>
+      <button onClick={handleHome}>Home</button>
+    </fieldset>
+  );
+}
+
+export default FilterTypeSelector;

src/components/PingServer.jsx

@@ -1,4 +1,4 @@
-import { getStatusTEC, getFilterWheelStatus } from "../apiClient"
+import { getStatusTEC, getFilterWheel } from "../apiClient"
 
 function PingServer() {
 
@@ -7,10 +7,10 @@ function PingServer() {
         const msg = await getStatusTEC()
         console.log(msg)
     }
-    
+
     async function fwOnPing() {
         console.log("Pinging Filter Wheel Connection")
-        const msg = await getFilterWheelStatus()
+        const msg = await getFilterWheel()
         console.log(msg.message)
     }
 
@@ -26,4 +26,4 @@ function PingServer() {
     )
 }
 
-export default PingServer
+export default PingServer