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

added resource images #9

Browse Source
This commit is contained in:
Hawk
2020-04-18 21:44:57 +02:00
parent 7a11551010
commit eb7b373774
3 changed files with 61 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -214,7 +214,7 @@ export default function Navigation() {
{['Resources'].map((text, index) => (
<ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
<Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay="500">
<Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay={500}>
<ListItemIcon><EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon></ListItemIcon>
</Tooltip>
<ListItemText primary={text} />

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

@@ -8,6 +8,8 @@ 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';
import ResourceCard from './resourceCard';
const useStyles = makeStyles(theme => ({
@@ -16,23 +18,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 +29,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);
}

57
frontend/src/components/selectResource/resourceCard.js Normal file
View File

@@ -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>
);
}