schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #199 from sensebox/development

Browse Source 
Development
This commit is contained in:
Mario Pesch 2023-02-13 16:24:20 +01:00 committed by GitHub
commit 67bac98e65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
90 changed files with 1181 additions and 698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package.json
View File

@ -3,23 +3,27 @@
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@blockly/block-plus-minus": "^3.0.5", "@blockly/block-plus-minus": "^4.0.4",
"@blockly/field-grid-dropdown": "^1.0.31", "@blockly/field-grid-dropdown": "^2.0.4",
"@blockly/field-slider": "^3.0.5", "@blockly/field-slider": "4.0.4",
"@blockly/plugin-scroll-options": "^2.0.5", "@blockly/plugin-scroll-options": "^3.0.5",
"@blockly/plugin-typed-variable-modal": "^4.0.5", "@blockly/plugin-typed-variable-modal": "^5.0.6",
"@blockly/workspace-backpack": "^2.0.12", "@blockly/workspace-backpack": "^3.0.4",
"@blockly/zoom-to-fit": "^2.0.14", "@blockly/zoom-to-fit": "^3.0.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@emotion/react": "^11.10.5",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@emotion/styled": "^11.10.5",
"@fortawesome/react-fontawesome": "^0.1.19", "@fortawesome/fontawesome-svg-core": "^6.2.1",
"@material-ui/core": "^4.12.4", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@monaco-editor/react": "^4.3.1", "@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/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"axios": "^0.22.0", "axios": "^0.22.0",
"blockly": "^8.0.3", "blockly": "^9.2.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"markdown-it": "^12.3.2", "markdown-it": "^12.3.2",
"mnemonic-id": "^3.2.7", "mnemonic-id": "^3.2.7",
@ -35,12 +39,13 @@
"react-rating-stars-component": "^2.2.0", "react-rating-stars-component": "^2.2.0",
"react-redux": "^7.2.9", "react-redux": "^7.2.9",
"react-router-dom": "^5.3.3", "react-router-dom": "^5.3.3",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.1",
"react-share": "^4.4.0", "react-share": "^4.4.0",
"react-spinners": "^0.13.3", "react-spinners": "^0.13.3",
"reactour": "^1.18.7", "reactour": "^1.18.7",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-thunk": "^2.4.1", "redux-thunk": "^2.4.1",
"rehype-raw": "^6.1.1",
"remark-gemoji": "^7.0.1", "remark-gemoji": "^7.0.1",
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"styled-components": "^4.4.1", "styled-components": "^4.4.1",

12
src/App.css
View File

@ -53,7 +53,7 @@ td {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
text-align: left; text-align: left;
background-color: #4eaf47; border-color: #4eaf47;
color: white; color: white;
} }
@ -62,3 +62,13 @@ td {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
:root {
--url: url('./data/mcu_opacity.png');
}
.blocklySvg {
background-image: var(--url);
background-position: center;
background-repeat: no-repeat;
}

18
src/App.js
View File

@ -9,7 +9,7 @@ import { loadUser } from "./actions/authActions";
import "./App.css"; import "./App.css";
import { ThemeProvider, createTheme } from "@material-ui/core/styles"; import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles";
import Content from "./components/Content"; import Content from "./components/Content";
@ -36,13 +36,15 @@ class App extends Component {
render() { render() {
const customHistory = createBrowserHistory(); const customHistory = createBrowserHistory();
return ( return (
<ThemeProvider theme={theme}> <StyledEngineProvider injectFirst>
<Provider store={store}> <ThemeProvider theme={theme}>
<Router history={customHistory}> <Provider store={store}>
<Content /> <Router history={customHistory}>
</Router> <Content />
</Provider> </Router>
</ThemeProvider> </Provider>
</ThemeProvider>
</StyledEngineProvider>
); );
} }
} }

19
src/actions/boardAction.js
View File

@ -1,10 +1,15 @@
import { import {
BOARD, BOARD,
} from "./types"; } from "./types";
import mini_opacity from "../data/mini_opacity.png"
import mcu_opacity from "../data/mcu_opacity.png"
export const setBoard = (board) => (dispatch) => { export const setBoard = (board) => (dispatch) => {
dispatch({ window.sessionStorage.setItem("board", board);
type: BOARD, const root = document.querySelector(':root');
payload: board, root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
}); dispatch({
}; type: BOARD,
payload: board,
});
};

18
src/actions/sensorwikiActions.js Normal file
View File

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

8
src/actions/workspaceActions.js
View File

@ -16,13 +16,19 @@ export const onChangeCode = () => (dispatch, getState) => {
code.arduino = Blockly.Arduino.workspaceToCode(workspace); code.arduino = Blockly.Arduino.workspaceToCode(workspace);
var xmlDom = Blockly.Xml.workspaceToDom(workspace); var xmlDom = Blockly.Xml.workspaceToDom(workspace);
code.xml = Blockly.Xml.domToPrettyText(xmlDom); code.xml = Blockly.Xml.domToPrettyText(xmlDom);
var selectedBlock = Blockly.selected var selectedBlock = Blockly.getSelected
if (selectedBlock !== null) { if (selectedBlock !== null) {
code.helpurl = selectedBlock.helpUrl code.helpurl = selectedBlock.helpUrl
code.tooltip = selectedBlock.tooltip code.tooltip = selectedBlock.tooltip
if (selectedBlock.data) {
code.data = selectedBlock.data
} else {
code.data = null
}
} else if (selectedBlock === null) { } else if (selectedBlock === null) {
code.tooltip = Blockly.Msg.tooltip_hint code.tooltip = Blockly.Msg.tooltip_hint
code.helpurl = '' code.helpurl = ''
code.data = null
} }

6
src/components/Alert.js
View File

@ -1,9 +1,9 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
const styles = (theme) => ({ const styles = (theme) => ({
alert: { alert: {

2
src/components/Blockly/BlocklyComponent.jsx
View File

@ -27,7 +27,7 @@ import Blockly from "blockly/core";
import "blockly/blocks"; import "blockly/blocks";
import Toolbox from "./toolbox/Toolbox"; import Toolbox from "./toolbox/Toolbox";
import { Card } from "@material-ui/core"; import { Card } from "@mui/material";
import { import {
ScrollOptions, ScrollOptions,
ScrollBlockDragger, ScrollBlockDragger,

2
src/components/Blockly/BlocklyWindow.js
View File

@ -45,6 +45,7 @@ class BlocklyWindow extends Component {
const workspace = Blockly.getMainWorkspace(); const workspace = Blockly.getMainWorkspace();
var xml = this.props.initialXml; var xml = this.props.initialXml;
if (props.selectedBoard !== this.props.selectedBoard) { if (props.selectedBoard !== this.props.selectedBoard) {
xml = localStorage.getItem("autoSaveXML");
// change board // change board
if(!xml) xml = initialXml; if(!xml) xml = initialXml;
var xmlDom = Blockly.Xml.textToDom(xml); var xmlDom = Blockly.Xml.textToDom(xml);
@ -62,6 +63,7 @@ class BlocklyWindow extends Component {
} }
if (props.language !== this.props.language) { if (props.language !== this.props.language) {
// change language // change language
xml = localStorage.getItem("autoSaveXML");
if (!xml) xml = initialXml; if (!xml) xml = initialXml;
xmlDom = Blockly.Xml.textToDom(xml); xmlDom = Blockly.Xml.textToDom(xml);
Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace); Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);

11
src/components/Blockly/blocks/sensebox-sensors.js
View File

@ -26,6 +26,7 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = {
this.setColour(getColour().sensebox); this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip); this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl); 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.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip); this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl); 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.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip); this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl); 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.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip); this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl); 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.setOutput(true, Types.DECIMAL.typeName);
this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip); this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl); this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
this.data = {name: "bmp280"};
this.getField("NAME").setValidator( this.getField("NAME").setValidator(
function (val) { function (val) {
this.updateShape_(val === "Altitude"); this.updateShape_(val === "Altitude");
@ -201,6 +206,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
this.setColour(getColour().sensebox); this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_bme_tooltip); this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl); 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.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip); this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl); this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
this.data = {name: "hc-sr04"};
}, },
/** /**
* Parse XML to restore the number of pins available. * Parse XML to restore the number of pins available.
@ -382,6 +389,7 @@ Blockly.Blocks["sensebox_scd30"] = {
this.setColour(getColour().sensebox); this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_scd_tooltip); this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl); this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
this.data = {name: "scd30"};
}, },
onchange: function (e) { onchange: function (e) {
var dropdown = this.getFieldValue("dropdown"); var dropdown = this.getFieldValue("dropdown");
@ -448,6 +456,7 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
this.setOutput(true, Types.NUMBER.typeName); this.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip); this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl); 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"); .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
this.setOutput(true, Types.NUMBER.typeName); this.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip); 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.setOutput(true, Types.DECIMAL.typeName);
this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip); this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl); this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
this.data = {name: "dps310"};
this.getField("NAME").setValidator( this.getField("NAME").setValidator(
function (val) { function (val) {
this.updateShape_(val === "Altitude"); this.updateShape_(val === "Altitude");

4
src/components/Blockly/blocks/variables.js
View File

@ -9,10 +9,10 @@ Blockly.Blocks["variables_set_dynamic"] = {
this.setPreviousStatement(true, null); this.setPreviousStatement(true, null);
this.setNextStatement(true, null); this.setNextStatement(true, null);
this.appendValueInput("VALUE") this.appendValueInput("VALUE")
.appendField("set", "set") .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
.appendField("", "type") .appendField("", "type")
.appendField(new Blockly.FieldVariable("VAR"), "VAR") .appendField(new Blockly.FieldVariable("VAR"), "VAR")
.appendField("to"); .appendField(Blockly.Msg.variables_to);
}, },
onchange: function (e) { onchange: function (e) {
let variableID = this.getFieldValue("VAR"); let variableID = this.getFieldValue("VAR");

15
src/components/Blockly/msg/de/ui.js
View File

@ -23,10 +23,12 @@ export const UI = {
variable_DECIMAL: "Kommazahl (float)", variable_DECIMAL: "Kommazahl (float)",
variables_TEXT: "Text (string)", variables_TEXT: "Text (string)",
variables_ARRAY: "Array (array)", variables_ARRAY: "Array (array)",
variables_CHARACTER: "char (char)", variables_CHARACTER: "Buchstabe (char)",
variables_BOOLEAN: "Boolean (boolean)", variables_BOOLEAN: "Boolean (boolean)",
variables_NULL: "void (void)", variables_NULL: "void (void)",
variables_UNDEF: "undefined", variables_UNDEF: "undefined",
variables_set: "Schreibe",
variables_to: "",
/** /**
* Tooltips * Tooltips
@ -154,6 +156,7 @@ export const UI = {
button_next: "nächster Schritt", button_next: "nächster Schritt",
button_tutorial_overview: "Tutorial Übersicht", button_tutorial_overview: "Tutorial Übersicht",
button_login: "Anmelden", 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)", "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: "Hier kommst du zur alten Blockly Version für den ",
deviceselection_footnote_02: "oder die", 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 "
}; };

22
src/components/Blockly/msg/en/ui.js
View File

@ -19,14 +19,16 @@ export const UI = {
toolbox_label_internalRTC: "Internal RTC", toolbox_label_internalRTC: "Internal RTC",
variable_NUMBER: "Number (int)", variable_NUMBER: "Number (int)",
variable_SHORT_NUMBER: "char", variable_SHORT_NUMBER: "char",
variable_LONG: " Zahl (long)", variable_LONG: "Big number (long)",
variable_DECIMAL: "Decimal (float)", variable_DECIMAL: "Decimal (float)",
variables_TEXT: "Text (string)", variables_TEXT: "Text (string)",
variables_ARRAY: "Array (array)", variables_ARRAY: "Array (array)",
variables_CHARACTER: "char (char)", variables_CHARACTER: "Character (char)",
variables_BOOLEAN: "Boolean (boolean)", variables_BOOLEAN: "Boolean (boolean)",
variables_NULL: "void (void)", variables_NULL: "void (void)",
variables_UNDEF: "undefined", variables_UNDEF: "undefined",
variables_set: "set",
variables_to: "to",
/** /**
* Tooltips * Tooltips
@ -149,6 +151,7 @@ export const UI = {
button_next: "Next step", button_next: "Next step",
button_tutorial_overview: "Tutorial overview", button_tutorial_overview: "Tutorial overview",
button_login: "Login", 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", "Your code will now be compiled and then downloaded to your computer",
/** /**
* Device Selction * Device Selection
* */ * */
deviceselection_head: "Which board are you using?", deviceselection_head: "Which board are you using?",
deviceselection_keep_selection: deviceselection_keep_selection:
"Save my choice (You can change the board later in the settings)", "Save my choice (You can change the board later in the settings)",
deviceselection_footnote: deviceselection_footnote:
"Here you can access the old blockly Version for the", "Here you can access the old blockly Version for the",
deviceselection_footnote_02: "or 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 ",
}; };

