diff --git a/package.json b/package.json index 418a0a5..3e903af 100644 --- a/package.json +++ b/package.json @@ -3,23 +3,27 @@ "version": "1.0.0", "private": true, "dependencies": { - "@blockly/block-plus-minus": "^3.0.5", - "@blockly/field-grid-dropdown": "^1.0.31", - "@blockly/field-slider": "^3.0.5", - "@blockly/plugin-scroll-options": "^2.0.5", - "@blockly/plugin-typed-variable-modal": "^4.0.5", - "@blockly/workspace-backpack": "^2.0.12", - "@blockly/zoom-to-fit": "^2.0.14", - "@fortawesome/fontawesome-svg-core": "^1.2.36", - "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@fortawesome/react-fontawesome": "^0.1.19", - "@material-ui/core": "^4.12.4", + "@blockly/block-plus-minus": "^4.0.4", + "@blockly/field-grid-dropdown": "^2.0.4", + "@blockly/field-slider": "4.0.4", + "@blockly/plugin-scroll-options": "^3.0.5", + "@blockly/plugin-typed-variable-modal": "^5.0.6", + "@blockly/workspace-backpack": "^3.0.4", + "@blockly/zoom-to-fit": "^3.0.4", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@monaco-editor/react": "^4.3.1", + "@mui/lab": "^5.0.0-alpha.110", + "@mui/material": "^5.10.16", + "@mui/styles": "^5.10.16", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^7.2.1", "axios": "^0.22.0", - "blockly": "^8.0.3", + "blockly": "^9.2.0", "file-saver": "^2.0.5", "markdown-it": "^12.3.2", "mnemonic-id": "^3.2.7", @@ -35,12 +39,13 @@ "react-rating-stars-component": "^2.2.0", "react-redux": "^7.2.9", "react-router-dom": "^5.3.3", - "react-scripts": "^5.0.0", + "react-scripts": "^5.0.1", "react-share": "^4.4.0", "react-spinners": "^0.13.3", "reactour": "^1.18.7", "redux": "^4.2.0", "redux-thunk": "^2.4.1", + "rehype-raw": "^6.1.1", "remark-gemoji": "^7.0.1", "remark-gfm": "^3.0.1", "styled-components": "^4.4.1", diff --git a/src/App.css b/src/App.css index 8457170..afc53a1 100644 --- a/src/App.css +++ b/src/App.css @@ -53,7 +53,7 @@ td { padding-top: 12px; padding-bottom: 12px; text-align: left; - background-color: #4eaf47; + border-color: #4eaf47; color: white; } @@ -62,3 +62,13 @@ td { flex-direction: column; align-items: center; } + +:root { + --url: url('./data/mcu_opacity.png'); +} + +.blocklySvg { + background-image: var(--url); + background-position: center; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 29289e5..fd19339 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ import { loadUser } from "./actions/authActions"; import "./App.css"; -import { ThemeProvider, createTheme } from "@material-ui/core/styles"; +import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles"; import Content from "./components/Content"; @@ -36,13 +36,15 @@ class App extends Component { render() { const customHistory = createBrowserHistory(); return ( - - - - - - - + + + + + + + + + ); } } diff --git a/src/actions/boardAction.js b/src/actions/boardAction.js index f78cb82..9d0d002 100644 --- a/src/actions/boardAction.js +++ b/src/actions/boardAction.js @@ -1,10 +1,15 @@ import { - BOARD, - } from "./types"; + BOARD, +} from "./types"; +import mini_opacity from "../data/mini_opacity.png" +import mcu_opacity from "../data/mcu_opacity.png" export const setBoard = (board) => (dispatch) => { - dispatch({ - type: BOARD, - payload: board, - }); - }; \ No newline at end of file + window.sessionStorage.setItem("board", board); + const root = document.querySelector(':root'); + root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`); + dispatch({ + type: BOARD, + payload: board, + }); +}; \ No newline at end of file diff --git a/src/actions/sensorwikiActions.js b/src/actions/sensorwikiActions.js new file mode 100644 index 0000000..9f959be --- /dev/null +++ b/src/actions/sensorwikiActions.js @@ -0,0 +1,18 @@ +import axios from 'axios' + +const fetchSensorWikiSuccess = sensors => ({ + type: 'FETCH_SENSORWIKI_SUCCESS', + payload: { sensors } +}) + +export const fetchSensors = () => { + return async dispatch => { + try { + let sensors = await axios.get('https://api.sensors.wiki/sensors/all') + dispatch(fetchSensorWikiSuccess(sensors.data)) + } + catch(e){ + console.log(e) + } + } +} \ No newline at end of file diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index f16da0a..b066687 100644 --- a/src/actions/workspaceActions.js +++ b/src/actions/workspaceActions.js @@ -16,13 +16,19 @@ export const onChangeCode = () => (dispatch, getState) => { code.arduino = Blockly.Arduino.workspaceToCode(workspace); var xmlDom = Blockly.Xml.workspaceToDom(workspace); code.xml = Blockly.Xml.domToPrettyText(xmlDom); - var selectedBlock = Blockly.selected + var selectedBlock = Blockly.getSelected if (selectedBlock !== null) { code.helpurl = selectedBlock.helpUrl code.tooltip = selectedBlock.tooltip + if (selectedBlock.data) { + code.data = selectedBlock.data + } else { + code.data = null + } } else if (selectedBlock === null) { code.tooltip = Blockly.Msg.tooltip_hint code.helpurl = '' + code.data = null } diff --git a/src/components/Alert.js b/src/components/Alert.js index 01bac66..2d24b17 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,9 +1,9 @@ import React, { Component } from "react"; -import { withStyles } from "@material-ui/core/styles"; -import { alpha } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; +import { alpha } from "@mui/material/styles"; -import Typography from "@material-ui/core/Typography"; +import Typography from "@mui/material/Typography"; const styles = (theme) => ({ alert: { diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx index 20c0795..ec97078 100644 --- a/src/components/Blockly/BlocklyComponent.jsx +++ b/src/components/Blockly/BlocklyComponent.jsx @@ -27,7 +27,7 @@ import Blockly from "blockly/core"; import "blockly/blocks"; import Toolbox from "./toolbox/Toolbox"; -import { Card } from "@material-ui/core"; +import { Card } from "@mui/material"; import { ScrollOptions, ScrollBlockDragger, diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index bbab82d..11b26e2 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -45,6 +45,7 @@ class BlocklyWindow extends Component { const workspace = Blockly.getMainWorkspace(); var xml = this.props.initialXml; if (props.selectedBoard !== this.props.selectedBoard) { + xml = localStorage.getItem("autoSaveXML"); // change board if(!xml) xml = initialXml; var xmlDom = Blockly.Xml.textToDom(xml); @@ -62,6 +63,7 @@ class BlocklyWindow extends Component { } if (props.language !== this.props.language) { // change language + xml = localStorage.getItem("autoSaveXML"); if (!xml) xml = initialXml; xmlDom = Blockly.Xml.textToDom(xml); Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace); diff --git a/src/components/Blockly/blocks/sensebox-sensors.js b/src/components/Blockly/blocks/sensebox-sensors.js index a301d53..3236275 100644 --- a/src/components/Blockly/blocks/sensebox-sensors.js +++ b/src/components/Blockly/blocks/sensebox-sensors.js @@ -26,6 +26,7 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl); + this.data = {name: "hdc1080", connection: "I2C"}; }, }; @@ -51,6 +52,7 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl); + this.data = {name: "veml6070"}; }, }; @@ -91,6 +93,7 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl); + this.data = {name: "bmx055"}; }, }; @@ -122,6 +125,7 @@ Blockly.Blocks["sensebox_sensor_sds011"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl); + this.data = {name: "sds011"}; }, }; @@ -155,6 +159,7 @@ Blockly.Blocks["sensebox_sensor_pressure"] = { this.setOutput(true, Types.DECIMAL.typeName); this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl); + this.data = {name: "bmp280"}; this.getField("NAME").setValidator( function (val) { this.updateShape_(val === "Altitude"); @@ -201,6 +206,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_bme_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl); + this.data = {name: "bme680"}; }, }; @@ -245,6 +251,7 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = { this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl); + this.data = {name: "hc-sr04"}; }, /** * Parse XML to restore the number of pins available. @@ -382,6 +389,7 @@ Blockly.Blocks["sensebox_scd30"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_scd_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl); + this.data = {name: "scd30"}; }, onchange: function (e) { var dropdown = this.getFieldValue("dropdown"); @@ -448,6 +456,7 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = { this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl); + this.data = {name: "smt50"}; }, }; @@ -470,6 +479,7 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = { .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port"); this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip); + this.data = {name: "ds18b20"}; }, }; @@ -542,6 +552,7 @@ Blockly.Blocks["sensebox_sensor_dps310"] = { this.setOutput(true, Types.DECIMAL.typeName); this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl); + this.data = {name: "dps310"}; this.getField("NAME").setValidator( function (val) { this.updateShape_(val === "Altitude"); diff --git a/src/components/Blockly/blocks/variables.js b/src/components/Blockly/blocks/variables.js index 8e19984..ff9009c 100644 --- a/src/components/Blockly/blocks/variables.js +++ b/src/components/Blockly/blocks/variables.js @@ -9,10 +9,10 @@ Blockly.Blocks["variables_set_dynamic"] = { this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.appendValueInput("VALUE") - .appendField("set", "set") + .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set) .appendField("", "type") .appendField(new Blockly.FieldVariable("VAR"), "VAR") - .appendField("to"); + .appendField(Blockly.Msg.variables_to); }, onchange: function (e) { let variableID = this.getFieldValue("VAR"); diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js index d6d0bd6..cc5833b 100644 --- a/src/components/Blockly/msg/de/ui.js +++ b/src/components/Blockly/msg/de/ui.js @@ -23,10 +23,12 @@ export const UI = { variable_DECIMAL: "Kommazahl (float)", variables_TEXT: "Text (string)", variables_ARRAY: "Array (array)", - variables_CHARACTER: "char (char)", + variables_CHARACTER: "Buchstabe (char)", variables_BOOLEAN: "Boolean (boolean)", variables_NULL: "void (void)", variables_UNDEF: "undefined", + variables_set: "Schreibe", + variables_to: "", /** * Tooltips @@ -154,6 +156,7 @@ export const UI = { button_next: "nächster Schritt", button_tutorial_overview: "Tutorial Übersicht", button_login: "Anmelden", + button_createVariable: "Typisierte Variable erstellen", /** * @@ -317,4 +320,14 @@ export const UI = { "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)", deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ", deviceselection_footnote_02: "oder die", + + /** + * Sensor Markdown Information + */ + sensorinfo_info: "Informationen zum Sensor", + sensorinfo_description: "Beschreibung", + sensorinfo_measurable_phenos: "Messbare Phänomene", + sensorinfo_manufacturer: "Hersteller", + sensorinfo_lifetime: "Lebensdauer", + sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor " }; diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js index 0f1052e..7319a4a 100644 --- a/src/components/Blockly/msg/en/ui.js +++ b/src/components/Blockly/msg/en/ui.js @@ -19,14 +19,16 @@ export const UI = { toolbox_label_internalRTC: "Internal RTC", variable_NUMBER: "Number (int)", variable_SHORT_NUMBER: "char", - variable_LONG: " Zahl (long)", + variable_LONG: "Big number (long)", variable_DECIMAL: "Decimal (float)", variables_TEXT: "Text (string)", variables_ARRAY: "Array (array)", - variables_CHARACTER: "char (char)", + variables_CHARACTER: "Character (char)", variables_BOOLEAN: "Boolean (boolean)", variables_NULL: "void (void)", variables_UNDEF: "undefined", + variables_set: "set", + variables_to: "to", /** * Tooltips @@ -149,6 +151,7 @@ export const UI = { button_next: "Next step", button_tutorial_overview: "Tutorial overview", button_login: "Login", + button_createVariable: "Create Typed Variable", /** * @@ -305,12 +308,23 @@ export const UI = { "Your code will now be compiled and then downloaded to your computer", /** - * Device Selction - * */ + * Device Selection + * */ + deviceselection_head: "Which board are you using?", deviceselection_keep_selection: "Save my choice (You can change the board later in the settings)", deviceselection_footnote: "Here you can access the old blockly Version for the", deviceselection_footnote_02: "or the", + + /** + * Sensor Markdown Information + * */ + sensorinfo_info: "Informationen regarding the Sensor", + sensorinfo_description: "Description", + sensorinfo_measurable_phenos: "Measurable Phenomena", + sensorinfo_manufacturer: "Manufacturer", + sensorinfo_lifetime: "Lifetime", + sensorinfo_explanation: "This information was fetched from [sensors.wiki](https://sensors.wiki). For more information visit the section on this sensor ", }; diff --git a/src/components/Blockly/toolbox/Toolbox.js b/src/components/Blockly/toolbox/Toolbox.js index f1ae858..bf6e6eb 100644 --- a/src/components/Blockly/toolbox/Toolbox.js +++ b/src/components/Blockly/toolbox/Toolbox.js @@ -16,7 +16,6 @@ class Toolbox extends React.Component { this.props.workspace, "callbackName", [ - [`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"], [`${Blockly.Msg.variable_NUMBER}`, "int"], [`${Blockly.Msg.variable_LONG}`, "long"], [`${Blockly.Msg.variable_DECIMAL}`, "float"], @@ -33,7 +32,7 @@ class Toolbox extends React.Component { // Add your button and give it a callback name. const button = document.createElement("button"); - button.setAttribute("text", "Create Typed Variable"); + button.setAttribute("text", Blockly.Msg.button_createVariable); button.setAttribute("callbackKey", "callbackName"); xmlList.push(button); @@ -41,6 +40,7 @@ class Toolbox extends React.Component { // This gets all the variables that the user creates and adds them to the // flyout. const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace); + console.log(blockList); xmlList = xmlList.concat(blockList); return xmlList; } @@ -633,7 +633,6 @@ class Toolbox extends React.Component { colour={getColour().procedures} custom="PROCEDURE" > - 0 ? - + {this.props.content.splice(0, this.props.content.length-1).map((content, i) => ( diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index f361aa6..c8eb0f8 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -2,15 +2,16 @@ import React from "react"; import { useState, useRef } from "react"; import { default as MonacoEditor } from "@monaco-editor/react"; import { withRouter } from "react-router-dom"; -import { Button, Grid } from "@material-ui/core"; +import { Button, Grid } from "@mui/material"; import Blockly from "blockly/core"; -import Divider from "@material-ui/core/Divider"; +import Divider from "@mui/material/Divider"; import { saveAs } from "file-saver"; -import Drawer from "@material-ui/core/Drawer"; +import Drawer from "@mui/material/Drawer"; import Sidebar from "./Sidebar"; import Dialog from "../Dialog"; import SaveIcon from "./SaveIcon"; import store from "../../store"; +import DeviceSelection from "../DeviceSelection"; const CodeEditor = (props) => { //const [filehandle, setFileHandle] = useState(); @@ -192,6 +193,7 @@ void loop() { }} /> + diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 228e7bb..3897e7c 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg"; import { withRouter } from "react-router-dom"; -import { withStyles } from "@material-ui/core/styles"; -import Drawer from "@material-ui/core/Drawer"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import List from "@material-ui/core/List"; -import Typography from "@material-ui/core/Typography"; -import Divider from "@material-ui/core/Divider"; -import IconButton from "@material-ui/core/IconButton"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import LinearProgress from "@material-ui/core/LinearProgress"; +import withStyles from '@mui/styles/withStyles'; +import Drawer from "@mui/material/Drawer"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import LinearProgress from "@mui/material/LinearProgress"; import Tour from "reactour"; -import { Badge } from "@material-ui/core"; +import { Badge } from "@mui/material"; import { home, assessment } from "./Tour"; import { faBars, @@ -37,10 +37,20 @@ import { faLightbulb, faCode, faPuzzlePiece, + faUser, + faMicrochip, + faEarthEurope, + faEarthAmericas, + faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; +import MenuItem from '@mui/material/MenuItem' +import Menu from '@mui/material/Menu' +import { setLanguage } from "../actions/generalActions"; +import { setBoard } from "../actions/boardAction"; +import { Button } from "@mui/material"; const styles = (theme) => ({ drawerWidth: { @@ -60,9 +70,14 @@ const styles = (theme) => ({ class Navbar extends Component { constructor(props) { super(props); + this.langRef = React.createRef(); + this.mcuRef = React.createRef(); this.state = { open: false, isTourOpen: false, + anchorElLang: null, + anchorElBoard: null, + anchorElUser: null }; } @@ -80,7 +95,6 @@ class Navbar extends Component { render() { 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 && @@ -116,7 +130,7 @@ class Navbar extends Component { onClick={this.toggleDrawer} style={{ margin: "0 10px" }} className="MenuButton" - > + size="large"> @@ -127,55 +141,226 @@ class Navbar extends Component { senseBox-Logo - {isTutorial ? ( - + {isHome ? ( +
+
+ + { + this.setState({ anchorElBoard: null }); + }} + > + { + this.props.setBoard(event.currentTarget.getAttribute("value")); + this.setState({ anchorElBoard: null }); + }} + > + mcu + + { + this.props.setBoard(event.currentTarget.getAttribute("value")); + this.setState({ anchorElBoard: null }); + }} + > + mini + + +
+
+ { + this.props.language === "en_US" ? + ( + + ) : ( + + + ) + } + { + this.setState({ anchorElLang: null }); + }} + > + { + this.props.setLanguage(event.currentTarget.getAttribute("value")); + this.setState({ anchorElLang: null }); + }} + > + Deutsch + + { + this.props.setLanguage(event.currentTarget.getAttribute("value")); + this.setState({ anchorElLang: null }); + }} + > + English + + +
+
+ ) : (null)} + {isHome ? ( + + { + this.openTour(); + }} + size="large"> + + + + ) : null} + {isAssessment ? ( + + { + this.openTour(); + }} + size="large"> + + + + ) : null} + { + this.closeTour(); }} - > - - Tutorial - - - ) : null} - {isHome ? ( - - { - this.openTour(); - }} - style={{ margin: "0 30px 0 auto" }} - > - - - - ) : null} - {isAssessment ? ( - - { - this.openTour(); - }} - style={{ margin: "0 30px 0 auto" }} - > - - - - ) : null} - { - this.closeTour(); - }} - /> + /> + {this.props.user ? ( +
+ { this.setState({ anchorElUser: event.target }) }} + style={{ margin: "0 30px 0 0" }} + size="large" + > + + + { this.setState({ anchorElUser: null }); }} + > +
+

