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/Builder/Step.js
+111 -54
View File
@@ -1,23 +1,31 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addStep, removeStep, changeStepIndex } from '../../../actions/tutorialBuilderActions';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
addStep,
removeStep,
changeStepIndex,
} from "../../../actions/tutorialBuilderActions";
import clsx from 'clsx';
import clsx from "clsx";
import Textfield from './Textfield';
import StepType from './StepType';
import BlocklyExample from './BlocklyExample';
import Requirements from './Requirements';
import Hardware from './Hardware';
import Media from './Media';
import Textfield from "./Textfield";
import StepType from "./StepType";
import BlocklyExample from "./BlocklyExample";
import Requirements from "./Requirements";
import Hardware from "./Hardware";
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import { faPlus, faAngleDoubleUp, faAngleDoubleDown, faTrash } from "@fortawesome/free-solid-svg-icons";
import {
faPlus,
faAngleDoubleUp,
faAngleDoubleDown,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import MarkdownEditor from "./MarkdownEditor";
@@ -26,59 +34,84 @@ const styles = (theme) => ({
button: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
width: '40px',
height: '40px',
'&:hover': {
width: "40px",
height: "40px",
"&:hover": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}
},
},
delete: {
backgroundColor: theme.palette.error.dark,
color: theme.palette.error.contrastText,
'&:hover': {
"&:hover": {
backgroundColor: theme.palette.error.dark,
color: theme.palette.error.contrastText,
}
}
},
},
});
class Step extends Component {
render() {
var index = this.props.index;
var steps = this.props.steps;
return (
<div style={{ borderRadius: '25px', border: '1px solid lightgrey', padding: '10px 14px 10px 10px', marginBottom: '20px' }}>
<Typography variant='h6' style={{ marginBottom: '10px', marginLeft: '4px' }}>Schritt {index + 1}</Typography>
<div style={{ display: 'flex', position: 'relative' }}>
<div style={{ width: '40px', marginRight: '10px', position: 'absolute', left: '4px', bottom: '10px' }}>
<Tooltip title='Schritt hinzufügen' arrow>
<div
style={{
borderRadius: "25px",
border: "1px solid lightgrey",
padding: "10px 14px 10px 10px",
marginBottom: "20px",
}}
>
<Typography
variant="h6"
style={{ marginBottom: "10px", marginLeft: "4px" }}
>
Schritt {index + 1}
</Typography>
<div style={{ display: "flex", position: "relative" }}>
<div
style={{
width: "40px",
marginRight: "10px",
position: "absolute",
left: "4px",
bottom: "10px",
}}
>
<Tooltip title="Schritt hinzufügen" arrow>
<IconButton
className={this.props.classes.button}
style={index === 0 ? {} : { marginBottom: '5px' }}
style={index === 0 ? {} : { marginBottom: "5px" }}
onClick={() => this.props.addStep(index + 1)}
>
<FontAwesomeIcon icon={faPlus} size="xs" />
</IconButton>
</Tooltip>
{index !== 0 ?
{index !== 0 ? (
<div>
<Tooltip title={`Schritt ${index + 1} nach oben schieben`} arrow>
<Tooltip
title={`Schritt ${index + 1} nach oben schieben`}
arrow
>
<IconButton
disabled={index < 2}
className={this.props.classes.button}
style={{ marginBottom: '5px' }}
style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index - 1)}
>
<FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
</IconButton>
</Tooltip>
<Tooltip title={`Schritt ${index + 1} nach unten schieben`} arrow>
<Tooltip
title={`Schritt ${index + 1} nach unten schieben`}
arrow
>
<IconButton
disabled={index === steps.length - 1}
className={this.props.classes.button}
style={{ marginBottom: '5px' }}
style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index + 1)}
>
<FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
@@ -87,16 +120,19 @@ class Step extends Component {
<Tooltip title={`Schritt ${index + 1} löschen`} arrow>
<IconButton
disabled={index === 0}
className={clsx(this.props.classes.button, this.props.classes.delete)}
className={clsx(
this.props.classes.button,
this.props.classes.delete
)}
onClick={() => this.props.removeStep(index)}
>
<FontAwesomeIcon icon={faTrash} size="xs" />
</IconButton>
</Tooltip>
</div>
: null}
) : null}
</div>
<div style={{ width: '100%', marginLeft: '54px' }}>
<div style={{ width: "100%", marginLeft: "54px" }}>
<StepType value={this.props.step.type} index={index} />
<Textfield
value={this.props.step.headline}
@@ -104,8 +140,9 @@ class Step extends Component {
label={"Überschrift"}
index={index}
error={this.props.error.steps[index].headline}
errorText={`Gib eine Überschrift für die ${this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
} ein.`}
errorText={`Gib eine Überschrift für die ${
this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
} ein.`}
/>
<MarkdownEditor
value={this.props.step.text}
@@ -118,24 +155,40 @@ class Step extends Component {
index={index}
multiline
error={this.props.error.steps[index].text}
errorText={`Gib Instruktionen für die ${this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
} ein.`}
errorText={`Gib Instruktionen für die ${
this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
} ein.`}
/>
{index === 0 ?
{index === 0 ? (
<div>
<Requirements value={this.props.step.requirements ? this.props.step.requirements : []} index={index} />
<Hardware value={this.props.step.hardware ? this.props.step.hardware : []} index={index} error={this.props.error.steps[index].hardware} />
<Requirements
value={
this.props.step.requirements
? this.props.step.requirements
: []
}
index={index}
/>
<Hardware
value={
this.props.step.hardware ? this.props.step.hardware : []
}
index={index}
error={this.props.error.steps[index].hardware}
/>
</div>
: null}
{this.props.step.type === 'instruction' ?
<Media value={this.props.step.media} picture={this.props.step.media && this.props.step.media.picture} youtube={this.props.step.media && this.props.step.media.youtube} url={this.props.step.url} index={index} error={this.props.error.steps[index].media} />
: null}
<BlocklyExample value={this.props.step.xml} index={index} task={this.props.step.type === 'task'} error={this.props.error.steps[index].xml ? true : false} />
) : null}
<BlocklyExample
value={this.props.step.xml}
index={index}
task={this.props.step.type === "task"}
error={this.props.error.steps[index].xml ? true : false}
/>
</div>
</div>
</div>
);
};
}
}
Step.propTypes = {
@@ -147,10 +200,14 @@ Step.propTypes = {
error: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
const mapStateToProps = (state) => ({
steps: state.builder.steps,
change: state.builder.change,
error: state.builder.error
error: state.builder.error,
});
export default connect(mapStateToProps, { addStep, removeStep, changeStepIndex })(withStyles(styles, { withTheme: true })(Step));
export default connect(mapStateToProps, {
addStep,
removeStep,
changeStepIndex,
})(withStyles(styles, { withTheme: true })(Step));