MISC: Misc cleanup

client/react/src/App.js

@@ -23,7 +23,6 @@ import NewTodoForm from './forms/create/NewTodoForm';
 import NewTypeForm from './forms/create/NewTypeForm';
 import NewLightForm from './forms/create/NewLightForm';
 import NewGenusForm from './forms/create/NewGenusForm';
-import Page from './elements/page/Page';
 
 const drawerWidth = 240;
 
@@ -83,11 +82,11 @@ function App() {
             <Route path="/alerts" element={<Alerts />} />
             <Route path="/todos" element={<Todos />} />
 
-            <Route path="/view" element={<Page />} />
+            <Route path="/view" element={<Home />} />
             <Route path="/system/view" element={<Systems />} />
             <Route path="/plant/view" element={<Plants />} />
 
-            <Route path="/create" element={<Page />} />
+            <Route path="/create" element={<Home />} />
             <Route path="/plant/create" element={<NewPlantForm />} />
             <Route path="/system/create" element={<NewSystemForm />} />
             <Route path="/todo/create" element={<NewTodoForm /> } />

client/react/src/forms/create/NewGenusForm.js

@@ -101,5 +101,3 @@ const NewGenusForm = () => {
 };
 
 export default NewGenusForm;
-
-

client/react/src/forms/create/NewLightForm.js

@@ -9,20 +9,22 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TungstenSharpIcon from '@mui/icons-material/TungstenSharp';
 import {useNavigate} from "react-router-dom" 
 
-
+// Form to create a light that is potentially used on a system.
 const NewLightForm = ({ systems }) => {
 
+  // Fields
   const [name, setName] = useState('');
   const [system, setSystem] = useState(null);
   const [cost, setCost] = useState(0);
 
-  const [allSystems, setAllSystems] = useState([]);
-
+  // Submitted state
   const [submitted, setSubmitted] = useState(false);
 
   // Navigation
   const navigate = useNavigate();
 
+  // Available systems
+  const [allSystems, setAllSystems] = useState([]);
   useEffect(() => {
     if (!systems) {
       fetch('http://127.0.0.1:5000/system')
@@ -32,6 +34,7 @@ const NewLightForm = ({ systems }) => {
     }
   }, [systems]);
 
+  // POST
   useEffect(() => {
     if (submitted) {
       const requestOptions = {
@@ -52,16 +55,19 @@ const NewLightForm = ({ systems }) => {
     }
   }, [submitted, name, cost, system]);
 
+  // Initiate POST
   const handleSubmit = (event) => {
     event.preventDefault();
     setSubmitted(true); // Update submitted state
   };
 
+  // Exit
   const handleCancel = () => {
     clearForm();
     navigate("/create");
   };
 
+  // Clear Form Fields
   const clearForm = () => {
     setName('');
     setCost(0);

client/react/src/forms/create/NewPlantForm.js

@@ -10,6 +10,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import MenuItem from '@mui/material/MenuItem';
 import {useNavigate} from "react-router-dom" 
 
+// Creating Plant Form
 const NewPlantForm = () => {
   const phases = ["cutting", "seed", "juvy", "adult"]
 

client/react/src/models/System.js

@@ -58,16 +58,16 @@ const System = ({ system, full }) => {
       <CardActionArea>
         <CardHeader
           avatar={
-            <Avatar aria-label="recipe">
-              <PointOfSaleIcon/>
+            <Avatar aria-label="recipe" sx={{backgroundColor:'inherit'}}>
+              <PointOfSaleIcon className="medium_button" color='secondary'/>
             </Avatar>
           }
           title={system.name}
           subheader={system.created_on}
         />
         <CardContent>
           <Box full>
-            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', width:100 }}>
               <CircularProgress
                 variant="determinate"
                 value={system.humidity}
@@ -76,7 +76,7 @@ const System = ({ system, full }) => {
               />
               <InvertColorsSharpIcon sx={{color: '#3f51b5', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: '32px' }} />
             </Box>      
-            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', width:100 }}>
               <CircularProgress
                 variant="determinate"
                 value={system.temperature}
@@ -85,7 +85,7 @@ const System = ({ system, full }) => {
               />
               <DeviceThermostatSharpIcon sx={{ color: '#ff9800', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: '32px' }} />
             </Box>
-            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Box sx={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', width:100 }}>
               <CircularProgress
                 variant="determinate"
                 value={system.temperature}

client/react/src/navigation/AppNavigation.js

@@ -121,13 +121,11 @@ function AppNavigation(props) {
       <div className='right_three_qaurter'>
         {currentNavigation === NAVS.CREATE && (
           <CreateOptions
-            width={200}
             onClose={() => setCurrentNavigation(null)}
           />
         )}
         {currentNavigation === NAVS.VIEW && (
           <ViewOptions
-            width={200}
             onClose={() => setCurrentNavigation(null)}
           />
         )}

client/react/src/navigation/CreateOptions.js

@@ -29,53 +29,51 @@ const CreateOptions = () => {
     <div>
       <Box
         sx={{ flexShrink: { sm: 0 }}}
-        aria-label="mailbox folders"
-        backgroundColor='secondary' 
       >
         <List color='secondary'>
-          <ListItem key={CreateForm.PLANT} color='secondary'>
+          <ListItem key={CreateForm.PLANT}>
             <ListItemButton onClick={() => navigate("/plant/create")}>
-              <ListItemIcon color='secondary'>
+              <ListItemIcon>
                 <GrassOutlinedIcon />
               </ListItemIcon>
               <ListItemText primary={"Plant"} />
             </ListItemButton>
           </ListItem>
-          <ListItem key={CreateForm.TYPE} backgroundColor='secondary'>
+          <ListItem key={CreateForm.TYPE}>
             <ListItemButton onClick={() => navigate("/type/create")}>
-              <ListItemIcon color="secondary">
+              <ListItemIcon>
                 <MergeTypeSharpIcon />
               </ListItemIcon>
               <ListItemText primary={"Type"} />
             </ListItemButton>
           </ListItem>
-          <ListItem key={CreateForm.GENUS} backgroundColor='secondary'>
+          <ListItem key={CreateForm.GENUS}>
             <ListItemButton  onClick={() => navigate("/genus/create")}>
-              <ListItemIcon color="secondary">
+              <ListItemIcon>
                 <FingerprintSharpIcon />
               </ListItemIcon>
               <ListItemText primary={"Genus"} />
             </ListItemButton>
           </ListItem>
-          <ListItem key={CreateForm.SYSTEM} backgroundColor='secondary'>
+          <ListItem key={CreateForm.SYSTEM}>
             <ListItemButton onClick={() => navigate("/system/create")}>
-              <ListItemIcon color="secondary">
+              <ListItemIcon>
                 <PointOfSaleIcon />
               </ListItemIcon>
               <ListItemText primary={"System"} />
             </ListItemButton>
           </ListItem>
-          <ListItem key={CreateForm.LIGHT} backgroundColor='secondary'>
+          <ListItem key={CreateForm.LIGHT}>
             <ListItemButton onClick={() => navigate("/light/create")}>
-              <ListItemIcon color="secondary">
+              <ListItemIcon>
                 <TungstenSharpIcon />
               </ListItemIcon>
               <ListItemText primary={"Light"} />
             </ListItemButton>
           </ListItem>
           <ListItem key={CreateForm.TODO}>
             <ListItemButton onClick={() => navigate("/todo/create")}>
-              <ListItemIcon color="secondary">
+              <ListItemIcon>
                 <FormatListNumberedIcon />
               </ListItemIcon>
               <ListItemText primary={"TODO"} />

client/react/src/navigation/ViewOptions.js

@@ -21,21 +21,19 @@ const ViewOptions = () => {
     <div>
       <Box
         sx={{ flexShrink: { sm: 0 }}}
-        aria-label="mailbox folders"
-        backgroundColor='secondary' 
       >
-        <List color='secondary'>
-          <ListItem key={ViewForm.PLANT} color='secondary'>
+        <List>
+          <ListItem key={ViewForm.PLANT} >
             <ListItemButton onClick={() => navigate("/plant/view")}>
-              <ListItemIcon color='secondary'>
+              <ListItemIcon>
                 <GrassOutlinedIcon />
               </ListItemIcon>
               <ListItemText primary={"Plant"} />
             </ListItemButton>
           </ListItem>
           <ListItem key={ViewForm.SYSTEM}>
             <ListItemButton onClick={() => navigate("/system/view")}>
-              <ListItemIcon color="info">
+              <ListItemIcon>
                 <PointOfSaleIcon />
               </ListItemIcon>
               <ListItemText primary={"System"} />

client/react/src/pages/Alerts.js

@@ -8,7 +8,7 @@ import { CardActionArea, CardHeader } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import IconButton from '@mui/material/IconButton';
 import CardActions from '@mui/material/CardActions';
-import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import ReportGmailerrorredSharpIcon from '@mui/icons-material/ReportGmailerrorredSharp';
 // import Typography from '@mui/material/Typography';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
@@ -65,7 +65,7 @@ const Alerts = () => {
                       <CardHeader
                         avatar={
                           <Avatar aria-label="recipe" sx={{backgroundColor:'inherit'}}>
-                            <FormatListNumberedIcon color='info'/>
+                            <ReportGmailerrorredSharpIcon className="medium_button" color='alert'/>
                           </Avatar>
                         }
                         title={plantAlert.alert_type}

client/react/src/pages/Home.js

@@ -1,33 +1,18 @@
 // Home.js
 import GrassOutlinedIcon from '@mui/icons-material/GrassOutlined';
-import System from '../models/System'
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import IconButton from '@mui/material/IconButton';
 import {useNavigate} from "react-router-dom" 
 
 const Home = () => {
   // Navigation
   const navigate = useNavigate();
 
-  // Passable Data
-  const [systems, setSystems] = useState([]);
-
-  useEffect(() => {
-    // Fetch system data from the server
-    fetch('http://localhost:5000/systems')
-      .then((response) => response.json())
-      .then((data) => setSystems(data))
-      .catch(() => console.log("Oh no"));
-  }, []);
-
   return (
     <>
       <div className="App">
         <div>
           <div className='system_min'>
-            <System
-              system = {systems[0]}
-            />
           </div>
           <IconButton size="large" className={`home_icon`} color="primary" onClick ={()=>{ navigate("/plant/view")}}>
             <GrassOutlinedIcon className='home_icon'/>

client/react/src/pages/Plants.js

@@ -18,13 +18,21 @@ import { DataGrid,GridToolbarContainer,
   GridToolbarDensitySelector, } from '@mui/x-data-grid';
 import Box from '@mui/material/Box';
 
+const phasesToLabels = {
+  "cutting": "Cutting",
+  "seed": "Seed",
+  "juvy":  "Juvy",
+  "adult": "Adult",
+}
+
 const Plants = () => {
 
   const [plants, setPlants] = useState([]);
   const [genuses, setGensuses] = useState([]);
   const [systems, setSystems] = useState([]);
   const [types, setTypes] = useState([]);
 
+  // Grid Columns for plants
   const columns = [
     {
       field: 'type_id',
@@ -105,10 +113,16 @@ const Plants = () => {
     {
       field: 'phase',
       headerName: 'Phase',
-      width: 60,
+      width: 120,
+      valueGetter: (value) => {
+        const label = phasesToLabels[value.value];
+
+        return label ? label : "NaN";
+      }
     },
   ];
 
+  // Form Openers
   const [isUpdatePlantFormOpen, setIsUpdatePlantFormOpen] = useState(false);
   const [isWaterPlantsFormOpen, setIsWaterPlantsFormOpen] = useState(false);
   const [isKillPlantsFormOpen, setIsKillPlantsFormOpen] = useState(false);
@@ -117,6 +131,7 @@ const Plants = () => {
   const [selectedPlants, setSelectedPlants] = useState([]);
 
 
+  // Grid Toolbar
   function CustomToolbar() {
     return (
       <GridToolbarContainer>
@@ -161,6 +176,7 @@ const Plants = () => {
     );
   }
 
+  // Data
   useEffect(() => {
     // TODO: Merge plants, genus, type to same model
     // Fetch plant data from the server

client/react/src/pages/Todos.js

@@ -64,7 +64,7 @@ const Todos = () => {
                       <CardHeader
                         avatar={
                           <Avatar aria-label="recipe" sx={{backgroundColor:'inherit'}}>
-                            <FormatListNumberedIcon color='lime'/>
+                            <FormatListNumberedIcon className="medium_button" color='lime'/>
                           </Avatar>
                         }
                         title={todo.name}

server/app.py

@@ -130,7 +130,6 @@ def kill_plants():
 
     return jsonify({"message": f"{len(plants)} Plants killed successfully:("}), 201
 
-
 @app.route("/genus", methods=["GET"])
 def get_genuses():
     """