Merge branch 'master' into improve-backend

backend/package.json

@@ -17,4 +17,4 @@
     "node-fetch": "^2.6.0",
     "nodemon": "^2.0.2"
   }
-}
+}

frontend/src/App.js

@@ -3,6 +3,7 @@ import {
   BrowserRouter
 } from "react-router-dom";
 import Navbar from "./components/navigation";
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 import "./App.css";
 
@@ -10,11 +11,27 @@ import "./App.css";
 
 class App extends Component {
   render() {
+    const theme = createMuiTheme({
+      palette: {
+        primary: {
+          main: "#0B1929",
+          light: "#9daac1"
+        },
+        secondary: {
+          main: "#FFC800",
+          light: "#ffdf7b"
+        }
+      }
+    })
+
     //change basename in browserrouter if uri changes
     return (
-      <BrowserRouter basename="/simcompanies">
+      <ThemeProvider theme={theme}>
-        <Navbar></Navbar>
+        <BrowserRouter basename="/simcompanies">
-      </BrowserRouter>
+          <Navbar></Navbar>
+        </BrowserRouter>
+      </ThemeProvider>
+
     );
   }
 }

frontend/src/components/navigation.js

@@ -6,7 +6,6 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
-import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -20,21 +19,26 @@ import Link1 from '@material-ui/core/Link';
 import { Link } from "react-router-dom";
 import SearchIcon from '@material-ui/icons/Search';
 import InputBase from '@material-ui/core/InputBase';
+import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
+import { ListItemIcon } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import Zoom from '@material-ui/core/Zoom';
 
