add faq page

src/App.css

@@ -41,3 +41,9 @@
   blockquote p {
     display: inline;
   }
+
+.overlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

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
+<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/)
+`
+
 export const De = Blockly.Msg;

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
+<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/)
+`
 export const En = Blockly.Msg;

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 (
+            <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>
+                            )
+                        })}
+                    </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>
+                    // }}
+
+

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 />

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>Benötigst du mehr Hilfe? Dann schaue hier: <a href="/faq" target="_blank">test</a></p>
+            <CircularProgress color="inherit" />
+          </div>
         </Backdrop>
         <Dialog
           open={this.state.open}

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}`,
+      },
+
+    ])
+}