Compare commits
4 Commits
master
...
dev/navbar
Author | SHA1 | Date | |
---|---|---|---|
|
cb04ec6e43 | ||
|
42a8d3db4f | ||
|
3959de86f4 | ||
|
360169c8c9 |
@ -29,6 +29,7 @@
|
|||||||
"qrcode.react": "^3.1.0",
|
"qrcode.react": "^3.1.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-cookie-consent": "^7.2.1",
|
"react-cookie-consent": "^7.2.1",
|
||||||
|
"react-country-flag": "^3.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-markdown": "^8.0.0",
|
"react-markdown": "^8.0.0",
|
||||||
"react-markdown-editor-lite": "^1.3.3",
|
"react-markdown-editor-lite": "^1.3.3",
|
||||||
|
@ -99,11 +99,14 @@ export const UI = {
|
|||||||
* Tablet Dialog
|
* Tablet Dialog
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
tabletDialog_connect: "senseBox Connect App öffnen",
|
||||||
tabletDialog_headline: "Tablet Modus ist aktiviert!",
|
tabletDialog_headline: "Tablet Modus ist aktiviert!",
|
||||||
tabletDialog_text:
|
tabletDialog_text:
|
||||||
"Der Tablet Modus wurde aktiviert. Du kannst nun Programmcodes über die senseBox Connect App auf deine senseBox kopieren. Der Tablet Modus kann in den Einstellungen deaktiviert werden",
|
"Der Tablet Modus wurde aktiviert. Du kannst nun Programmcodes über die senseBox Connect App auf deine senseBox kopieren. Der Tablet Modus kann in den Einstellungen deaktiviert werden",
|
||||||
tabletDialog_more:
|
tabletDialog_more:
|
||||||
"Weitere Informationen und den Link zum Download der App findest du unter: ",
|
"Weitere Informationen und den Link zum Download der App findest du unter: ",
|
||||||
|
compiledialog_process: "Dein Code wird compiliert!",
|
||||||
|
compiledialog_instructions: "Übertrage ihn anschließend mithlfe der senseBoxConnect-App..",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset Dialog
|
* Reset Dialog
|
||||||
@ -132,7 +135,7 @@ export const UI = {
|
|||||||
* Compile Dialog
|
* Compile Dialog
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
compiledialog_success: "Dein Programm wurde erfolgreich kompiliert.",
|
||||||
compiledialog_headline: "Fehler",
|
compiledialog_headline: "Fehler",
|
||||||
compiledialog_text:
|
compiledialog_text:
|
||||||
"Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
|
"Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
|
||||||
|
@ -13,8 +13,8 @@ export const IO = {
|
|||||||
ARD_DIGITALREAD_TIP: "Read digital value on a pin: HIGH or LOW",
|
ARD_DIGITALREAD_TIP: "Read digital value on a pin: HIGH or LOW",
|
||||||
ARD_DIGITALWRITE: "set digitial pin#",
|
ARD_DIGITALWRITE: "set digitial pin#",
|
||||||
ARD_DIGITALWRITE_TIP: "Write digital value HIGH or LOW to a specific Port",
|
ARD_DIGITALWRITE_TIP: "Write digital value HIGH or LOW to a specific Port",
|
||||||
ARD_FUN_RUN_LOOP: "Arduino loop forever:",
|
ARD_FUN_RUN_LOOP: "Loop()",
|
||||||
ARD_FUN_RUN_SETUP: "Arduino run first:",
|
ARD_FUN_RUN_SETUP: "Setup()",
|
||||||
ARD_FUN_RUN_TIP: "Defines the Arduino setup() and loop() functions.",
|
ARD_FUN_RUN_TIP: "Defines the Arduino setup() and loop() functions.",
|
||||||
ARD_HIGH: "HIGH",
|
ARD_HIGH: "HIGH",
|
||||||
ARD_HIGHLOW_TIP: "Set a pin state logic High or Low.",
|
ARD_HIGHLOW_TIP: "Set a pin state logic High or Low.",
|
||||||
|
@ -101,6 +101,7 @@ export const UI = {
|
|||||||
"Tablet mode has been activated. You can now copy program codes to your senseBox via the senseBox Connect app. Tablet mode can be deactivated in the settings",
|
"Tablet mode has been activated. You can now copy program codes to your senseBox via the senseBox Connect app. Tablet mode can be deactivated in the settings",
|
||||||
tabletDialog_more:
|
tabletDialog_more:
|
||||||
"For more information and the link to download the app, please visit: ",
|
"For more information and the link to download the app, please visit: ",
|
||||||
|
tabletDialog_connect: "Open senseBox Connect App",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset Dialog
|
* Reset Dialog
|
||||||
@ -128,10 +129,12 @@ export const UI = {
|
|||||||
* Compile Dialog
|
* Compile Dialog
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
compiledialog_success: "Your code has been compiled successfully.",
|
||||||
compiledialog_headline: "Error",
|
compiledialog_headline: "Error",
|
||||||
compiledialog_text:
|
compiledialog_text:
|
||||||
"While compiling an error occured. Please check your blocks and try again",
|
"While compiling an error occured. Please check your blocks and try again",
|
||||||
|
compiledialog_process: "Your code is being compiled!",
|
||||||
|
compiledialog_instructions: "After that, transfer it using the senseBoxConnect app.",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Buttons
|
* Buttons
|
||||||
|
@ -232,8 +232,8 @@ class Compile extends Component {
|
|||||||
>
|
>
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
{/* <img src={Copy} width="400" alt="copyimage"></img> */}
|
{/* <img src={Copy} width="400" alt="copyimage"></img> */}
|
||||||
<h2>Dein Code wird kompiliert!</h2>
|
<h2>{Blockly.Msg.compiledialog_process}</h2>
|
||||||
<p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
|
<p>{Blockly.Msg.compiledialog_instructions}</p>
|
||||||
<p>
|
<p>
|
||||||
{Blockly.Msg.compile_overlay_help}
|
{Blockly.Msg.compile_overlay_help}
|
||||||
<a href="/faq" target="_blank">
|
<a href="/faq" target="_blank">
|
||||||
@ -291,7 +291,7 @@ class Compile extends Component {
|
|||||||
button={Blockly.Msg.button_close}
|
button={Blockly.Msg.button_close}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<p>Dein Code wurde erfolgreich kompiliert</p>
|
<p>{Blockly.Msg.compiledialog_success}</p>
|
||||||
<a href={this.state.link}>
|
<a href={this.state.link}>
|
||||||
<Button
|
<Button
|
||||||
style={{ color: "white" }}
|
style={{ color: "white" }}
|
||||||
@ -303,7 +303,7 @@ class Compile extends Component {
|
|||||||
icon={faClipboardCheck}
|
icon={faClipboardCheck}
|
||||||
style={{ marginRight: "5px" }}
|
style={{ marginRight: "5px" }}
|
||||||
/>{" "}
|
/>{" "}
|
||||||
Starte Übertragung
|
{Blockly.Msg.tabletDialog_connect}
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,6 +41,7 @@ import {
|
|||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import * as Blockly from "blockly";
|
import * as Blockly from "blockly";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
|
import NavbarSettings from "./NavbarSettings";
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
drawerWidth: {
|
drawerWidth: {
|
||||||
@ -127,6 +128,7 @@ class Navbar extends Component {
|
|||||||
<Link to={"/"} style={{ marginLeft: "10px" }}>
|
<Link to={"/"} style={{ marginLeft: "10px" }}>
|
||||||
<img src={senseboxLogo} alt="senseBox-Logo" width="30" />
|
<img src={senseboxLogo} alt="senseBox-Logo" width="30" />
|
||||||
</Link>
|
</Link>
|
||||||
|
<NavbarSettings />
|
||||||
{isTutorial ? (
|
{isTutorial ? (
|
||||||
<Link
|
<Link
|
||||||
to={"/tutorial"}
|
to={"/tutorial"}
|
||||||
@ -149,7 +151,7 @@ class Navbar extends Component {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.openTour();
|
this.openTour();
|
||||||
}}
|
}}
|
||||||
style={{ margin: "0 30px 0 auto" }}
|
style={{ margin: "0 30px 0 0" }}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faQuestionCircle} />
|
<FontAwesomeIcon icon={faQuestionCircle} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -163,7 +165,7 @@ class Navbar extends Component {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.openTour();
|
this.openTour();
|
||||||
}}
|
}}
|
||||||
style={{ margin: "0 30px 0 auto" }}
|
style={{ margin: "0 30px 0 0" }}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faQuestionCircle} />
|
<FontAwesomeIcon icon={faQuestionCircle} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
88
src/components/NavbarSettings.js
Normal file
88
src/components/NavbarSettings.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { setLanguage } from '../actions/generalActions';
|
||||||
|
import MenuItem from '@material-ui/core/MenuItem';
|
||||||
|
import Select from '@material-ui/core/Select';
|
||||||
|
import { setBoard } from '../actions/boardAction';
|
||||||
|
import ReactCountryFlag from "react-country-flag";
|
||||||
|
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
const theme = createTheme({
|
||||||
|
overrides: {
|
||||||
|
MuiSelect: {
|
||||||
|
select: {
|
||||||
|
'&:focus': {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
class NavbarSettings extends Component {
|
||||||
|
componentDidMount() {
|
||||||
|
// Ensure that Blockly.setLocale is adopted in the component.
|
||||||
|
// Otherwise, the text will not be displayed until the next update of the component.
|
||||||
|
this.forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange = (event) => {
|
||||||
|
this.props.setLanguage(event.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ margin: "0 0 0 auto", display: "flex" }}>
|
||||||
|
<div style={{ margin: "0 30px 0 auto", display: "flex" }}>
|
||||||
|
<MuiThemeProvider theme={theme}>
|
||||||
|
<Select
|
||||||
|
value={this.props.selectedBoard}
|
||||||
|
onChange={(e) => this.props.setBoard(e.target.value)}
|
||||||
|
disableUnderline={true}
|
||||||
|
style={{ backgroundColor: "transparent !important" }}
|
||||||
|
// IconComponent={() => <div />}
|
||||||
|
>
|
||||||
|
<MenuItem value="mcu">senseBox MCU</MenuItem>
|
||||||
|
<MenuItem value="mini">senseBox MCU mini</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</MuiThemeProvider>
|
||||||
|
</div>
|
||||||
|
<div style={{ margin: "0 0 0 auto", display: "flex" }}>
|
||||||
|
<MuiThemeProvider theme={theme}>
|
||||||
|
<Select
|
||||||
|
value={this.props.language}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
disableUnderline={true}
|
||||||
|
IconComponent={() => null}
|
||||||
|
>
|
||||||
|
<MenuItem value={'en_US'} >
|
||||||
|
<ReactCountryFlag
|
||||||
|
countryCode="US"
|
||||||
|
svg
|
||||||
|
cdnSuffix="svg"
|
||||||
|
title="US"
|
||||||
|
/>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value={'de_DE'}>
|
||||||
|
<ReactCountryFlag
|
||||||
|
countryCode="DE"
|
||||||
|
svg
|
||||||
|
cdnSuffix="svg"
|
||||||
|
title="DE"
|
||||||
|
/>
|
||||||
|
</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</MuiThemeProvider>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
language: state.general.language,
|
||||||
|
selectedBoard: state.board.board
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, { setLanguage, setBoard })(NavbarSettings);
|
@ -232,8 +232,8 @@ class Compile extends Component {
|
|||||||
>
|
>
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
{/* <img src={Copy} width="400" alt="copyimage"></img> */}
|
{/* <img src={Copy} width="400" alt="copyimage"></img> */}
|
||||||
<h2>Dein Code wird kompiliert!</h2>
|
<h2>{Blockly.Msg.compiledialog_process}</h2>
|
||||||
<p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
|
<p>{Blockly.Msg.compiledialog_instructions}</p>
|
||||||
<p>
|
<p>
|
||||||
{Blockly.Msg.compile_overlay_help}
|
{Blockly.Msg.compile_overlay_help}
|
||||||
<a href="/faq" target="_blank">
|
<a href="/faq" target="_blank">
|
||||||
@ -291,7 +291,7 @@ class Compile extends Component {
|
|||||||
button={Blockly.Msg.button_close}
|
button={Blockly.Msg.button_close}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<p>Dein Code wurde erfolgreich kompiliert</p>
|
<p>{Blockly.Msg.compiledialog_success}</p>
|
||||||
<a href={this.state.link}>
|
<a href={this.state.link}>
|
||||||
<Button
|
<Button
|
||||||
style={{ color: "white" }}
|
style={{ color: "white" }}
|
||||||
@ -303,7 +303,7 @@ class Compile extends Component {
|
|||||||
icon={faClipboardCheck}
|
icon={faClipboardCheck}
|
||||||
style={{ marginRight: "5px" }}
|
style={{ marginRight: "5px" }}
|
||||||
/>{" "}
|
/>{" "}
|
||||||
Starte Übertragung
|
{Blockly.Msg.tabletDialog_connect}
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user