showing needed hardware

2020-09-14 13:24:29 +02:00
parent f14508a5ca
commit 823bb042ff
8 changed files with 216 additions and 24 deletions
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
+
+const styles = theme => ({
+  expand: {
+    '&:hover': {
+      color: theme.palette.primary.main,
+    },
+    '&:active': {
+      color: theme.palette.primary.main,
+    },
+    color: theme.palette.text.primary
+  },
+  multiGridListTile: {
+    background: fade(theme.palette.secondary.main, 0.5),
+    height: '30px'
+  },
+  multiGridListTileTitle: {
+    color: theme.palette.text.primary
+  }
+});
+
+
+class Hardware extends Component {
+
+  state = {
+    open: false,
+    title: '',
+    url: ''
+  };
+
+  handleClickOpen = (title, url) => {
+    this.setState({open: true, title, url});
+  };
+
+  handleClose = () => {
+    this.setState({open: false, title: '', url: ''});
+  };
+
+  render() {
+    var cols = isWidthUp('sm', this.props.width) ? isWidthUp('md', this.props.width) ? isWidthUp('lg', this.props.width) ? 6 : 5 : 4 : 3;
+    return (
+      <div style={{marginTop: '10px', marginBottom: '5px'}}>
+        <Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>
+
+            <GridList cellHeight={100} cols={cols} spacing={10}>
+            {this.props.picture.map((picture,i) => (
+              <GridListTile key={i}>
+                <img src={`/media/hardware/${picture}.png`} alt={picture} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}/>
+                <GridListTileBar
+                  classes={{root: this.props.classes.multiGridListTile}}
+                  title={
+                    <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
+                      {picture}
+                    </div>
+                  }
+                  actionIcon={
+                    <IconButton className={this.props.classes.expand} aria-label='Vollbild' onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}>
+                      <FontAwesomeIcon icon={faExpandAlt} size="xs"/>
+                    </IconButton>
+                  }
+                />
+              </GridListTile>
+            ))}
+            </GridList>
+
+        <Dialog
+          style={{zIndex: 1500}}
+          fullWidth={true}
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <DialogTitle style={{padding: "10px 24px"}}>Hardware: {this.state.title}</DialogTitle>
+          <DialogContent style={{padding: "0px"}}>
+            <img src={this.state.url} width="100%" alt={this.state.title}/>
+          </DialogContent>
+          <DialogActions style={{padding: "10px 24px"}}>
+            <Button onClick={this.handleClose} color="primary">
+              Schließen
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  };
+}
+
+export default withWidth()(withStyles(styles, { withTheme: true })(Hardware));