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

resolve warnings

Browse Source
This commit is contained in:
Mario Pesch
2022-02-18 12:20:22 +01:00
parent a34e0bbb5d
commit 8620a452a3
13 changed files with 492 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Hardware.js
+73 -42
View File
@@ -1,47 +1,45 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import Dialog from '../Dialog';
import Dialog from "../Dialog";
import hardware from '../../data/hardware.json';
import hardware from "../../data/hardware.json";
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';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
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 ImageList from "@material-ui/core/ImageList";
import ImageListTile from "@material-ui/core/ImageList";
import ImageListTileBar from "@material-ui/core/ImageListItemBar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
import * as Blockly from 'blockly'
const styles = theme => ({
import * as Blockly from "blockly";
const styles = (theme) => ({
expand: {
'&:hover': {
"&:hover": {
color: theme.palette.primary.main,
},
'&:active': {
"&:active": {
color: theme.palette.primary.main,
},
color: theme.palette.text.primary
color: theme.palette.text.primary,
},
multiGridListTile: {
multiImageListTile: {
background: theme.palette.primary.main,
opacity: 0.9,
height: '30px'
height: "30px",
},
multiImageListTileTitle: {
color: theme.palette.text.primary,
},
multiGridListTileTitle: {
color: theme.palette.text.primary
}
});
class Hardware extends Component {
state = {
open: false,
hardwareInfo: {}
hardwareInfo: {},
};
handleClickOpen = (hardwareInfo) => {
@@ -53,36 +51,57 @@ class Hardware extends Component {
};
render() {
var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
var cols = isWidthDown("md", this.props.width)
? isWidthDown("sm", this.props.width)
? isWidthDown("xs", this.props.width)
? 2
: 3
: 4
: 6;
return (
<div style={{ marginTop: '10px', marginBottom: '5px' }}>
<div style={{ marginTop: "10px", marginBottom: "5px" }}>
<Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>
<GridList cellHeight={100} cols={cols} spacing={10}>
<ImageList rowHeight={100} cols={cols} spacing={10}>
{this.props.picture.map((picture, i) => {
var hardwareInfo = hardware.filter(hardware => hardware.id === picture)[0];
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)} />
<ImageListTile 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 }}
<ImageListTileBar
classes={{ root: this.props.classes.multiImageListTile }}
title={
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} className={this.props.classes.multiGridListTileTitle}>
<div
style={{ overflow: "hidden", textOverflow: "ellipsis" }}
className={this.props.classes.multiImageListTileTitle}
>
{hardwareInfo.name}
</div>
}
actionIcon={
<IconButton className={this.props.classes.expand} aria-label='Vollbild' onClick={() => this.handleClickOpen(hardwareInfo)}>
<IconButton
className={this.props.classes.expand}
aria-label="Vollbild"
onClick={() => this.handleClickOpen(hardwareInfo)}
>
<FontAwesomeIcon icon={faExpandAlt} size="xs" />
</IconButton>
}
/>
</GridListTile>
)
</ImageListTile>
);
})}
</GridList>
</ImageList>
<Dialog
style={{ zIndex: 1500 }}
@@ -94,14 +113,26 @@ class Hardware extends Component {
button={Blockly.Msg.button_close}
>
<div>
<img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
{Blockly.Msg.tutorials_hardware_moreInformation} <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">{Blockly.Msg.tutorials_hardware_here}</Link>.
<img
src={`/media/hardware/${this.state.hardwareInfo.src}`}
width="100%"
alt={this.state.hardwareInfo.name}
/>
{Blockly.Msg.tutorials_hardware_moreInformation}{" "}
<Link
rel="noreferrer"
target="_blank"
href={this.state.hardwareInfo.url}
color="primary"
>
{Blockly.Msg.tutorials_hardware_here}
</Link>
.
</div>
</Dialog>
</div>
);
};
}
}
export default withWidth()(withStyles(styles, { withTheme: true })(Hardware));