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

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

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

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

@@ -103,7 +103,7 @@ export default function ResourceChart(props) {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Card className={classes.card}> <Card className={classes.card}>
<CardContent> <CardContent style={{ padding: 0 }}>
{output(data)} {output(data)}
</CardContent> </CardContent>
<Button variant="contained" color="secondary" onClick={handleClick}> <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> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[0]} {resources[0]}
</Grid> </Grid>
</Grid> </Grid>
@@ -88,7 +88,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[1]} {resources[1]}
</Grid> </Grid>
</Grid> </Grid>
@@ -102,7 +102,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[2]} {resources[2]}
</Grid> </Grid>
</Grid> </Grid>
@@ -116,7 +116,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[3]} {resources[3]}
</Grid> </Grid>
</Grid> </Grid>
@@ -127,10 +127,10 @@ export default function SelectResource() {
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
Electronics Electronics
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[4]} {resources[4]}
</Grid> </Grid>
</Grid> </Grid>
@@ -144,7 +144,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[5]} {resources[5]}
</Grid> </Grid>
</Grid> </Grid>
@@ -158,7 +158,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[6]} {resources[6]}
</Grid> </Grid>
</Grid> </Grid>
@@ -172,7 +172,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[7]} {resources[7]}
</Grid> </Grid>
</Grid> </Grid>
@@ -186,7 +186,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[8]} {resources[8]}
</Grid> </Grid>
</Grid> </Grid>
@@ -200,7 +200,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[9]} {resources[9]}
</Grid> </Grid>
</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 ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon'; 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 => ({ const useStyles = makeStyles(theme => ({
@@ -42,15 +44,16 @@ export default function ResourceCard(props) {
return ( return (
<Grid item xs={4} lg={2} key={props.resource["name"]}> <Grid item xs={3} lg={2} key={props.resource["name"]}>
<Card > <Card >
<CardContent style={{ padding: 0 }}> <CardContent style={{ padding: 0 }}>
<ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} > <ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} >
<ListItemIcon> <Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} enterDelay={500}>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} /> <ListItemIcon>
</ListItemIcon> <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon>
<ListItemText primary={props.resource["name"]} /> </Tooltip>
<ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
</ListItemLink> </ListItemLink>
</CardContent> </CardContent>
</Card> </Card>

8
start_latest.sh
View File

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