diff --git a/src/App.css b/src/App.css index 49ba95a..11adb26 100644 --- a/src/App.css +++ b/src/App.css @@ -41,3 +41,9 @@ blockquote p { display: inline; } + +.overlay { + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index 2f55a0e..0a89c2d 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -1047,4 +1047,27 @@ Blockly.Msg.assessmenttour_assessmentDiv = "Los gehts! Löse die folgende Aufgab Blockly.Msg.assessmenttour_injectionDiv = "Erstelle hier deine Lösung. Du kannst alle Blöcke aus der Toolbox verwenden." +/** + * Overlay + */ + +Blockly.Msg.compile_overlay_head = "Dein Programm wird nun kompiliert und heruntergeladen" +Blockly.Msg.compile_overlay_text = "Kopiere es anschließend auf deine senseBox MCU" + + +/** + * FAQ + */ + +Blockly.Msg.faq_q1_question = `Wie kann ich mein Programm auf die senseBox kopieren?` +Blockly.Msg.faq_q1_answer = `Um Programme auf die senseBox zu kopieren wird diese mit dem Micro USB Kabel an den Computer angeschlossen. Mache anschließend auf der senseBox MCU einen Doppelklick auf den roten Reset Button. Die senseBox wird nun als Wechseldatenträger an deinem Computer erkannt und die zuvor erstellen Programm können per Drag & Drop kopiert werden. Nach jeder Änderung des Programmcodes muss das Programm neu kompiliert und übertragen werden +#### Lernmodus der MCU aktivieren + + +#### Kopieren von Programmen unter MacOS +Das Kopieren der Programme unter MacOS funktioniert nicht über den Finder, es gibt es aber dennoch zwei verschiedene Möglichkeiten die Programme zu kopieren: +- [senseBox Kopiertool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip) +- [muCommander](https://www.mucommander.com/) +` + export const De = Blockly.Msg; diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index bc2a01c..e19a9a0 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -1010,4 +1010,26 @@ Blockly.Msg.assessmenttour_solutionCheck = "When your solution is ready click he Blockly.Msg.assessmenttour_assessmentDiv = "Let's go! Solve the following task to complete the tutorial. " Blockly.Msg.assessmenttour_injectionDiv = "Create your solution here. You can use any blocks from the toolbox." +/** + * Overlay + */ + +Blockly.Msg.compile_overlay_head = "Your program is now compiled and downloaded"; +Blockly.Msg.compile_overlay_text = "Then copy it to your senseBox MCU"; + +/** + * FAQ + */ + + +Blockly.Msg.faq_q1_question = `Wie kann ich mein Programm auf die senseBox kopieren?` +Blockly.Msg.faq_q1_answer = `Um Programme auf die senseBox zu kopieren wird diese mit dem Micro USB Kabel an den Computer angeschlossen. Mache anschließend auf der senseBox MCU einen Doppelklick auf den roten Reset Button. Die senseBox wird nun als Wechseldatenträger an deinem Computer erkannt und die zuvor erstellen Programm können per Drag & Drop kopiert werden. Nach jeder Änderung des Programmcodes muss das Programm neu kompiliert und übertragen werden +#### Lernmodus der MCU aktivieren + + +#### Kopieren von Programmen unter MacOS +Das Kopieren der Programme unter MacOS funktioniert nicht über den Finder, es gibt es aber dennoch zwei verschiedene Möglichkeiten die Programme zu kopieren: +- [senseBox Kopiertool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip) +- [muCommander](https://www.mucommander.com/) +` export const En = Blockly.Msg; diff --git a/src/components/Faq.js b/src/components/Faq.js new file mode 100644 index 0000000..65d4003 --- /dev/null +++ b/src/components/Faq.js @@ -0,0 +1,159 @@ +import React, { Component } from 'react'; + +import Breadcrumbs from './Breadcrumbs'; + +import { withRouter } from 'react-router-dom'; + +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import * as Blockly from 'blockly' +import ReactMarkdown from 'react-markdown'; +import Container from '@material-ui/core/Container'; +import ExpansionPanel from '@material-ui/core/ExpansionPanel'; +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; +import { FaqQuestions } from '../data/faq' + + +class Faq extends Component { + + state = { + panel: '', + expanded: false + } + + + handleChange = (panel) => { + this.setState({ panel: this.state.panel === panel ? '' : panel }); + }; + + componentDidMount() { + // Ensure that Blockly.setLocale is adopted in the component. + // Otherwise, the text will not be displayed until the next update of the component. + + window.scrollTo(0, 0) + this.forceUpdate(); + } + + render() { + const { panel } = this.state; + return ( +
+ + +
+

FAQ

+ {FaqQuestions().map((object, i) => { + return ( + this.handleChange(`panel${i}`)}> + + } + > + {object.question} + + + + + + + + + ) + })} +
+ +
+ ); + }; +} + +export default withRouter(Faq); + /* + this.handleChange('panel1')}> + +} +> +{Blockly.Msg.faq_q1_question} + + + + + + + + + this.handleChange('panel2')}> + +} +> +Frage 2 + + + +Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar +diam eros in elit. Pellentesque convallis laoreet laoreet. + + + + this.handleChange('panel3')}> + +} +> +Frage 3 + + + +Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, +vitae egestas augue. Duis vel est augue. + + + + this.handleChange('panel4')}> + +} +> +Frage 4 + + + +Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, +vitae egestas augue. Duis vel est augue. + + + +*/ + + // {{ + // this.props.button ? + // + // : + // + // }} + + diff --git a/src/components/Route/Routes.js b/src/components/Route/Routes.js index b0bec0c..212df95 100644 --- a/src/components/Route/Routes.js +++ b/src/components/Route/Routes.js @@ -24,6 +24,7 @@ import Login from '../User/Login'; import Account from '../User/Account'; import MyBadges from '../User/MyBadges'; import News from '../News' +import Faq from '../Faq' class Routes extends Component { @@ -90,6 +91,9 @@ class Routes extends Component { + + + {/* Not Found */} diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index da35029..fbce051 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -18,6 +18,7 @@ import TextField from '@material-ui/core/TextField'; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from 'blockly/core'; +import Copy from '../copy.svg'; const styles = (theme) => ({ backdrop: { @@ -134,7 +135,13 @@ class Compile extends Component { } - +
+ +

{Blockly.Msg.compile_overlay_head}

+

{Blockly.Msg.compile_overlay_text}

+

Benötigst du mehr Hilfe? Dann schaue hier: test

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/faq.js b/src/data/faq.js new file mode 100644 index 0000000..35a358f --- /dev/null +++ b/src/data/faq.js @@ -0,0 +1,17 @@ +import * as Blockly from 'blockly/core'; + + +export const FaqQuestions = () => { + return ( + [ + { + question: `${Blockly.Msg.faq_q1_question}`, + answer: `${Blockly.Msg.faq_q1_answer}`, + }, + { + question: `${Blockly.Msg.faq_q2_question}`, + answer: `${Blockly.Msg.faq_q2_answer}`, + }, + + ]) +} \ No newline at end of file