+ {this.props.user.name} +

+

+ {this.props.user.email} +

+
+
+ + + {Blockly.Msg.navbar_account} + + + + + {Blockly.Msg.navbar_settings} + + + { + this.props.logout() + }} + > + {Blockly.Msg.navbar_logout} + + +
+ ) + : + ( + + + + + ) + } + {[ - { - text: Blockly.Msg.navbar_blockly, - icon: faPuzzlePiece, - link: "/", - }, + { + text: Blockly.Msg.navbar_blockly, + icon: faPuzzlePiece, + link: "/", + }, { text: Blockly.Msg.navbar_tutorials, icon: faChalkboardTeacher, @@ -267,7 +452,7 @@ class Navbar extends Component { {item.text === "Code Editor" ? ( - + ) : ( @@ -329,9 +514,9 @@ class Navbar extends Component { onClick={ item.function ? () => { - item.function(); - this.toggleDrawer(); - } + item.function(); + this.toggleDrawer(); + } : this.toggleDrawer } > @@ -369,6 +554,10 @@ Navbar.propTypes = { user: PropTypes.object, tutorial: PropTypes.object, activeStep: PropTypes.number.isRequired, + setLanguage: PropTypes.func.isRequired, + language: PropTypes.string.isRequired, + setBoard: PropTypes.func.isRequired, + selectedBoard: PropTypes.string.isRequired }; const mapStateToProps = (state) => ({ @@ -378,8 +567,10 @@ const mapStateToProps = (state) => ({ user: state.auth.user, tutorial: state.tutorial.tutorials[0], activeStep: state.tutorial.activeStep, + language: state.general.language, + selectedBoard: state.board.board }); -export default connect(mapStateToProps, { logout })( +export default connect(mapStateToProps, { logout, setLanguage, setBoard })( withStyles(styles, { withTheme: true })(withRouter(Navbar)) ); diff --git a/src/components/News.js b/src/components/News.js index 8ece760..09e3785 100644 --- a/src/components/News.js +++ b/src/components/News.js @@ -4,11 +4,11 @@ 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 Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import * as Blockly from 'blockly' import ReactMarkdown from 'react-markdown'; -import Container from '@material-ui/core/Container'; +import Container from '@mui/material/Container'; const news = ` diff --git a/src/components/NotFound.js b/src/components/NotFound.js index 01b03f7..9cdbc21 100644 --- a/src/components/NotFound.js +++ b/src/components/NotFound.js @@ -4,8 +4,8 @@ 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 Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import * as Blockly from 'blockly' class NotFound extends Component { diff --git a/src/components/Privacy.js b/src/components/Privacy.js index 47b1d0b..e01d8d6 100644 --- a/src/components/Privacy.js +++ b/src/components/Privacy.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; -import Container from '@material-ui/core/Container'; +import Container from '@mui/material/Container'; class Privay extends Component { render() { return ( diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index df0253d..53148ed 100644 --- a/src/components/Project/Project.js +++ b/src/components/Project/Project.js @@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom'; import Home from '../Home'; import Breadcrumbs from '../Breadcrumbs'; -import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; class Project extends Component { diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index 38ed822..162dfda 100644 --- a/src/components/Project/ProjectHome.js +++ b/src/components/Project/ProjectHome.js @@ -11,13 +11,14 @@ import BlocklyWindow from "../Blockly/BlocklyWindow"; import Snackbar from "../Snackbar"; import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import { withStyles } from "@material-ui/core/styles"; -import Grid from "@material-ui/core/Grid"; -import Paper from "@material-ui/core/Paper"; -import Divider from "@material-ui/core/Divider"; -import Typography from "@material-ui/core/Typography"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; +import withStyles from '@mui/styles/withStyles'; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; +import Divider from "@mui/material/Divider"; +import Typography from "@mui/material/Typography"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import DeviceSelection from "../DeviceSelection"; const styles = (theme) => ({ link: { @@ -60,9 +61,8 @@ class ProjectHome extends Component { this.setState({ snackbar: true, key: Date.now(), - message: `Dein angefragtes ${ - type === "gallery" ? "Galerie-" : "" - }Projekt konnte nicht gefunden werden.`, + message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : "" + }Projekt konnte nicht gefunden werden.`, type: "error", }); } @@ -108,6 +108,7 @@ class ProjectHome extends Component { />

{data}

+ {this.props.progress ? ( @@ -127,9 +128,8 @@ class ProjectHome extends Component { }} >

{project.title}

@@ -140,7 +140,7 @@ class ProjectHome extends Component { svg blockDisabled initialXml={project.xml} - /> + /> {this.props.user && - this.props.user.email === project.creator ? ( + this.props.user.email === project.creator ? (
{ + setValue(newValue); + }; + + // get the description in the current language if no lang is give return english or the first one + function filterLanguage(options) { + var lang; + if (window.localStorage.getItem("locale")) { + lang = window.localStorage.getItem("locale").split("_")[0]; + } + else { + lang = "en"; + } + for (var i = 0; i < options.length; i++) { + if (options[i].languageCode === lang) { + return options[i].text; + } + } + return options[0].text; + } + var currentStore = store.getState(); + // ALL SENSOR DATA FROM WIKI + var sensorData = currentStore.sensorwiki; + // NAME OF SELECTED BLOCK + var sensorName = currentStore.workspace.code.data.name; + // SEARCH ALL DATA FOR SELECTED BLOCK NAME + var sensorInfo = sensorData.find(function (element) { + return element.slug === sensorName; + }); + if (sensorInfo) { + sensorInfo.markdown = "Coming soon..."; + + // GET DESCRIPTION OF SELECTED BLOCK + sensorInfo.details = `# ${sensorName.toUpperCase()} +${Blockly.Msg.sensorinfo_explanation} [${sensorName.toUpperCase()}](https://sensors.wiki/sensor/detail/${sensorName}) +## ${Blockly.Msg.sensorinfo_description} +${filterLanguage(sensorInfo.description.item)} +## ${Blockly.Msg.sensorinfo_measurable_phenos} +## ${Blockly.Msg.sensorinfo_manufacturer} +${sensorInfo.manufacturer} +## ${Blockly.Msg.sensorinfo_lifetime} +${sensorInfo.lifePeriod}` + } + + return ( + + + + + + + + + + {sensorInfo ? {sensorInfo.markdown} : "No data available"} + + + {sensorInfo ? {sensorInfo.details} : "No data available"} + + + + ); +} \ No newline at end of file diff --git a/src/components/Settings/DeviceSelector.js b/src/components/Settings/DeviceSelector.js index b506527..6e6fbac 100644 --- a/src/components/Settings/DeviceSelector.js +++ b/src/components/Settings/DeviceSelector.js @@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class DeviceSelector extends Component { @@ -22,18 +22,18 @@ class DeviceSelector extends Component { render(){ - return( + return (
{Blockly.Msg.settings_board} {Blockly.Msg.settings_board_text} - + {Blockly.Msg.settings_board} diff --git a/src/components/Settings/LanguageSelector.js b/src/components/Settings/LanguageSelector.js index f069b1b..986ddc9 100644 --- a/src/components/Settings/LanguageSelector.js +++ b/src/components/Settings/LanguageSelector.js @@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class LanguageSelector extends Component { @@ -25,18 +25,18 @@ class LanguageSelector extends Component { } render(){ - return( + return (
{Blockly.Msg.settings_language} {Blockly.Msg.settings_language_text} - + {Blockly.Msg.settings_language} diff --git a/src/components/Settings/OtaSelector.js b/src/components/Settings/OtaSelector.js index 8a55b82..5a6b7bd 100644 --- a/src/components/Settings/OtaSelector.js +++ b/src/components/Settings/OtaSelector.js @@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class OtaSelector extends Component { componentDidMount() { @@ -33,16 +33,16 @@ class OtaSelector extends Component { https://sensebox.de/app - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Settings/RenderSelector.js b/src/components/Settings/RenderSelector.js index 7359283..e4fa139 100644 --- a/src/components/Settings/RenderSelector.js +++ b/src/components/Settings/RenderSelector.js @@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class RenderSelector extends Component { @@ -26,14 +26,14 @@ class RenderSelector extends Component {
{Blockly.Msg.settings_renderer} {Blockly.Msg.settings_renderer_text} - + {Blockly.Msg.settings_renderer} diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index a0f9361..6e88472 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector"; import SoundsSelector from "./SoundsSelector"; import DeviceSelector from "./DeviceSelector"; -import Button from "@material-ui/core/Button"; -import Paper from "@material-ui/core/Paper"; +import Button from "@mui/material/Button"; +import Paper from "@mui/material/Paper"; class Settings extends Component { componentDidMount() { diff --git a/src/components/Settings/SoundsSelector.js b/src/components/Settings/SoundsSelector.js index a7535a8..c253a30 100644 --- a/src/components/Settings/SoundsSelector.js +++ b/src/components/Settings/SoundsSelector.js @@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class SoundsSelector extends Component { componentDidMount() { @@ -30,16 +30,16 @@ class SoundsSelector extends Component { > {Blockly.Msg.settings_sounds_text} - + {Blockly.Msg.settings_sounds} diff --git a/src/components/Settings/StatsSelector.js b/src/components/Settings/StatsSelector.js index b0b3cfe..6ab82d6 100644 --- a/src/components/Settings/StatsSelector.js +++ b/src/components/Settings/StatsSelector.js @@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class StatsSelector extends Component { @@ -25,14 +25,14 @@ class StatsSelector extends Component {
{Blockly.Msg.settings_statistics} {Blockly.Msg.settings_statistics_text} - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js index 55e7429..554f335 100644 --- a/src/components/Snackbar.js +++ b/src/components/Snackbar.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import { withStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; -import MaterialUISnackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; +import MaterialUISnackbar from '@mui/material/Snackbar'; +import SnackbarContent from '@mui/material/SnackbarContent'; import { faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -69,8 +69,8 @@ class Snackbar extends Component { style={{flexWrap: 'nowrap'}} className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success} action={ - - + + } message={this.props.message} diff --git a/src/components/TooltipViewer.js b/src/components/TooltipViewer.js index 7d69a57..758a67b 100644 --- a/src/components/TooltipViewer.js +++ b/src/components/TooltipViewer.js @@ -1,17 +1,43 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; - -import withWidth from "@material-ui/core/withWidth"; - -import { Card } from "@material-ui/core"; +import { Button, Card } from "@mui/material"; import * as Blockly from "blockly"; -import CardContent from "@material-ui/core/CardContent"; - -import Typography from "@material-ui/core/Typography"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; import ReactMarkdown from "react-markdown"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import Slide from "@mui/material/Slide"; +import SensorInfo from "./SensorInfo"; +import store from "../store"; + +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; + +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); class TooltipViewer extends Component { + + constructor(props) { + super(props); + this.inputRef = React.createRef(); + this.state = { + open: false, + }; + } + + toggleDialog = () => { + this.setState({ open: !this.state }); + }; + + openDialog = () => { + this.setState({ open: true }); + }; + render() { return ( - - {this.props.tooltip} - - - {this.props.helpurl !== "" ? ( - {`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`} - ) : null} + + + {this.props.tooltip} + + {store.getState().workspace.code.data ? ( + + ) : ( + {`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`} + )} + + {store.getState().workspace.code.data ? ( { + this.toggleDialog(); + }} + maxWidth={"md"} + fullWidth={true} + > + + + + + + + ) : (null)} ); } diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index ddd7248..4f95d59 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions"; import BlocklyWindow from "../Blockly/BlocklyWindow"; import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; -import Grid from "@material-ui/core/Grid"; -import Card from "@material-ui/core/Card"; -import Typography from "@material-ui/core/Typography"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Typography from "@mui/material/Typography"; import * as Blockly from "blockly"; import { initialXml } from "../Blockly/initialXml"; -import IconButton from "@material-ui/core/IconButton"; +import IconButton from "@mui/material/IconButton"; import CodeViewer from "../CodeViewer"; import TooltipViewer from "../TooltipViewer"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; import ReactMarkdown from "react-markdown"; import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { withStyles } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; import remarkGfm from "remark-gfm"; import remarkGemoji from "remark-gemoji"; +import { isWidthDown } from "../../helpers/handleBreakpoints"; + + +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; const styles = (theme) => ({ codeOn: { @@ -98,11 +102,10 @@ class Assessment extends Component { } > this.onChange()} - > - + size="large"> + ({ errorColor: { @@ -139,7 +139,6 @@ class BlocklyExample extends Component { this.onChange(e.target.checked)} - color="primary" /> } /> diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index d603e00..d1c6052 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar"; import Public from "./Public"; import Review from "./Review"; -import { withStyles } from "@material-ui/core/styles"; -import Button from "@material-ui/core/Button"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import Divider from "@material-ui/core/Divider"; -import FormHelperText from "@material-ui/core/FormHelperText"; -import Radio from "@material-ui/core/Radio"; -import RadioGroup from "@material-ui/core/RadioGroup"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; +import withStyles from '@mui/styles/withStyles'; +import Button from "@mui/material/Button"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import Divider from "@mui/material/Divider"; +import FormHelperText from "@mui/material/FormHelperText"; +import Radio from "@mui/material/Radio"; +import RadioGroup from "@mui/material/RadioGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; import * as Blockly from "blockly"; const styles = (theme) => ({ @@ -407,7 +407,7 @@ class Builder extends Component { } + control={} label={Blockly.Msg.builder_createNew} labelPlacement="end" /> @@ -417,7 +417,7 @@ class Builder extends Component { style={{ color: "black" }} disabled={this.props.index === 0} value="change" - control={} + control={} label={Blockly.Msg.builder_changeExisting} labelPlacement="end" /> @@ -425,7 +425,7 @@ class Builder extends Component { style={{ color: "black" }} disabled={this.props.index === 0} value="delete" - control={} + control={} label={Blockly.Msg.builder_deleteExisting} labelPlacement="end" /> @@ -470,12 +470,12 @@ class Builder extends Component { Tutorial