frontend/package-lock.json

@@ -10783,6 +10783,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-resize-detector": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
+      "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.6.0",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-router": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
@@ -10889,6 +10905,38 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-smooth": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
+      "integrity": "sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w==",
+      "requires": {
+        "lodash": "~4.17.4",
+        "prop-types": "^15.6.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "^2.5.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",

frontend/src/components/content.js

@@ -4,6 +4,8 @@ import Overview from "./overview/overview";
 import {
     Route,
 } from "react-router-dom";
+import SelectResource from './selectResource';
+import ResourceChart from './resourcechart/resourcechart';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -19,7 +21,9 @@ export default function Content() {
     return (
 
         <div className={classes.root}>
-            <Route path="/overview" component={Overview} />
+            <Route exact path="/" component={Overview} />
+            <Route path="/resources" component={SelectResource} />
+            <Route path="/resourcechart/:id" render={() => <ResourceChart day={Date.now()} kind={-1} ></ResourceChart>} />
         </div>
 
     );

frontend/src/components/navigation.js

@@ -190,7 +190,7 @@ export default function Navigation() {
                 </div>
                 <Divider />
                 <List>
-                    {['Overview'].map((text, index) => (
+                    {['Resources'].map((text, index) => (
                         <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
                             <ListItemText primary={text} />
                         </ListItemLink>

frontend/src/components/overview/overview.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -15,7 +16,12 @@ export default function Overview() {
     return (
 
         <div className={classes.root}>
-            Hallo i bims 1 nicer Overview
+            <Typography variant="h3">
+                Welcome!
+            </Typography>
+            <Typography variant="h4">
+                This is the official unofficial Dashboard for Sim Companies
+            </Typography>
         </div>
 
     );

frontend/src/components/resourcechart/resourcechart.js

@@ -2,13 +2,17 @@ import React from 'react';
 import {
     LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
 } from 'recharts';
+import {
+    useParams
+} from "react-router-dom";
 
-export default function (day, kind) {
+export default function ResourceChart(props) {
 
     const [data, setData] = React.useState(null);
-
+    let { id } = useParams();
     const loadData = async () => {
-        let nextData = await fetch(`/API/day?date=${day}&kind=${kind}`);
+        console.log(id)
+        let nextData = await fetch(`/API/day?date=${props["day"]}&kind=${id}`);
         nextData = await nextData.json();
         for (let i = 0; i < nextData.length; i++) {
             nextData[i]["time"] = new Date(nextData[i]["time"]);

frontend/src/components/selectResource/index.js

@@ -24,7 +24,7 @@ function CreateResourceCard(resource, classes) {
         <Grid item xs={4} lg={2} >
             <Card >
                 <CardContent style={{ padding: 0 }}>
-                    <ListItemLink to={"/" + resource["name"].toLowerCase()} component={Link}>
+                    <ListItemLink to={"/resourcechart/" + resource["db_letter"]} component={Link}>
                         <ListItemText primary={resource["name"]} />
                     </ListItemLink>
                 </CardContent>