-const drawerWidth = 240;
+const drawerWidth = 64;
-
+const drawerWidthOpen = 240;
 const useStyles = makeStyles((theme) => ({
     root: {
         display: 'flex',
     },
     appBar: {
+        zIndex: theme.zIndex.drawer + 1,
         transition: theme.transitions.create(['margin', 'width'], {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen,
         }),
     },
     appBarShift: {
-        width: `calc(100% - ${drawerWidth}px)`,
+        width: `calc(100% - ${drawerWidthOpen}px)`,
         marginLeft: drawerWidth,
         transition: theme.transitions.create(['margin', 'width'], {
             easing: theme.transitions.easing.easeOut,
@@ -50,8 +54,21 @@ const useStyles = makeStyles((theme) => ({
     drawer: {
         width: drawerWidth,
         flexShrink: 0,
+        whiteSpace: 'nowrap'
     },
-    drawerPaper: {
+    drawerOpen: {
+        width: drawerWidthOpen,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: 'hidden',
         width: drawerWidth,
     },
     drawerHeader: {
@@ -69,7 +86,7 @@ const useStyles = makeStyles((theme) => ({
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen,
         }),
-        marginLeft: -drawerWidth,
+        marginLeft: 0,
     },
     contentShift: {
         transition: theme.transitions.create('margin', {
@@ -175,12 +192,16 @@ export default function Navigation() {
                 </Toolbar>
             </AppBar>
             <Drawer
-                className={classes.drawer}
+                variant="permanent"
-                variant="persistent"
+                className={clsx(classes.drawer, {
-                anchor="left"
+                    [classes.drawerOpen]: open,
-                open={open}
+                    [classes.drawerClose]: !open,
+                })}
                 classes={{
-                    paper: classes.drawerPaper,
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
                 }}
             >
                 <div className={classes.drawerHeader}>
@@ -191,9 +212,16 @@ export default function Navigation() {
                 <Divider />
                 <List>
                     {['Resources'].map((text, index) => (
+
                         <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
+                            <Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay={500}>
+                                <ListItemIcon><EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon></ListItemIcon>
+                            </Tooltip>
                             <ListItemText primary={text} />
+
                         </ListItemLink>
+
+
                     ))}
                 </List>
             </Drawer>

frontend/src/components/resourcechart/resourcechart.js

@@ -5,9 +5,54 @@ import {
 import {
     useParams
 } from "react-router-dom";
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+    },
+}));
+
+const output = (data) => {
+    if (data === null) {
+        return (
+            <CircularProgress color="secondary" />
+        )
+    } else {
+        return (
+            <LineChart
+                width={900}
+                height={300}
+                data={data}
+                margin={{
+                    top: 5, right: 30, left: 20, bottom: 5,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="time" interval="2" />
+                <YAxis domain={['datamin', 'datamax']} />
+                <Tooltip />
+                <Legend />
+                <Line type="monotone" dataKey="q0" stroke="#8884d8" dot={false} />
+                <Line type="monotone" dataKey="q1" stroke="#000000" dot={false} />
+                <Line type="monotone" dataKey="q2" stroke="#82ca9d" dot={false} />
+                <Line type="monotone" dataKey="q3" stroke="#ff0066" dot={false} />
+                <Line type="monotone" dataKey="q4" stroke="#660066" dot={false} />
+                <Line type="monotone" dataKey="q5" stroke="#99cc00" dot={false} />
+                <Line type="monotone" dataKey="q6" stroke="#669999" dot={false} />
+                <Line type="monotone" dataKey="q7" stroke="#996633" dot={false} />
+            </LineChart>
+        )
+    }
+}
 
 export default function ResourceChart(props) {
-
+    const classes = useStyles();
     const [data, setData] = React.useState(null);
     let { id } = useParams();
     const loadData = async () => {
@@ -60,28 +105,25 @@ export default function ResourceChart(props) {
         loadData();
     }
 
+
+
     return (
-        <LineChart
+        <div className={classes.root}>
-            width={900}
+            <Grid container spacing={2}>
-            height={300}
+                <Grid item xs={12}>
-            data={data}
+                    <Typography variant="h4">
-            margin={{
+                        Resource Chart
-                top: 5, right: 30, left: 20, bottom: 5,
+                    </Typography>
-            }}
+                </Grid>
-        >
+                <Grid item xs={12}>
-            <CartesianGrid strokeDasharray="3 3" />
+                    <Card>
-            <XAxis dataKey="time" interval="2" />
+                        <CardContent>
-            <YAxis domain={['datamin', 'datamax']} />
+                            {output(data)}
-            <Tooltip />
+                        </CardContent>
-            <Legend />
+                    </Card>
-            <Line type="monotone" dataKey="q0" stroke="#8884d8" dot={false} />
+                </Grid>
-            <Line type="monotone" dataKey="q1" stroke="#000000" dot={false} />
+            </Grid>
-            <Line type="monotone" dataKey="q2" stroke="#82ca9d" dot={false} />
+
-            <Line type="monotone" dataKey="q3" stroke="#ff0066" dot={false} />
+        </div>
-            <Line type="monotone" dataKey="q4" stroke="#660066" dot={false} />
-            <Line type="monotone" dataKey="q5" stroke="#99cc00" dot={false} />
-            <Line type="monotone" dataKey="q6" stroke="#669999" dot={false} />
-            <Line type="monotone" dataKey="q7" stroke="#996633" dot={false} />
-        </LineChart>
     );
 }

frontend/src/components/selectResource/index.js

@@ -1,13 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
-import { Link } from 'react-router-dom';
+import ResourceCard from './resourceCard';
-import Link1 from '@material-ui/core/Link';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
 
 
 const useStyles = makeStyles(theme => ({
@@ -16,23 +10,7 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-function CreateResourceCard(resource, classes) {
-    function ListItemLink(props) {
-        return <ListItem button component={Link1} {...props} />;
-    }
-    return (
-        <Grid item xs={4} lg={2} >
-            <Card >
-                <CardContent style={{ padding: 0 }}>
-                    <ListItemLink to={"/resourcechart/" + resource["db_letter"]} component={Link}>
-                        <ListItemText primary={resource["name"]} />
-                    </ListItemLink>
-                </CardContent>
-            </Card>
-        </Grid>
 
-    )
-}
 
 export default function SelectResource() {
     const classes = useStyles();
@@ -43,7 +21,7 @@ export default function SelectResource() {
         resourceJSON = await resourceJSON.json();
         let rArr = [];
         for (let i = 0; i < resourceJSON.length; i++) {
-            rArr.push(CreateResourceCard(resourceJSON[i], classes));
+            rArr.push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
         }
         setResources(rArr);
     }

frontend/src/components/selectResource/resourceCard.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { Link } from 'react-router-dom';
+import Link1 from '@material-ui/core/Link';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import CardMedia from '@material-ui/core/CardMedia';
+
+
+const useStyles = makeStyles(theme => ({
+    picture: {
+
+    }
+}));
+function ListItemLink(props) {
+    return <ListItem button component={Link1} {...props} />;
+}
+
+export default function ResourceCard(props) {
+    const classes = useStyles();
+    const [picture, setPicture] = React.useState(null);
+
+    var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]
+
+
+    const loadResourcePicture = async () => {
+        await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
+            var img = URL.createObjectURL(blob);
+            setPicture(img);
+
+        })
+
+
+    }
+
+    if (picture === null)
+        loadResourcePicture();
+
+    return (
+
+        <Grid item xs={4} lg={2} key={props.resource["name"]}>
+            <Card >
+                <CardContent style={{ padding: 0 }}>
+                    <ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}>
+                        <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
+                        <ListItemText primary={props.resource["name"]} />
+                    </ListItemLink>
+                </CardContent>
+            </Card>
+        </Grid>
+
+    );
+}