Skip to content

Commit

Permalink
Merge pull request #30 from mseng10/hackathon
Browse files Browse the repository at this point in the history 
Light model, genus data and
  • Loading branch information
@mseng10
mseng10 authored Jun 11, 2024
2 parents d76839a + b54f90b commit d8a52dc
Show file tree
Hide file tree
Showing 12 changed files with 681 additions and 144 deletions.
12 changes: 7 additions & 5 deletions client/react/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,25 +124,27 @@ h1, h2 {
}

.left {
width: 128px;
display:inline;
width: 50%;
float:left;
}

.left_button {
font-size: 112px !important;
font-size: 124px !important;
}

.right {
width: 256px;
display:inline;
width: 50%;
float:right;
}

.modal {
outline: 0!important;
}

.center {
margin-left: auto;
margin-right: auto;}

#back {
position: fixed;
left: 0;
Expand Down
11 changes: 10 additions & 1 deletion client/react/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { green, pink, lightBlue, blueGrey, teal, brown } from '@mui/material/colors';
import { green, pink, lightBlue, blueGrey, teal, brown, yellow, lightGreen} from '@mui/material/colors';
import Plants from './pages/Plants';
import System from './pages/System';
import Home from './pages/Home';
Expand All @@ -34,6 +34,15 @@ const darkTheme = createTheme({
},
repot: {
main: brown[500],
},
light: {
main: yellow[500]
},
type: {
main: lightGreen[500]
},
genus: {
main: teal[500]
}
},
});
Expand Down
4 changes: 3 additions & 1 deletion client/react/src/forms/NewGenusForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const NewGenusForm = ({ isOpen, onRequestClose }) => {
<Box sx={{ width: 512, bgcolor: 'background.paper', borderRadius: 2 }}>
<form onSubmit={handleSubmit}>
<div className='left'>
<FingerprintSharpIcon color='info' className={submitted ? 'home_icon_form_submit' : 'home_icon_form'}/>
<FingerprintSharpIcon color='genus' className={submitted ? 'home_icon_form_submit' : 'home_icon_form'}/>
<ButtonGroup>
<IconButton className="left_button" type="submit" color="primary">
<CheckSharpIcon className="left_button"/>
Expand All @@ -98,6 +98,7 @@ const NewGenusForm = ({ isOpen, onRequestClose }) => {
label="Genus Name"
value={name}
variant="standard"
color="genus"
onChange={(event) => setName(event.target.value)}
/>
<TextField
Expand All @@ -108,6 +109,7 @@ const NewGenusForm = ({ isOpen, onRequestClose }) => {
label="Watering (days)"
value={watering}
onChange={(event) => setWatering(event.target.value)}
color="genus"
variant="standard"
/>
</div>
Expand Down
248 changes: 180 additions & 68 deletions client/react/src/forms/NewSystemForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,21 @@ import ButtonGroup from '@mui/material/ButtonGroup';
import CheckSharpIcon from '@mui/icons-material/CheckSharp';
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
import Slider from '@mui/material/Slider';
import Stack from '@mui/material/Stack';
import AvTimerSharpIcon from '@mui/icons-material/AvTimerSharp';
import StraightenSharpIcon from '@mui/icons-material/StraightenSharp';
import InvertColorsSharpIcon from '@mui/icons-material/InvertColorsSharp';
import DeviceThermostatSharpIcon from '@mui/icons-material/DeviceThermostatSharp';


const NewSystemForm = ({ isOpen, onRequestClose }) => {
const [name, setName] = useState('');
const [humidity, setHumidity] = useState(0);
const [temperature, setTempurature] = useState(0);
const [duration, setDuration] = useState(0);
const [distance, setDistance] = useState(0);
const [description, setDescription] = useState('')
const [humidity, setHumidity] = useState(60);
const [temperature, setTempurature] = useState(68);
const [duration, setDuration] = useState(12);
const [distance, setDistance] = useState(24);

const [allSystems, setAllSystems] = useState([]);

Expand Down Expand Up @@ -48,7 +55,7 @@ const NewSystemForm = ({ isOpen, onRequestClose }) => {
clearForm();
onRequestClose();
}
}, [submitted, name, temperature, humidity, distance, duration, onRequestClose]);
}, [submitted, name, description, temperature, humidity, distance, duration, onRequestClose]);

