-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
772 additions
and
298 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,70 @@ | ||
|
|
||
| import { Authenticator, | ||
| Flex, | ||
| Button, | ||
| } from '@aws-amplify/ui-react'; | ||
| import { Amplify } from 'aws-amplify'; | ||
| import outputs from '../amplify_outputs.json'; | ||
| import '@aws-amplify/ui-react/styles.css'; | ||
| import { ThemeProvider } from '@aws-amplify/ui-react'; | ||
| import theme from './theme'; | ||
| //import '@aws-amplify/ui-react/styles.css'; | ||
| import Dashboard from './components/Dashboard'; | ||
| import * as React from 'react'; | ||
| import { | ||
| Card, | ||
| Text, | ||
| ToggleButton, | ||
| ToggleButtonGroup, | ||
| } from '@aws-amplify/ui-react'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import theme from './theme' | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Toolbar from '@mui/material/Toolbar'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Box from '@mui/material/Box'; | ||
| import { Button } from '@mui/material'; | ||
|
|
||
| Amplify.configure(outputs); | ||
|
|
||
| /* | ||
| export default function App() { | ||
| return ( | ||
| <ThemeProvider theme={theme} colorMode='dark'> | ||
| <main> | ||
| <nav id='navbar'> | ||
| <h2>Detroit Weather Dashboard</h2> | ||
| <ul> | ||
| <li><Button onClick={signOut}>Log Out</Button></li> | ||
| </ul> | ||
| </nav> | ||
| <Dashboard/> | ||
| </main> | ||
| </ThemeProvider> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <Box height="100%" justifyContent="center"> | ||
| <Box alignItems="center" display="flex" justifyContent="space-between" height="70px"> | ||
| <AppBar position="fixed" top="0"> | ||
| <Toolbar> | ||
| <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
| Detroit Weather Dashboard | ||
| </Typography> | ||
| <Button variant="outlined" color="inherit" sx="margin-right: 40px">Download PDF</Button> | ||
| <Button variant="outlined" color="inherit">Log Out</Button> | ||
| </Toolbar> | ||
| </AppBar> | ||
| </Box> | ||
| <Dashboard/> | ||
| </Box> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
| */ | ||
|
|
||
| export default function App() { | ||
| const [colorMode, setColorMode] = React.useState('system'); | ||
| return ( | ||
| <ThemeProvider theme={theme} colorMode={colorMode}> | ||
| <Authenticator> | ||
| {({ signOut, user }) => ( | ||
| <main> | ||
| <nav id='navbar'> | ||
| <h2>Detroit Weather Dashboard</h2> | ||
| <ul> | ||
| <li> | ||
|
|
||
| <ToggleButtonGroup | ||
| value={colorMode} | ||
| isExclusive | ||
| onChange={(value) => setColorMode(value)} | ||
| > | ||
| <ToggleButton value="light">Light</ToggleButton> | ||
| <ToggleButton value="dark">Dark</ToggleButton> | ||
| <ToggleButton value="system">System</ToggleButton> | ||
| </ToggleButtonGroup> | ||
|
|
||
| </li> | ||
| <li><Button onClick={signOut}>Log Out</Button></li> | ||
| </ul> | ||
| </nav> | ||
| <Dashboard/> | ||
| </main> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <Box height="100%" justifyContent="center"> | ||
| <Box alignItems="center" display="flex" justifyContent="space-between" height="70px"> | ||
| <AppBar position="fixed" top="0"> | ||
| <Toolbar> | ||
| <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
| Detroit Weather Dashboard | ||
| </Typography> | ||
| <Button variant="outlined" color="inherit" sx="margin-right: 40px">Download PDF</Button> | ||
| <Button onClick={signOut} variant="outlined" color="inherit">Log Out</Button> | ||
| </Toolbar> | ||
| </AppBar> | ||
|
|
||
| </Box> | ||
| <Dashboard/> | ||
| </Box> | ||
| </ThemeProvider> | ||
| )} | ||
| </Authenticator> | ||
| </ThemeProvider> | ||
|
|
||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,93 @@ | ||
| import { Flex, Tabs, Image } from "@aws-amplify/ui-react"; | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Tab from '@mui/material/Tab'; | ||
| import { Tabs } from '@mui/material'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
|
|
||
| function CustomTabPanel(props) { | ||
| const { children, value, index, ...other } = props; | ||
|
|
||
| return ( | ||
| <div | ||
| role="tabpanel" | ||
| hidden={value !== index} | ||
| id={`simple-tabpanel-${index}`} | ||
| aria-labelledby={`simple-tab-${index}`} | ||
| {...other} | ||
| > | ||
| {value === index && <Box sx={{ p: 3 }}>{children}</Box>} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| CustomTabPanel.propTypes = { | ||
| children: PropTypes.node, | ||
| index: PropTypes.number.isRequired, | ||
| value: PropTypes.number.isRequired, | ||
| }; | ||
|
|
||
| function a11yProps(index) { | ||
| return { | ||
| id: `simple-tab-${index}`, | ||
| 'aria-controls': `simple-tabpanel-${index}`, | ||
| }; | ||
| } | ||
|
|
||
|
|
||
| export default function NOAAForecast() { | ||
| const [valueMap, setValueMap] = React.useState(0); | ||
| const [valueHourly, setValueHourly] = React.useState(0); | ||
|
|
||
| const handleChangeMap = (event, newValue) => { | ||
| setValueMap(newValue); | ||
| }; | ||
| const handleChangeHourly = (event, newValue) => { | ||
| setValueHourly(newValue); | ||
| }; | ||
|
|
||
| return( | ||
| <Flex> | ||
| <Flex direction={"column"} justifyContent={"center"} alignItems={"center"} width={"40vw"}> | ||
| <Box display="flex" alignItems="flex-start"> | ||
| <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" width="40vw" marginRight="30px"> | ||
| <h2>Map Forecast</h2> | ||
| <Tabs.Container defaultValue="1"> | ||
| <Tabs.List spacing="equal"> | ||
| <Tabs.Item value="1">4-5 Day Forecast</Tabs.Item> | ||
| <Tabs.Item value="2">Excess Rain</Tabs.Item> | ||
| </Tabs.List> | ||
| <Tabs.Panel value="1"><Image src="https://www.wpc.ncep.noaa.gov/qpf/95ep48iwbg_fill.gif"></Image></Tabs.Panel> | ||
| <Tabs.Panel value="2"><Image src="https://www.wpc.ncep.noaa.gov/qpf/94ewbg.gif"></Image></Tabs.Panel> | ||
| </Tabs.Container> | ||
| </Flex> | ||
| <Flex direction={"column"} justifyContent={"center"} alignItems={"center"} width={"40vw"}> | ||
|
|
||
| <Box width="inherit"> | ||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||
| <Tabs value={valueMap} onChange={handleChangeMap} aria-label="basic tabs example"> | ||
| <Tab label="4-5 Day Forecast" {...a11yProps(0)} /> | ||
| <Tab label="Excess Rain" {...a11yProps(1)} /> | ||
| </Tabs> | ||
| </Box> | ||
| <CustomTabPanel value={valueMap} index={0} width="inherit"> | ||
| <img src="https://www.wpc.ncep.noaa.gov/qpf/95ep48iwbg_fill.gif" width="100%"></img> | ||
| </CustomTabPanel> | ||
| <CustomTabPanel value={valueMap} index={1} width="inherit"> | ||
| <img src="https://www.wpc.ncep.noaa.gov/qpf/94ewbg.gif" width="100%"></img> | ||
| </CustomTabPanel> | ||
| </Box> | ||
| </Box> | ||
| <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" width="40vw"> | ||
| <h2>Hourly Forecast</h2> | ||
| <Tabs.Container defaultValue="1"> | ||
| <Tabs.List spacing="equal"> | ||
| <Tabs.Item value="1">Macomb</Tabs.Item> | ||
| <Tabs.Item value="2">Oakland</Tabs.Item> | ||
| <Tabs.Item value="3">Wayne</Tabs.Item> | ||
| </Tabs.List> | ||
| <Tabs.Panel value="1"><Image src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_Macomb.png"></Image></Tabs.Panel> | ||
| <Tabs.Panel value="2"><Image src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_North-Metro.png"></Image></Tabs.Panel> | ||
| <Tabs.Panel value="3"><Image src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_South-Metro.png"></Image></Tabs.Panel> | ||
| </Tabs.Container> | ||
| </Flex> | ||
| </Flex> | ||
| <Box width="inherit"> | ||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||
| <Tabs value={valueHourly} onChange={handleChangeHourly} aria-label="basic tabs example"> | ||
| <Tab label="Macomb" {...a11yProps(0)} /> | ||
| <Tab label="Oakland" {...a11yProps(1)} /> | ||
| <Tab label="Wayne" {...a11yProps(2)} /> | ||
| </Tabs> | ||
| </Box> | ||
| <CustomTabPanel value={valueHourly} index={0} width="inherit"> | ||
| <img src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_Macomb.png" width="100%"></img> | ||
| </CustomTabPanel> | ||
| <CustomTabPanel value={valueHourly} index={1} width="inherit"> | ||
| <img src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_North-Metro.png" width="100%"></img> | ||
| </CustomTabPanel> | ||
| <CustomTabPanel value={valueHourly} index={2} width="inherit"> | ||
| <img src="https://www.weather.gov/images/dtx/dot/hrqpf1h_paramguide_prob_South-Metro.png" width="100%"></img> | ||
| </CustomTabPanel> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| ); | ||
| } |
Oops, something went wrong.