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

display gallery content

Browse Source
This commit is contained in:
Delucse 2020-12-01 18:01:52 +01:00
parent 2e330d1215
commit 2dfd146d18
6 changed files with 76 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,7 +16,6 @@
"axios": "^0.21.0",
"blockly": "^3.20200924.0",
"file-saver": "^2.0.2",
"mnemonic-id": "^3.2.7",
"moment": "^2.28.0",
"prismjs": "^1.20.0",
"react": "^16.13.1",

3
src/components/Blockly/BlocklySvg.js
View File

@ -53,7 +53,6 @@ class BlocklySvg extends Component {
var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();
var content = new XMLSerializer().serializeToString(canvas);
var xml = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="${bbox.width}" height="${bbox.height}" viewBox="${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}">
${css}">${content}</svg>`;
@ -65,7 +64,7 @@ class BlocklySvg extends Component {
render() {
return (
<div
style={{display: 'flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
style={{display: 'inline-flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
dangerouslySetInnerHTML={{ __html: this.state.svg }}
/>
);

148
src/components/Gallery/GalleryHome.js
View File

@ -1,118 +1,62 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import clsx from 'clsx';
import Breadcrumbs from '../Breadcrumbs';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
import Breadcrumbs from '../Breadcrumbs';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import Divider from '@material-ui/core/Divider';
const styles = (theme) => ({
outerDiv: {
position: 'absolute',
right: '-30px',
bottom: '-30px',
width: '160px',
height: '160px',
color: fade(theme.palette.secondary.main, 0.6)
},
outerDivError: {
stroke: fade(theme.palette.error.dark, 0.6),
color: fade(theme.palette.error.dark, 0.6)
},
outerDivSuccess: {
stroke: fade(theme.palette.primary.main, 0.6),
color: fade(theme.palette.primary.main, 0.6)
},
outerDivOther: {
stroke: fade(theme.palette.secondary.main, 0.6)
},
innerDiv: {
width: 'inherit',
height: 'inherit',
display: 'table-cell',
verticalAlign: 'middle',
textAlign: 'center'
}
});
import Typography from '@material-ui/core/Typography';
class GalleryHome extends Component {
state = {
gallery: []
}
state = {
gallery: []
}
componentDidMount() {
fetch(process.env.REACT_APP_BLOCKLY_API + this.props.location.pathname)
.then(res => res.json())
.then((data) => {
this.setState({ gallery: data })
})
}
componentDidMount() {
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/gallery`)
.then(res => {
this.setState({ gallery: res.data.galleries });
})
.catch(err => {
// TODO:
});
}
render() {
return (
<div>
<Breadcrumbs content={[{ link: '/gallery', title: 'Gallery' }]} />
render() {
return (
<div>
<Breadcrumbs content={[{ link: '/gallery', title: 'Gallery' }]} />
<h1>Gallery</h1>
<Grid container spacing={2}>
{this.state.gallery.map((gallery, i) => {
return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
<Link to={`/gallery/${gallery.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<Paper style={{ height: '400px', padding: '2rem', position: 'relative', overflow: 'hidden' }}>
<h3>{gallery.title}</h3>
<Divider />
<Grid container spacing={10} style={{ marginBottom: '5px' }}>
<Grid item xs={12}>
<BlocklyWindow
trashcan={false}
zoomControls={false}
blockDisabled
blocklyCSS={{ height: '18vH' }}
initialXml={gallery.xml}
/>
</Grid>
</Grid>
<p>{gallery.text}</p>
<Divider />
<div className={clsx(this.props.classes.outerDiv)} style={{ width: '160px', height: '160px', border: 0 }}>
</div>
</Paper>
</Link>
</Grid>
)
})}
</Grid>
</div>
);
};
<h1>Gallery</h1>
<Grid container spacing={2}>
{this.state.gallery.map((gallery, i) => {
return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Link to={`/gallery/${gallery._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
<h3 style={{marginTop: 0}}>{gallery.title}</h3>
<Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
<BlocklyWindow
svg
blockDisabled
initialXml={gallery.xml}
/>
<Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{gallery.description}</Typography>
</Paper>
</Link>
</Grid>
)
})}
</Grid>
</div>
);
};
}
GalleryHome.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status
});
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(GalleryHome));
export default GalleryHome;

45
src/components/Home.js
View File

@ -60,31 +60,17 @@ class Home extends Component {
componentDidMount() {
this.setState({ stats: window.localStorage.getItem('stats') })
if(this.props.match.params.shareId || this.props.match.params.galleryId){
this.setState({progress: true});
axios.get(`${process.env.REACT_APP_BLOCKLY_API}${this.props.location.pathname}`)
.then(res => {
var shareContent = res.data.content;
this.props.workspaceName(res.data.content.name);
this.setState({ projectToLoad: res.data.content, progress: false });
})
.catch(err => {
this.setState({ progress: false, snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
window.scrollTo(0, 0);
});
}
else {
this.props.workspaceName(createNameId());
}
this.getProject();
}
componentDidUpdate() {
componentDidUpdate(props) {
if(props.location.path !== this.props.location.path){
this.getProject();
}
/* Resize and reposition all of the workspace chrome (toolbox, trash,
scrollbars etc.) This should be called when something changes that requires
recalculating dimensions and positions of the trash, zoom, toolbox, etc.
(e.g. window resize). */
const workspace = Blockly.getMainWorkspace();
Blockly.svgResize(workspace);
}
@ -94,6 +80,27 @@ class Home extends Component {
this.props.workspaceName(null);
}
getProject = () => {
if(this.props.match.params.shareId || this.props.match.params.galleryId){
var param = this.props.match.params.shareId ? 'share' : 'gallery';
var id = this.props.match.params[`${param}Id`];
this.setState({progress: true});
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${param}/${id}`)
.then(res => {
this.props.workspaceName(res.data[param].name ? res.data[param].name : res.data[param].title);
this.setState({ projectToLoad: res.data[param], progress: false });
})
.catch(err => {
// TODO:
this.setState({ progress: false, snackbar: true, key: Date.now(), message: `Fehler beim Aufrufen des angeforderten Programms. Versuche es noch einmal.`, type: 'error' });
window.scrollTo(0, 0);
});
}
else {
this.props.workspaceName(createNameId());
}
}
onChange = () => {
this.setState({ codeOn: !this.state.codeOn });
const workspace = Blockly.getMainWorkspace();

2
src/components/Tutorial/Instruction.js
View File

@ -39,7 +39,7 @@ class Instruction extends Component {
: null}
{step.xml ?
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
<Grid item xs={12}>
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
<BlocklyWindow
svg
blockDisabled

6
src/components/WorkspaceFunc.js
View File

@ -7,7 +7,6 @@ import * as Blockly from 'blockly/core';
import axios from 'axios';
import { saveAs } from 'file-saver';
import { createId } from 'mnemonic-id';
import { detectWhitespacesAndReturnReadableResult } from '../helpers/whitespace';
import { initialXml } from './Blockly/initialXml.js';
@ -114,14 +113,13 @@ class WorkspaceFunc extends Component {
shareBlocks = () => {
var body = {
_id: createId(10),
name: this.state.name,
xml: this.props.xml
};
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
.then(res => {
var shareContent = res.data.content;
this.setState({ share: true, open: true, title: 'Programm teilen', id: shareContent._id });
this.setState({ share: true, open: true, title: 'Programm teilen', id: shareContent.link });
})
.catch(err => {
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
@ -299,7 +297,7 @@ class WorkspaceFunc extends Component {
</IconButton>
</Tooltip>
: null}
<Tooltip title='Workspace zurücksetzen' arrow style={{ marginRight: '5px' }}>
<Tooltip title='Workspace zurücksetzen' arrow style={this.props.assessment ? null : { marginRight: '5px' }}>
<IconButton
className={this.props.classes.button}
onClick={() => this.resetWorkspace()}