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

add ide output fixes #71

Browse Source
This commit is contained in:
Mario Pesch
2021-03-25 10:38:32 +01:00
parent 6a6b2e2f58
commit 687ac32166
5 changed files with 748 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Project/ProjectHome.js
+143 -71
View File
@@ -1,57 +1,70 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getProjects, resetProject } from '../../actions/projectActions';
import { clearMessages } from '../../actions/messageActions';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getProjects, resetProject } from "../../actions/projectActions";
import { clearMessages } from "../../actions/messageActions";
import { Link, withRouter } from 'react-router-dom';
import { Link, withRouter } from "react-router-dom";
import Breadcrumbs from '../Breadcrumbs';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import Snackbar from '../Snackbar';
import WorkspaceFunc from '../Workspace/WorkspaceFunc';
import Breadcrumbs from "../Breadcrumbs";
import BlocklyWindow from "../Blockly/BlocklyWindow";
import Snackbar from "../Snackbar";
import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';
import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
const styles = (theme) => ({
link: {
color: theme.palette.primary.main,
textDecoration: 'none',
'&:hover': {
textDecoration: "none",
"&:hover": {
color: theme.palette.primary.main,
textDecoration: 'underline'
}
}
textDecoration: "underline",
},
},
});
class ProjectHome extends Component {
state = {
snackbar: false,
type: '',
key: '',
message: ''
}
type: "",
key: "",
message: "",
};
componentDidMount() {
var type = this.props.location.pathname.replace('/', '');
var type = this.props.location.pathname.replace("/", "");
this.props.getProjects(type);
if (this.props.message) {
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
}
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
}
else if (this.props.message.id === 'GET_PROJECT_FAIL') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' });
if (this.props.message.id === "PROJECT_DELETE_SUCCESS") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein Projekt wurde erfolgreich gelöscht.`,
type: "success",
});
} else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`,
type: "success",
});
} else if (this.props.message.id === "GET_PROJECT_FAIL") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein angefragtes ${
type === "gallery" ? "Galerie-" : ""
}Projekt konnte nicht gefunden werden.`,
type: "error",
});
}
}
}
@@ -59,14 +72,23 @@ class ProjectHome extends Component {
componentDidUpdate(props) {
if (props.location.pathname !== this.props.location.pathname) {
this.setState({ snackbar: false });
this.props.getProjects(this.props.location.pathname.replace('/', ''));
this.props.getProjects(this.props.location.pathname.replace("/", ""));
}
if (props.message !== this.props.message) {
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
}
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
if (this.props.message.id === "PROJECT_DELETE_SUCCESS") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein Projekt wurde erfolgreich gelöscht.`,
type: "success",
});
} else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`,
type: "success",
});
}
}
}
@@ -77,60 +99,107 @@ class ProjectHome extends Component {
}
render() {
var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie';
var data =
this.props.location.pathname === "/project" ? "Projekte" : "Galerie";
return (
<div>
<Breadcrumbs content={[{ link: this.props.location.pathname, title: data }]} />
<Breadcrumbs
content={[{ link: this.props.location.pathname, title: data }]}
/>
<h1>{data}</h1>
{this.props.progress ?
{this.props.progress ? (
<Backdrop open invisible>
<CircularProgress color="primary" />
</Backdrop>
:
) : (
<div>
{this.props.projects.length > 0 ?
{this.props.projects.length > 0 ? (
<Grid container spacing={2}>
{this.props.projects.map((project, i) => {
return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<Paper
style={{
padding: "1rem",
position: "relative",
overflow: "hidden",
}}
>
<Link
to={`/${
data === "Projekte" ? "project" : "gallery"
}/${project._id}`}
style={{ textDecoration: "none", color: "inherit" }}
>
<h3 style={{ marginTop: 0 }}>{project.title}</h3>
<Divider style={{ marginTop: '1rem', marginBottom: '10px' }} />
<Divider
style={{ marginTop: "1rem", marginBottom: "10px" }}
/>
<BlocklyWindow
svg
blockDisabled
initialXml={project.xml}
/>
<Typography variant='body2' style={{ fontStyle: 'italic', margin: 0, marginTop: '-10px' }}>{project.description}</Typography>
<Typography
variant="body2"
style={{
fontStyle: "italic",
margin: 0,
marginTop: "-10px",
}}
>
{project.description}
</Typography>
</Link>
{this.props.user && this.props.user.email === project.creator ?
{this.props.user &&
this.props.user.email === project.creator ? (
<div>
<Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
<div style={{ float: 'right' }}>
<Divider
style={{
marginTop: "10px",
marginBottom: "10px",
}}
/>
<div style={{ float: "right" }}>
<WorkspaceFunc
multiple
project={project}
projectType={this.props.location.pathname.replace('/', '')}
projectType={this.props.location.pathname.replace(
"/",
""
)}
/>
</div>
</div>
: null}
) : null}
</Paper>
</Grid>
)
);
})}
</Grid>
: <div>
<Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography>
{this.props.location.pathname.replace('/', '') === 'project' ?
<Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
: null}
) : (
<div>
<Typography style={{ marginBottom: "10px" }}>
Es sind aktuell keine Projekte vorhanden.
</Typography>
{this.props.location.pathname.replace("/", "") === "project" ? (
<Typography>
Erstelle jetzt dein{" "}
<Link to={"/"} className={this.props.classes.link}>
eigenes Projekt
</Link>{" "}
oder lasse dich von Projektbeispielen in der{" "}
<Link to={"/gallery"} className={this.props.classes.link}>
Galerie
</Link>{" "}
inspirieren.
</Typography>
) : null}
</div>
}
)}
</div>
}
)}
<Snackbar
open={this.state.snackbar}
message={this.state.message}
@@ -139,7 +208,7 @@ class ProjectHome extends Component {
/>
</div>
);
};
}
}
ProjectHome.propTypes = {
@@ -149,15 +218,18 @@ ProjectHome.propTypes = {
projects: PropTypes.array.isRequired,
progress: PropTypes.bool.isRequired,
user: PropTypes.object,
message: PropTypes.object.isRequired
message: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
const mapStateToProps = (state) => ({
projects: state.project.projects,
progress: state.project.progress,
user: state.auth.user,
message: state.message
message: state.message,
});
export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
export default connect(mapStateToProps, {
getProjects,
resetProject,
clearMessages,
})(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));