Merge pull request #51 from sensebox/add-faq

Add faq
2020-12-21 10:24:29 +01:00 · 2020-12-21 10:24:29 +01:00 · 59fa90d43f
commit 59fa90d43f
parent d91d22cdee 7940885388
9 changed files with 347 additions and 5 deletions
--- 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;
+}
--- a/src/components/Blockly/msg/de.js
+++ b/src/components/Blockly/msg/de.js
@ -1047,4 +1047,39 @@ 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"
+Blockly.Msg.compile_overlay_help = "Benötigst du mehr Hilfe? Dann schaue hier: "
+
+/**
+ * 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
+<iframe width="560" height="315" src="https://www.youtube.com/embed/jzlOJ7Zuqqw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+#### 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/)
+`
+
+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;
--- a/src/components/Blockly/msg/en.js
+++ b/src/components/Blockly/msg/en.js
@ -1010,4 +1010,40 @@ 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";
+Blockly.Msg.compile_overlay_help = "You need help? Have a look here: "
+/**
+ * FAQ
+ */
+
+
+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
+<iframe width="560" height="315" src="https://www.youtube.com/embed/jzlOJ7Zuqqw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+#### 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;
--- a/src/components/Faq.js
+++ b/src/components/Faq.js
@ -0,0 +1,179 @@
+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 (
+            <div>
+                <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'FAQ' }]} />
+                <Container fixed>
+                    <div style={{ margin: '0px 24px 0px 24px' }}>
+                        <h1>FAQ</h1>
+                        {FaqQuestions().map((object, i) => {
+                            return (
+                                <ExpansionPanel expanded={panel === `panel${i}`} onChange={() => this.handleChange(`panel${i}`)}>
+                                    <ExpansionPanelSummary
+                                        expandIcon={
+                                            <FontAwesomeIcon icon={faChevronDown} />
+                                        }
+                                    >
+                                        <Typography variant="h6">{object.question}</Typography>
+                                    </ExpansionPanelSummary>
+                                    <ExpansionPanelDetails>
+                                        <Typography>
+                                            <ReactMarkdown className="news" allowDangerousHtml="true" children={object.answer}>
+                                            </ReactMarkdown>
+                                        </Typography>
+                                    </ExpansionPanelDetails>
+                                </ExpansionPanel>
+                            )
+                        })}
+                        {
+                            this.props.button ?
+                                <Button
+                                    style={{ marginTop: '20px' }}
+                                    variant="contained"
+                                    color="primary"
+                                    onClick={() => { this.props.history.push(this.props.button.link) }}
+                                >
+                                    {this.props.button.title}
+                                </Button>
+                                :
+                                <Button
+                                    style={{ marginTop: '20px' }}
+                                    variant="contained"
+                                    color="primary"
+                                    onClick={() => { this.props.history.push('/') }}
+                                >
+                                    {Blockly.Msg.button_back}
+                                </Button>
+                        }
+                    </div>
+                </Container>
+            </div >
+        );
+    };
+}
+
+export default withRouter(Faq);
+                /*
+<ExpansionPanel expanded={panel === 'panel1'} onChange={() => this.handleChange('panel1')}>
+<ExpansionPanelSummary
+expandIcon={
+<FontAwesomeIcon icon={faChevronDown} />
+}
+>
+<Typography variant="h6">{Blockly.Msg.faq_q1_question}</Typography>
+</ExpansionPanelSummary>
+<ExpansionPanelDetails>
+<Typography>
+<ReactMarkdown className="news" allowDangerousHtml="true" children={Blockly.Msg.faq_q1_answer}>
+</ReactMarkdown>
+</Typography>
+</ExpansionPanelDetails>
+</ExpansionPanel>
+<ExpansionPanel expanded={panel === 'panel2'} onChange={() => this.handleChange('panel2')}>
+<ExpansionPanelSummary
+expandIcon={
+<FontAwesomeIcon icon={faChevronDown} />
+}
+>
+<Typography>Frage 2</Typography>
+</ExpansionPanelSummary>
+<ExpansionPanelDetails>
+<Typography>
+Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+diam eros in elit. Pellentesque convallis laoreet laoreet.
+</Typography>
+</ExpansionPanelDetails>
+</ExpansionPanel>
+<ExpansionPanel expanded={panel === 'panel3'} onChange={() => this.handleChange('panel3')}>
+<ExpansionPanelSummary
+expandIcon={
+<FontAwesomeIcon icon={faChevronDown} />
+}
+>
+<Typography>Frage 3</Typography>
+</ExpansionPanelSummary>
+<ExpansionPanelDetails>
+<Typography>
+Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
+vitae egestas augue. Duis vel est augue.
+</Typography>
+</ExpansionPanelDetails>
+</ExpansionPanel>
+<ExpansionPanel expanded={panel === 'panel4'} onChange={() => this.handleChange('panel4')}>
+<ExpansionPanelSummary
+expandIcon={
+<FontAwesomeIcon icon={faChevronDown} />
+}
+>
+<Typography>Frage 4</Typography>
+</ExpansionPanelSummary>
+<ExpansionPanelDetails>
+<Typography>
+Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
+vitae egestas augue. Duis vel est augue.
+</Typography>
+</ExpansionPanelDetails>
+</ExpansionPanel>
+*/
+
+                    // {{
+                    //     this.props.button ?
+                    //         <Button
+                    //             style={{ marginTop: '20px' }}
+                    //             variant="contained"
+                    //             color="primary"
+                    //             onClick={() => { this.props.history.push(this.props.button.link) }}
+                    //         >
+                    //             {this.props.button.title}
+                    //         </Button>
+                    //         :
+                    //         <Button
+                    //             style={{ marginTop: '20px' }}
+                    //             variant="contained"
+                    //             color="primary"
+                    //             onClick={() => { this.props.history.push('/') }}
+                    //         >
+                    //             {Blockly.Msg.button_back}
+                    //         </Button>
+                    // }}
+
+
--- 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 (
      <div>
        <AppBar
@ -114,7 +114,7 @@ class Navbar extends Component {
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            : null}
+              : null}
            {isAssessment ?
              <Tooltip title='Hilfe starten' arrow>
                <IconButton
@ -126,7 +126,7 @@ class Navbar extends Component {
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            : null}
+              : null}
            <Tour
              steps={isHome ? home() : assessment()}
              isOpen={this.state.isTourOpen}
