+
+ {this.state.gallery.map((gallery, i) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+ })}
+
+
+ );
+ };
+}
+
+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": "Gallery
+{gallery.title}
+{gallery.text}
+
+
+
-
-
+
+
+
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) => (
+
+ Sprache
+
+
+
+ );
+}
diff --git a/src/components/Settings/RenderSelector.js b/src/components/Settings/RenderSelector.js
new file mode 100644
index 0000000..46ad84e
--- /dev/null
+++ b/src/components/Settings/RenderSelector.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 400,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+}));
+
+export default function LanguageSelector() {
+ const classes = useStyles();
+ const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
+
+ const handleChange = (event) => {
+ setRenderer(event.target.value);
+ window.localStorage.setItem('renderer', event.target.value);
+ };
+
+ return (
+
+
+ Renderer
+
+
+
+ );
+}
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
new file mode 100644
index 0000000..95b33dc
--- /dev/null
+++ b/src/components/Settings/Settings.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import LanguageSelector from './LanguageSelector';
+import RenderSelector from './RenderSelector';
+
+
+class Settings extends Component {
+ render() {
+ return (
+ Der Renderer bestimmt das aussehen der Blöcke
+
+ Einstellungen
+
+ );
+ };
+}
+
+export default withRouter(Settings);
diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js
index 5d380d2..253f9b4 100644
--- a/src/components/WorkspaceFunc.js
+++ b/src/components/WorkspaceFunc.js
@@ -12,7 +12,6 @@ import { initialXml } from './Blockly/initialXml.js';
import Compile from './Compile';
import SolutionCheck from './Tutorial/SolutionCheck';
-import Dialog from './Dialog';
import Snackbar from './Snackbar';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
@@ -22,8 +21,19 @@ import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
+import { createId } from 'mnemonic-id';
-import { faPen, faSave, faUpload, faCamera, faShare } from "@fortawesome/free-solid-svg-icons";
+
+import Dialog from './Dialog';
+// import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+
+
+import { faPen, faSave, faUpload, faCamera, faShare, faShareAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
@@ -49,9 +59,10 @@ const styles = (theme) => ({
});
+
class WorkspaceFunc extends Component {
- constructor(props){
+ constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
@@ -60,21 +71,25 @@ class WorkspaceFunc extends Component {
open: false,
file: false,
saveFile: false,
+ share: false,
name: props.name,
snackbar: false,
key: '',
- message: ''
+ message: '',
+ id: ''
};
}
- componentDidUpdate(props){
- if(props.name !== this.props.name){
- this.setState({name: this.props.name});
+
+
+ componentDidUpdate(props) {
+ if (props.name !== this.props.name) {
+ this.setState({ name: this.props.name });
}
}
toggleDialog = () => {
- this.setState({ open: !this.state });
+ this.setState({ open: !this.state, share: false });
}
saveXmlFile = () => {
@@ -87,6 +102,41 @@ class WorkspaceFunc extends Component {
saveAs(blob, fileName);
}
+ shareBlocks = () => {
+ let code = this.props.xml;
+ let requestOptions = '';
+ let id = '';
+ if (this.state.id !== '') {
+ requestOptions = {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ id: this.state.id,
+ name: this.state.name,
+ xml: code
+ })
+ };
+ fetch(process.env.REACT_APP_BLOCKLY_API + '/share' + this.state.id, requestOptions)
+ .then(response => response.json())
+ .then(data => this.setState({ share: true }));
+ }
+ else {
+ id = createId(10);
+ requestOptions = {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ id: id,
+ name: this.state.name,
+ xml: code
+ })
+ };
+ fetch(process.env.REACT_APP_BLOCKLY_API + '/share', requestOptions)
+ .then(response => response.json())
+ .then(data => this.setState({ id: data.id, share: true }));
+ }
+ }
+
getSvg = () => {
const workspace = Blockly.getMainWorkspace();
var canvas = workspace.svgBlockCanvas_.cloneNode(true);
@@ -98,7 +148,7 @@ class WorkspaceFunc extends Component {
// var cssContent = Blockly.Css.CONTENT.join('');
var cssContent = '';
for (var i = 0; i < document.getElementsByTagName('style').length; i++) {
- if(/^blockly.*$/.test(document.getElementsByTagName('style')[i].id)){
+ if (/^blockly.*$/.test(document.getElementsByTagName('style')[i].id)) {
cssContent += document.getElementsByTagName('style')[i].firstChild.data.replace(/\..* \./g, '.');
}
}
@@ -131,22 +181,22 @@ class WorkspaceFunc extends Component {
}
createFileName = (filetype) => {
- this.setState({file: filetype}, () => {
- if(this.state.name){
+ this.setState({ file: filetype }, () => {
+ if (this.state.name) {
this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg()
}
- else{
+ else {
this.setState({ saveFile: true, file: filetype, open: true, title: this.state.file === 'xml' ? 'Blöcke speichern' : 'Screenshot erstellen', content: `Bitte gib einen Namen für die Bennenung der ${this.state.file === 'xml' ? 'XML' : 'SVG'}-Datei ein und bestätige diesen mit einem Klick auf 'Eingabe'.` });
}
});
}
setFileName = (e) => {
- this.setState({name: e.target.value});
+ this.setState({ name: e.target.value });
}
uploadXmlFile = (xmlFile) => {
- if(xmlFile.type !== 'text/xml'){
+ if (xmlFile.type !== 'text/xml') {
this.setState({ open: true, file: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
}
else {
@@ -161,18 +211,18 @@ class WorkspaceFunc extends Component {
workspace.clear();
this.props.clearStats();
Blockly.Xml.domToWorkspace(xmlDom, workspace);
- if(workspace.getAllBlocks().length < 1){
+ if (workspace.getAllBlocks().length < 1) {
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xmlBefore), workspace)
this.setState({ open: true, file: false, title: 'Keine Blöcke', content: 'Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.' });
}
else {
- if(!this.props.solutionCheck){
+ if (!this.props.solutionCheck) {
var extensionPosition = xmlFile.name.lastIndexOf('.');
this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
}
this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
}
- } catch(err){
+ } catch (err) {
this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
}
};
@@ -195,83 +245,118 @@ class WorkspaceFunc extends Component {
workspace.options.maxBlocks = Infinity;
this.props.onChangeCode();
this.props.clearStats();
- if(!this.props.solutionCheck){
+ if (!this.props.solutionCheck) {
this.props.workspaceName(null);
}
this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
}
+
+
render() {
return (
-
+
{!this.props.solutionCheck ?
-
-
{this.setState({file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.'})}}>
- {this.props.name && !isWidthDown('xs', this.props.width) ? {this.props.name} : null}
-
+
{this.createFileName('xml');}}
+ onClick={() => { this.createFileName('xml'); }}
>
-
-
-
+
- : null}
+ : null}
{this.props.solutionCheck ? { this.setState({ file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
+ {this.props.name && !isWidthDown('xs', this.props.width) ? {this.props.name} : null}
+
-
+
+
{this.uploadXmlFile(e.target.files[0])}}
+ onChange={(e) => { this.uploadXmlFile(e.target.files[0]) }}
id="open-blocks"
type="file"
/>