j-sp4 · j-sp4 · Oct 19, 2019 · Oct 19, 2019 · Oct 20, 2019 · Oct 20, 2019
diff --git a/FullStack/dashboard/package-lock.json b/FullStack/dashboard/package-lock.json
diff --git a/FullStack/dashboard/package.json b/FullStack/dashboard/package.json
@@ -5,11 +5,16 @@
   "dependencies": {
     "@material-ui/core": "^4.5.1",
     "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.29",
+    "immutable": "^4.0.0-rc.12",
+    "mapbox-gl": "^1.4.1",
     "node-sass": "^4.12.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-map-gl": "^5.0.12",
+    "react-map-gl-geocoder": "^2.0.11",
     "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "recharts": "^1.8.3",
     "redux": "^4.0.4"

diff --git a/FullStack/dashboard/public/index.html b/FullStack/dashboard/public/index.html
@@ -24,7 +24,7 @@
       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>NASA Disaster Indexing</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/FullStack/dashboard/src/assets/icon.png b/FullStack/dashboard/src/assets/icon.png
diff --git a/FullStack/dashboard/src/assets/test_a_23.jpg b/FullStack/dashboard/src/assets/test_a_23.jpg
diff --git a/FullStack/dashboard/src/assets/test_b_23.jpg b/FullStack/dashboard/src/assets/test_b_23.jpg
diff --git a/FullStack/dashboard/src/components/Dashboard/index.js b/FullStack/dashboard/src/components/Dashboard/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -10,102 +9,15 @@ import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import Container from '@material-ui/core/Container';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import Link from '@material-ui/core/Link';
 import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import { mainListItems, secondaryListItems } from '../ListItems';
-import Chart from '../Chart';
-import Deposits from '../Deposits';
-import Orders from '../Orders';
-import Map from '../Map'
-
-const drawerWidth = 240;
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-  },
-  toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
-  },
-  toolbarIcon: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '0 8px',
-    ...theme.mixins.toolbar,
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-  },
-  appBarShift: {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  menuButton: {
-    marginRight: 36,
-  },
-  menuButtonHidden: {
-    display: 'none',
-  },
-  title: {
-    flexGrow: 1,
-  },
-  drawerPaper: {
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    width: drawerWidth,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  drawerPaperClose: {
-    overflowX: 'hidden',
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    width: theme.spacing(7),
-    [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(9),
-    },
-  },
-  appBarSpacer: theme.mixins.toolbar,
-  content: {
-    flexGrow: 1,
-    height: '100vh',
-    overflow: 'auto',
-  },
-  container: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    overflow: 'auto',
-    flexDirection: 'column',
-  },
-  fixedTallHeight: {
-    height: 480,
-  },
-  fixedSmallHeight: {
-    height: 240
-  }
-}));
+import { mainListItems } from '../ListItems';
+import {useStyles} from './styles'
+import HomeMapScreen from '../HomeMapScreen';
+import ResultsScreen from '../ResultsScreen'
+import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
+import Icon from '../../assets/icon.png'
 
 const App = () => {
   const classes = useStyles();
@@ -121,6 +33,7 @@ const App = () => {
   const smallHeightPaper = clsx(classes.paper, classes.fixedSmallHeight)
 
   return (
+    <Router>
     <div className={classes.root}>
       <CssBaseline />
       <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
@@ -135,12 +48,10 @@ const App = () => {
             <MenuIcon />
           </IconButton>
           <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
-            Helping Hands
+            NASA Disaster Indexing
           </Typography>
           <IconButton color="inherit">
-            <Badge badgeContent={4} color="secondary">
-              <NotificationsIcon />
-            </Badge>
+              <img src={Icon} width="40px" />
           </IconButton>
         </Toolbar>
       </AppBar>
@@ -161,35 +72,14 @@ const App = () => {
       </Drawer>
       <main className={classes.content}>
         <div className={classes.appBarSpacer} />
-        <Container maxWidth="lg" className={classes.container}>
-          <Grid container spacing={3}>
-            <Grid item xs={12}>
-            <Paper className={tallHeightPaper}>
-                <Map />
-              </Paper>
-            </Grid>
-            {/* Chart */}
-            <Grid item xs={12} md={8} lg={9}>
-              <Paper className={smallHeightPaper}>
-                <Chart />
-              </Paper>
-            </Grid>
-            {/* Recent Deposits */}
-            <Grid item xs={12} md={4} lg={3}>
-              <Paper className={smallHeightPaper}>
-                <Deposits />
-              </Paper>
-            </Grid>
-            {/* Recent Orders */}
-            <Grid item xs={12}>
-              <Paper className={classes.paper}>
-                <Orders />
-              </Paper>
-            </Grid>
-          </Grid>
-        </Container>
+        <Switch>
+          <Route exact path= '/' component={()=><HomeMapScreen classes={classes} tall={tallHeightPaper} small={smallHeightPaper}/>}/>
+          <Route exact path= '/result' component={()=><ResultsScreen classes={classes} tall={tallHeightPaper} small={smallHeightPaper}/>}/>
+        </Switch>
       </main>
     </div>
+    </Router>
+
   );
 }
 

diff --git a/FullStack/dashboard/src/components/Dashboard/styles.js b/FullStack/dashboard/src/components/Dashboard/styles.js
@@ -0,0 +1,85 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const drawerWidth = 240;
+
+export const useStyles = makeStyles(theme => ({
+    root: {
+      display: 'flex',
+    },
+    toolbar: {
+      paddingRight: 24, // keep right padding when drawer closed
+    },
+    toolbarIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: '0 8px',
+      ...theme.mixins.toolbar,
+    },
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+    },
+    appBarShift: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    menuButton: {
+      marginRight: 36,
+    },
+    menuButtonHidden: {
+      display: 'none',
+    },
+    title: {
+      flexGrow: 1,
+    },
+    drawerPaper: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: drawerWidth,
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    drawerPaperClose: {
+      overflowX: 'hidden',
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      width: theme.spacing(7),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(9),
+      },
+    },
+    appBarSpacer: theme.mixins.toolbar,
+    content: {
+      flexGrow: 1,
+      height: '100vh',
+      overflow: 'auto',
+    },
+    container: {
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+    },
+    paper: {
+      padding: theme.spacing(2),
+      display: 'flex',
+      overflow: 'auto',
+      flexDirection: 'column',
+    },
+    fixedTallHeight: {
+      height: '80vh',
+    },
+    fixedSmallHeight: {
+      height: 240
+    }
+  }));
diff --git a/FullStack/dashboard/src/components/DisasterIndex/index.js b/FullStack/dashboard/src/components/DisasterIndex/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Rating from '@material-ui/lab/Rating';
+import ErrorIcon from '@material-ui/icons/Error';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+const StyledRating = withStyles({
+  iconFilled: {
+    color: '#ff3d47',
+  },
+  iconHover: {
+    color: '#ff3d47',
+  },
+})(Rating);
+
+function getLabelText(value) {
+  return `${value} Heart${value !== 1 ? 's' : ''}`;
+}
+
+export default function DisasterIndex(props) {
+  return (
+    <div>
+      <Box component="fieldset" mb={3} borderColor="transparent">
+        <Typography component="legend"> <b>{props.disasterIndex } / 10.0</b></Typography>
+        <StyledRating
+          readOnly
+          name="customized-color"
+          value={props.disasterIndex}
+          getLabelText={getLabelText}
+          precision={0.01}
+          max={10}
+          size='large'
+          icon={<ErrorIcon fontSize='inherit' />}
+        />
+      </Box>
+    </div>
+  );
+}
diff --git a/FullStack/dashboard/src/components/HomeMapScreen/index.js b/FullStack/dashboard/src/components/HomeMapScreen/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Chart from '../Chart';
+import Deposits from '../Deposits';
+import Orders from '../Orders';
+import Map from '../Map'
+
+const HomeMapScreen = (props) =>{
+    return( <Container maxWidth="lg" className={props.classes.container}>
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+      <Paper className={props.tall}>
+          <Map />
+        </Paper>
+      </Grid>
+    </Grid>
+  </Container>)
+}
+
+export default HomeMapScreen