SimCompanies/dashboard
2
1
Fork 0
Code Issues 17 Pull Requests Releases Activity

Merge pull request 'responsive' (#49) from responsive into master

Browse Source 
Reviewed-by: Oliver Boehlk <ollitobiasb@gmail.com>
This commit was merged in pull request #49.
This commit is contained in:
falk
2020-05-02 18:39:19 +02:00
parent f4bd6dfd7b bea593c326
commit 14bc337091
6 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/navigation.js
View File

@@ -44,6 +44,9 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
[theme.breakpoints.down('xs')]: {
width: `calc(100% - ${drawerWidth}px)`,
},
},
menuButton: {
marginRight: theme.spacing(2),
@@ -54,7 +57,10 @@ const useStyles = makeStyles((theme) => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap'
whiteSpace: 'nowrap',
[theme.breakpoints.down('xs')]: {
width: 0,
},
},
drawerOpen: {
width: drawerWidthOpen,
@@ -62,6 +68,9 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
[theme.breakpoints.down('xs')]: {
width: drawerWidth,
},
},
drawerClose: {
transition: theme.transitions.create('width', {
@@ -70,6 +79,9 @@ const useStyles = makeStyles((theme) => ({
}),
overflowX: 'hidden',
width: drawerWidth,
[theme.breakpoints.down('xs')]: {
width: 0,
},
},
drawerHeader: {
display: 'flex',

47
frontend/src/components/resourcechart/chart.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
@@ -12,11 +12,15 @@ import Checkbox from '@material-ui/core/Checkbox';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
padding: 0,
margin: 0,
},
formControl: {
margin: theme.spacing(2),
},
chart: {
width: 0,
}
}));
export default function Chart(props) {
@@ -62,23 +66,26 @@ export default function Chart(props) {
const { q0, q1, q2, q3, q4, q5, q6, q7 } = state;
return (
<Grid container spacing={2}>
<Grid item xs={12}>
<LineChart
width={900}
height={300}
data={data}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis domain={['datamin', 'datamax']} />
<Tooltip />
<Legend />
{lines}
</LineChart>
<Grid container spacing={2} className={classes.root}>
<Grid item xs={12} className={classes.chart}>
<ResponsiveContainer width="99%" height={300}>
<LineChart
data={data}
margin={{
top: 5, right: 0, left: 0, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis domain={['datamin', 'datamax']} />
<Tooltip />
<Legend />
{lines}
</LineChart>
</ResponsiveContainer>
</Grid>
<Grid item xs={12}>
<FormControl component="fieldset" className={classes.formControl}>
@@ -119,7 +126,7 @@ export default function Chart(props) {
</FormGroup>
</FormControl>
</Grid>
</Grid>
</Grid >
);
}

2
frontend/src/components/resourcechart/resourcechart.js
View File

@@ -103,7 +103,7 @@ export default function ResourceChart(props) {
</Grid>
<Grid item xs={12}>
<Card className={classes.card}>
<CardContent>
<CardContent style={{ padding: 0 }}>
{output(data)}
</CardContent>
<Button variant="contained" color="secondary" onClick={handleClick}>

22
frontend/src/components/selectResource/index.js
View File

@@ -74,7 +74,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[0]}
</Grid>
</Grid>
@@ -88,7 +88,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[1]}
</Grid>
</Grid>
@@ -102,7 +102,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[2]}
</Grid>
</Grid>
@@ -116,7 +116,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[3]}
</Grid>
</Grid>
@@ -127,10 +127,10 @@ export default function SelectResource() {
<Grid item xs={12}>
<Typography variant="h4">
Electronics
</Typography>
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[4]}
</Grid>
</Grid>
@@ -144,7 +144,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[5]}
</Grid>
</Grid>
@@ -158,7 +158,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[6]}
</Grid>
</Grid>
@@ -172,7 +172,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[7]}
</Grid>
</Grid>
@@ -186,7 +186,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[8]}
</Grid>
</Grid>
@@ -200,7 +200,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[9]}
</Grid>
</Grid>

15
frontend/src/components/selectResource/resourceCard.js
View File

@@ -9,6 +9,8 @@ import Link1 from '@material-ui/core/Link';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Tooltip from '@material-ui/core/Tooltip';
import Zoom from '@material-ui/core/Zoom';
const useStyles = makeStyles(theme => ({
@@ -42,15 +44,16 @@ export default function ResourceCard(props) {
return (
<Grid item xs={4} lg={2} key={props.resource["name"]}>
<Grid item xs={3} lg={2} key={props.resource["name"]}>
<Card >
<CardContent style={{ padding: 0 }}>
<ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} >
<ListItemIcon>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon>
<ListItemText primary={props.resource["name"]} />
<Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} enterDelay={500}>
<ListItemIcon>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon>
</Tooltip>
<ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
</ListItemLink>
</CardContent>
</Card>

8
start_latest.sh
View File

@@ -3,10 +3,10 @@ git pull &&
cd backend &&
rm -r ./frontend &&
mkdir frontend &&
npm i &&
yarn install &&
cd ../frontend &&
npm i &&
npm run build &&
yarn install &&
yarn run build &&
mv ./build/* ../backend/frontend &&
cd ../backend &&
npm start
yarn start