From 0cb7bba5212c906add2fcd0bf383f55b71111824 Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 16 Oct 2020 14:32:52 +0200 Subject: [PATCH] add blockly project gallery --- src/components/Gallery/GalleryHome.js | 100 ++++++++++++++++++++++++++ src/components/Gallery/gallery.json | 37 ++++++++++ src/components/Home.js | 21 +++++- src/components/Navbar.js | 44 ++++++------ src/components/Routes.js | 6 +- 5 files changed, 183 insertions(+), 25 deletions(-) create mode 100644 src/components/Gallery/GalleryHome.js create mode 100644 src/components/Gallery/gallery.json diff --git a/src/components/Gallery/GalleryHome.js b/src/components/Gallery/GalleryHome.js new file mode 100644 index 0000000..6c68f34 --- /dev/null +++ b/src/components/Gallery/GalleryHome.js @@ -0,0 +1,100 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import clsx from 'clsx'; + +import Breadcrumbs from '../Breadcrumbs'; + +import gallery from './gallery.json'; +// import tutorials from '../../data/tutorials.json'; + +import { Link } from 'react-router-dom'; + +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { withStyles } from '@material-ui/core/styles'; +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' + } +}); + + +class GalleryHome extends Component { + + render() { + return ( +
+ + +

Gallery

+ + {gallery.map((gallery, i) => { + return ( + + + +

{gallery.title}

+ + +

{gallery.text}

+ +

{gallery.name}

+ +
+
+ + + + ) + })} + +
+ ); + }; +} + +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)); diff --git a/src/components/Gallery/gallery.json b/src/components/Gallery/gallery.json new file mode 100644 index 0000000..0ff72ae --- /dev/null +++ b/src/components/Gallery/gallery.json @@ -0,0 +1,37 @@ +[ + { + "id": 15212, + "title": "Das senseBox Buch Kapitel 1", + "name": "Mario", + "text": "Die Blöcke findest du in der Kategorie \"Schleifen\". Die einfachste Schleife, die du Verwenden kannst, ist der Block \"Wiederhole 10 mal\". Bei diesem Block kannst du die Blöcke, die eine bestimmte Zahl wiederholt werden soll einfach in den offenen Block abschnitt ziehen. ", + "xml": "\n \n \n \n 10\n \n \n \n" + }, + { + "id": 25451, + "title": "Das senseBox Buch Kapitel 2", + "name": "Mario", + "text": "", + "xml": "\n \n \n \n 1\n HIGH\n \n \n \n \n 1000\n \n \n \n \n 1\n LOW\n \n \n \n \n 1000\n \n \n \n \n \n \n \n \n \n \n \n" + }, + { + "id": 3541512, + "title": "Das senseBox Buch Kapitel 3", + "name": "Mario", + "text": "", + "xml": "\n \n \n \n \n \n \n \n \n WHITE,BLACK\n \n \n 1\n \n \n \n \n 0\n \n \n \n \n 0\n \n \n \n \n \n \n \n Helligkeit:\n \n \n \n \n Illuminance\n \n \n \n \n \n \n \n \n \n" + }, + { + "id": 7487454, + "title": "Das senseBox Buch Kapitel 4", + "name": "Mario", + "text": "", + "xml": "\n \n \n \n \n \n \n \n \n WHITE,BLACK\n \n \n 1\n \n \n \n \n 0\n \n \n \n \n 0\n \n \n \n \n \n \n \n Helligkeit:\n \n \n \n \n Illuminance\n \n \n \n \n \n \n \n \n \n" + }, + { + "id": 54541251, + "title": "Das senseBox Buch Kapitel 5", + "name": "Mario", + "text": "", + "xml": "" + } +] \ No newline at end of file diff --git a/src/components/Home.js b/src/components/Home.js index 86deb9a..861dbd1 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -18,6 +18,7 @@ import { withStyles } from '@material-ui/core/styles'; import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import gallery from './Gallery/gallery.json'; const styles = (theme) => ({ codeOn: { @@ -44,14 +45,21 @@ const styles = (theme) => ({ class Home extends Component { state = { - codeOn: false + codeOn: false, + projectToLoad: undefined } + componentDidMount() { + this.setState({ projectToLoad: gallery.find(project => project.id == this.props.match.params.galleryId) }) + } + + componentDidUpdate() { /* 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); } @@ -71,6 +79,12 @@ class Home extends Component { } render() { + // console.log(this.props.match.params.galleryId); + // console.log(gallery); + // console.log(gallery.filter(project => project.id == this.props.match.params.galleryId)); + if (this.state.projectToLoad) { + console.log(this.state.projectToLoad.xml) + } return (
@@ -87,7 +101,10 @@ class Home extends Component { - + {this.state.projectToLoad ? + < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.state.projectToLoad.xml} /> : < BlocklyWindow blocklyCSS={{ height: '80vH' }} /> + } + {this.state.codeOn ? diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 023981a..a70d9a4 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -45,32 +45,32 @@ class Navbar extends Component { this.setState({ open: !this.state.open }); } - render(){ + render() { return (
- + - + senseBox Blockly - - senseBox-Logo + + senseBox-Logo {/^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname) ? - + Tutorial @@ -82,34 +82,34 @@ class Navbar extends Component { anchor="left" onClose={this.toggleDrawer} open={this.state.open} - classes={{paper: this.props.classes.drawerWidth}} - ModalProps={{keepMounted: true}} // Better open performance on mobile. + classes={{ paper: this.props.classes.drawerWidth }} + ModalProps={{ keepMounted: true }} // Better open performance on mobile. > -
-
- +
+
+ Menü -
+
- {[{text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial"}, {text: 'Tutorial-Builder', icon: faFolderPlus, link: "/tutorial/builder"}, {text: 'Einstellungen', icon: faCog, link: "/settings"}].map((item, index) => ( - + {[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" }, { text: 'Tutorial-Builder', icon: faFolderPlus, link: "/tutorial/builder" }, { text: 'Gallery', icon: faFolderPlus, link: "/gallery" }, { text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => ( + - + ))} - + - {[{text: 'Über uns', icon: faBuilding},{text: 'Kontakt', icon: faEnvelope}, {text: 'Impressum', icon: faIdCard}].map((item, index) => ( + {[{ text: 'Über uns', icon: faBuilding }, { text: 'Kontakt', icon: faEnvelope }, { text: 'Impressum', icon: faIdCard }].map((item, index) => ( - + ))} @@ -120,4 +120,4 @@ class Navbar extends Component { } } -export default withStyles(styles, {withTheme: true})(withRouter(Navbar)); +export default withStyles(styles, { withTheme: true })(withRouter(Navbar)); diff --git a/src/components/Routes.js b/src/components/Routes.js index 70153de..2993e7d 100644 --- a/src/components/Routes.js +++ b/src/components/Routes.js @@ -7,6 +7,8 @@ import Tutorial from './Tutorial/Tutorial'; import TutorialHome from './Tutorial/TutorialHome'; import Builder from './Tutorial/Builder/Builder'; import NotFound from './NotFound'; +import GalleryHome from './Gallery/GalleryHome'; + class Routes extends Component { @@ -16,7 +18,9 @@ class Routes extends Component { - + + +