5
src/components/Blockly/toolbox/Toolbox.js
View File

@ -16,7 +16,6 @@ class Toolbox extends React.Component {
this.props.workspace, this.props.workspace,
"callbackName", "callbackName",
[ [
[`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
[`${Blockly.Msg.variable_NUMBER}`, "int"], [`${Blockly.Msg.variable_NUMBER}`, "int"],
[`${Blockly.Msg.variable_LONG}`, "long"], [`${Blockly.Msg.variable_LONG}`, "long"],
[`${Blockly.Msg.variable_DECIMAL}`, "float"], [`${Blockly.Msg.variable_DECIMAL}`, "float"],
@ -33,7 +32,7 @@ class Toolbox extends React.Component {
// Add your button and give it a callback name. // Add your button and give it a callback name.
const button = document.createElement("button"); const button = document.createElement("button");
button.setAttribute("text", "Create Typed Variable"); button.setAttribute("text", Blockly.Msg.button_createVariable);
button.setAttribute("callbackKey", "callbackName"); button.setAttribute("callbackKey", "callbackName");
xmlList.push(button); 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 // This gets all the variables that the user creates and adds them to the
// flyout. // flyout.
const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace); const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
console.log(blockList);
xmlList = xmlList.concat(blockList); xmlList = xmlList.concat(blockList);
return xmlList; return xmlList;
} }
@ -633,7 +633,6 @@ class Toolbox extends React.Component {
colour={getColour().procedures} colour={getColour().procedures}
custom="PROCEDURE" custom="PROCEDURE"
></Category> ></Category>
<sep></sep>
<Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}> <Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}>
<Category <Category
name={Blockly.Msg.toolbox_serial} name={Blockly.Msg.toolbox_serial}

8
src/components/Breadcrumbs.js
View File

@ -3,9 +3,9 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import clsx from 'clsx'; import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs'; import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import { faHome } from "@fortawesome/free-solid-svg-icons"; import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -30,7 +30,7 @@ class Breadcrumbs extends Component {
this.props.content && this.props.content.length > 0 ? this.props.content && this.props.content.length > 0 ?
<MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}> <MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}>
<Link to={'/'} style={{textDecoration: 'none'}}> <Link to={'/'} style={{textDecoration: 'none'}}>
<FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/> <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
</Link> </Link>
{this.props.content.splice(0, this.props.content.length-1).map((content, i) => ( {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
<Link to={content.link} style={{textDecoration: 'none'}} key={i}> <Link to={content.link} style={{textDecoration: 'none'}} key={i}>

8
src/components/CodeEditor/CodeEditor.js
View File

@ -2,15 +2,16 @@ import React from "react";
import { useState, useRef } from "react"; import { useState, useRef } from "react";
import { default as MonacoEditor } from "@monaco-editor/react"; import { default as MonacoEditor } from "@monaco-editor/react";
import { withRouter } from "react-router-dom"; 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 Blockly from "blockly/core";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import Drawer from "@material-ui/core/Drawer"; import Drawer from "@mui/material/Drawer";
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import SaveIcon from "./SaveIcon"; import SaveIcon from "./SaveIcon";
import store from "../../store"; import store from "../../store";
import DeviceSelection from "../DeviceSelection";
const CodeEditor = (props) => { const CodeEditor = (props) => {
//const [filehandle, setFileHandle] = useState(); //const [filehandle, setFileHandle] = useState();
@ -192,6 +193,7 @@ void loop() {
}} }}
/> />
</Grid> </Grid>
<DeviceSelection />
<Grid item lg={4} md={4}> <Grid item lg={4} md={4}>
<Button <Button
style={{ padding: "1rem", margin: "1rem" }} style={{ padding: "1rem", margin: "1rem" }}

22
src/components/CodeEditor/Compile.js
View File

@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions";
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Backdrop from "@material-ui/core/Backdrop"; import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import Copy from "../copy.svg"; import Copy from "../copy.svg";
import MuiDrawer from "@material-ui/core/Drawer"; import MuiDrawer from "@mui/material/Drawer";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
const styles = (theme) => ({ const styles = (theme) => ({
@ -188,8 +188,8 @@ class Compile extends Component {
<IconButton <IconButton
className={`compileBlocks ${this.props.classes.iconButton}`} className={`compileBlocks ${this.props.classes.iconButton}`}
onClick={() => this.compile()} onClick={() => this.compile()}
> size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" /> <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
) : ( ) : (
@ -201,6 +201,7 @@ class Compile extends Component {
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faClipboardCheck} icon={faClipboardCheck}
style={{ marginRight: "5px" }} style={{ marginRight: "5px" }}
/>{" "} />{" "}
Kompilieren Kompilieren
@ -301,6 +302,7 @@ class Compile extends Component {
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faClipboardCheck} icon={faClipboardCheck}
style={{ marginRight: "5px" }} style={{ marginRight: "5px" }}
/>{" "} />{" "}
Starte Übertragung Starte Übertragung

4
src/components/CodeEditor/SaveIcon.js
View File

@ -1,6 +1,6 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons"; import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import React from "react"; import React from "react";
const SaveIcon = ({ loading }) => ( const SaveIcon = ({ loading }) => (
@ -17,6 +17,7 @@ const SaveIcon = ({ loading }) => (
<FontAwesomeIcon <FontAwesomeIcon
style={{ position: "absolute" }} style={{ position: "absolute" }}
icon={faCircleNotch} icon={faCircleNotch}
spin={true} spin={true}
size="2x" size="2x"
color="grey" color="grey"
@ -30,6 +31,7 @@ const SaveIcon = ({ loading }) => (
transform: "translate(-50%,-50%)", transform: "translate(-50%,-50%)",
}} }}
icon={faSave} icon={faSave}
color={loading ? "grey" : "green"} color={loading ? "grey" : "green"}
size={loading ? "1x" : "lg"} size={loading ? "1x" : "lg"}
/> />

2
src/components/CodeEditor/SerialMonitor.js
View File

@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
const SerialMonitor = () => { const SerialMonitor = () => {
const [serialPortContent, setSerialPortContent] = useState([]); const [serialPortContent, setSerialPortContent] = useState([]);

10
src/components/CodeEditor/Sidebar.js
View File

@ -1,13 +1,13 @@
import React from "react"; import React from "react";
import Blockly from "blockly"; import Blockly from "blockly";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Accordion from "@material-ui/core/Accordion"; import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary"; import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails"; import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import { LibraryVersions } from "../../data/versions.js"; import { LibraryVersions } from "../../data/versions.js";
import { useMonaco } from "@monaco-editor/react"; import { useMonaco } from "@monaco-editor/react";
import { Button } from "@material-ui/core"; import { Button } from "@mui/material";
import SerialMonitor from "./SerialMonitor.js"; import SerialMonitor from "./SerialMonitor.js";
import axios from "axios"; import axios from "axios";

14
src/components/CodeViewer.js
View File

@ -2,15 +2,17 @@ import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import withWidth from "@material-ui/core/withWidth"; import withStyles from '@mui/styles/withStyles';
import { withStyles } from "@material-ui/core/styles"; import MuiAccordion from "@mui/material/Accordion";
import MuiAccordion from "@material-ui/core/Accordion"; import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionSummary from "@material-ui/core/AccordionSummary"; import MuiAccordionDetails from "@mui/material/AccordionDetails";
import MuiAccordionDetails from "@material-ui/core/AccordionDetails"; import { Card } from "@mui/material";
import { Card } from "@material-ui/core";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { default as MonacoEditor } from "@monaco-editor/react"; import { default as MonacoEditor } from "@monaco-editor/react";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const Accordion = withStyles((theme) => ({ const Accordion = withStyles((theme) => ({
root: { root: {
border: `1px solid ${theme.palette.secondary.main}`, border: `1px solid ${theme.palette.secondary.main}`,

95
src/components/DeviceSelection.js
View File

@ -3,11 +3,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Dialog from "./Dialog"; import Dialog from "./Dialog";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { IconButton, Grid, Avatar, Typography } from "@material-ui/core"; import { IconButton, Grid, Avatar, Typography } from "@mui/material";
import { setBoard } from "../actions/boardAction"; import { setBoard } from "../actions/boardAction";
const styles = (theme) => ({ const styles = (theme) => ({
@ -27,41 +25,31 @@ const styles = (theme) => ({
class DeviceSeclection extends Component { class DeviceSeclection extends Component {
constructor(props) { constructor(props) {
var previousPageWasAnotherDomain = props.pageVisits === 0;
var userWantToKeepBoard = window.localStorage.getItem("board")
? true
: false;
super(props); super(props);
this.state = { this.state = {
open: userWantToKeepBoard open: props.selectedBoard ? false : true,
? !userWantToKeepBoard selectedBoard: "",
: previousPageWasAnotherDomain,
selectedBoard : "",
saveSettings: false, saveSettings: false,
}; };
} }
toggleDialog = () => { toggleDialog = () => {
this.setState({ open: !this.state });
if(this.state.saveSettings){
window.localStorage.setItem("board", this.state.selectedBoard)
}
this.props.setBoard(this.state.selectedBoard) this.props.setBoard(this.state.selectedBoard)
}; };
onChange = (e) => { onChange = (e) => {
if (e.target.checked) { if (e.target.checked) {
this.setState({ saveSettings: true}); this.setState({ saveSettings: true });
} else { } else {
this.setState({ saveSettings: false}); this.setState({ saveSettings: false });
} }
}; };
onclick = (e, value) => { onclick = (e, value) => {
console.log(e, value) this.setState({ selectedBoard: value })
this.setState({selectedBoard: value}) this.props.setBoard(value)
this.setState({ open: !this.state });
}; };
render() { render() {
@ -74,26 +62,24 @@ class DeviceSeclection extends Component {
title={Blockly.Msg.deviceselection_head} title={Blockly.Msg.deviceselection_head}
content={""} content={""}
onClick={this.toggleDialog} onClick={this.toggleDialog}
button={Blockly.Msg.button_accept} disabled={this.state.selectedBoard === ""}
disabled={this.state.selectedBoard===""}
> >
<div> <div>
<Grid container spacing={2} style={{ textAlign : "center" }}> <Grid container spacing={2} style={{ textAlign: "center" }}>
<Grid item xs={6}> <Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mcu")}> <IconButton onClick={(e) => this.onclick(e, "mcu")} size="large">
<Avatar <Avatar
alt="Sensebox MCU" alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png" src="/media/hardware/senseboxmcu.png"
style={{ style={{
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray", border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width:"20vw", width: "20vw",
height: "20vw" height: "20vw"
}} }}
/> />
</IconButton> </IconButton>
<p>senseBox MCU</p> <p>senseBox MCU</p>
</Grid> </Grid>
{/* <Grid item xs={4}> {/* <Grid item xs={4}>
<IconButton onClick={(e) => this.onclick(e, "esp")}> <IconButton onClick={(e) => this.onclick(e, "esp")}>
<Avatar <Avatar
@ -103,42 +89,27 @@ class DeviceSeclection extends Component {
border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray", border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw", width:"20vw",
height: "20vw" height: "20vw"
}} }}
/> />
</IconButton> </IconButton>
<p>Sensebox ESP</p> <p>Sensebox ESP</p>
</Grid> */} </Grid> */}
<Grid item xs={6}> <Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mini")}> <IconButton onClick={(e) => this.onclick(e, "mini")} size="large">
<Avatar <Avatar
alt="Sensebox Mini" alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png" src="/media/hardware/senseboxmcumini.png"
style={{ style={{
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray", border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width:"20vw", width: "20vw",
height: "20vw" height: "20vw"
}} }}
/> />
</IconButton> </IconButton>
<p>senseBox MCU:mini</p> <p>senseBox MCU:mini</p>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
<FormControlLabel
style={{ marginTop: "20px" }}
classes={{ label: this.props.classes.label }}
control={
<Checkbox
size={"small"}
value={true}
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
label={Blockly.Msg.deviceselection_keep_selection}
/>
<Typography variant="body1" > <Typography variant="body1" >
{Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a> {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
</Typography> </Typography>
@ -158,5 +129,5 @@ const mapStateToProps = (state) => ({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
{setBoard} { setBoard }
)(withStyles(styles, { withTheme: true })(DeviceSeclection)); )(withStyles(styles, { withTheme: true })(DeviceSeclection));

10
src/components/Dialog.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import MaterialUIDialog from '@material-ui/core/Dialog'; import MaterialUIDialog from '@mui/material/Dialog';
class Dialog extends Component { class Dialog extends Component {

26
src/components/Faq.js
View File

@ -4,14 +4,15 @@ import Breadcrumbs from "./Breadcrumbs";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import Container from "@material-ui/core/Container"; import rehypeRaw from "rehype-raw";
import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import Container from "@mui/material/Container";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; import Accordion from "@mui/material/Accordion";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FaqQuestions } from "../data/faq"; import { FaqQuestions } from "../data/faq";
@ -46,25 +47,26 @@ class Faq extends Component {
<h1>FAQ</h1> <h1>FAQ</h1>
{FaqQuestions().map((object, i) => { {FaqQuestions().map((object, i) => {
return ( return (
<ExpansionPanel <Accordion
expanded={panel === `panel${i}`} expanded={panel === `panel${i}`}
onChange={() => this.handleChange(`panel${i}`)} onChange={() => this.handleChange(`panel${i}`)}
> >
<ExpansionPanelSummary <AccordionSummary
expandIcon={<FontAwesomeIcon icon={faChevronDown} />} expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
> >
<Typography variant="h6">{object.question}</Typography> <Typography variant="h6">{object.question}</Typography>
</ExpansionPanelSummary> </AccordionSummary>
<ExpansionPanelDetails> <AccordionDetails>
<Typography> <Typography>
<ReactMarkdown <ReactMarkdown
className="news" className="news"
allowDangerousHtml="true" allowDangerousHtml="true"
children={object.answer} children={object.answer}
rehypePlugins={[rehypeRaw]}
></ReactMarkdown> ></ReactMarkdown>
</Typography> </Typography>
</ExpansionPanelDetails> </AccordionDetails>
</ExpansionPanel> </Accordion>
); );
})} })}
{this.props.button ? ( {this.props.button ? (

2
src/components/Footer.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
class Footer extends Component { class Footer extends Component {
render() { render() {

12
src/components/Home.js
View File

@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons";
// import HintTutorialExists from "./Tutorial/HintTutorialExists"; // import HintTutorialExists from "./Tutorial/HintTutorialExists";
import DeviceSelection from "./DeviceSelection"; import DeviceSelection from "./DeviceSelection";
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import { faCode } from "@fortawesome/free-solid-svg-icons"; import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -160,8 +160,8 @@ class Home extends Component {
zIndex: 21, zIndex: 21,
}} }}
onClick={() => this.onChange()} onClick={() => this.onChange()}
> size="large">
<FontAwesomeIcon icon={faCode} size="xs" /> <FontAwesomeIcon icon={faCode} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

2
src/components/Impressum.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import Container from "@material-ui/core/Container"; import Container from "@mui/material/Container";
class Impressum extends Component { class Impressum extends Component {
render() { render() {
return ( return (

8
src/components/MaxBlocks.js
View File

@ -5,8 +5,8 @@ import { workspaceChange } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
class MaxBlocks extends Component { class MaxBlocks extends Component {
@ -28,12 +28,12 @@ class MaxBlocks extends Component {
return ( return (
<div style={{display: 'inline', marginLeft: '10px'}}> <div style={{display: 'inline', marginLeft: '10px'}}>
<TextField <TextField
variant="standard"
style={{width: '50px', marginRight: '5px'}} style={{width: '50px', marginRight: '5px'}}
name="max" name="max"
type="number" type="number"
onChange={this.onChange} onChange={this.onChange}
value={this.state.max} value={this.state.max} />
/>
<Button style={{marginRight: '10px', color: 'white'}} variant="contained" color="primary" onClick={this.setMaxBlocks}> <Button style={{marginRight: '10px', color: 'white'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
Maximale Blöcke Maximale Blöcke
</Button> </Button>

339
src/components/Navbar.js
View File

@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Drawer from "@material-ui/core/Drawer"; import Drawer from "@mui/material/Drawer";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@mui/material/AppBar";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import List from "@material-ui/core/List"; import List from "@mui/material/List";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import LinearProgress from "@material-ui/core/LinearProgress"; import LinearProgress from "@mui/material/LinearProgress";
import Tour from "reactour"; import Tour from "reactour";
import { Badge } from "@material-ui/core"; import { Badge } from "@mui/material";
import { home, assessment } from "./Tour"; import { home, assessment } from "./Tour";
import { import {
faBars, faBars,
@ -37,10 +37,20 @@ import {
faLightbulb, faLightbulb,
faCode, faCode,
faPuzzlePiece, faPuzzlePiece,
faUser,
faMicrochip,
faEarthEurope,
faEarthAmericas,
faCaretDown
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
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 "@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) => ({ const styles = (theme) => ({
drawerWidth: { drawerWidth: {
@ -60,9 +70,14 @@ const styles = (theme) => ({
class Navbar extends Component { class Navbar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.langRef = React.createRef();
this.mcuRef = React.createRef();
this.state = { this.state = {
open: false, open: false,
isTourOpen: false, isTourOpen: false,
anchorElLang: null,
anchorElBoard: null,
anchorElUser: null
}; };
} }
@ -80,7 +95,6 @@ class Navbar extends Component {
render() { render() {
var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname); var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
var isAssessment = var isAssessment =
/^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) && /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
!this.props.tutorialIsLoading && !this.props.tutorialIsLoading &&
@ -116,7 +130,7 @@ class Navbar extends Component {
onClick={this.toggleDrawer} onClick={this.toggleDrawer}
style={{ margin: "0 10px" }} style={{ margin: "0 10px" }}
className="MenuButton" className="MenuButton"
> size="large">
<FontAwesomeIcon icon={faBars} /> <FontAwesomeIcon icon={faBars} />
</IconButton> </IconButton>
<Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}> <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
@ -127,55 +141,226 @@ 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>
{isTutorial ? ( <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }}>
<Link {isHome ? (
to={"/tutorial"} <div style={{ display: "flex" }}>
style={{ <div style={{ padding: "12px" }}>
textDecoration: "none", <Button
color: "inherit", style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
marginLeft: "10px", ref={this.mcuRef}
onClick={() => {
this.setState({ anchorElBoard: this.mcuRef.current })
}}
startIcon={<FontAwesomeIcon icon={faMicrochip} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
>
{this.props.selectedBoard}
</Button>
<Menu
anchorEl={this.state.anchorElBoard}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={Boolean(this.state.anchorElBoard)}
onClose={() => {
this.setState({ anchorElBoard: null });
}}
>
<MenuItem
value="mcu"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null });
}}
>
mcu
</MenuItem>
<MenuItem
value="mini"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null });
}}
>
mini
</MenuItem>
</Menu>
</div>
<div style={{ padding: "12px" }}>
{
this.props.language === "en_US" ?
(
<Button
style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}}
startIcon={<FontAwesomeIcon icon={faEarthAmericas} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
>
English
</Button>
) : (
<Button
style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}}
startIcon={<FontAwesomeIcon icon={faEarthEurope} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
>
Deutsch
</Button>
)
}
<Menu
anchorEl={this.state.anchorElLang}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={Boolean(this.state.anchorElLang)}
onClose={() => {
this.setState({ anchorElLang: null });
}}
>
<MenuItem
value="de_DE"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
Deutsch
</MenuItem>
<MenuItem
value="en_US"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
English
</MenuItem>
</Menu>
</div>
</div>
) : (null)}
{isHome ? (
<Tooltip title={'Start Tour'} arrow>
<IconButton
color="inherit"
className={`openTour ${this.props.classes.button}`}
onClick={() => {
this.openTour();
}}
size="large">
<FontAwesomeIcon icon={faQuestionCircle} />
</IconButton>
</Tooltip>
) : null}
{isAssessment ? (
<Tooltip title={'Start tour'} arrow>
<IconButton
color="inherit"
className={`openTour ${this.props.classes.button}`}
onClick={() => {
this.openTour();
}}
size="large">
<FontAwesomeIcon icon={faQuestionCircle} />
</IconButton>
</Tooltip>
) : null}
<Tour
steps={isHome ? home() : assessment()}
isOpen={this.state.isTourOpen}
onRequestClose={() => {
this.closeTour();
}} }}
> />
<Typography variant="h6" noWrap> {this.props.user ? (
Tutorial <div>
</Typography> <IconButton
</Link> color="inherit"
) : null} onClick={(event) => { this.setState({ anchorElUser: event.target }) }}
{isHome ? ( style={{ margin: "0 30px 0 0" }}
<Tooltip title={Blockly.Msg.tooltip_start_tour} arrow> size="large"
<IconButton >
color="inherit" <FontAwesomeIcon icon={faUser} />
className={`openTour ${this.props.classes.button}`} </IconButton>
onClick={() => { <Menu
this.openTour(); anchorEl={this.state.anchorElUser}
}} anchorOrigin={{
style={{ margin: "0 30px 0 auto" }} vertical: 'bottom',
> horizontal: 'center',
<FontAwesomeIcon icon={faQuestionCircle} /> }}
</IconButton> keepMounted
</Tooltip> transformOrigin={{
) : null} vertical: 'top',
{isAssessment ? ( horizontal: 'center',
<Tooltip title={Blockly.Msg.tooltip_start_tour} arrow> }}
<IconButton open={Boolean(this.state.anchorElUser)}
color="inherit" onClose={() => { this.setState({ anchorElUser: null }); }}
className={`openTour ${this.props.classes.button}`} >
onClick={() => { <div className="" style={{ paddingLeft: "16px", paddingRight: "16px", paddingTop: "16px" }}>
this.openTour(); <p style={{ fontWeight: "bold", margin: "0px" }}>
}} {this.props.user.name}
style={{ margin: "0 30px 0 auto" }} </p>
> <p style={{ marginTop: "0px", color: "#696969" }}>
<FontAwesomeIcon icon={faQuestionCircle} /> {this.props.user.email}
</IconButton> </p>
</Tooltip> </div>
) : null} <hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} />
<Tour <MenuItem>
steps={isHome ? home() : assessment()} <Link to={"/user"} style={{ textDecoration: 'none', color: "black" }}>
isOpen={this.state.isTourOpen} {Blockly.Msg.navbar_account}
onRequestClose={() => { </Link>
this.closeTour(); </MenuItem>
}} <MenuItem>
/> <Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}>
{Blockly.Msg.navbar_settings}
</Link>
</MenuItem>
<MenuItem
onClick={() => {
this.props.logout()
}}
>
{Blockly.Msg.navbar_logout}
</MenuItem>
</Menu>
</div>
)
:
(<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
<IconButton
color="inherit"
style={{ margin: "0 30px 0 auto" }}
>
<FontAwesomeIcon icon={faUser} />
</IconButton>
</Link>
)
}
</div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
@ -214,11 +399,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,
@ -267,7 +452,7 @@ class Navbar extends Component {
<FontAwesomeIcon icon={item.icon} /> <FontAwesomeIcon icon={item.icon} />
</ListItemIcon> </ListItemIcon>
{item.text === "Code Editor" ? ( {item.text === "Code Editor" ? (
<Badge badgeContent={"Experimental"} color="primary"> <Badge badgeContent={"Experimental"} color="primary" overlap="rectangular">
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</Badge> </Badge>
) : ( ) : (
@ -329,9 +514,9 @@ class Navbar extends Component {
onClick={ onClick={
item.function item.function
? () => { ? () => {
item.function(); item.function();
this.toggleDrawer(); this.toggleDrawer();
} }
: this.toggleDrawer : this.toggleDrawer
} }
> >
@ -369,6 +554,10 @@ Navbar.propTypes = {
user: PropTypes.object, user: PropTypes.object,
tutorial: PropTypes.object, tutorial: PropTypes.object,
activeStep: PropTypes.number.isRequired, activeStep: PropTypes.number.isRequired,
setLanguage: PropTypes.func.isRequired,
language: PropTypes.string.isRequired,
setBoard: PropTypes.func.isRequired,
selectedBoard: PropTypes.string.isRequired
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
@ -378,8 +567,10 @@ const mapStateToProps = (state) => ({
user: state.auth.user, user: state.auth.user,
tutorial: state.tutorial.tutorials[0], tutorial: state.tutorial.tutorials[0],
activeStep: state.tutorial.activeStep, 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)) withStyles(styles, { withTheme: true })(withRouter(Navbar))
); );

6
src/components/News.js
View File

@ -4,11 +4,11 @@ import Breadcrumbs from './Breadcrumbs';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import * as Blockly from 'blockly' import * as Blockly from 'blockly'
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import Container from '@material-ui/core/Container'; import Container from '@mui/material/Container';
const news = ` const news = `

4
src/components/NotFound.js
View File

@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import * as Blockly from 'blockly' import * as Blockly from 'blockly'
class NotFound extends Component { class NotFound extends Component {

2
src/components/Privacy.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import Container from '@material-ui/core/Container'; import Container from '@mui/material/Container';
class Privay extends Component { class Privay extends Component {
render() { render() {
return ( return (

4
src/components/Project/Project.js
View File

@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom';
import Home from '../Home'; import Home from '../Home';
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from '../Breadcrumbs';
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
class Project extends Component { class Project extends Component {

30
src/components/Project/ProjectHome.js
View File

@ -11,13 +11,14 @@ import BlocklyWindow from "../Blockly/BlocklyWindow";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import WorkspaceFunc from "../Workspace/WorkspaceFunc"; import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@mui/material/Paper";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import Backdrop from "@material-ui/core/Backdrop"; import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import DeviceSelection from "../DeviceSelection";
const styles = (theme) => ({ const styles = (theme) => ({
link: { link: {
@ -60,9 +61,8 @@ class ProjectHome extends Component {
this.setState({ this.setState({
snackbar: true, snackbar: true,
key: Date.now(), key: Date.now(),
message: `Dein angefragtes ${ message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
type === "gallery" ? "Galerie-" : "" }Projekt konnte nicht gefunden werden.`,
}Projekt konnte nicht gefunden werden.`,
type: "error", type: "error",
}); });
} }
@ -108,6 +108,7 @@ class ProjectHome extends Component {
/> />
<h1>{data}</h1> <h1>{data}</h1>
<DeviceSelection />
{this.props.progress ? ( {this.props.progress ? (
<Backdrop open invisible> <Backdrop open invisible>
<CircularProgress color="primary" /> <CircularProgress color="primary" />
@ -127,9 +128,8 @@ class ProjectHome extends Component {
}} }}
> >
<Link <Link
to={`/${ to={`/${data === "Projekte" ? "project" : "gallery"
data === "Projekte" ? "project" : "gallery" }/${project._id}`}
}/${project._id}`}
style={{ textDecoration: "none", color: "inherit" }} style={{ textDecoration: "none", color: "inherit" }}
> >
<h3 style={{ marginTop: 0 }}>{project.title}</h3> <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@ -140,7 +140,7 @@ class ProjectHome extends Component {
svg svg
blockDisabled blockDisabled
initialXml={project.xml} initialXml={project.xml}
/> />
<Typography <Typography
variant="body2" variant="body2"
style={{ style={{
@ -153,7 +153,7 @@ class ProjectHome extends Component {
</Typography> </Typography>
</Link> </Link>
{this.props.user && {this.props.user &&
this.props.user.email === project.creator ? ( this.props.user.email === project.creator ? (
<div> <div>
<Divider <Divider
style={{ style={{

77
src/components/SensorInfo.js Normal file
View File

@ -0,0 +1,77 @@
import React from "react";
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import store from "../store";
import ReactMarkdown from "react-markdown";
import * as Blockly from "blockly";
export default function LabTabs() {
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
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 (
<Box sx={{ width: '100%', typography: 'body1' }}>
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange}>
<Tab label="Basic Information" value="1" />
<Tab label="Details" value="2" />
</TabList>
</Box>
<TabPanel value="1">
{sensorInfo ? <ReactMarkdown>{sensorInfo.markdown}</ReactMarkdown> : "No data available"}
</TabPanel>
<TabPanel value="2">
{sensorInfo ? <ReactMarkdown>{sensorInfo.details}</ReactMarkdown> : "No data available"}
</TabPanel>
</TabContext>
</Box>
);
}

20
src/components/Settings/DeviceSelector.js
View File

@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
class DeviceSelector extends Component { class DeviceSelector extends Component {
@ -22,18 +22,18 @@ class DeviceSelector extends Component {
render(){ render(){
return( return (
<div> <div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography> <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText> <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel> <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.selectedBoard} value={this.props.selectedBoard}
onChange={(e) => this.props.setBoard(e.target.value)} onChange={(e) => this.props.setBoard(e.target.value)}>
>
<MenuItem value="mcu">senseBox MCU</MenuItem> <MenuItem value="mcu">senseBox MCU</MenuItem>
<MenuItem value="mini">senseBox MCU mini</MenuItem> <MenuItem value="mini">senseBox MCU mini</MenuItem>
</Select> </Select>

20
src/components/Settings/LanguageSelector.js
View File

@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
class LanguageSelector extends Component { class LanguageSelector extends Component {
@ -25,18 +25,18 @@ class LanguageSelector extends Component {
} }
render(){ render(){
return( return (
<div> <div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography> <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText> <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel> <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.language} value={this.props.language}
onChange={this.handleChange} onChange={this.handleChange}>
>
<MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem> <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
<MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem> <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
</Select> </Select>

18
src/components/Settings/OtaSelector.js
View File

@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import InputLabel from "@material-ui/core/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import Select from "@material-ui/core/Select"; import Select from "@mui/material/Select";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
class OtaSelector extends Component { class OtaSelector extends Component {
componentDidMount() { componentDidMount() {
@ -33,16 +33,16 @@ class OtaSelector extends Component {
https://sensebox.de/app https://sensebox.de/app
</a> </a>
</FormHelperText> </FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label"> <InputLabel id="demo-simple-select-label">
{Blockly.Msg.settings_statistics} {Blockly.Msg.settings_statistics}
</InputLabel> </InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.platform} value={this.props.platform}
onChange={(e) => this.props.setPlatform(e.target.value)} onChange={(e) => this.props.setPlatform(e.target.value)}>
>
<MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem> <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
<MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem> <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
</Select> </Select>

18
src/components/Settings/RenderSelector.js
View File

@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions';
import * as Blockly from 'blockly/core' import * as Blockly from 'blockly/core'
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
class RenderSelector extends Component { class RenderSelector extends Component {
@ -26,14 +26,14 @@ class RenderSelector extends Component {
<div> <div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography> <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText> <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel> <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.renderer} value={this.props.renderer}
onChange={(e) => this.props.setRenderer(e.target.value)} onChange={(e) => this.props.setRenderer(e.target.value)}>
>
<MenuItem value={'geras'}>Geras</MenuItem> <MenuItem value={'geras'}>Geras</MenuItem>
<MenuItem value={'zelos'}>Zelos</MenuItem> <MenuItem value={'zelos'}>Zelos</MenuItem>
</Select> </Select>

4
src/components/Settings/Settings.js
View File

@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector";
import SoundsSelector from "./SoundsSelector"; import SoundsSelector from "./SoundsSelector";
import DeviceSelector from "./DeviceSelector"; import DeviceSelector from "./DeviceSelector";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Paper from "@material-ui/core/Paper"; import Paper from "@mui/material/Paper";
class Settings extends Component { class Settings extends Component {
componentDidMount() { componentDidMount() {

18
src/components/Settings/SoundsSelector.js
View File

@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import InputLabel from "@material-ui/core/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import Select from "@material-ui/core/Select"; import Select from "@mui/material/Select";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
class SoundsSelector extends Component { class SoundsSelector extends Component {
componentDidMount() { componentDidMount() {
@ -30,16 +30,16 @@ class SoundsSelector extends Component {
> >
{Blockly.Msg.settings_sounds_text} {Blockly.Msg.settings_sounds_text}
</FormHelperText> </FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label"> <InputLabel id="demo-simple-select-label">
{Blockly.Msg.settings_sounds} {Blockly.Msg.settings_sounds}
</InputLabel> </InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.sounds} value={this.props.sounds}
onChange={(e) => this.props.setSounds(e.target.value)} onChange={(e) => this.props.setSounds(e.target.value)}>
>
<MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem> <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
<MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem> <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
</Select> </Select>

18
src/components/Settings/StatsSelector.js
View File

@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions';
import * as Blockly from 'blockly/core' import * as Blockly from 'blockly/core'
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
class StatsSelector extends Component { class StatsSelector extends Component {
@ -25,14 +25,14 @@ class StatsSelector extends Component {
<div> <div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography> <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText> <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
<FormControl> <FormControl variant="standard">
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel> <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
<Select <Select
variant="standard"
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={this.props.statistics} value={this.props.statistics}
onChange={(e) => this.props.setStatistics(e.target.value)} onChange={(e) => this.props.setStatistics(e.target.value)}>
>
<MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem> <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
<MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem> <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
</Select> </Select>

12
src/components/Snackbar.js
View File

@ -1,9 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import MaterialUISnackbar from '@material-ui/core/Snackbar'; import MaterialUISnackbar from '@mui/material/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent'; import SnackbarContent from '@mui/material/SnackbarContent';
import { faTimes } from "@fortawesome/free-solid-svg-icons"; import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -69,8 +69,8 @@ class Snackbar extends Component {
style={{flexWrap: 'nowrap'}} style={{flexWrap: 'nowrap'}}
className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success} className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
action={ action={
<IconButton onClick={this.onClose} style={{color: 'inherit'}}> <IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
<FontAwesomeIcon icon={faTimes} size="xs"/> <FontAwesomeIcon icon={faTimes} size="xs" />
</IconButton> </IconButton>
} }
message={this.props.message} message={this.props.message}

86
src/components/TooltipViewer.js
View File

@ -1,17 +1,43 @@
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Button, Card } from "@mui/material";
import withWidth from "@material-ui/core/withWidth";
import { Card } from "@material-ui/core";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Typography from "@material-ui/core/Typography";
import ReactMarkdown from "react-markdown"; 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) => <WrappedComponent {...props} width="xs" />;
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
class TooltipViewer extends Component { 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() { render() {
return ( return (
<Card <Card
@ -29,14 +55,46 @@ class TooltipViewer extends Component {
{Blockly.Msg.tooltip_viewer} {Blockly.Msg.tooltip_viewer}
</Typography> </Typography>
<ReactMarkdown linkTarget="_blank"> <Typography variant="body2" component="span">
{this.props.tooltip} <ReactMarkdown linkTarget="_blank">
</ReactMarkdown> {this.props.tooltip}
</ReactMarkdown>
{this.props.helpurl !== "" ? ( {store.getState().workspace.code.data ? (
<ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown> <Button
) : null} label="Mehr"
variant="contained"
color="primary"
onClick={() => {
this.openDialog();
}}
>
Sensor Informationen
</Button>
) : (
<ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
)}
</Typography>
</CardContent> </CardContent>
{store.getState().workspace.code.data ? (<Dialog
open={this.state.open}
TransitionComponent={Transition}
keepMounted
aria-describedby="alert-dialog-slide-description"
onClose={() => {
this.toggleDialog();
}}
maxWidth={"md"}
fullWidth={true}
>
<DialogContent>
<SensorInfo></SensorInfo>
</DialogContent>
<DialogActions>
<Button onClick={() => {
this.toggleDialog();
}}>Close</Button>
</DialogActions>
</Dialog>) : (null)}
</Card> </Card>
); );
} }

27
src/components/Tutorial/Assessment.js
View File

@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions";
import BlocklyWindow from "../Blockly/BlocklyWindow"; import BlocklyWindow from "../Blockly/BlocklyWindow";
import WorkspaceFunc from "../Workspace/WorkspaceFunc"; import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import Grid from "@mui/material/Grid";
import Grid from "@material-ui/core/Grid"; import Card from "@mui/material/Card";
import Card from "@material-ui/core/Card"; import Typography from "@mui/material/Typography";
import Typography from "@material-ui/core/Typography";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { initialXml } from "../Blockly/initialXml"; import { initialXml } from "../Blockly/initialXml";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import CodeViewer from "../CodeViewer"; import CodeViewer from "../CodeViewer";
import TooltipViewer from "../TooltipViewer"; import TooltipViewer from "../TooltipViewer";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { faCode } from "@fortawesome/free-solid-svg-icons"; import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 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 remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji"; 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) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
codeOn: { codeOn: {
@ -98,11 +102,10 @@ class Assessment extends Component {
} }
> >
<IconButton <IconButton
className={`showCode ${ className={`showCode ${this.state.codeOn
this.state.codeOn
? this.props.classes.codeOn ? this.props.classes.codeOn
: this.props.classes.codeOff : this.props.classes.codeOff
}`} }`}
style={{ style={{
width: "40px", width: "40px",
height: "40px", height: "40px",
@ -112,8 +115,8 @@ class Assessment extends Component {
zIndex: 21, zIndex: 21,
}} }}
onClick={() => this.onChange()} onClick={() => this.onChange()}
> size="large">
<FontAwesomeIcon icon={faCode} size="xs" /> <FontAwesomeIcon icon={faCode} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<BlocklyWindow <BlocklyWindow

15
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -15,13 +15,13 @@ import * as Blockly from "blockly/core";
import { initialXml } from "../../Blockly//initialXml.js"; import { initialXml } from "../../Blockly//initialXml.js";
import BlocklyWindow from "../../Blockly/BlocklyWindow"; import BlocklyWindow from "../../Blockly/BlocklyWindow";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Switch from "@material-ui/core/Switch"; import Switch from "@mui/material/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@mui/material/FormLabel";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
const styles = (theme) => ({ const styles = (theme) => ({
errorColor: { errorColor: {
@ -139,7 +139,6 @@ class BlocklyExample extends Component {
<Switch <Switch
checked={this.state.checked} checked={this.state.checked}
onChange={(e) => this.onChange(e.target.checked)} onChange={(e) => this.onChange(e.target.checked)}
color="primary"
/> />
} }
/> />

36
src/components/Tutorial/Builder/Builder.js
View File

@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar";
import Public from "./Public"; import Public from "./Public";
import Review from "./Review"; import Review from "./Review";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Backdrop from "@material-ui/core/Backdrop"; import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
import Radio from "@material-ui/core/Radio"; import Radio from "@mui/material/Radio";
import RadioGroup from "@material-ui/core/RadioGroup"; import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import InputLabel from "@material-ui/core/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import Select from "@material-ui/core/Select"; import Select from "@mui/material/Select";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
const styles = (theme) => ({ const styles = (theme) => ({
@ -407,7 +407,7 @@ class Builder extends Component {
<FormControlLabel <FormControlLabel
style={{ color: "black" }} style={{ color: "black" }}
value="new" value="new"
control={<Radio color="primary" />} control={<Radio />}
label={Blockly.Msg.builder_createNew} label={Blockly.Msg.builder_createNew}
labelPlacement="end" labelPlacement="end"
/> />
@ -417,7 +417,7 @@ class Builder extends Component {
style={{ color: "black" }} style={{ color: "black" }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="change" value="change"
control={<Radio color="primary" />} control={<Radio />}
label={Blockly.Msg.builder_changeExisting} label={Blockly.Msg.builder_changeExisting}
labelPlacement="end" labelPlacement="end"
/> />
@ -425,7 +425,7 @@ class Builder extends Component {
style={{ color: "black" }} style={{ color: "black" }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="delete" value="delete"
control={<Radio color="primary" />} control={<Radio />}
label={Blockly.Msg.builder_deleteExisting} label={Blockly.Msg.builder_deleteExisting}
labelPlacement="end" labelPlacement="end"
/> />
@ -470,12 +470,12 @@ class Builder extends Component {
<FormControl variant="outlined" style={{ width: "100%" }}> <FormControl variant="outlined" style={{ width: "100%" }}>
<InputLabel id="select-outlined-label">Tutorial</InputLabel> <InputLabel id="select-outlined-label">Tutorial</InputLabel>
<Select <Select
variant="standard"
color="primary" color="primary"
labelId="select-outlined-label" labelId="select-outlined-label"
value={this.props.id} value={this.props.id}
onChange={(e) => this.onChangeId(e.target.value)} onChange={(e) => this.onChangeId(e.target.value)}
label="Tutorial" label="Tutorial">
>
{filteredTutorials.map((tutorial) => ( {filteredTutorials.map((tutorial) => (
<MenuItem value={tutorial._id}> <MenuItem value={tutorial._id}>
{tutorial.title}{" "} {tutorial.title}{" "}

12
src/components/Tutorial/Builder/Difficulty.js
View File

@ -9,13 +9,13 @@ import {
deleteError, deleteError,
} from "../../../actions/tutorialBuilderActions"; } from "../../../actions/tutorialBuilderActions";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import ReactStars from "react-rating-stars-component"; import ReactStars from "react-rating-stars-component";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import FormGroup from "@material-ui/core/FormGroup"; import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@mui/material/FormLabel";
const styles = (theme) => ({ const styles = (theme) => ({
multiline: { multiline: {
@ -55,7 +55,7 @@ class Difficulty extends Component {
render() { render() {
return ( return (
<FormControl component="fieldset"> <FormControl variant="standard" component="fieldset">
<FormLabel component="legend"> <FormLabel component="legend">
{Blockly.Msg.builder_difficulty} {Blockly.Msg.builder_difficulty}
</FormLabel> </FormLabel>

17
src/components/Tutorial/Builder/Hardware.js
View File

@ -9,14 +9,17 @@ import {
import hardware from "../../../data/hardware.json"; import hardware from "../../../data/hardware.json";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import ImageList from "@mui/material/ImageList";
import ImageList from "@material-ui/core/ImageList"; import ImageListItem from "@mui/material/ImageListItem";
import ImageListItem from "@material-ui/core/ImageListItem"; import ImageListItemBar from "@mui/material/ImageListItemBar";
import ImageListItemBar from "@material-ui/core/ImageListItemBar"; import FormHelperText from "@mui/material/FormHelperText";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormLabel from "@mui/material/FormLabel";
import FormLabel from "@material-ui/core/FormLabel";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { isWidthDown } from "../../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
multiImageListItem: { multiImageListItem: {

12
src/components/Tutorial/Builder/Id.js
View File

@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions'; import { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import OutlinedInput from '@material-ui/core/OutlinedInput'; import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@mui/material/InputLabel';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons"; import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

2
src/components/Tutorial/Builder/MarkdownEditor.js
View File

@ -8,7 +8,7 @@ import {
deleteError, deleteError,
} from "../../../actions/tutorialBuilderActions"; } from "../../../actions/tutorialBuilderActions";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import MarkdownIt from "markdown-it"; import MarkdownIt from "markdown-it";
import Editor from "react-markdown-editor-lite"; import Editor from "react-markdown-editor-lite";
import "react-markdown-editor-lite/lib/index.css"; import "react-markdown-editor-lite/lib/index.css";

19
src/components/Tutorial/Builder/Media.js
View File

@ -5,13 +5,13 @@ import { changeContent, deleteProperty, setError, deleteError } from '../../../a
import Textfield from './Textfield'; import Textfield from './Textfield';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import Switch from '@material-ui/core/Switch'; import Switch from '@mui/material/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
import Radio from '@material-ui/core/Radio'; import Radio from '@mui/material/Radio';
import RadioGroup from '@material-ui/core/RadioGroup'; import RadioGroup from '@mui/material/RadioGroup';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
const styles = (theme) => ({ const styles = (theme) => ({
errorColor: { errorColor: {
@ -97,7 +97,6 @@ class Media extends Component {
<Switch <Switch
checked={this.state.checked} checked={this.state.checked}
onChange={(e) => this.onChangeSwitch(e.target.checked)} onChange={(e) => this.onChangeSwitch(e.target.checked)}
color="primary"
/> />
} }
/> />
@ -106,13 +105,13 @@ class Media extends Component {
<RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}> <RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}>
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{color: 'black'}}
value="picture" value="picture"
control={<Radio color="primary" />} control={<Radio />}
label="Bild" label="Bild"
labelPlacement="end" labelPlacement="end"
/> />
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{color: 'black'}}
value="youtube" value="youtube"
control={<Radio color="primary" />} control={<Radio />}
label="Youtube-Video" label="Youtube-Video"
labelPlacement="end" labelPlacement="end"
/> />

15
src/components/Tutorial/Builder/Public.js
View File

@ -9,14 +9,14 @@ import {
deleteError, deleteError,
} from "../../../actions/tutorialBuilderActions"; } from "../../../actions/tutorialBuilderActions";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import Checkbox from "@material-ui/core/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import FormGroup from "@material-ui/core/FormGroup"; import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@mui/material/FormLabel";
const styles = (theme) => ({ const styles = (theme) => ({
multiline: { multiline: {
@ -52,7 +52,7 @@ class Public extends Component {
render() { render() {
return ( return (
<FormControl component="fieldset"> <FormControl variant="standard" component="fieldset">
<FormLabel component="legend"> <FormLabel component="legend">
{Blockly.Msg.builder_public_head} {Blockly.Msg.builder_public_head}
</FormLabel> </FormLabel>
@ -63,7 +63,6 @@ class Public extends Component {
<Checkbox <Checkbox
checked={this.props.value} checked={this.props.value}
onChange={this.handleChange} onChange={this.handleChange}
color="primary"
name="checkedA" name="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }} inputProps={{ "aria-label": "secondary checkbox" }}
/> />

19
src/components/Tutorial/Builder/Requirements.js
View File

@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { changeContent } from '../../../actions/tutorialBuilderActions'; import { changeContent } from '../../../actions/tutorialBuilderActions';
import FormGroup from '@material-ui/core/FormGroup'; import FormGroup from '@mui/material/FormGroup';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel'; import FormLabel from '@mui/material/FormLabel';
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@material-ui/core/FormControl'; import FormControl from '@mui/material/FormControl';
import * as Blockly from 'blockly' import * as Blockly from 'blockly'
class Requirements extends Component { class Requirements extends Component {
@ -26,11 +26,13 @@ class Requirements extends Component {
render() { render() {
return ( return (
<FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}> <FormControl
variant="standard"
style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
<FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel> <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
<FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText> <FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
<FormGroup> <FormGroup>
{this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) => {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id && tutorial.public).map((tutorial, i) =>
<FormControlLabel <FormControlLabel
key={i} key={i}
control={ control={
@ -39,7 +41,6 @@ class Requirements extends Component {
checked={this.props.value.filter(id => id === tutorial._id).length > 0} checked={this.props.value.filter(id => id === tutorial._id).length > 0}
onChange={(e) => this.onChange(e)} onChange={(e) => this.onChange(e)}
name="requirements" name="requirements"
color="primary"
/> />
} }
label={tutorial.title} label={tutorial.title}

15
src/components/Tutorial/Builder/Review.js
View File

@ -9,14 +9,14 @@ import {
deleteError, deleteError,
} from "../../../actions/tutorialBuilderActions"; } from "../../../actions/tutorialBuilderActions";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import Checkbox from "@material-ui/core/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import FormGroup from "@material-ui/core/FormGroup"; import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@mui/material/FormLabel";
const styles = (theme) => ({ const styles = (theme) => ({
multiline: { multiline: {
@ -52,7 +52,7 @@ class Review extends Component {
render() { render() {
return ( return (
<FormControl component="fieldset"> <FormControl variant="standard" component="fieldset">
<FormLabel component="legend"> <FormLabel component="legend">
{Blockly.Msg.builder_review_head} {Blockly.Msg.builder_review_head}
</FormLabel> </FormLabel>
@ -64,7 +64,6 @@ class Review extends Component {
<Checkbox <Checkbox
checked={this.props.value} checked={this.props.value}
onChange={this.handleChange} onChange={this.handleChange}
color="primary"
name="checkedA" name="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }} inputProps={{ "aria-label": "secondary checkbox" }}
/> />

24
src/components/Tutorial/Builder/Step.js
View File

@ -15,10 +15,10 @@ import BlocklyExample from "./BlocklyExample";
import Requirements from "./Requirements"; import Requirements from "./Requirements";
import Hardware from "./Hardware"; import Hardware from "./Hardware";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import { import {
faPlus, faPlus,
@ -85,8 +85,8 @@ class Step extends Component {
className={this.props.classes.button} className={this.props.classes.button}
style={index === 0 ? {} : { marginBottom: "5px" }} style={index === 0 ? {} : { marginBottom: "5px" }}
onClick={() => this.props.addStep(index + 1)} onClick={() => this.props.addStep(index + 1)}
> size="large">
<FontAwesomeIcon icon={faPlus} size="xs" /> <FontAwesomeIcon icon={faPlus} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
{index !== 0 ? ( {index !== 0 ? (
@ -100,8 +100,8 @@ class Step extends Component {
className={this.props.classes.button} className={this.props.classes.button}
style={{ marginBottom: "5px" }} style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index - 1)} onClick={() => this.props.changeStepIndex(index, index - 1)}
> size="large">
<FontAwesomeIcon icon={faAngleDoubleUp} size="xs" /> <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
@ -113,8 +113,8 @@ class Step extends Component {
className={this.props.classes.button} className={this.props.classes.button}
style={{ marginBottom: "5px" }} style={{ marginBottom: "5px" }}
onClick={() => this.props.changeStepIndex(index, index + 1)} onClick={() => this.props.changeStepIndex(index, index + 1)}
> size="large">
<FontAwesomeIcon icon={faAngleDoubleDown} size="xs" /> <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title={`Schritt ${index + 1} löschen`} arrow> <Tooltip title={`Schritt ${index + 1} löschen`} arrow>
@ -125,8 +125,8 @@ class Step extends Component {
this.props.classes.delete this.props.classes.delete
)} )}
onClick={() => this.props.removeStep(index)} onClick={() => this.props.removeStep(index)}
> size="large">
<FontAwesomeIcon icon={faTrash} size="xs" /> <FontAwesomeIcon icon={faTrash} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>

10
src/components/Tutorial/Builder/StepType.js
View File

@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { changeContent, deleteProperty, deleteError } from '../../../actions/tutorialBuilderActions'; import { changeContent, deleteProperty, deleteError } from '../../../actions/tutorialBuilderActions';
import Radio from '@material-ui/core/Radio'; import Radio from '@mui/material/Radio';
import RadioGroup from '@material-ui/core/RadioGroup'; import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
class StepType extends Component { class StepType extends Component {
@ -23,14 +23,14 @@ class StepType extends Component {
<RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}> <RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}>
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{color: 'black'}}
value="instruction" value="instruction"
control={<Radio color="primary" />} control={<Radio />}
label="Anleitung" label="Anleitung"
labelPlacement="end" labelPlacement="end"
/> />
<FormControlLabel style={{color: 'black'}} <FormControlLabel style={{color: 'black'}}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="task" value="task"
control={<Radio color="primary" />} control={<Radio />}
label="Aufgabe" label="Aufgabe"
labelPlacement="end" labelPlacement="end"
/> />

10
src/components/Tutorial/Builder/Textfield.js
View File

@ -9,11 +9,11 @@ import {
deleteError, deleteError,
} from "../../../actions/tutorialBuilderActions"; } from "../../../actions/tutorialBuilderActions";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import OutlinedInput from "@material-ui/core/OutlinedInput"; import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@mui/material/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
const styles = (theme) => ({ const styles = (theme) => ({
multiline: { multiline: {

32
src/components/Tutorial/Hardware.js
View File

@ -4,18 +4,22 @@ import Dialog from "../Dialog";
import hardware from "../../data/hardware.json"; import hardware from "../../data/hardware.json";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import Link from "@mui/material/Link";
import Link from "@material-ui/core/Link"; import Typography from "@mui/material/Typography";
import Typography from "@material-ui/core/Typography"; import IconButton from "@mui/material/IconButton";
import IconButton from "@material-ui/core/IconButton"; import ImageList from "@mui/material/ImageList";
import ImageList from "@material-ui/core/ImageList"; import ImageListItem from "@mui/material/ImageListItem";
import ImageListItem from "@material-ui/core/ImageListItem"; import ImageListItemBar from "@mui/material/ImageListItemBar";
import ImageListItemBar from "@material-ui/core/ImageListItemBar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpandAlt } from "@fortawesome/free-solid-svg-icons"; import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
expand: { expand: {
"&:hover": { "&:hover": {
@ -51,9 +55,9 @@ class Hardware extends Component {
}; };
render() { render() {
var cols = isWidthDown("md", this.props.width) var cols = isWidthDown("md", window.innerWidth)
? isWidthDown("sm", this.props.width) ? isWidthDown("sm", window.innerWidth)
? isWidthDown("xs", this.props.width) ? isWidthDown("xs", window.innerWidth)
? 2 ? 2
: 3 : 3
: 4 : 4
@ -93,8 +97,8 @@ class Hardware extends Component {
className={this.props.classes.expand} className={this.props.classes.expand}
aria-label="Vollbild" aria-label="Vollbild"
onClick={() => this.handleClickOpen(hardwareInfo)} onClick={() => this.handleClickOpen(hardwareInfo)}
> size="large">
<FontAwesomeIcon icon={faExpandAlt} size="xs" /> <FontAwesomeIcon icon={faExpandAlt} size="xs" />
</IconButton> </IconButton>
} }
/> />
@ -124,7 +128,7 @@ class Hardware extends Component {
target="_blank" target="_blank"
href={this.state.hardwareInfo.url} href={this.state.hardwareInfo.url}
color="primary" color="primary"
> underline="hover">
{Blockly.Msg.tutorials_hardware_here} {Blockly.Msg.tutorials_hardware_here}
</Link> </Link>
. .

7
src/components/Tutorial/HintTutorialExists.js
View File

@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Checkbox from "@material-ui/core/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@mui/material/FormControlLabel";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
@ -78,7 +78,6 @@ class HintTutorialExists extends Component {
checked={this.state.checked} checked={this.state.checked}
onChange={(e) => this.onChange(e)} onChange={(e) => this.onChange(e)}
name="dialog" name="dialog"
color="primary"
/> />
} }
label={Blockly.Msg.labels_donotshowagain} label={Blockly.Msg.labels_donotshowagain}

4
src/components/Tutorial/Instruction.js
View File

@ -4,8 +4,8 @@ import Hardware from "./Hardware";
import Requirement from "./Requirement"; import Requirement from "./Requirement";
import BlocklyWindow from "../Blockly/BlocklyWindow"; import BlocklyWindow from "../Blockly/BlocklyWindow";
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji"; import remarkGemoji from "remark-gemoji";

11
src/components/Tutorial/Requirement.js
View File

@ -4,11 +4,11 @@ import { connect } from "react-redux";
import clsx from "clsx"; import clsx from "clsx";
import { withRouter, Link } from "react-router-dom"; import { withRouter, Link } from "react-router-dom";
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import List from "@material-ui/core/List"; import List from "@mui/material/List";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
@ -166,6 +166,7 @@ class Requirement extends Component {
icon={ icon={
tutorialStatus === "Success" ? faCheck : faTimes tutorialStatus === "Success" ? faCheck : faTimes
} }
/> />
) : ( ) : (
<Typography <Typography

12
src/components/Tutorial/SolutionCheck.js
View File

@ -10,10 +10,10 @@ import Dialog from "../Dialog";
import { checkXml } from "../../helpers/compareXml"; import { checkXml } from "../../helpers/compareXml";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -62,8 +62,8 @@ class SolutionCheck extends Component {
className={`solutionCheck ${this.props.classes.compile}`} className={`solutionCheck ${this.props.classes.compile}`}
style={{ width: "40px", height: "40px", marginRight: "5px" }} style={{ width: "40px", height: "40px", marginRight: "5px" }}
onClick={() => this.check()} onClick={() => this.check()}
> size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" /> <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

11
src/components/Tutorial/StepperHorizontal.js
View File

@ -7,12 +7,12 @@ import { withRouter } from "react-router-dom";
import clsx from "clsx"; import clsx from "clsx";
// import tutorials from '../../data/tutorials'; // import tutorials from '../../data/tutorials';
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -127,6 +127,7 @@ class StepperHorizontal extends Component {
<FontAwesomeIcon <FontAwesomeIcon
className={this.props.classes.icon} className={this.props.classes.icon}
icon={tutorialStatus === "Success" ? faCheck : faTimes} icon={tutorialStatus === "Success" ? faCheck : faTimes}
/> />
</div> </div>
) : null} ) : null}

19
src/components/Tutorial/StepperVertical.js
View File

@ -6,12 +6,12 @@ import { tutorialStep } from "../../actions/tutorialActions";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import clsx from "clsx"; import clsx from "clsx";
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Stepper from "@material-ui/core/Stepper"; import Stepper from "@mui/material/Stepper";
import Step from "@material-ui/core/Step"; import Step from "@mui/material/Step";
import StepLabel from "@material-ui/core/StepLabel"; import StepLabel from "@mui/material/StepLabel";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
const styles = (theme) => ({ const styles = (theme) => ({
verticalStepper: { verticalStepper: {
@ -23,13 +23,12 @@ const styles = (theme) => ({
// borderWidth: '2px', // borderWidth: '2px',
borderRadius: "50%", borderRadius: "50%",
borderColor: theme.palette.secondary.main, borderColor: theme.palette.secondary.main,
width: "12px", width: "1rem",
height: "12px",
margin: "0 auto", margin: "0 auto",
}, },
stepIconLarge: { stepIconLarge: {
width: "24px", width: "2rem",
height: "24px", height: "1rem",
}, },
stepIconLargeSuccess: { stepIconLargeSuccess: {
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,

4
src/components/Tutorial/Tutorial.js
View File

@ -21,8 +21,8 @@ import NotFound from "../NotFound";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import Card from "@material-ui/core/Card"; import Card from "@mui/material/Card";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
class Tutorial extends Component { class Tutorial extends Component {
componentDidMount() { componentDidMount() {

51
src/components/Tutorial/TutorialHome.js
View File

@ -17,11 +17,11 @@ import clsx from "clsx";
import Breadcrumbs from "../Breadcrumbs"; import Breadcrumbs from "../Breadcrumbs";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@mui/material/Paper";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import { import {
faCheck, faCheck,
@ -33,10 +33,11 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import ReactStars from "react-rating-stars-component"; import ReactStars from "react-rating-stars-component";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import DeviceSelection from "../DeviceSelection";
const styles = (theme) => ({ const styles = (theme) => ({
outerDiv: { outerDiv: {
@ -243,14 +244,11 @@ class TutorialHome extends Component {
cy="50%" cy="50%"
fill="none" fill="none"
stroke-width="10" stroke-width="10"
stroke-dashoffset={`${ stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2)) }`}
}`} stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
stroke-dasharray={`${ } ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
75 * 2 * Math.PI * (1 - (50 / 100 - success / 2)) }`}
} ${
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
}`}
></circle> ></circle>
)} )}
{success < 1 && !error ? ( {success < 1 && !error ? (
@ -265,9 +263,8 @@ class TutorialHome extends Component {
cy="50%" cy="50%"
fill="none" fill="none"
stroke-width="10" stroke-width="10"
stroke-dashoffset={`${ stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2)) }`}
}`}
stroke-dasharray={`${75 * 2 * Math.PI}`} stroke-dasharray={`${75 * 2 * Math.PI}`}
></circle> ></circle>
) : null} ) : null}
@ -279,8 +276,8 @@ class TutorialHome extends Component {
tutorialStatus === "Error" tutorialStatus === "Error"
? this.props.classes.outerDivError ? this.props.classes.outerDivError
: tutorialStatus === "Success" : tutorialStatus === "Success"
? this.props.classes.outerDivSuccess ? this.props.classes.outerDivSuccess
: null : null
)} )}
> >
<div className={this.props.classes.innerDiv}> <div className={this.props.classes.innerDiv}>
@ -290,6 +287,7 @@ class TutorialHome extends Component {
icon={ icon={
tutorialStatus === "Success" ? faCheck : faTimes tutorialStatus === "Success" ? faCheck : faTimes
} }
/> />
) : ( ) : (
<Typography <Typography
@ -311,6 +309,7 @@ class TutorialHome extends Component {
); );
})} })}
</Grid> </Grid>
<DeviceSelection />
{this.props.user ? ( {this.props.user ? (
<div> <div>
<h2>User Tutorials</h2> <h2>User Tutorials</h2>
@ -381,8 +380,8 @@ class TutorialHome extends Component {
type: "success", type: "success",
}); });
}} }}
> size="large">
<FontAwesomeIcon icon={faShareAlt} size="xs" /> <FontAwesomeIcon icon={faShareAlt} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
@ -392,8 +391,8 @@ class TutorialHome extends Component {
<IconButton <IconButton
className={`publicTutorial ${this.props.classes.button}`} className={`publicTutorial ${this.props.classes.button}`}
disabled={!tutorial.public} disabled={!tutorial.public}
> size="large">
<FontAwesomeIcon icon={faEye} size="xs" /> <FontAwesomeIcon icon={faEye} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
{tutorial.review ? ( {tutorial.review ? (
@ -404,7 +403,7 @@ class TutorialHome extends Component {
<IconButton <IconButton
className={`publicTutorial ${this.props.classes.button}`} className={`publicTutorial ${this.props.classes.button}`}
disabled={!tutorial.review} disabled={!tutorial.review}
> size="large">
<FontAwesomeIcon icon={faUserCheck} size="xs" /> <FontAwesomeIcon icon={faUserCheck} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

56
src/components/User/Account.js
View File

@ -5,16 +5,16 @@ import { connect } from 'react-redux';
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from '../Breadcrumbs';
import Alert from '../Alert'; import Alert from '../Alert';
import Grid from '@material-ui/core/Grid'; import Grid from '@mui/material/Grid';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import Divider from '@material-ui/core/Divider'; import Divider from '@mui/material/Divider';
import Paper from '@material-ui/core/Paper'; import Paper from '@mui/material/Paper';
import Link from '@material-ui/core/Link'; import Link from '@mui/material/Link';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons"; import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -30,14 +30,19 @@ export class Account extends Component {
<h1>Account</h1> <h1>Account</h1>
<Alert> <Alert>
Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden. Alle Angaben stammen von <Link
color='primary'
rel="noreferrer"
target="_blank"
href={'https://opensensemap.org/'}
underline="hover">openSenseMap</Link> und können dort verwaltet werden.
</Alert> </Alert>
<Paper style={{ width: 'max-content', maxWidth: '100%' }}> <Paper style={{ width: 'max-content', maxWidth: '100%' }}>
<List> <List>
<ListItem> <ListItem>
<Tooltip title='Nutzername'> <Tooltip title='Nutzername'>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
</ListItemIcon> </ListItemIcon>
</Tooltip> </Tooltip>
<ListItemText primary={`Name: ${user.name}`} /> <ListItemText primary={`Name: ${user.name}`} />
@ -45,14 +50,14 @@ export class Account extends Component {
<ListItem> <ListItem>
<Tooltip title='Email'> <Tooltip title='Email'>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faAt} /> <FontAwesomeIcon icon={faAt} />
</ListItemIcon> </ListItemIcon>
</Tooltip> </Tooltip>
<ListItemText primary={`Email: ${user.email}`} /> <ListItemText primary={`Email: ${user.email}`} />
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faUserTag} /> <FontAwesomeIcon icon={faUserTag} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={`Userrolle: ${user.blocklyRole}`} /> <ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
</ListItem> </ListItem>
@ -62,7 +67,12 @@ export class Account extends Component {
<div style={{ marginBottom: '8px' }}> <div style={{ marginBottom: '8px' }}>
{this.props.user.boxes.length < 1 ? {this.props.user.boxes.length < 1 ?
<Typography> <Typography>
Du hast noch keine senseBox registriert. Besuche <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> um eine senseBox zu registrieren. Du hast noch keine senseBox registriert. Besuche <Link
color='primary'
rel="noreferrer"
target="_blank"
href={'https://opensensemap.org/'}
underline="hover">openSenseMap</Link> um eine senseBox zu registrieren.
</Typography> </Typography>
: <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}> : <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert: Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
@ -73,7 +83,13 @@ export class Account extends Component {
var sensors = box.sensors.map(sensor => sensor.title); var sensors = box.sensors.map(sensor => sensor.title);
return ( return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i}> <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}> <Link
rel="noreferrer"
target="_blank"
href={`https://opensensemap.org/explore/${box._id}`}
color="primary"
style={{ textDecoration: 'none', color: 'inherit' }}
underline="hover">
<Paper> <Paper>
<List> <List>
<ListItem> <ListItem>
@ -82,7 +98,7 @@ export class Account extends Component {
<ListItem> <ListItem>
<Tooltip title='Modell'> <Tooltip title='Modell'>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faBox} /> <FontAwesomeIcon icon={faBox} />
</ListItemIcon> </ListItemIcon>
</Tooltip> </Tooltip>
<div> <div>
@ -93,7 +109,7 @@ export class Account extends Component {
<ListItem> <ListItem>
<Tooltip title='Standort'> <Tooltip title='Standort'>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faMapMarkerAlt} /> <FontAwesomeIcon icon={faMapMarkerAlt} />
</ListItemIcon> </ListItemIcon>
</Tooltip> </Tooltip>
<div> <div>
@ -104,7 +120,7 @@ export class Account extends Component {
<ListItem> <ListItem>
<Tooltip title='Sensoren'> <Tooltip title='Sensoren'>
<ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={faCloudSunRain} /> <FontAwesomeIcon icon={faCloudSunRain} />
</ListItemIcon> </ListItemIcon>
</Tooltip> </Tooltip>
<div> <div>
@ -116,7 +132,7 @@ export class Account extends Component {
</Paper> </Paper>
</Link> </Link>
</Grid> </Grid>
) );
})} })}
</Grid> </Grid>
</div> </div>

44
src/components/User/Login.js
View File

@ -10,15 +10,15 @@ import Snackbar from "../Snackbar";
import Alert from "../Alert"; import Alert from "../Alert";
import Breadcrumbs from "../Breadcrumbs"; import Breadcrumbs from "../Breadcrumbs";
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import TextField from "@material-ui/core/TextField"; import TextField from "@mui/material/TextField";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import InputAdornment from "@material-ui/core/InputAdornment"; import InputAdornment from "@mui/material/InputAdornment";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import Link from "@material-ui/core/Link"; import Link from "@mui/material/Link";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
export class Login extends Component { export class Login extends Component {
@ -38,6 +38,19 @@ export class Login extends Component {
}; };
} }
componentDidMount() {
if (this.props.message.id === "LOGIN_FAIL") {
this.setState({
email: "",
password: "",
snackbar: true,
key: Date.now(),
message: Blockly.Msg.messages_LOGIN_FAIL,
type: "error",
});
}
}
componentDidUpdate(props) { componentDidUpdate(props) {
const { message } = this.props; const { message } = this.props;
if (message !== props.message) { if (message !== props.message) {
@ -112,7 +125,7 @@ export class Login extends Component {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
href={"https://opensensemap.org/"} href={"https://opensensemap.org/"}
> underline="hover">
openSenseMap openSenseMap
</Link>{" "} </Link>{" "}
{Blockly.Msg.login_osem_account_02}. {Blockly.Msg.login_osem_account_02}.
@ -125,6 +138,7 @@ export class Login extends Component {
/> />
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
<TextField <TextField
variant="standard"
style={{ marginBottom: "10px" }} style={{ marginBottom: "10px" }}
// variant='outlined' // variant='outlined'
type="text" type="text"
@ -132,9 +146,9 @@ export class Login extends Component {
name="email" name="email"
value={this.state.email} value={this.state.email}
onChange={this.onChange} onChange={this.onChange}
fullWidth={true} fullWidth={true} />
/>
<TextField <TextField
variant="standard"
// variant='outlined' // variant='outlined'
type={this.state.showPassword ? "text" : "password"} type={this.state.showPassword ? "text" : "password"}
label={Blockly.Msg.labels_password} label={Blockly.Msg.labels_password}
@ -147,18 +161,18 @@ export class Login extends Component {
onClick={this.handleClickShowPassword} onClick={this.handleClickShowPassword}
onMouseDown={this.handleMouseDownPassword} onMouseDown={this.handleMouseDownPassword}
edge="end" edge="end"
> size="large">
<FontAwesomeIcon <FontAwesomeIcon
size="xs" size="xs"
icon={this.state.showPassword ? faEyeSlash : faEye} icon={this.state.showPassword ? faEyeSlash : faEye}
/> />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
}} }}
onChange={this.onChange} onChange={this.onChange}
fullWidth={true} fullWidth={true} />
/>
<p> <p>
<Button <Button
color="primary" color="primary"
@ -182,7 +196,7 @@ export class Login extends Component {
target="_blank" target="_blank"
href={"https://opensensemap.org/"} href={"https://opensensemap.org/"}
color="primary" color="primary"
> underline="hover">
{Blockly.Msg.login_lostpassword} {Blockly.Msg.login_lostpassword}
</Link> </Link>
</p> </p>
@ -199,7 +213,7 @@ export class Login extends Component {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
href={"https://opensensemap.org/"} href={"https://opensensemap.org/"}
> underline="hover">
openSenseMap openSenseMap
</Link> </Link>
. .

22
src/components/Workspace/Compile.js
View File

@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions";
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import Backdrop from "@material-ui/core/Backdrop"; import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import Copy from "../copy.svg"; import Copy from "../copy.svg";
import MuiDrawer from "@material-ui/core/Drawer"; import MuiDrawer from "@mui/material/Drawer";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
const styles = (theme) => ({ const styles = (theme) => ({
@ -188,8 +188,8 @@ class Compile extends Component {
<IconButton <IconButton
className={`compileBlocks ${this.props.classes.iconButton}`} className={`compileBlocks ${this.props.classes.iconButton}`}
onClick={() => this.compile()} onClick={() => this.compile()}
> size="large">
<FontAwesomeIcon icon={faClipboardCheck} size="xs" /> <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
) : ( ) : (
@ -202,6 +202,7 @@ class Compile extends Component {
<FontAwesomeIcon <FontAwesomeIcon
icon={faClipboardCheck} icon={faClipboardCheck}
style={{ marginRight: "5px" }} style={{ marginRight: "5px" }}
/>{" "} />{" "}
Kompilieren Kompilieren
</Button> </Button>
@ -302,6 +303,7 @@ class Compile extends Component {
<FontAwesomeIcon <FontAwesomeIcon
icon={faClipboardCheck} icon={faClipboardCheck}
style={{ marginRight: "5px" }} style={{ marginRight: "5px" }}
/>{" "} />{" "}
Starte Übertragung Starte Übertragung
</Button> </Button>

10
src/components/Workspace/CopyCode.js
View File

@ -3,10 +3,10 @@ import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { workspaceName } from "../../actions/workspaceActions"; import { workspaceName } from "../../actions/workspaceActions";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Button from "@material-ui/core/Button"; import Button from "@mui/material/Button";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import { faCopy } from "@fortawesome/free-solid-svg-icons"; import { faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -68,7 +68,7 @@ class CopyCode extends Component {
<IconButton <IconButton
className={`copyCode ${this.props.classes.iconButton}`} className={`copyCode ${this.props.classes.iconButton}`}
onClick={() => this.copyCode()} onClick={() => this.copyCode()}
> size="large">
<FontAwesomeIcon icon={faCopy} size="xs" /> <FontAwesomeIcon icon={faCopy} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

10
src/components/Workspace/DeleteProject.js
View File

@ -7,9 +7,9 @@ import { withRouter } from 'react-router-dom';
import Snackbar from '../Snackbar'; import Snackbar from '../Snackbar';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons"; import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -61,8 +61,8 @@ class DeleteProject extends Component {
<IconButton <IconButton
className={this.props.classes.buttonTrash} className={this.props.classes.buttonTrash}
onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)} onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
> size="large">
<FontAwesomeIcon icon={faTrashAlt} size="xs" /> <FontAwesomeIcon icon={faTrashAlt} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

10
src/components/Workspace/DownloadProject.js
View File

@ -6,9 +6,9 @@ import { saveAs } from 'file-saver';
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace'; import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { faFileDownload } from "@fortawesome/free-solid-svg-icons"; import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -46,8 +46,8 @@ class DownloadProject extends Component {
<IconButton <IconButton
className={`saveBlocks ${this.props.classes.button}`} className={`saveBlocks ${this.props.classes.button}`}
onClick={() => this.downloadXmlFile()} onClick={() => this.downloadXmlFile()}
> size="large">
<FontAwesomeIcon icon={faFileDownload} size="xs" /> <FontAwesomeIcon icon={faFileDownload} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>

4
src/components/Workspace/OpenProject.js
View File

@ -8,8 +8,8 @@ import * as Blockly from 'blockly/core';
import Snackbar from '../Snackbar'; import Snackbar from '../Snackbar';
import Dialog from '../Dialog'; import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { faUpload } from "@fortawesome/free-solid-svg-icons"; import { faUpload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

24
src/components/Workspace/ResetWorkspace.js
View File

@ -10,14 +10,14 @@ import { initialXml } from '../Blockly/initialXml.js';
import Snackbar from '../Snackbar'; import Snackbar from '../Snackbar';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { faShare } from "@fortawesome/free-solid-svg-icons"; import { faShare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Dialog from '../Dialog'; import Dialog from '../Dialog';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
const styles = (theme) => ({ const styles = (theme) => ({
button: { button: {
@ -49,11 +49,11 @@ class ResetWorkspace extends Component {
} }
toggleDialog = () => { toggleDialog = () => {
this.setState({ open: !this.state}); this.setState({ open: !this.state });
} }
openDialog = () => { openDialog = () => {
this.setState({open: true}); this.setState({ open: true });
} }
resetWorkspace = () => { resetWorkspace = () => {
@ -81,8 +81,8 @@ class ResetWorkspace extends Component {
<IconButton <IconButton
className={this.props.classes.button} className={this.props.classes.button}
onClick={() => this.openDialog()} onClick={() => this.openDialog()}
> size="large">
<FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' /> <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -92,7 +92,7 @@ class ResetWorkspace extends Component {
type={this.state.type} type={this.state.type}
key={this.state.key} key={this.state.key}
/> />
<Dialog <Dialog
open={this.state.open} open={this.state.open}
title={Blockly.Msg.resetDialog_headline} title={Blockly.Msg.resetDialog_headline}
content={Blockly.Msg.resetDialog_text} content={Blockly.Msg.resetDialog_text}
@ -100,9 +100,9 @@ class ResetWorkspace extends Component {
onClick={() => { this.toggleDialog(); }} onClick={() => { this.toggleDialog(); }}
button={Blockly.Msg.button_cancel} button={Blockly.Msg.button_cancel}
> <div style={{ marginTop: '10px' }}> > <div style={{ marginTop: '10px' }}>
<Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button> <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
</div></Dialog> </div></Dialog>
</div> </div>
); );
}; };

26
src/components/Workspace/SaveProject.js
View File

@ -9,13 +9,13 @@ import { withRouter } from 'react-router-dom';
import Snackbar from '../Snackbar'; import Snackbar from '../Snackbar';
import Dialog from '../Dialog'; import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import { faSave } from "@fortawesome/free-solid-svg-icons"; import { faSave } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -133,7 +133,7 @@ class SaveProject extends Component {
<IconButton <IconButton
className={this.props.classes.button} className={this.props.classes.button}
onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }} onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
> size="large">
<FontAwesomeIcon icon={faSave} size="xs" /> <FontAwesomeIcon icon={faSave} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -178,7 +178,15 @@ class SaveProject extends Component {
button={'Abbrechen'} button={'Abbrechen'}
> >
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
<TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} /> <TextField
variant="standard"
autoFocus
fullWidth
multiline
placeholder={'Projektbeschreibung'}
value={this.state.description}
onChange={this.setDescription}
style={{ marginBottom: '10px' }} />
<Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button> <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button>
</div> </div>
</Dialog> </Dialog>

8
src/components/Workspace/Screenshot.js
View File

@ -8,9 +8,9 @@ import { saveAs } from "file-saver";
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import { faCamera } from "@fortawesome/free-solid-svg-icons"; import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -82,7 +82,7 @@ class Screenshot extends Component {
<IconButton <IconButton
className={this.props.classes.button} className={this.props.classes.button}
onClick={() => this.getSvg()} onClick={() => this.getSvg()}
> size="large">
<FontAwesomeIcon icon={faCamera} size="xs" /> <FontAwesomeIcon icon={faCamera} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

14
src/components/Workspace/ShareProject.js
View File

@ -16,11 +16,11 @@ import Snackbar from "../Snackbar";
import GridLoader from "react-spinners/GridLoader"; import GridLoader from "react-spinners/GridLoader";
import { EmailShareButton, FacebookShareButton, TwitterShareButton, WhatsappShareButton} from "react-share"; import { EmailShareButton, FacebookShareButton, TwitterShareButton, WhatsappShareButton} from "react-share";
import { EmailIcon, FacebookIcon, TwitterIcon, WhatsappIcon} from "react-share"; import { EmailIcon, FacebookIcon, TwitterIcon, WhatsappIcon} from "react-share";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import { faShareAlt, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons"; import { faShareAlt, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -164,7 +164,7 @@ class WorkspaceFunc extends Component {
<IconButton <IconButton
className={`shareBlocks ${this.props.classes.iconButton}`} className={`shareBlocks ${this.props.classes.iconButton}`}
onClick={() => this.shareBlocks()} onClick={() => this.shareBlocks()}
> size="large">
<FontAwesomeIcon icon={faShareAlt} size="xs" /> <FontAwesomeIcon icon={faShareAlt} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -217,7 +217,7 @@ class WorkspaceFunc extends Component {
type: "success", type: "success",
}); });
}} }}
> size="large">
<FontAwesomeIcon icon={faCopy} size="xs" /> <FontAwesomeIcon icon={faCopy} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

52
src/components/Workspace/TrashcanButtons.js
View File

@ -4,9 +4,9 @@ import { connect } from 'react-redux';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { withStyles } from '@material-ui/core/styles'; import withStyles from '@mui/styles/withStyles';
import { faTimes, faTrash } from "@fortawesome/free-solid-svg-icons"; import { faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -56,30 +56,28 @@ class TrashcanButtons extends Component {
} }
render() { render() {
return ( return this.state.closeTrashFlyout ?
this.state.closeTrashFlyout ? <div>
<div> <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
<Tooltip title={Blockly.Msg.tooltip_trashcan_hide}> <IconButton
<IconButton className={this.props.classes.closeTrash}
className={this.props.classes.closeTrash} style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }} onClick={() => this.closeTrashcan()}
onClick={() => this.closeTrashcan()} size="large">
> <FontAwesomeIcon icon={faTimes} size="xs" />
<FontAwesomeIcon icon={faTimes} size="xs" /> </IconButton>
</IconButton> </Tooltip>
</Tooltip> <Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
<Tooltip title={Blockly.Msg.tooltip_trashcan_delete}> <IconButton
<IconButton className={this.props.classes.deleteTrash}
className={this.props.classes.deleteTrash} style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }} onClick={() => this.clearTrashcan()}
onClick={() => this.clearTrashcan()} size="large">
> <FontAwesomeIcon icon={faTrash} size="xs" />
<FontAwesomeIcon icon={faTrash} size="xs" /> </IconButton>
</IconButton> </Tooltip>
</Tooltip> </div>
</div> : null;
: null
);
}; };
} }

10
src/components/Workspace/WorkspaceFunc.js
View File

@ -75,7 +75,7 @@ class WorkspaceFunc extends Component {
<ResetWorkspace <ResetWorkspace
style={ style={
this.props.projectType === "project" || this.props.projectType === "project" ||
this.props.projectType === "gallery" this.props.projectType === "gallery"
? { marginRight: "5px" } ? { marginRight: "5px" }
: null : null
} }
@ -83,10 +83,10 @@ class WorkspaceFunc extends Component {
) : null} ) : null}
{!this.props.assessment && {!this.props.assessment &&
(this.props.projectType === "project" || (this.props.projectType === "project" ||
this.props.projectType === "gallery") && this.props.projectType === "gallery") &&
this.props.user && this.props.user &&
this.props.user.email === this.props.project.creator ? ( this.props.user.email === this.props.project.creator ? (
<DeleteProject <DeleteProject
project={this.props.project} project={this.props.project}
projectType={this.props.projectType} projectType={this.props.projectType}

53
src/components/Workspace/WorkspaceName.js
View File

@ -7,16 +7,19 @@ import { setDescription, updateProject } from "../../actions/projectActions";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import withStyles from '@mui/styles/withStyles';
import { withStyles } from "@material-ui/core/styles"; import Button from "@mui/material/Button";
import Button from "@material-ui/core/Button"; import Tooltip from "@mui/material/Tooltip";
import Tooltip from "@material-ui/core/Tooltip"; import TextField from "@mui/material/TextField";
import TextField from "@material-ui/core/TextField"; import Typography from "@mui/material/Typography";
import Typography from "@material-ui/core/Typography";
import { faPen } from "@fortawesome/free-solid-svg-icons"; import { faPen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
workspaceName: { workspaceName: {
@ -105,9 +108,8 @@ class WorkspaceName extends Component {
return ( return (
<div style={this.props.style}> <div style={this.props.style}>
<Tooltip <Tooltip
title={`${Blockly.Msg.tooltip_project_title} ${ title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ""
this.props.name ? `: ${this.props.name}` : "" }`}
}`}
arrow arrow
style={{ height: "100%" }} style={{ height: "100%" }}
> >
@ -126,8 +128,8 @@ class WorkspaceName extends Component {
this.props.projectType === "gallery" this.props.projectType === "gallery"
? "Projektdaten ändern" ? "Projektdaten ändern"
: this.props.projectType === "project" : this.props.projectType === "project"
? "Projekt umbenennen" ? "Projekt umbenennen"
: "Projekt benennen", : "Projekt benennen",
content: content:
this.props.projectType === "gallery" this.props.projectType === "gallery"
? "Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf 'Eingabe'." ? "Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf 'Eingabe'."
@ -136,13 +138,13 @@ class WorkspaceName extends Component {
}} }}
> >
{this.props.name && {this.props.name &&
!isWidthDown( !isWidthDown(
this.props.projectType === "project" || this.props.projectType === "project" ||
this.props.projectType === "gallery" this.props.projectType === "gallery"
? "xl" ? "xl"
: "xs", : "xs",
this.props.width this.props.width
) ? ( ) ? (
<Typography style={{ margin: "auto -3px auto 12px" }}> <Typography style={{ margin: "auto -3px auto 12px" }}>
{this.props.name} {this.props.name}
</Typography> </Typography>
@ -150,6 +152,7 @@ class WorkspaceName extends Component {
<div style={{ width: "40px", display: "flex" }}> <div style={{ width: "40px", display: "flex" }}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faPen} icon={faPen}
style={{ height: "18px", width: "18px", margin: "auto" }} style={{ height: "18px", width: "18px", margin: "auto" }}
/> />
</div> </div>
@ -184,34 +187,34 @@ class WorkspaceName extends Component {
> >
<div style={{ marginTop: "10px" }}> <div style={{ marginTop: "10px" }}>
{this.props.projectType === "gallery" || {this.props.projectType === "gallery" ||
this.state.projectType === "gallery" ? ( this.state.projectType === "gallery" ? (
<div> <div>
<TextField <TextField
variant="standard"
autoFocus autoFocus
placeholder={ placeholder={
this.state.saveXml ? "Dateiname" : "Projekttitel" this.state.saveXml ? "Dateiname" : "Projekttitel"
} }
value={this.state.name} value={this.state.name}
onChange={this.setFileName} onChange={this.setFileName}
style={{ marginBottom: "10px" }} style={{ marginBottom: "10px" }} />
/>
<TextField <TextField
variant="standard"
fullWidth fullWidth
multiline multiline
placeholder={"Projektbeschreibung"} placeholder={"Projektbeschreibung"}
value={this.state.description} value={this.state.description}
onChange={this.setDescription} onChange={this.setDescription}
style={{ marginBottom: "10px" }} style={{ marginBottom: "10px" }} />
/>
</div> </div>
) : ( ) : (
<TextField <TextField
variant="standard"
autoFocus autoFocus
placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"} placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"}
value={this.state.name} value={this.state.name}
onChange={this.setFileName} onChange={this.setFileName}
style={{ marginRight: "10px" }} style={{ marginRight: "10px" }} />
/>
)} )}
<Button <Button
disabled={!this.state.name} disabled={!this.state.name}

19
src/components/Workspace/WorkspaceStats.js
View File

@ -4,13 +4,12 @@ import { connect } from "react-redux";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import withStyles from '@mui/styles/withStyles';
import { withStyles } from "@material-ui/core/styles"; import Tooltip from "@mui/material/Tooltip";
import Tooltip from "@material-ui/core/Tooltip"; import IconButton from "@mui/material/IconButton";
import IconButton from "@material-ui/core/IconButton"; import Chip from "@mui/material/Chip";
import Chip from "@material-ui/core/Chip"; import Avatar from "@mui/material/Avatar";
import Avatar from "@material-ui/core/Avatar"; import Popover from "@mui/material/Popover";
import Popover from "@material-ui/core/Popover";
import { import {
faPuzzlePiece, faPuzzlePiece,
@ -21,6 +20,10 @@ import {
faEllipsisH, faEllipsisH,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
stats: { stats: {
@ -174,7 +177,7 @@ class WorkspaceStats extends Component {
<IconButton <IconButton
className={this.props.classes.menu} className={this.props.classes.menu}
onClick={(event) => this.handleClick(event)} onClick={(event) => this.handleClick(event)}
> size="large">
<FontAwesomeIcon icon={faEllipsisH} size="xs" /> <FontAwesomeIcon icon={faEllipsisH} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

BIN
src/data/mcu_opacity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
src/data/mini_opacity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

6
src/helpers/compareXml.js
View File

@ -15,11 +15,13 @@ const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
var blocks; var blocks;
if(originalBlocks.length > userBlocks.length){ if(originalBlocks.length > userBlocks.length){
blocks = originalBlocks.length-userBlocks.length; blocks = originalBlocks.length-userBlocks.length;
return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'}; //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} weniger verwendet als in der hinterlegten Lösung.`, type: 'success'};
} }
else { else {
blocks = userBlocks.length-originalBlocks.length; blocks = userBlocks.length-originalBlocks.length;
return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'}; //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} mehr verwendet als in der hinterlegten Lösung.`, type: 'success'};
} }
} }
}; };

16
src/helpers/handleBreakpoints.js Normal file
View File

@ -0,0 +1,16 @@
export const isWidthDown = (breakpoint, screenWidth) => {
switch (breakpoint) {
case "xs":
return screenWidth < 600;
case "sm":
return screenWidth < 900;
case "md":
return screenWidth < 1200;
case "lg":
return screenWidth < 1536;
case "xl":
return screenWidth >= 1920;
default:
throw new Error("Invalid breakpoint");
}
}

9
src/index.js
View File

@ -3,12 +3,15 @@ import ReactDOM from "react-dom";
import "./index.css"; import "./index.css";
import App from "./App"; import App from "./App";
import * as serviceWorker from "./serviceWorker"; import * as serviceWorker from "./serviceWorker";
import store from "./store";
import { fetchSensors } from "./actions/sensorwikiActions";
store.dispatch(fetchSensors());
fetchSensors();
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <App />,
<App />
</React.StrictMode>,
document.getElementById("root") document.getElementById("root")
); );

14
src/reducers/boardReducer.js
View File

@ -1,12 +1,20 @@
import { BOARD } from '../actions/types'; import { BOARD } from '../actions/types';
import mini_opacity from "../data/mini_opacity.png"
import mcu_opacity from "../data/mcu_opacity.png"
const initialValue = () => { const initialValue = () => {
if (window.localStorage.getItem("board")) { if (window.sessionStorage.getItem("board")) {
return window.localStorage.getItem("board"); setBackgroundImage(window.sessionStorage.getItem("board"));
return window.sessionStorage.getItem("board");
} }
return "bla"; return null;
}; };
const setBackgroundImage = (board) => {
const root = document.querySelector(':root');
root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
}
const initialState = { const initialState = {
board: initialValue() board: initialValue()
}; };

6
src/reducers/index.js
View File

@ -6,7 +6,8 @@ import generalReducer from './generalReducer';
import projectReducer from './projectReducer'; import projectReducer from './projectReducer';
import messageReducer from './messageReducer'; import messageReducer from './messageReducer';
import authReducer from './authReducer'; import authReducer from './authReducer';
import boardReducer from './boardReducer' import boardReducer from './boardReducer';
import sensorwikiReducer from './sensorwikiReducer';
export default combineReducers({ export default combineReducers({
auth: authReducer, auth: authReducer,
@ -16,5 +17,6 @@ export default combineReducers({
builder: tutorialBuilderReducer, builder: tutorialBuilderReducer,
project: projectReducer, project: projectReducer,
general: generalReducer, general: generalReducer,
message: messageReducer message: messageReducer,
sensorwiki: sensorwikiReducer
}); });

10
src/reducers/sensorwikiReducer.js Normal file
View File

@ -0,0 +1,10 @@
const sensors = (state = [] , action) => {
switch(action.type) {
case 'FETCH_SENSORWIKI_SUCCESS':
return action.payload.sensors
default:
return state
}
}
export default sensors