From 889fba21ccda31b166ec2c6db22c40e62bdabf45 Mon Sep 17 00:00:00 2001 From: Mario Date: Sat, 19 Dec 2020 10:32:42 +0100 Subject: [PATCH 1/3] add faq page --- src/App.css | 6 ++ src/components/Blockly/msg/de.js | 23 ++++ src/components/Blockly/msg/en.js | 22 ++++ src/components/Faq.js | 159 ++++++++++++++++++++++++++++ src/components/Route/Routes.js | 4 + src/components/Workspace/Compile.js | 9 +- src/components/copy.svg | 53 ++++++++++ src/data/faq.js | 17 +++ 8 files changed, 292 insertions(+), 1 deletion(-) create mode 100644 src/components/Faq.js create mode 100644 src/components/copy.svg create mode 100644 src/data/faq.js 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 From bf82a396fc0651ca8289f2ebb07815fc6dd50482 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 21 Dec 2020 10:12:00 +0100 Subject: [PATCH 2/3] add en translations --- src/components/Blockly/msg/de.js | 12 ++++++++++++ src/components/Blockly/msg/en.js | 26 ++++++++++++++++++++------ src/components/Faq.js | 20 ++++++++++++++++++++ src/components/Navbar.js | 9 +++++---- src/data/faq.js | 4 ++++ 5 files changed, 61 insertions(+), 10 deletions(-) diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index 0a89c2d..c01e451 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -1070,4 +1070,16 @@ Das Kopieren der Programme unter MacOS funktioniert nicht über den Finder, es g - [muCommander](https://www.mucommander.com/) ` +Blockly.Msg.faq_q2_question = `Mit welcher senseBox ist die Programmierumgebung kompatibel?` +Blockly.Msg.faq_q2_answer = ` +Grundsätzlich kann die Programmierumgebung mit jeder senseBox mit senseBox MCU verwendet werden. +` + + +Blockly.Msg.faq_q3_question = `Ich habe einen Fehler gefunden oder etwas funktioniert nicht. Wo kann ich diesen melden?` +Blockly.Msg.faq_q3_answer = ` +Am besten legst du dazu ein Issue auf [Github](https://github.com/sensebox/React-Ardublockly/issues) an. Alternativ kannst du uns auch eine Email an info(at)sensebox.de senden +` + + export const De = Blockly.Msg; diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index e19a9a0..4c131dd 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -1022,14 +1022,28 @@ Blockly.Msg.compile_overlay_text = "Then copy it to your senseBox MCU"; */ -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 +Blockly.Msg.faq_q1_question = `How can I copy my program to the senseBox?` +Blockly.Msg.faq_q1_answer = `To copy programs to the senseBox, connect it to the computer with the Micro USB cable. Then double click on the red reset button on the senseBox MCU. The senseBox will now be recognized as a removable disk on your computer and the previously created programs can be copied via drag & drop. After each change of the program code the program must be recompiled and transferred again. +#### Activate learning mode of the MCU -#### 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) +#### Copying programs under macOS +Copying programs under MacOS does not work via the Finder, but there are still two different ways to copy the programs: +- [senseBox Copy Tool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip) - [muCommander](https://www.mucommander.com/) ` + +Blockly.Msg.faq_q2_question = `With which senseBox is the programming environment compatible?` +Blockly.Msg.faq_q2_answer = ` +Basically the programming environment can be used with any senseBox with senseBox MCU. +` + + +Blockly.Msg.faq_q3_question = `I found an error or something is not working. Where can I report it?` +Blockly.Msg.faq_q3_answer = ` +The best way to do this is to create an issue on [Github](https://github.com/sensebox/React-Ardublockly/issues). Alternatively you can send us an email to info(at)sensebox.de +` + + + export const En = Blockly.Msg; diff --git a/src/components/Faq.js b/src/components/Faq.js index 65d4003..4269c1e 100644 --- a/src/components/Faq.js +++ b/src/components/Faq.js @@ -64,6 +64,26 @@ class Faq extends Component { ) })} + { + this.props.button ? + + : + + } diff --git a/src/components/Navbar.js b/src/components/Navbar.js index e47e2f6..5676d01 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -71,8 +71,8 @@ class Navbar extends Component { var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname); var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname); var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) && - !this.props.tutorialIsLoading && this.props.tutorial && - this.props.tutorial.steps[this.props.activeStep].type === 'task'; + !this.props.tutorialIsLoading && this.props.tutorial && + this.props.tutorial.steps[this.props.activeStep].type === 'task'; return (
- : null} + : null} {isAssessment ? - : null} + : null} { if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { return ( diff --git a/src/data/faq.js b/src/data/faq.js index 35a358f..7427da2 100644 --- a/src/data/faq.js +++ b/src/data/faq.js @@ -12,6 +12,10 @@ export const FaqQuestions = () => { question: `${Blockly.Msg.faq_q2_question}`, answer: `${Blockly.Msg.faq_q2_answer}`, }, + { + question: `${Blockly.Msg.faq_q3_question}`, + answer: `${Blockly.Msg.faq_q3_answer}`, + }, ]) } \ No newline at end of file From 7940885388014dd2ccea29e47f4223adc1183e3f Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 21 Dec 2020 10:18:11 +0100 Subject: [PATCH 3/3] add help text --- src/components/Blockly/msg/de.js | 2 +- src/components/Blockly/msg/en.js | 2 +- src/components/Workspace/Compile.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index c01e451..11dc028 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -1053,7 +1053,7 @@ Blockly.Msg.assessmenttour_injectionDiv = "Erstelle hier deine Lösung. Du kanns 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" - +Blockly.Msg.compile_overlay_help = "Benötigst du mehr Hilfe? Dann schaue hier: " /** * FAQ diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index 4c131dd..3c08232 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -1016,7 +1016,7 @@ Blockly.Msg.assessmenttour_injectionDiv = "Create your solution here. You can us Blockly.Msg.compile_overlay_head = "Your program is now compiled and downloaded"; Blockly.Msg.compile_overlay_text = "Then copy it to your senseBox MCU"; - +Blockly.Msg.compile_overlay_help = "You need help? Have a look here: " /** * FAQ */ diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index fbce051..d0a57a6 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -139,7 +139,7 @@ class Compile extends Component {

{Blockly.Msg.compile_overlay_head}

{Blockly.Msg.compile_overlay_text}

-

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

+

{Blockly.Msg.compile_overlay_help}FAQ