added routing for resources + resourcecharts #1 #9

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"]);
@@ -38,4 +42,4 @@ export default function (day, kind) {
             <Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} />
         </LineChart>
     );
-}
+}

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>