completing the metadata in hardware.json

src/components/Tutorial/Builder/Hardware.js

@@ -23,6 +23,7 @@ const styles = theme => ({
     color: theme.palette.text.primary
   },
   border: {
+    cursor: 'pointer',
     '&:hover': {
       width: 'calc(100% - 4px)',
       height: 'calc(100% - 4px)',
@@ -30,6 +31,7 @@ const styles = theme => ({
     }
   },
   active: {
+    cursor: 'pointer',
     width: 'calc(100% - 4px)',
     height: 'calc(100% - 4px)',
     border: `2px solid ${theme.palette.primary.main}`
@@ -71,13 +73,13 @@ class Requirements extends Component {
         {hardware.map((picture,i) => (
           <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>
             <div style={{margin: 'auto', width: 'max-content'}}>
-              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} style={{cursor: 'pointer'}} />
+              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} />
             </div>
             <GridListTileBar
               classes={{root: this.props.classes.multiGridListTile}}
               title={
                 <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
-                  {picture.id}
+                  {picture.name}
                 </div>
               }
             />

src/components/Tutorial/Builder/Id.js

@@ -52,7 +52,8 @@ class Id extends Component {
 
   render() {
     return (
-      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: '100%'}}>
+      <div style={{display: 'inline-flex'}}>
+      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: 'max-content'}}>
         <InputLabel htmlFor="id">ID</InputLabel>
         <OutlinedInput
           style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
@@ -89,6 +90,8 @@ class Id extends Component {
         />
         {this.props.error.id ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
       </FormControl>
+      <FormHelperText style={{marginLeft: '10px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px'}}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
+      </div>
     );
   };
 }

src/components/Tutorial/Hardware.js

@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 
 import Dialog from '../Dialog';
 
+import hardware from '../../data/hardware.json';
+
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import GridList from '@material-ui/core/GridList';
@@ -38,16 +41,15 @@ class Hardware extends Component {
 
   state = {
     open: false,
-    title: '',
-    url: ''
+    hardwareInfo: {}
   };
 
-  handleClickOpen = (title, url) => {
-    this.setState({open: true, title, url});
+  handleClickOpen = (hardwareInfo) => {
+    this.setState({open: true, hardwareInfo});
   };
 
   handleClose = () => {
-    this.setState({open: false, title: '', url: ''});
+    this.setState({open: false, hardwareInfo: {}});
   };
 
   render() {
@@ -57,38 +59,43 @@ class Hardware extends Component {
         <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}>
-            <div style={{margin: 'auto', width: 'max-content'}}>
-              <img src={`/media/hardware/${picture}.png`} alt={picture} height={100} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}/>
-            </div>
-            <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>
-        ))}
+        {this.props.picture.map((picture,i) => {
+          var hardwareInfo = hardware.filter(hardware => hardware.id === picture)[0];
+          return(
+            <GridListTile key={i}>
+              <div style={{margin: 'auto', width: 'max-content'}}>
+                <img src={`/media/hardware/${hardwareInfo.src}`} alt={hardwareInfo.name} height={100} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(hardwareInfo)}/>
+              </div>
+              <GridListTileBar
+                classes={{root: this.props.classes.multiGridListTile}}
+                title={
+                  <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
+                    {hardwareInfo.name}
+                  </div>
+                }
+                actionIcon={
+                  <IconButton className={this.props.classes.expand} aria-label='Vollbild' onClick={() => this.handleClickOpen(hardwareInfo)}>
+                    <FontAwesomeIcon icon={faExpandAlt} size="xs"/>
+                  </IconButton>
+                }
+              />
+            </GridListTile>
+          )})}
         </GridList>
 
         <Dialog
           style={{zIndex: 1500}}
           open={this.state.open}
-          title={`Hardware: ${this.state.title}`}
+          title={`Hardware: ${this.state.hardwareInfo.name}`}
           content={this.state.content}
           onClose={this.handleClose}
           onClick={this.handleClose}
           button={'Schließen'}
         >
-          <img src={this.state.url} width="100%" alt={this.state.title}/>
+          <div>
+            <img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name}/>
+            Weitere Informationen unter: <Link href={this.state.hardwareInfo.url} color="primary">{this.state.hardwareInfo.url}</Link>
+          </div>
         </Dialog>
 
       </div>