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

note, if no data are available in database

Browse Source
This commit is contained in:
Delucse 2020-12-02 18:49:08 +01:00
parent e2915e8cd0
commit 4f57e7fd32
1 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Project/ProjectHome.js
View File

@ -11,6 +11,7 @@ import Breadcrumbs from '../Breadcrumbs';
import BlocklyWindow from '../Blockly/BlocklyWindow'; import BlocklyWindow from '../Blockly/BlocklyWindow';
import Snackbar from '../Snackbar'; import Snackbar from '../Snackbar';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
@ -18,6 +19,17 @@ import Typography from '@material-ui/core/Typography';
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
const styles = (theme) => ({
link: {
color: theme.palette.primary.main,
textDecoration: 'none',
'&:hover': {
color: theme.palette.primary.main,
textDecoration: 'underline'
}
}
});
class ProjectHome extends Component { class ProjectHome extends Component {
@ -68,26 +80,37 @@ class ProjectHome extends Component {
<CircularProgress color="primary" /> <CircularProgress color="primary" />
</Backdrop> </Backdrop>
: :
<Grid container spacing={2}> <div>
{this.props.projects.map((project, i) => { {this.props.projects.length > 0 ?
return ( <Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4} xl={3} key={i}> {this.props.projects.map((project, i) => {
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}> return (
<Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}> <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<h3 style={{marginTop: 0}}>{project.title}</h3> <Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<Divider style={{marginTop: '1rem', marginBottom: '10px'}}/> <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
<BlocklyWindow <h3 style={{marginTop: 0}}>{project.title}</h3>
svg <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
blockDisabled <BlocklyWindow
initialXml={project.xml} svg
/> blockDisabled
<Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{project.description}</Typography> initialXml={project.xml}
</Paper> />
</Link> <Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{project.description}</Typography>
</Paper>
</Link>
</Grid>
)
})}
</Grid> </Grid>
) : <div>
})} <Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography>
</Grid>} {this.props.match.path.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 <Snackbar
open={this.state.snackbar} open={this.state.snackbar}
message={this.state.message} message={this.state.message}
@ -115,4 +138,4 @@ const mapStateToProps = state => ({
}); });
export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(ProjectHome); export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(ProjectHome));