add blockly project gallery

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 (
+            <div>
+                <Breadcrumbs content={[{ link: '/gallery', title: 'Gallery' }]} />
+
+                <h1>Gallery</h1>
+                <Grid container spacing={2}>
+                    {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 />
+                                        <BlocklyWindow
+                                            svg
+                                            readOnly
+                                            initialXml={gallery.xml}
+                                        />
+                                        <p>{gallery.text}</p>
+                                        <Divider />
+                                        <p>{gallery.name}</p>
+
+                                        <div className={clsx(this.props.classes.outerDiv)} style={{ width: '160px', height: '160px', border: 0 }}>
+                                        </div>
+                                    </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));

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": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"controls_repeat_ext\" id=\"!|`dyF$`~*!l~D[TUc4N\" x=\"38\" y=\"32\">\n    <value name=\"TIMES\">\n      <block type=\"math_number\" id=\"ktgQ[7pD~M{sq;r^kLuz\">\n        <field name=\"NUM\">10</field>\n      </block>\n    </value>\n  </block>\n</xml>"
+    },
+    {
+        "id": 25451,
+        "title": "Das senseBox Buch Kapitel 2",
+        "name": "Mario",
+        "text": "",
+        "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"5KebY,-ltvxB7K^El}1(\" x=\"30\" y=\"34\">\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_led\" id=\"Y(DUYI_.t1V!_9Qf7lgl\">\n        <field name=\"PIN\">1</field>\n        <field name=\"STAT\">HIGH</field>\n        <next>\n          <block type=\"time_delay\" id=\"C2.adlos#1/Ns)1@K!Or\">\n            <value name=\"DELAY_TIME_MILI\">\n              <block type=\"math_number\" id=\")uPzh6_L+SQaIr+v8B,\">\n                <field name=\"NUM\">1000</field>\n              </block>\n            </value>\n            <next>\n              <block type=\"sensebox_led\" id=\"w215h=etDdQ(Aao86qG2\">\n                <field name=\"PIN\">1</field>\n                <field name=\"STAT\">LOW</field>\n                <next>\n                  <block type=\"time_delay\" id=\"1pPNxT#ag6fFP|=fy(,%\">\n                    <value name=\"DELAY_TIME_MILI\">\n                      <block type=\"math_number\" id=\"%xCj(nr,]@f{ALe^{vH}\">\n                        <field name=\"NUM\">1000</field>\n                      </block>\n                    </value>\n                  </block>\n                </next>\n              </block>\n            </next>\n          </block>\n        </next>\n      </block>\n    </statement>\n  </block>\n</xml>"
+    },
+    {
+        "id": 3541512,
+        "title": "Das senseBox Buch Kapitel 3",
+        "name": "Mario",
+        "text": "",
+        "xml": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n  <block type=\"arduino_functions\" id=\"5KebY,-ltvxB7K^El}1(\" x=\"30\" y=\"34\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_display_beginDisplay\" id=\")Z4]CI*ibRqWkqLr^pjb\"></block>\n    </statement>\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_display_show\" id=\"r)I#b]xjcH,b@8g*,Pf^\">\n        <statement name=\"SHOW\">\n          <block type=\"sensebox_display_printDisplay\" id=\"o{6DR6H4f;Qj%n=@XgaW\">\n            <field name=\"COLOR\">WHITE,BLACK</field>\n            <value name=\"SIZE\">\n              <block type=\"math_number\" id=\"u}2t2rIa6Wx2)42.Ij]}\">\n                <field name=\"NUM\">1</field>\n              </block>\n            </value>\n            <value name=\"X\">\n              <block type=\"math_number\" id=\"6n/}z0xXtJLhHm0E9kF/\">\n                <field name=\"NUM\">0</field>\n              </block>\n            </value>\n            <value name=\"Y\">\n              <block type=\"math_number\" id=\"Y-NwVU`0,j73ON)ODL^Y\">\n                <field name=\"NUM\">0</field>\n              </block>\n            </value>\n            <value name=\"printDisplay\">\n              <block type=\"text_join\" id=\"t*`nvkah#B@JrGRge`u[\">\n                <mutation items=\"2\"></mutation>\n                <value name=\"ADD0\">\n                  <block type=\"text\" id=\"*n^fD@DZEq^eLPc|CvJ[\">\n                    <field name=\"TEXT\">Helligkeit:</field>\n                  </block>\n                </value>\n                <value name=\"ADD1\">\n                  <block type=\"sensebox_sensor_uv_light\" id=\"tT8cG:UHho:SUKZQLVG{\">\n                    <field name=\"NAME\">Illuminance</field>\n                  </block>\n                </value>\n              </block>\n            </value>\n          </block>\n        </statement>\n      </block>\n    </statement>\n  </block>\n</xml>"
+    },
+    {
+        "id": 7487454,
+        "title": "Das senseBox Buch Kapitel 4",
+        "name": "Mario",
+        "text": "",
+        "xml": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n  <block type=\"arduino_functions\" id=\"5KebY,-ltvxB7K^El}1(\" x=\"30\" y=\"34\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_display_beginDisplay\" id=\")Z4]CI*ibRqWkqLr^pjb\"></block>\n    </statement>\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_display_show\" id=\"r)I#b]xjcH,b@8g*,Pf^\">\n        <statement name=\"SHOW\">\n          <block type=\"sensebox_display_printDisplay\" id=\"o{6DR6H4f;Qj%n=@XgaW\">\n            <field name=\"COLOR\">WHITE,BLACK</field>\n            <value name=\"SIZE\">\n              <block type=\"math_number\" id=\"u}2t2rIa6Wx2)42.Ij]}\">\n                <field name=\"NUM\">1</field>\n              </block>\n            </value>\n            <value name=\"X\">\n              <block type=\"math_number\" id=\"6n/}z0xXtJLhHm0E9kF/\">\n                <field name=\"NUM\">0</field>\n              </block>\n            </value>\n            <value name=\"Y\">\n              <block type=\"math_number\" id=\"Y-NwVU`0,j73ON)ODL^Y\">\n                <field name=\"NUM\">0</field>\n              </block>\n            </value>\n            <value name=\"printDisplay\">\n              <block type=\"text_join\" id=\"t*`nvkah#B@JrGRge`u[\">\n                <mutation items=\"2\"></mutation>\n                <value name=\"ADD0\">\n                  <block type=\"text\" id=\"*n^fD@DZEq^eLPc|CvJ[\">\n                    <field name=\"TEXT\">Helligkeit:</field>\n                  </block>\n                </value>\n                <value name=\"ADD1\">\n                  <block type=\"sensebox_sensor_uv_light\" id=\"tT8cG:UHho:SUKZQLVG{\">\n                    <field name=\"NAME\">Illuminance</field>\n                  </block>\n                </value>\n              </block>\n            </value>\n          </block>\n        </statement>\n      </block>\n    </statement>\n  </block>\n</xml>"
+    },
+    {
+        "id": 54541251,
+        "title": "Das senseBox Buch Kapitel 5",
+        "name": "Mario",
+        "text": "",
+        "xml": ""
+    }
+]

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 (
       <div>
         <div style={{ float: 'right', height: '40px', marginBottom: '20px' }}><WorkspaceFunc /></div>
@@ -87,7 +101,10 @@ class Home extends Component {
               </IconButton>
             </Tooltip>
             <TrashcanButtons />
-            <BlocklyWindow blocklyCSS={{ height: '80vH' }} blockDisabled />
+            {this.state.projectToLoad ?
+              < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.state.projectToLoad.xml} /> : < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
+            }
+
           </Grid>
           {this.state.codeOn ?
             <Grid item xs={12} md={6}>

src/components/Navbar.js

@@ -45,32 +45,32 @@ class Navbar extends Component {
     this.setState({ open: !this.state.open });
   }
 
-  render(){
+  render() {
     return (
       <div>
         <AppBar
           position="relative"
-          style={{height: '50px', marginBottom: '30px'}}
+          style={{ height: '50px', marginBottom: '30px' }}
-          classes={{root: this.props.classes.appBarColor}}
+          classes={{ root: this.props.classes.appBarColor }}
         >
-          <Toolbar style={{height: '50px', minHeight: '50px', padding: 0, color: 'white'}}>
+          <Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}>
             <IconButton
               color="inherit"
               onClick={this.toggleDrawer}
-              style={{margin: '0 10px'}}
+              style={{ margin: '0 10px' }}
             >
               <FontAwesomeIcon icon={faBars} />
             </IconButton>
-            <Link to={"/"} style={{textDecoration: 'none', color: 'inherit'}}>
+            <Link to={"/"} style={{ textDecoration: 'none', color: 'inherit' }}>
               <Typography variant="h6" noWrap>
                 senseBox Blockly
               </Typography>
             </Link>
-            <Link to={"/"} style={{marginLeft: '10px'}}>
+            <Link to={"/"} style={{ marginLeft: '10px' }}>
-              <img src={senseboxLogo} alt="senseBox-Logo" width="30"/>
+              <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
             {/^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname) ?
-              <Link to={"/tutorial"} style={{textDecoration: 'none', color: 'inherit', marginLeft: '10px'}}>
+              <Link to={"/tutorial"} style={{ textDecoration: 'none', color: 'inherit', marginLeft: '10px' }}>
                 <Typography variant="h6" noWrap>
                   Tutorial
                 </Typography>
@@ -82,34 +82,34 @@ class Navbar extends Component {
           anchor="left"
           onClose={this.toggleDrawer}
           open={this.state.open}
-          classes={{paper: this.props.classes.drawerWidth}}
+          classes={{ paper: this.props.classes.drawerWidth }}
-          ModalProps={{keepMounted: true}} // Better open performance on mobile.
+          ModalProps={{ keepMounted: true }} // Better open performance on mobile.
         >
-          <div style={{height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px'}} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
+          <div style={{ height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px' }} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
-            <div style={{display:' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%'}}>
+            <div style={{ display: ' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%' }}>
-              <Typography variant="h6" style={{display:'inline'}}>
+              <Typography variant="h6" style={{ display: 'inline' }}>
                 Menü
               </Typography>
-              <div style={{float: 'right'}}>
+              <div style={{ float: 'right' }}>
                 <FontAwesomeIcon icon={faChevronLeft} />
               </div>
             </div>
           </div>
           <List>
-            {[{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) => (
-              <Link to={item.link} key={index} style={{textDecoration: 'none', color: 'inherit'}}>
+              <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
                 <ListItem button onClick={this.toggleDrawer}>
-                  <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
+                  <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
                   <ListItemText primary={item.text} />
                 </ListItem>
               </Link>
             ))}
           </List>
-          <Divider classes={{root: this.props.classes.appBarColor}} style={{marginTop: 'auto'}}/>
+          <Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
           <List>
-            {[{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) => (
               <ListItem button key={index} onClick={this.toggleDrawer}>
-                <ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
+                <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
                 <ListItemText primary={item.text} />
               </ListItem>
             ))}
@@ -120,4 +120,4 @@ class Navbar extends Component {
   }
 }
 
-export default withStyles(styles, {withTheme: true})(withRouter(Navbar));
+export default withStyles(styles, { withTheme: true })(withRouter(Navbar));

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 {
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/tutorial" exact component={TutorialHome} />
-          <Route path="/tutorial/builder" exact component={Builder}/>
+          <Route path="/gallery" exact component={GalleryHome} />
+          <Route path="/gallery/:galleryId" exact component={Home} />
+          <Route path="/tutorial/builder" exact component={Builder} />
           <Route path="/tutorial/:tutorialId" exact component={Tutorial} />
           <Route component={NotFound} />
         </Switch>