@ -176,6 +176,7 @@ class Navbar extends Component {
            { text: Blockly.Msg.navbar_account, icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
            { text: Blockly.Msg.navbar_mybadges, icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
            { text: Blockly.Msg.navbar_logout, icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
+            { text: 'FAQ', icon: faQuestionCircle, link: "/faq" },
            { text: Blockly.Msg.navbar_settings, icon: faCog, link: "/settings" }].map((item, index) => {
              if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
                return (
--- 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 {
          <PublicRoute path="/news" exact>
            <News />
          </PublicRoute>
+          <PublicRoute path="/faq" exact>
+            <Faq />
+          </PublicRoute>
          {/* Not Found */}
          <PublicRoute>
            <NotFound />
--- 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 {
          </Button>
        }
        <Backdrop className={this.props.classes.backdrop} open={this.state.progress}>
-          <CircularProgress color="inherit" />
+          <div className='overlay'>
+            <img src={Copy} width="400"></img>
+            <h2>{Blockly.Msg.compile_overlay_head}</h2>
+            <p>{Blockly.Msg.compile_overlay_text}</p>
+            <p>{Blockly.Msg.compile_overlay_help}<a href="/faq" target="_blank">FAQ</a></p>
+            <CircularProgress color="inherit" />
+          </div>
        </Backdrop>
        <Dialog
          open={this.state.open}
--- a/src/components/copy.svg
+++ b/src/components/copy.svg
--- a/src/data/faq.js
+++ b/src/data/faq.js
@ -0,0 +1,21 @@
+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}`,
+      },
+      {
+        question: `${Blockly.Msg.faq_q3_question}`,
+        answer: `${Blockly.Msg.faq_q3_answer}`,
+      },
+
+    ])
+}