Compare commits

...

4 Commits

Author SHA1 Message Date
fbruc03
cb04ec6e43 remove log 2022-12-05 13:59:19 +01:00
fbruc03
42a8d3db4f remove background on focus 2022-11-25 11:53:04 +01:00
fbruc03
3959de86f4 fix translations in complie screen (tablet mode) 2022-11-17 18:12:32 +01:00
fbruc03
360169c8c9 add language and mcu settings to navbar 2022-11-17 17:42:40 +01:00
8 changed files with 121 additions and 24 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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.",

View File

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

View File

@ -68,7 +68,7 @@ class Compile extends Component {
}; };
} }
componentDidMount() {} componentDidMount() { }
componentDidUpdate(props) { componentDidUpdate(props) {
if (props.name !== this.props.name) { if (props.name !== this.props.name) {
@ -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>

View File

@ -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>
@ -214,11 +216,11 @@ class Navbar extends Component {
</div> </div>
<List> <List>
{[ {[
{ {
text: Blockly.Msg.navbar_blockly, text: Blockly.Msg.navbar_blockly,
icon: faPuzzlePiece, icon: faPuzzlePiece,
link: "/", link: "/",
}, },
{ {
text: Blockly.Msg.navbar_tutorials, text: Blockly.Msg.navbar_tutorials,
icon: faChalkboardTeacher, icon: faChalkboardTeacher,
@ -329,9 +331,9 @@ class Navbar extends Component {
onClick={ onClick={
item.function item.function
? () => { ? () => {
item.function(); item.function();
this.toggleDrawer(); this.toggleDrawer();
} }
: this.toggleDrawer : this.toggleDrawer
} }
> >

View 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);

View File

@ -68,7 +68,7 @@ class Compile extends Component {
}; };
} }
componentDidMount() {} componentDidMount() { }
componentDidUpdate(props) { componentDidUpdate(props) {
if (props.name !== this.props.name) { if (props.name !== this.props.name) {
@ -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>