~cathos/roast-server-fe

e4a73aadb994cb64be600475f98a02f186ef16c1 — cathos 2 years ago 0e36494 main 
cleanup comments & apply styling (css & graph)
patch browse .tar.gz 
7 files changed, 123 insertions(+), 215 deletions(-)

M roastserver-fe/public/index.html
M roastserver-fe/src/App.css
M roastserver-fe/src/App.js
M roastserver-fe/src/components/Graph.js
M roastserver-fe/src/components/NavBar.js
M roastserver-fe/src/components/RoasterButtons.js
M roastserver-fe/src/components/TempsAndTimes.js

M roastserver-fe/public/index.html => roastserver-fe/public/index.html +2 -2
@@ 24,10 24,10 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <title>Roast Server</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <noscript>Enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.


M roastserver-fe/src/App.css => roastserver-fe/src/App.css +41 -57
@@ 27,46 27,42 @@
}
  

html {
/* html {
    font-size: calc(15px + 0.390625vw);
    line-height: 110%;
}
} */

body {
body, main {
    font-family: serif;
    color: burlywood;
    /* margin: calc(8px + 1.5625vw); */
    margin: calc(8px + 1.5625vw);
    color-scheme: dark;
    background-color: #1b1e1d;
    padding: calc(8px + 1.5625vw);
    min-width: 66vw;
    display: flex;
    flex-wrap: wrap;
}

h1, h2, h3, h4, h5, h6, nav, .fancy-text {
    font-family: 'Eczar',italic, serif;
    /* line-height: 100%; */
    /* text-indent: 1rem; */
    line-height: 100%;
    text-indent: 1rem;
}

#site_title {
    /* align-self: flex-start; */
    text-indent: 1rem;
.Title {
    align-self: center;
    rotate: -40deg;
}

nav {
    /* text-indent: 1rem; */
header{
    margin-top: 0;
}

nav{
    text-indent: 1rem;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    /* min-width: 66vw; */
    align-items: flex-end;
    gap: 1rem;
    /* margin-bottom: 1rem; */
    margin: 1rem;
    /* max-width: 66vw; */
}

header{
    margin-top: 0;
    border-style: solid;
    border-left-color: #a13722;
    border-bottom-color: #a13722;


@@ 81,19 77,26 @@ header{
        rgba(0, 0, 0, 0),
        rgba(20, 5, 10, 1)
    ) 1 1;
    /* line-height: 110%; */
    min-width: 66vw;
}

#portfolio {
.RoasterButtons, .TempsAndTimes{
    min-width: 24vw;
}

main {
    /* display: grid;
    grid-template-rows: 4;
    grid-template-columns: 2;
    column-count: 2;
    column-width: auto; */
}

.controls-and-feedback {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    /* min-width: 66vw; */
    align-items: flex-start;
    gap: 1rem;
    /* margin-bottom: 1rem; */
    margin: 1rem;
    gap: 0;
    margin: 0;
}

.list-grid {


@@ 102,18 105,8 @@ header{
    align-items: center;
}

.list-grid li {
li {
    list-style-type: none;
    /* width: 8rem;
    height: 8rem; */
}

img {
    max-width: 88%;
}

#coffee {
    /* background-image:url("../images/camellia50.png"); */
}

p {


@@ 123,22 116,13 @@ p {
    margin: 1rem;
}

footer {
    margin: calc(8px + 1.5625vw);
    display: grid;
    grid-template-columns: 6.125% repeat(2, 43.8125%) 6.125%;
    grid-template-rows: repeat(4, 25%);
}

footer > section {
    font-family: serif;
    font-size: 0.5rem;
    font-style: italic;
}

#updated {
    grid-area: 2 / 3 / 1 / 2;

.graph-container {
    /* column-count: 2;
    grid-row: 0, 3; */
    position: relative;
    margin: auto;
    height: 70vh;
    width: 80vw;
}

a:link {


M roastserver-fe/src/App.js => roastserver-fe/src/App.js +18 -104
@@ 1,12 1,11 @@
// import logo from "./logo.svg";
import "./App.css";
import React, { useState, useEffect } from "react";
import useSWR from "swr";
// import useSWR from "swr";
import TempsAndTimes from "./components/TempsAndTimes";
import RoasterButtons from "./components/RoasterButtons";
import NavBar from "./components/NavBar";
import useRoastData from "./hooks/useRoastData";
import useConnectionStatus from "./hooks/useConnectionStatus";
// import NavBar from "./components/NavBar";
// import useRoastData from "./hooks/useRoastData";
// import useConnectionStatus from "./hooks/useConnectionStatus";
import Graph from "./components/Graph";

const axios = require("axios");


@@ 41,15 40,15 @@ const testData = {
const testGraphData = { testData };

function App() {
  //   async function checkConnection() {
  //     try {
  //       const result = await axios.get(`${backendAddr}`);
  //       console.log(result);
  //       return result.data;
  //     } catch (err) {
  //       console.error(err);
  //     }
  //   }
  async function checkConnection() {
    try {
      const result = await axios.get(`${backendAddr}`);
      console.log(result);
      return result.data;
    } catch (err) {
      console.error(err);
    }
  }

  async function initRoaster() {
    try {


@@ 73,11 72,6 @@ function App() {
  }

  async function getRoasterStatus() {
    // const config = {
    //   headers: {
    //     Accept: "application/json",
    //   },
    // };
    try {
      const result = await axios
        .get(`${backendAddr}/status`)


@@ 88,12 82,6 @@ function App() {
        .catch((error) => {
          console.log(`BLARGH ${error.response}`);
        });
      console.log(`BLUBBLUB ${result.data}`);
      // if (result.data) {
      //   return result.data;
      // } else {
      //   return initialData;
      // }
    } catch (error) {
      console.error(error);
    }


@@ 110,24 98,6 @@ function App() {
    }
  }

  // async function getBulkRoastData() {
  //   try {
  //     const result = await axios
  //       .get(`${backendAddr}/bulkdata`)
  //       .then((response) => {
  //         console.log(`inside axios`, response.data);
  //         return response;
  //       })
  //       .catch((error) => {
  //         console.log(`BulkDataError ${error.response}`);
  //       });
  //     console.log(`BulkDataResult ${result.data}`);
  //     return result.data;
  //   } catch (error) {
  //     console.error(error);
  //   }
  // }

  function changeRoasterState(button) {
    const config = { request: button };
    axios


@@ 141,74 111,18 @@ function App() {
      });
  }

  // const connectionStatus = checkConnection();
  // initRoaster();
  // const roastData = useState(initialData, getRoasterStatus());
  // const roastData = getRoasterStatus();
  // const roastData = testData;

  // const [roastData, getRoastData] = useState(initialData);

  // const [bulkRoastData, getBulkData] = useState(testGraphData);

  // useEffect(() => {
  //   getRoastData(getRoasterStatus());
  //   console.log(`inside useEffect`, roastData);
  // }, []);

  // async function effectRoastData() {
  //   const result = await getRoasterStatus();
  //   getRoastData(result.data);
  //   console.log(`inside effectRoastData`, result.data);
  // }

  // useEffect(() => {
  //   // effectRoastData();
  //   (async () => {
  //     const result = await getRoasterStatus();
  //     const resultdata = await result.data;
  //     getRoastData(resultdata);
  //     console.log(`inside effectRoastData`, resultdata);
  //   })();

  //   return () => {};
  // }, [roastData.id]);

  // useEffect(() => {
  //   (async () => {
  //     const bulkRoastData2 = await getBulkRoastData();
  //     getBulkData(bulkRoastData2);
  //     // console.log(`inside useEffect`, bulkRoastData2);
  //   })();

  //   return () => {
  //     // this now gets called when the component unmounts
  //   };
  // }, []);

  // const [connectionStatus, checkConnection] = useState();

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="Title">Roast Server</h1>
        <nav>
          <NavBar />
          {/* <button onClick={() => startDataRecording()}>
            Record Roast Data
          </button> */}
          <h1 className="Title">Roast Server</h1>
          <div class="controls-and-feedback">
            <RoasterButtons changeStateCallback={changeRoasterState} />
            <TempsAndTimes />
          </div>
        </nav>
      </header>
      <main>
        {/* {roastData ? ( */}
        <TempsAndTimes
        // roasterdata={roastData}
        />
        {/* ) : null} */}
        <RoasterButtons
          // roasterdata={roastData}
          changeStateCallback={changeRoasterState}
        />
        <Graph></Graph>
      </main>
    </div>


M roastserver-fe/src/components/Graph.js => roastserver-fe/src/components/Graph.js +28 -18
@@ 12,8 12,8 @@ import {
import { Line } from "react-chartjs-2";
// import faker from "faker";
import useRoastData from "../hooks/useRoastData";
import useBulkRoastData from "../hooks/useBulkRoastData";
import PropTypes from "prop-types";
// import useBulkRoastData from "../hooks/useBulkRoastData";
// import PropTypes from "prop-types";

ChartJS.register(
  CategoryScale,


@@ 27,6 27,20 @@ ChartJS.register(

export const options = {
  responsive: true,
  scales: {
    x: {
      min: 0,
      max: 20,
    },
    y: {
      min: 0,
      max: 300,
    },
    yd: {
      min: 0,
      max: 30,
    },
  },
  plugins: {
    legend: {
      position: "bottom",


@@ 38,23 52,20 @@ export const options = {
  },
};

const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
// const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];

export const data = {
  labels,
  // labels,
  datasets: [
    {
      label: "Bean Temp",
      data: [],
      // data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),รท
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
    {
      label: "IR Bean Temp",
      // data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: "rgb(53, 162, 235)",
      backgroundColor: "rgba(53, 162, 235, 0.5)",
      borderColor: "rgb(200, 162, 200)",
      backgroundColor: "rgba(200, 162, 200, 0.5)",
    },
  ],
};


@@ 64,15 75,14 @@ const Graph = (props) => {
  if (isLoading) return <p>Loading</p>;
  if (isError) return <p>Error</p>;
  const roastTime = `${roasterData.roast_minutes}:${roasterData.roast_seconds}`;
  data.datasets[0].data = { roastTime: roasterData.bean_temp };
  // .map(
  //   ({ bean_temp, roast_minutes, roast_seconds }) => {
  //     const roastTime = `${roast_minutes}:${roast_seconds}`;
  //     return { bean_temp, roastTime };
  //   }
  // );
  console.log(data.datasets[0].data[0]);
  return <Line options={options} data={data} />;
  data.datasets[0].data = [{ x: roastTime, y: roasterData.bean_temp }];
  data.datasets[1].data = [{ x: roastTime, y: roasterData.ir_bt }];

  return (
    <div class="graph-container">
      <Line options={options} data={data} />
    </div>
  );
};

export default Graph;


M roastserver-fe/src/components/NavBar.js => roastserver-fe/src/components/NavBar.js +5 -5
@@ 1,5 1,5 @@
import React from "react";
import PropTypes from "prop-types";
// import PropTypes from "prop-types";
import useConnectionStatus from "../hooks/useConnectionStatus";

const NavBar = (props) => {


@@ 11,11 11,11 @@ const NavBar = (props) => {
    connection = "Roaster Connected";
  }
  return (
    <div className="NavBar">
      <h3 className="Connection_Status" alt="Connection Status">
    <ul className="NavBar">
      <li className="Connection_Status" alt="Connection Status">
        {connection}
      </h3>
    </div>
      </li>
    </ul>
  );
};



M roastserver-fe/src/components/RoasterButtons.js => roastserver-fe/src/components/RoasterButtons.js +9 -9
@@ 1,5 1,5 @@
import React from "react";
import PropTypes from "prop-types";
// import PropTypes from "prop-types";
import useRoastData from "../hooks/useRoastData";

const RoasterButtons = (props) => {


@@ 7,22 7,22 @@ const RoasterButtons = (props) => {
  if (isLoading) return <p>Loading</p>;
  if (isError) return <p>Error</p>;
  return (
    <ul>
      <h2>
    <ul className="RoasterButtons, fancy-text">
      <li>
        {/* {name} */}
        <button onClick={() => props.changeStateCallback("PRS")}>PRS</button>
        <span> {roasterData.roaster_state}</span>
      </h2>
      <h3>
        <span> Roaster State: {roasterData.roaster_state}</span>
      </li>
      <li>
        <button onClick={() => props.changeStateCallback("Heat-")}>-</button>
        <span> Heat: {roasterData.heater_level} </span>
        <button onClick={() => props.changeStateCallback("Heat+")}>+</button>
      </h3>
      <h3>
      </li>
      <li>
        <button onClick={() => props.changeStateCallback("Fan-")}>-</button>
        <span> Fan: {roasterData.fan_level} </span>
        <button onClick={() => props.changeStateCallback("Fan+")}>+</button>
      </h3>
      </li>
    </ul>
  );
};


M roastserver-fe/src/components/TempsAndTimes.js => roastserver-fe/src/components/TempsAndTimes.js +20 -20
@@ 1,5 1,5 @@
import React from "react";
import PropTypes from "prop-types";
// import PropTypes from "prop-types";
import useRoastData from "../hooks/useRoastData";

const TempsAndTimes = (props) => {


@@ 15,34 15,34 @@ const TempsAndTimes = (props) => {
  // const timeSinceFC =
  // const devPerc = (timeSinceFC / roastTime)
  return (
    <div className="Temps-and-Times">
      <h3 className="Roast-Time" alt="Roast Time">
    <ul className="TempsAndTimes, fancy-text">
      <li className="Roast-Time" alt="Roast Time">
        Roast Time: {roastTime}
      </h3>
      <h3 className="IR-Bean-Temp" alt="Infrared Bean Temperature">
      </li>
      <li className="IR-Bean-Temp" alt="Infrared Bean Temperature">
        IR Bean Temp: {roasterData.ir_bt}
      </h3>
      <h3 className="TC-Bean-Temp" alt="Thermocouple Bean Temperature">
      </li>
      <li className="TC-Bean-Temp" alt="Thermocouple Bean Temperature">
        TC Bean Temp: {roasterData.bean_temp}
      </h3>
      <h3 className="BT-ROR" alt="Bean Temperature Rate of Rise">
      </li>
      <li className="BT-ROR" alt="Bean Temperature Rate of Rise">
        BT-ROR: {roasterData.bt_ror}
      </h3>
      <h3 className="Delta-T" alt="Delta Temperature">
      </li>
      <li className="Delta-T" alt="Delta Temperature">
        Delta-T: {roasterData.delta_t}
      </h3>
      <h3 className="Dev-Percentage" alt="Development Percent">
      </li>
      <li className="Dev-Percentage" alt="Development Percent" hidden>
        {/* Development: {roasterData.devPerc} */}
      </h3>
      <h3 className="Time-Since-FC" alt="Time Since First Crack">
      </li>
      <li className="Time-Since-FC" alt="Time Since First Crack" hidden>
        {/* Time Since FC: {roasterData.timeSinceFC} */}
      </h3>
      <section className="Extra-Info">
        <h4 className="Ext-Temp" alt="Exhaust Temperature">
      </li>
      <section className="Extra-Info" hidden>
        <li className="Ext-Temp" alt="Exhaust Temperature">
          {/* Ext Temp: {roasterData.ext_t} */}
        </h4>
        </li>
      </section>
    </div>
    </ul>
  );
};