Merge pull request #46 from mseng10/weekend_of_fun

Weekend of fun

.gitignore

@@ -1 +1,3 @@
-.idea/
+.idea/
+
+todo.txt

client/src/App.js

@@ -18,13 +18,13 @@ import Box from '@mui/material/Box';
 import AppNavigation from './AppNavigation';
 import PlantCreate from './pages/plant/PlantCreate';
 import SystemCreate from './pages/system/SystemCreate';
-import TypeCreate from './pages/plant/type/TypeCreate';
+// import TypeCreate from './pages/plant/type/TypeCreate';
 import LightCreate from './pages/system/light/LightCreate';
-import GenusCreate from './pages/plant/genus/GenusCreate';
+// import GenusCreate from './pages/plant/genus/GenusCreate';
 import PlantUpdate from './pages/plant/PlantUpdate';
 import SystemUpdate from './pages/system/SystemUpdate';
-import TodoUpdate from './pages/todo/TodoUpdate';
 import TodoCreate from './pages/todo/TodoCreate';
+import TodoUpdate from './pages/todo/TodoUpdate';
 import MixCreate from './pages/mix/MixCreate';
 import Stats from './pages/stat/Stats';
 
@@ -152,9 +152,9 @@ function App() {
             <Route path="/plants/:id" element={<PlantUpdate />} />
             <Route path="/plants/create" element={<PlantCreate />} />
 
-            <Route path="/types/create" element={<TypeCreate /> } />
+            {/* <Route path="/species/create" element={<SpeciesCreate /> } /> */}
 
-            <Route path="/genuses/create" element={<GenusCreate /> } />
+            {/* <Route path="/genera/create" element={<GeneraCreate /> } /> */}
 
             <Route path="/mixes/create" element={<MixCreate /> } />
           </Routes>

client/src/AppNavigation.js

@@ -31,8 +31,8 @@ function AppNavigation({ window }) {
     { id: 'create', icon: 'create', color: 'primary', subMenu: [
       { id: 'plants', url: '/plants/create', icon: 'plant', label: 'Plant' },
       { id: 'mix', url: '/mixes/create', icon: 'mix', label: 'Mix' },
-      { id: 'type', url: '/types/create', icon: 'type', label: 'Type' },
-      { id: 'genus', url: '/genuses/create', icon: 'genus', label: 'Genus' },
+      // { id: 'type', url: '/types/create', icon: 'type', label: 'Type' },
+      // { id: 'genus', url: '/genuses/create', icon: 'genus', label: 'Genus' },
       { id: 'system', url: '/systems/create', icon: 'system', label: 'System' },
       { id: 'light', url: '/lights/create', icon: 'light', label: 'Light' },
       { id: 'todo', url: '/todos/create', icon: 'todo', label: 'Todo' },

client/src/api.js

@@ -4,10 +4,10 @@ export const APIS = {
   plant: {
     getAll: "/plants/",
     create: "/plants/",
-    getOne: "/plants/{id}",
-    updateOne: "/plants/{id}",
+    getOne: "/plants/{id}/",
+    updateOne: "/plants/{id}/",
     deprecateOne: "/plants/{id}/deprecate/",
-    waterMany: "/plants/water",
+    waterMany: "/plants/water/",
     deprecateMany: "/plants/deprecate/"
   },
   system: {
@@ -24,10 +24,10 @@ export const APIS = {
     create: "/todos/",
     getOne: "/todos/{id}/",
     updateOne: "/todos/{id}/",
-    deprecateOne: "/todos/{id}/deprecate/",
+    deleteOne: "/todos/{id}/",
   },
   alert: {
-    getAll: "/alerts/check/",
+    getAll: "/alerts/",
     deprecateOne: "/alerts/{id}/deprecate"
   },
   light: {
@@ -49,14 +49,19 @@ export const APIS = {
   soil: {
     getAll: "/soils/"
   },
-  type: {
-    getAll: "/types/",
-    create: "/types/"
+  species: {
+    getAll: "/species/",
+    create: "/species/"
+  },
+  generaTypes: {
+    getAll: "/genus_types/",
+    create: "/genus_types/",
+    genera: "/genus_types/{id}/tasks/{eid}/",
+    generaCreate: "/genus_types/{id}/tasks/{eid}/"
+  },
+  task: {
+    updateOne: "/todos/{id}/tasks/{eid}/"
   },
-  genus: {
-    getAll: "/genuses/",
-    create: "/genuses/"
-  }
 }
 
 export const apiBuilder = (url) => {
@@ -68,6 +73,11 @@ export const apiBuilder = (url) => {
 
       return this;
     },
+    setEmbedId(id) {
+      this.fullUrl = this.fullUrl.replace('{eid}', id);
+
+      return this;
+    },
     get() {
 
       return this.fullUrl;
@@ -118,3 +128,18 @@ export const simplePatch = (url, patchModel) => {
       return response.json();
     });
 };
+
+/** Wrapper for fetch with error handling and jsonifying. */
+export const simpleDelete = (url) => {
+  return fetch(url, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' }    
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      return response.json();
+    });
+};

client/src/constants.js

@@ -34,4 +34,9 @@ export const ICON_STYLE = {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   fontSize: '32px',
-};
+};
+
+export const PANEL_TYPES = {
+  small: { width: 256, height: 312, borderRadius: 2, float:'right', paddingRight: 2, marginLeft: 4  },
+  medium: { width: 512, height: 312, borderRadius: 2, float:'left', paddingRight: 2, paddingLeft: 4  }
+}

client/src/elements/Form.js

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import IconButton from '@mui/material/IconButton';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import IconFactory from './IconFactory';
 import Slider from '@mui/material/Slider';
+import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import MenuItem from '@mui/material/MenuItem';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
-
 export const FormButton = ({icon, color, handleCancel}) => {
   // Handle case when system data is not available
   return  (
@@ -210,3 +210,135 @@ export const DateSelector = (fieldInfo) => {
       </LocalizationProvider>
     </div>)
 };
+
+
+
+export const FieldRenderer = ({field, value, onChange}) => {
+  if (React.isValidElement(field.component)) {
+    // If it's a React element, clone it and pass props
+    return React.cloneElement(field.component, { value, onChange: (newValue) => onChange(field.name, newValue) });
+  } else if (typeof field.component === 'function') {
+    // If it's a function component, render it with props
+    const CustomComponent = field.component;
+
+    return <CustomComponent value={value} onChange={(newValue) => onChange(field.name, newValue)} />;
+  }
+
+  switch (field.type) {
+    case 'text':
+      return (
+        <TextAreaInput
+          label={field.label}
+          value={value}
+          name={field.name}
+          color="primary"
+          setValue={onChange}
+        />)
+    case 'input':
+      return (
+        <FormTextInput
+          label={field.label}
+          name={field.name}
+          value={value}
+          color="primary"
+          setValue={onChange}
+        />)
+    case 'date':
+      return (
+        <DateSelector
+          label={field.label}
+          value={value}
+          setValue={onChange}
+          name={field.name}
+        />
+      )
+    case 'number':
+      return (
+        <NumberInput
+          label={field.label}
+          value={value}
+          setValue={onChange}
+          name={field.name}
+        />
+      )
+    default:
+      return <div></div>
+      }
+}
+
+export const DynamicForm = ({ sections, onSubmit, onCancel, initialModel={} }) => {
+  const [formData, setFormData] = useState({});
+
+  const handleChange = (name, value) => {
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  useEffect(() => {
+    const importedData = sections.flatMap(section => section.fields).reduce((acc, field) => {
+      const value = initialModel[field.name];
+      acc[field.name] = field.import ? field.import(value) : value;
+
+      return acc;
+    }, {});
+    setFormData(importedData);
+  }, [initialModel, sections]);
+
+  const handleSubmit = (_e) => {
+    _e.preventDefault();
+    const exportedData = Object.entries(formData).reduce((acc, [key, value]) => {
+      const field = sections.flatMap(_s => _s.fields).find(_f => _f.name === key);
+      if (field && field.export) {
+        acc[key] = field.export(value);
+      } else {
+        acc[key] = value;
+      }
+
+      return acc;
+    }, {});
+    onSubmit(exportedData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {sections.map((section) => (
+          <Box sx={section.size} key="1">
+          {section.icon && (
+            <div className='left'>
+            <IconFactory
+              icon={section.icon}
+              color={"primary"}
+              size={"xxxlg"}
+            ></IconFactory>
+            </div>
+          )}
+          <div className='right'>
+
+          {section.fields.map((field) => (
+            <div key={field.name}>
+              <FieldRenderer
+                field={field}
+                value={formData[field.name] || field.default}
+                onChange={handleChange}
+              />
+            </div>
+          ))}            
+          </div>
+        </Box>
+      ))}
+        <IconButton className="left_button" type="submit" color="info">
+          <IconFactory
+            icon={"check"}
+            size={"xlg"}
+          >
+          </IconFactory>
+        </IconButton>    
+        <IconButton className="right_button" color="error" onClick={onCancel}>
+          <IconFactory
+            icon={"close"}
+            size={"xlg"}
+          >
+          </IconFactory>
+        </IconButton>    
+        </form>
+  );
+};

client/src/elements/Page.js

@@ -34,7 +34,7 @@ export const NoData = () => {
   return PageButton("noData", "primary", "No Data :0");
 };
 
-/** No data happy page view (good we don't have any:). */
+/** No data happy page view (good we don't have any:)). */
 export const NoDataHappy = () => {
   return PageButton("happy", "primary", "No Data :)");
 }

client/src/hooks/useAlerts.js

@@ -1,4 +1,3 @@
-// useAlerts.js
 import { useState, useEffect } from 'react';
 import { simpleFetch, simplePost, APIS, apiBuilder } from '../api';
 
@@ -21,9 +20,9 @@ export const useAlerts = (initialAlerts = []) => {
     setError(null);
     simplePost(apiBuilder(APIS.alert.deprecateOne).setId(id).get())
       .then(() => 
-      setAlerts(prevAlerts => prevAlerts.filter(alert => 
-        alert.id !== id
-      )))
+        setAlerts(prevAlerts => prevAlerts.filter(alert => 
+          alert.id !== id
+        )))
       .catch(error => {
         setError(error);
       })

client/src/hooks/useMix.js

@@ -1,14 +1,12 @@
 import { useState, useEffect } from 'react';
 import { simpleFetch, simplePost, apiBuilder, APIS } from '../api';
 
-export const useMixes = (query) => {
+export const useMixes = () => {
   const [mixes, setMixes] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    if (!query) return;
-
     setIsLoading(true);
     setError(null);
     simpleFetch(apiBuilder(APIS.mix.getAll).get())
@@ -18,12 +16,12 @@ export const useMixes = (query) => {
       })
       .finally(() => 
         setIsLoading(false));
-  }, [query]);
+  }, []);
 
   const createMix = async (newMix) => {
     setIsLoading(true);
     setError(null);
-    simplePost("/mixes/", newMix)
+    simplePost(apiBuilder(APIS.mix.create).get(), newMix)
       .then(data => 
         setMixes(prevMixes => [...prevMixes, data]))
       .catch(error => {