const handleSubmit = (event) => {
event.preventDefault();
Expand All @@ -62,13 +69,78 @@ const NewSystemForm = ({ isOpen, onRequestClose }) => {

const clearForm = () => {
setName('');
setDescription('');
setTempurature(0);
setHumidity(0);
setDistance(0);
setDuration(0);
setSubmitted(false);
};

// Target temperature marks
const temperatureMarks = [
{
value: 48,
label: '48',
},
{
value: 68,
label: '68°F',
},
{
value: 80,
label: '80°F',
}
];

// Humidity field marks
const humidityMarks = [
{
value: 0,
label: '0%',
},
{
value: 60,
label: '60%',
},
{
value: 100,
label: '100%',
}
];

// Duration field marks
const durationMarks = [
{
value: 6,
label: '6',
},
{
value: 12,
label: '12',
},
{
value: 18,
label: '18',
}
];

// Lighting field marks
const distanceMarks = [
{
value: 12,
label: '12"',
},
{
value: 24,
label: '24"',
},
{
value: 36,
label: '36"',
}
];

return (
<Modal
open={isOpen}
Expand All @@ -83,70 +155,110 @@ const NewSystemForm = ({ isOpen, onRequestClose }) => {
border: 'none',
}}
>
<Box sx={{ width: 512, bgcolor: 'background.paper', borderRadius: 2 }}>
<Box sx={{ width: 800, height: 312, borderRadius: 2 }} display="flex">
<form onSubmit={handleSubmit}>
<div className='left'>
<PointOfSaleIcon color='info' className={submitted ? 'home_icon_form_submit' : 'home_icon_form'}/>
<ButtonGroup>
<IconButton className="left_button" type="submit" color="primary">
<CheckSharpIcon className="left_button"/>
</IconButton>
<IconButton className="left_button" color="error" onClick={handleCancel}>
<CloseSharpIcon className="left_button"/>
</IconButton>
</ButtonGroup>
</div>
<div className='right'>
<TextField
margin="normal"
fullWidth
required
label="Name"
value={name}
variant="standard"
onChange={(event) => setName(event.target.value)}
/>
<TextField
margin="normal"
fullWidth
required
type="number"
label="Humidity"
value={humidity}
onChange={(event) => setHumidity(event.target.value)}
variant="standard"
/>
<TextField
margin="normal"
fullWidth
required
type="number"
label="Temperature"
value={temperature}
onChange={(event) => setTempurature(event.target.value)}
variant="standard"
/>
<TextField
margin="normal"
fullWidth
required
type="number"
label="Duration (hours)"
value={duration}
onChange={(event) => setDuration(event.target.value)}
variant="standard"
/>
<TextField
margin="normal"
fullWidth
required
type="number"
label="Distance (inches)"
value={distance}
onChange={(event) => setDistance(event.target.value)}
variant="standard"
/>
</div>
<Box sx={{ width: 512, height: 312, bgcolor: 'background.paper', borderRadius: 2, float:'left', paddingRight: 2, paddingLeft: 4 }}>
<div className='left'>
<PointOfSaleIcon color='info' className={'home_icon_form'}/>
<ButtonGroup>
<IconButton className="left_button" type="submit" color="primary">
<CheckSharpIcon className="left_button"/>
</IconButton>
<IconButton className="left_button" color="error" onClick={handleCancel}>
<CloseSharpIcon className="left_button"/>
</IconButton>
</ButtonGroup>
</div>
<div className='right'>
<TextField
margin="normal"
fullWidth
required
label="Name"
value={name}
variant="standard"
onChange={(event) => setName(event.target.value)}
color='info'
/>
<TextField
label="Description"
multiline
rows={6}
value={description}
onChange={(event) => setDescription(event.target.value)}
variant="standard"
fullWidth
margin="normal"
color='info'
/>
</div>
</Box>
<Box sx={{ width: 256, height: 312, bgcolor: 'background.paper', borderRadius: 2, float:'right', paddingRight: 2, marginLeft: 4 }}>
<Stack spacing={2} direction="row" alignItems="center" color="light" height={64}>
<InvertColorsSharpIcon color="light" sx={{fontSize:40,color: '#3f51b5'}} />
<Slider
color="info"
required
aria-label="Humidity"
value={humidity}
onChange={(event) => setHumidity(event.target.value)}
variant="standard"
defaultValue={12}
step={1}
marks={humidityMarks}
min={0}
max={100}
valueLabelDisplay="auto"
/>
</Stack>
<Stack spacing={2} direction="row" alignItems="center" color="light" height={64}>
<DeviceThermostatSharpIcon color="light" sx={{fontSize:40 , color: '#ff9800'}}/>
<Slider
color="info"
aria-label="Distance (inches)"
value={temperature}
onChange={(event) => setTempurature(event.target.value)}
variant="standard"
step={2}
marks={temperatureMarks}
min={48}
max={80}
valueLabelDisplay="auto"
/>
</Stack>
<Stack spacing={2} direction="row" alignItems="center" color="light" height={64}>
<AvTimerSharpIcon color="light" sx={{fontSize:40}} />
<Slider
color="info"
aria-label="Duration"
value={duration}
onChange={(event) => setDuration(event.target.value)}
variant="standard"
defaultValue={12}
step={1}
marks={durationMarks}
min={6}
max={18}
valueLabelDisplay="auto"
/>
</Stack>
<Stack spacing={2} direction="row" alignItems="center" color="light" height={64}>
<StraightenSharpIcon color="info" sx={{fontSize:40}}/>
<Slider
color="info"
aria-label="Distance (inches)"
value={distance}
onChange={(event) => setDistance(event.target.value)}
variant="standard"
defaultValue={24}
step={2}
marks={distanceMarks}
min={12}
max={36}
valueLabelDisplay="auto"
/>
</Stack>
</Box>
</form>
</Box>
</Modal>
Expand Down
Loading

0 comments on commit d8a52dc

Please sign in to comment.