schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completing the metadata in hardware.json

Browse Source
This commit is contained in:
Delucse 2020-09-20 14:58:27 +02:00
parent 15a83f56fc
commit b03ef6b54a
4 changed files with 84 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Tutorial/Builder/Hardware.js
View File

@ -23,6 +23,7 @@ const styles = theme => ({
color: theme.palette.text.primary color: theme.palette.text.primary
}, },
border: { border: {
cursor: 'pointer',
'&:hover': { '&:hover': {
width: 'calc(100% - 4px)', width: 'calc(100% - 4px)',
height: 'calc(100% - 4px)', height: 'calc(100% - 4px)',
@ -30,6 +31,7 @@ const styles = theme => ({
} }
}, },
active: { active: {
cursor: 'pointer',
width: 'calc(100% - 4px)', width: 'calc(100% - 4px)',
height: 'calc(100% - 4px)', height: 'calc(100% - 4px)',
border: `2px solid ${theme.palette.primary.main}` border: `2px solid ${theme.palette.primary.main}`
@ -71,13 +73,13 @@ class Requirements extends Component {
{hardware.map((picture,i) => ( {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}}> <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'}}> <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> </div>
<GridListTileBar <GridListTileBar
classes={{root: this.props.classes.multiGridListTile}} classes={{root: this.props.classes.multiGridListTile}}
title={ title={
<div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}> <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
{picture.id} {picture.name}
</div> </div>
} }
/> />

5
src/components/Tutorial/Builder/Id.js
View File

@ -52,7 +52,8 @@ class Id extends Component {
render() { render() {
return ( 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> <InputLabel htmlFor="id">ID</InputLabel>
<OutlinedInput <OutlinedInput
style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}} 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} {this.props.error.id ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
</FormControl> </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>
); );
}; };
} }

61
src/components/Tutorial/Hardware.js
View File

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

84
src/data/hardware.json
View File

@ -1,128 +1,128 @@
[ [
{ {
"id": "bmp280", "id": "bmp280",
"name": "", "name": "Luftdruck und Temperatursensor",
"src": "bmp280.png", "src": "bmp280.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "breadboard", "id": "breadboard",
"name": "", "name": "Steckboard",
"src": "breadboard.png", "src": "breadboard.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "button", "id": "button",
"name": "", "name": "Knopf",
"src": "button.png", "src": "button.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "hc04", "id": "hc04",
"name": "", "name": "Ultraschall-Distanzsensor",
"src": "hc04.png", "src": "hc04.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "hdc1080", "id": "hdc1080",
"name": "", "name": "Temperatur und Luftfeuchtigkeitssensor",
"src": "hdc1080.png", "src": "hdc1080.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "jst-adapter", "id": "jst-adapter",
"name": "", "name": "JST-Adapterkabel",
"src": "jst-adapter.png", "src": "jst-adapter.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "jst-jst", "id": "jst-jst",
"name": "", "name": "JST-JST Kabel",
"src": "jst-jst.png", "src": "jst-jst.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "jumperwire", "id": "jumperwire",
"name": "", "name": "Steckkabel",
"src": "jumperwire.png", "src": "jumperwire.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "ldr", "id": "ldr",
"name": "", "name": "LDR",
"src": "ldr.png", "src": "ldr.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "led", "id": "led",
"name": "", "name": "LEDs",
"src": "led.png", "src": "led.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "microphone", "id": "microphone",
"name": "", "name": "Mikrofon",
"src": "microphone.png", "src": "microphone.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "oled", "id": "oled",
"name": "", "name": "OLED-Display",
"src": "oled.png", "src": "oled.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "piezo", "id": "piezo",
"name": "", "name": "Piezo",
"src": "piezo.png", "src": "piezo.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "resistor-10kohm", "id": "resistor-10kohm",
"name": "", "name": "10 kOhm Widerstand",
"src": "resistor-10kohm.png", "src": "resistor-10kohm.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "resistor-470ohm", "id": "resistor-470ohm",
"name": "", "name": "470 Ohm Widerstand",
"src": "resistor-470ohm.png", "src": "resistor-470ohm.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "rgb-led", "id": "rgb-led",
"name": "", "name": "RGB-LED",
"src": "rgb-led.png", "src": "rgb-led.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "sd-bee", "id": "sd-bee",
"name": "", "name": "mSD-Bee",
"src": "sd-bee.png", "src": "sd-bee.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "senseboxmcu", "id": "senseboxmcu",
"name": "", "name": "senseBox MCU",
"src": "senseboxmcu.png", "src": "senseboxmcu.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "usb-cable", "id": "usb-cable",
"name": "", "name": "USB-Kabel",
"src": "usb-cable.png", "src": "usb-cable.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "veml6070", "id": "veml6070",
"name": "", "name": "Helligkeit und UV-Sensor",
"src": "veml6070.png", "src": "veml6070.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
}, },
{ {
"id": "wifi-bee", "id": "wifi-bee",
"name": "", "name": "WiFi-Bee",
"src": "wifi-bee.png", "src": "wifi-bee.png",
"url": "" "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
} }
] ]