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

12
src/App.css
View File

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

4
src/App.js
View File

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

9
src/actions/boardAction.js
View File

@ -1,10 +1,15 @@
import {
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) => {
window.sessionStorage.setItem("board", board);
const root = document.querySelector(':root');
root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
dispatch({
type: BOARD,
payload: board,
});
};
};

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);
var xmlDom = Blockly.Xml.workspaceToDom(workspace);
code.xml = Blockly.Xml.domToPrettyText(xmlDom);
var selectedBlock = Blockly.selected
var selectedBlock = Blockly.getSelected
if (selectedBlock !== null) {
code.helpurl = selectedBlock.helpUrl
code.tooltip = selectedBlock.tooltip
if (selectedBlock.data) {
code.data = selectedBlock.data
} else {
code.data = null
}
} else if (selectedBlock === null) {
code.tooltip = Blockly.Msg.tooltip_hint
code.helpurl = ''
code.data = null
}

6
src/components/Alert.js
View File

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

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

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

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

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

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.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
this.data = {name: "hdc1080", connection: "I2C"};
},
};
@ -51,6 +52,7 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = {
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
this.data = {name: "veml6070"};
},
};
@ -91,6 +93,7 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = {
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
this.data = {name: "bmx055"};
},
};
@ -122,6 +125,7 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
this.data = {name: "sds011"};
},
};
@ -155,6 +159,7 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
this.setOutput(true, Types.DECIMAL.typeName);
this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
this.data = {name: "bmp280"};
this.getField("NAME").setValidator(
function (val) {
this.updateShape_(val === "Altitude");
@ -201,6 +206,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
this.data = {name: "bme680"};
},
};
@ -245,6 +251,7 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
this.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
this.data = {name: "hc-sr04"};
},
/**
* Parse XML to restore the number of pins available.
@ -382,6 +389,7 @@ Blockly.Blocks["sensebox_scd30"] = {
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
this.data = {name: "scd30"};
},
onchange: function (e) {
var dropdown = this.getFieldValue("dropdown");
@ -448,6 +456,7 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
this.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
this.data = {name: "smt50"};
},
};
@ -470,6 +479,7 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = {
.appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
this.setOutput(true, Types.NUMBER.typeName);
this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
this.data = {name: "ds18b20"};
},
};
@ -542,6 +552,7 @@ Blockly.Blocks["sensebox_sensor_dps310"] = {
this.setOutput(true, Types.DECIMAL.typeName);
this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
this.data = {name: "dps310"};
this.getField("NAME").setValidator(
function (val) {
this.updateShape_(val === "Altitude");

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

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

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

@ -23,10 +23,12 @@ export const UI = {
variable_DECIMAL: "Kommazahl (float)",
variables_TEXT: "Text (string)",
variables_ARRAY: "Array (array)",
variables_CHARACTER: "char (char)",
variables_CHARACTER: "Buchstabe (char)",
variables_BOOLEAN: "Boolean (boolean)",
variables_NULL: "void (void)",
variables_UNDEF: "undefined",
variables_set: "Schreibe",
variables_to: "",
/**
* Tooltips
@ -154,6 +156,7 @@ export const UI = {
button_next: "nächster Schritt",
button_tutorial_overview: "Tutorial Übersicht",
button_login: "Anmelden",
button_createVariable: "Typisierte Variable erstellen",
/**
*
@ -317,4 +320,14 @@ export const UI = {
"Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
deviceselection_footnote_02: "oder die",
/**
* Sensor Markdown Information
*/
sensorinfo_info: "Informationen zum Sensor",
sensorinfo_description: "Beschreibung",
sensorinfo_measurable_phenos: "Messbare Phänomene",
sensorinfo_manufacturer: "Hersteller",
sensorinfo_lifetime: "Lebensdauer",
sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
};

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

@ -19,14 +19,16 @@ export const UI = {
toolbox_label_internalRTC: "Internal RTC",
variable_NUMBER: "Number (int)",
variable_SHORT_NUMBER: "char",
variable_LONG: " Zahl (long)",
variable_LONG: "Big number (long)",
variable_DECIMAL: "Decimal (float)",
variables_TEXT: "Text (string)",
variables_ARRAY: "Array (array)",
variables_CHARACTER: "char (char)",
variables_CHARACTER: "Character (char)",
variables_BOOLEAN: "Boolean (boolean)",
variables_NULL: "void (void)",
variables_UNDEF: "undefined",
variables_set: "set",
variables_to: "to",
/**
* Tooltips
@ -149,6 +151,7 @@ export const UI = {
button_next: "Next step",
button_tutorial_overview: "Tutorial overview",
button_login: "Login",
button_createVariable: "Create Typed Variable",
/**
*
@ -305,12 +308,23 @@ export const UI = {
"Your code will now be compiled and then downloaded to your computer",
/**
* Device Selction
* Device Selection
* */
deviceselection_head: "Which board are you using?",
deviceselection_keep_selection:
"Save my choice (You can change the board later in the settings)",
deviceselection_footnote:
"Here you can access the old blockly Version for the",
deviceselection_footnote_02: "or the",
/**
* Sensor Markdown Information
* */
sensorinfo_info: "Informationen regarding the Sensor",
sensorinfo_description: "Description",
sensorinfo_measurable_phenos: "Measurable Phenomena",
sensorinfo_manufacturer: "Manufacturer",
sensorinfo_lifetime: "Lifetime",
sensorinfo_explanation: "This information was fetched from [sensors.wiki](https://sensors.wiki). For more information visit the section on this sensor ",
};

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

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

6
src/components/Breadcrumbs.js
View File

@ -3,9 +3,9 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles';
import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
import Typography from '@material-ui/core/Typography';
import withStyles from '@mui/styles/withStyles';
import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

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

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

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

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

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

@ -1,6 +1,6 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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";
const SaveIcon = ({ loading }) => (
@ -17,6 +17,7 @@ const SaveIcon = ({ loading }) => (
<FontAwesomeIcon
style={{ position: "absolute" }}
icon={faCircleNotch}
spin={true}
size="2x"
color="grey"
@ -30,6 +31,7 @@ const SaveIcon = ({ loading }) => (
transform: "translate(-50%,-50%)",
}}
icon={faSave}
color={loading ? "grey" : "green"}
size={loading ? "1x" : "lg"}
/>

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

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

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

@ -1,13 +1,13 @@
import React from "react";
import Blockly from "blockly";
import { useSelector } from "react-redux";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import { LibraryVersions } from "../../data/versions.js";
import { useMonaco } from "@monaco-editor/react";
import { Button } from "@material-ui/core";
import { Button } from "@mui/material";
import SerialMonitor from "./SerialMonitor.js";
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 { connect } from "react-redux";
import withWidth from "@material-ui/core/withWidth";
import { withStyles } from "@material-ui/core/styles";
import MuiAccordion from "@material-ui/core/Accordion";
import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
import { Card } from "@material-ui/core";
import withStyles from '@mui/styles/withStyles';
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import { Card } from "@mui/material";
import * as Blockly from "blockly";
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) => ({
root: {
border: `1px solid ${theme.palette.secondary.main}`,

65
src/components/DeviceSelection.js
View File

@ -3,11 +3,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import Dialog from "./Dialog";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import withStyles from '@mui/styles/withStyles';
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";
const styles = (theme) => ({
@ -27,41 +25,31 @@ const styles = (theme) => ({
class DeviceSeclection extends Component {
constructor(props) {
var previousPageWasAnotherDomain = props.pageVisits === 0;
var userWantToKeepBoard = window.localStorage.getItem("board")
? true
: false;
super(props);
this.state = {
open: userWantToKeepBoard
? !userWantToKeepBoard
: previousPageWasAnotherDomain,
selectedBoard : "",
open: props.selectedBoard ? false : true,
selectedBoard: "",
saveSettings: false,
};
}
toggleDialog = () => {
this.setState({ open: !this.state });
if(this.state.saveSettings){
window.localStorage.setItem("board", this.state.selectedBoard)
}
this.props.setBoard(this.state.selectedBoard)
};
onChange = (e) => {
if (e.target.checked) {
this.setState({ saveSettings: true});
this.setState({ saveSettings: true });
} else {
this.setState({ saveSettings: false});
this.setState({ saveSettings: false });
}
};
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() {
@ -74,26 +62,24 @@ class DeviceSeclection extends Component {
title={Blockly.Msg.deviceselection_head}
content={""}
onClick={this.toggleDialog}
button={Blockly.Msg.button_accept}
disabled={this.state.selectedBoard===""}
disabled={this.state.selectedBoard === ""}
>
<div>
<Grid container spacing={2} style={{ textAlign : "center" }}>
<Grid container spacing={2} style={{ textAlign: "center" }}>
<Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mcu")}>
<IconButton onClick={(e) => this.onclick(e, "mcu")} size="large">
<Avatar
alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png"
style={{
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width: "20vw",
height: "20vw"
}}
/>
</IconButton>
<p>senseBox MCU</p>
</Grid>
{/* <Grid item xs={4}>
<IconButton onClick={(e) => this.onclick(e, "esp")}>
<Avatar
@ -109,13 +95,13 @@ class DeviceSeclection extends Component {
<p>Sensebox ESP</p>
</Grid> */}
<Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mini")}>
<IconButton onClick={(e) => this.onclick(e, "mini")} size="large">
<Avatar
alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png"
style={{
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width: "20vw",
height: "20vw"
}}
/>
@ -124,21 +110,6 @@ class DeviceSeclection extends Component {
</Grid>
</Grid>
</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" >
{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>
@ -158,5 +129,5 @@ const mapStateToProps = (state) => ({
export default connect(
mapStateToProps,
{setBoard}
{ setBoard }
)(withStyles(styles, { withTheme: true })(DeviceSeclection));

10
src/components/Dialog.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import MaterialUIDialog from '@material-ui/core/Dialog';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import MaterialUIDialog from '@mui/material/Dialog';
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 Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown";
import Container from "@material-ui/core/Container";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import rehypeRaw from "rehype-raw";
import Container from "@mui/material/Container";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FaqQuestions } from "../data/faq";
@ -46,25 +47,26 @@ class Faq extends Component {
<h1>FAQ</h1>
{FaqQuestions().map((object, i) => {
return (
<ExpansionPanel
<Accordion
expanded={panel === `panel${i}`}
onChange={() => this.handleChange(`panel${i}`)}
>
<ExpansionPanelSummary
<AccordionSummary
expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
>
<Typography variant="h6">{object.question}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</AccordionSummary>
<AccordionDetails>
<Typography>
<ReactMarkdown
className="news"
allowDangerousHtml="true"
children={object.answer}
rehypePlugins={[rehypeRaw]}
></ReactMarkdown>
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</AccordionDetails>
</Accordion>
);
})}
{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 Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
class Footer extends Component {
render() {

10
src/components/Home.js
View File

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

2
src/components/Impressum.js
View File

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

8
src/components/MaxBlocks.js
View File

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

263
src/components/Navbar.js
View File

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

6
src/components/News.js
View File

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

4
src/components/NotFound.js
View File

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

2
src/components/Privacy.js
View File

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

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

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

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

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

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 InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import FormHelperText from '@mui/material/FormHelperText';
class DeviceSelector extends Component {
@ -22,18 +22,18 @@ class DeviceSelector extends Component {
render(){
return(
return (
<div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
<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>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
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="mini">senseBox MCU mini</MenuItem>
</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 InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import FormHelperText from '@mui/material/FormHelperText';
class LanguageSelector extends Component {
@ -25,18 +25,18 @@ class LanguageSelector extends Component {
}
render(){
return(
return (
<div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
<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>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
value={this.props.language}
onChange={this.handleChange}
>
onChange={this.handleChange}>
<MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
<MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
</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 InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import Typography from "@material-ui/core/Typography";
import FormHelperText from "@material-ui/core/FormHelperText";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
class OtaSelector extends Component {
componentDidMount() {
@ -33,16 +33,16 @@ class OtaSelector extends Component {
https://sensebox.de/app
</a>
</FormHelperText>
<FormControl>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{Blockly.Msg.settings_statistics}
</InputLabel>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
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={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
</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 InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import FormHelperText from '@mui/material/FormHelperText';
class RenderSelector extends Component {
@ -26,14 +26,14 @@ class RenderSelector extends Component {
<div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
<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>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
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={'zelos'}>Zelos</MenuItem>
</Select>

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

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

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

@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions";
import * as Blockly from "blockly/core";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import Typography from "@material-ui/core/Typography";
import FormHelperText from "@material-ui/core/FormHelperText";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
class SoundsSelector extends Component {
componentDidMount() {
@ -30,16 +30,16 @@ class SoundsSelector extends Component {
>
{Blockly.Msg.settings_sounds_text}
</FormHelperText>
<FormControl>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{Blockly.Msg.settings_sounds}
</InputLabel>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
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={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
</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 InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import FormHelperText from '@mui/material/FormHelperText';
class StatsSelector extends Component {
@ -25,14 +25,14 @@ class StatsSelector extends Component {
<div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
<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>
<Select
variant="standard"
labelId="demo-simple-select-label"
id="demo-simple-select"
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={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
</Select>

12
src/components/Snackbar.js
View File

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

78
src/components/TooltipViewer.js
View File

@ -1,17 +1,43 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import withWidth from "@material-ui/core/withWidth";
import { Card } from "@material-ui/core";
import { Button, Card } from "@mui/material";
import * as Blockly from "blockly";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import ReactMarkdown from "react-markdown";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import Slide from "@mui/material/Slide";
import SensorInfo from "./SensorInfo";
import store from "../store";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
class TooltipViewer extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
open: false,
};
}
toggleDialog = () => {
this.setState({ open: !this.state });
};
openDialog = () => {
this.setState({ open: true });
};
render() {
return (
<Card
@ -29,14 +55,46 @@ class TooltipViewer extends Component {
{Blockly.Msg.tooltip_viewer}
</Typography>
<Typography variant="body2" component="span">
<ReactMarkdown linkTarget="_blank">
{this.props.tooltip}
</ReactMarkdown>
{this.props.helpurl !== "" ? (
{store.getState().workspace.code.data ? (
<Button
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>
) : null}
)}
</Typography>
</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>
);
}

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

@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions";
import BlocklyWindow from "../Blockly/BlocklyWindow";
import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import Grid from "@material-ui/core/Grid";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";
import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
import * as Blockly from "blockly";
import { initialXml } from "../Blockly/initialXml";
import IconButton from "@material-ui/core/IconButton";
import IconButton from "@mui/material/IconButton";
import CodeViewer from "../CodeViewer";
import TooltipViewer from "../TooltipViewer";
import Tooltip from "@material-ui/core/Tooltip";
import Tooltip from "@mui/material/Tooltip";
import ReactMarkdown from "react-markdown";
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { withStyles } from "@material-ui/core/styles";
import withStyles from '@mui/styles/withStyles';
import remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji";
import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({
codeOn: {
@ -98,8 +102,7 @@ class Assessment extends Component {
}
>
<IconButton
className={`showCode ${
this.state.codeOn
className={`showCode ${this.state.codeOn
? this.props.classes.codeOn
: this.props.classes.codeOff
}`}
@ -112,7 +115,7 @@ class Assessment extends Component {
zIndex: 21,
}}
onClick={() => this.onChange()}
>
size="large">
<FontAwesomeIcon icon={faCode} size="xs" />
</IconButton>
</Tooltip>

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

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

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

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

@ -9,14 +9,17 @@ import {
import hardware from "../../../data/hardware.json";
import { withStyles } from "@material-ui/core/styles";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import ImageList from "@material-ui/core/ImageList";
import ImageListItem from "@material-ui/core/ImageListItem";
import ImageListItemBar from "@material-ui/core/ImageListItemBar";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormLabel from "@material-ui/core/FormLabel";
import withStyles from '@mui/styles/withStyles';
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import FormHelperText from "@mui/material/FormHelperText";
import FormLabel from "@mui/material/FormLabel";
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) => ({
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 { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import withStyles from '@mui/styles/withStyles';
import Button from '@mui/material/Button';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

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

@ -8,7 +8,7 @@ import {
deleteError,
} from "../../../actions/tutorialBuilderActions";
import FormControl from "@material-ui/core/FormControl";
import FormControl from "@mui/material/FormControl";
import MarkdownIt from "markdown-it";
import Editor from "react-markdown-editor-lite";
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 { withStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Button from '@material-ui/core/Button';
import withStyles from '@mui/styles/withStyles';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormHelperText from '@mui/material/FormHelperText';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Button from '@mui/material/Button';
const styles = (theme) => ({
errorColor: {
@ -97,7 +97,6 @@ class Media extends Component {
<Switch
checked={this.state.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);}}>
<FormControlLabel style={{color: 'black'}}
value="picture"
control={<Radio color="primary" />}
control={<Radio />}
label="Bild"
labelPlacement="end"
/>
<FormControlLabel style={{color: 'black'}}
value="youtube"
control={<Radio color="primary" />}
control={<Radio />}
label="Youtube-Video"
labelPlacement="end"
/>

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

@ -9,14 +9,14 @@ import {
deleteError,
} from "../../../actions/tutorialBuilderActions";
import { withStyles } from "@material-ui/core/styles";
import withStyles from '@mui/styles/withStyles';
import * as Blockly from "blockly";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import Checkbox from "@mui/material/Checkbox";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
const styles = (theme) => ({
multiline: {
@ -52,7 +52,7 @@ class Public extends Component {
render() {
return (
<FormControl component="fieldset">
<FormControl variant="standard" component="fieldset">
<FormLabel component="legend">
{Blockly.Msg.builder_public_head}
</FormLabel>
@ -63,7 +63,6 @@ class Public extends Component {
<Checkbox
checked={this.props.value}
onChange={this.handleChange}
color="primary"
name="checkedA"
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 { changeContent } from '../../../actions/tutorialBuilderActions';
import FormGroup from '@material-ui/core/FormGroup';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@mui/material/FormGroup';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import * as Blockly from 'blockly'
class Requirements extends Component {
@ -26,11 +26,13 @@ class Requirements extends Component {
render() {
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>
<FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
<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
key={i}
control={
@ -39,7 +41,6 @@ class Requirements extends Component {
checked={this.props.value.filter(id => id === tutorial._id).length > 0}
onChange={(e) => this.onChange(e)}
name="requirements"
color="primary"
/>
}
label={tutorial.title}

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

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

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

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

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

@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { changeContent, deleteProperty, deleteError } from '../../../actions/tutorialBuilderActions';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
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)}>
<FormControlLabel style={{color: 'black'}}
value="instruction"
control={<Radio color="primary" />}
control={<Radio />}
label="Anleitung"
labelPlacement="end"
/>
<FormControlLabel style={{color: 'black'}}
disabled={this.props.index === 0}
value="task"
control={<Radio color="primary" />}
control={<Radio />}
label="Aufgabe"
labelPlacement="end"
/>

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

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

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

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

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

@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import Dialog from "../Dialog";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import withStyles from '@mui/styles/withStyles';
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown";
@ -78,7 +78,6 @@ class HintTutorialExists extends Component {
checked={this.state.checked}
onChange={(e) => this.onChange(e)}
name="dialog"
color="primary"
/>
}
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 BlocklyWindow from "../Blockly/BlocklyWindow";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
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 { withRouter, Link } from "react-router-dom";
import { alpha } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List";
import Tooltip from "@material-ui/core/Tooltip";
import { alpha } from "@mui/material/styles";
import withStyles from '@mui/styles/withStyles';
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import Tooltip from "@mui/material/Tooltip";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
@ -166,6 +166,7 @@ class Requirement extends Component {
icon={
tutorialStatus === "Success" ? faCheck : faTimes
}
/>
) : (
<Typography

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

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

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

@ -7,12 +7,12 @@ import { withRouter } from "react-router-dom";
import clsx from "clsx";
// 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 Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";
import withStyles from '@mui/styles/withStyles';
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
import Button from "@mui/material/Button";
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -127,6 +127,7 @@ class StepperHorizontal extends Component {
<FontAwesomeIcon
className={this.props.classes.icon}
icon={tutorialStatus === "Success" ? faCheck : faTimes}
/>
</div>
) : 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 clsx from "clsx";
import { alpha } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/core/styles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import Tooltip from "@material-ui/core/Tooltip";
import { alpha } from "@mui/material/styles";
import withStyles from '@mui/styles/withStyles';
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Tooltip from "@mui/material/Tooltip";
const styles = (theme) => ({
verticalStepper: {
@ -23,13 +23,12 @@ const styles = (theme) => ({
// borderWidth: '2px',
borderRadius: "50%",
borderColor: theme.palette.secondary.main,
width: "12px",
height: "12px",
width: "1rem",
margin: "0 auto",
},
stepIconLarge: {
width: "24px",
height: "24px",
width: "2rem",
height: "1rem",
},
stepIconLargeSuccess: {
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 { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import Card from "@mui/material/Card";
import Button from "@mui/material/Button";
class Tutorial extends Component {
componentDidMount() {

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

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

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

@ -5,16 +5,16 @@ import { connect } from 'react-redux';
import Breadcrumbs from '../Breadcrumbs';
import Alert from '../Alert';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import Tooltip from '@material-ui/core/Tooltip';
import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -30,7 +30,12 @@ export class Account extends Component {
<h1>Account</h1>
<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>
<Paper style={{ width: 'max-content', maxWidth: '100%' }}>
<List>
@ -62,7 +67,12 @@ export class Account extends Component {
<div style={{ marginBottom: '8px' }}>
{this.props.user.boxes.length < 1 ?
<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 style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
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);
return (
<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>
<List>
<ListItem>
@ -116,7 +132,7 @@ export class Account extends Component {
</Paper>
</Link>
</Grid>
)
);
})}
</Grid>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -10,14 +10,14 @@ import { initialXml } from '../Blockly/initialXml.js';
import Snackbar from '../Snackbar';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import withStyles from '@mui/styles/withStyles';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { faShare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Dialog from '../Dialog';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
const styles = (theme) => ({
button: {
@ -49,11 +49,11 @@ class ResetWorkspace extends Component {
}
toggleDialog = () => {
this.setState({ open: !this.state});
this.setState({ open: !this.state });
}
openDialog = () => {
this.setState({open: true});
this.setState({ open: true });
}
resetWorkspace = () => {
@ -81,7 +81,7 @@ class ResetWorkspace extends Component {
<IconButton
className={this.props.classes.button}
onClick={() => this.openDialog()}
>
size="large">
<FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
</IconButton>
</Tooltip>

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

@ -9,13 +9,13 @@ import { withRouter } from 'react-router-dom';
import Snackbar from '../Snackbar';
import Dialog from '../Dialog';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import withStyles from '@mui/styles/withStyles';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import TextField from '@mui/material/TextField';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { faSave } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -133,7 +133,7 @@ class SaveProject extends Component {
<IconButton
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()) }}
>
size="large">
<FontAwesomeIcon icon={faSave} size="xs" />
</IconButton>
</Tooltip>
@ -178,7 +178,15 @@ class SaveProject extends Component {
button={'Abbrechen'}
>
<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>
</div>
</Dialog>

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

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

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

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

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

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

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

@ -7,16 +7,19 @@ import { setDescription, updateProject } from "../../actions/projectActions";
import Snackbar from "../Snackbar";
import Dialog from "../Dialog";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import withStyles from '@mui/styles/withStyles';
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { faPen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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) => ({
workspaceName: {
@ -105,8 +108,7 @@ class WorkspaceName extends Component {
return (
<div style={this.props.style}>
<Tooltip
title={`${Blockly.Msg.tooltip_project_title} ${
this.props.name ? `: ${this.props.name}` : ""
title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ""
}`}
arrow
style={{ height: "100%" }}
@ -150,6 +152,7 @@ class WorkspaceName extends Component {
<div style={{ width: "40px", display: "flex" }}>
<FontAwesomeIcon
icon={faPen}
style={{ height: "18px", width: "18px", margin: "auto" }}
/>
</div>
@ -187,31 +190,31 @@ class WorkspaceName extends Component {
this.state.projectType === "gallery" ? (
<div>
<TextField
variant="standard"
autoFocus
placeholder={
this.state.saveXml ? "Dateiname" : "Projekttitel"
}
value={this.state.name}
onChange={this.setFileName}
style={{ marginBottom: "10px" }}
/>
style={{ marginBottom: "10px" }} />
<TextField
variant="standard"
fullWidth
multiline
placeholder={"Projektbeschreibung"}
value={this.state.description}
onChange={this.setDescription}
style={{ marginBottom: "10px" }}
/>
style={{ marginBottom: "10px" }} />
</div>
) : (
<TextField
variant="standard"
autoFocus
placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"}
value={this.state.name}
onChange={this.setFileName}
style={{ marginRight: "10px" }}
/>
style={{ marginRight: "10px" }} />
)}
<Button
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 withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import { withStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import IconButton from "@material-ui/core/IconButton";
import Chip from "@material-ui/core/Chip";
import Avatar from "@material-ui/core/Avatar";
import Popover from "@material-ui/core/Popover";
import withStyles from '@mui/styles/withStyles';
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
import Chip from "@mui/material/Chip";
import Avatar from "@mui/material/Avatar";
import Popover from "@mui/material/Popover";
import {
faPuzzlePiece,
@ -21,6 +20,10 @@ import {
faEllipsisH,
} from "@fortawesome/free-solid-svg-icons";
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) => ({
stats: {
@ -174,7 +177,7 @@ class WorkspaceStats extends Component {
<IconButton
className={this.props.classes.menu}
onClick={(event) => this.handleClick(event)}
>
size="large">
<FontAwesomeIcon icon={faEllipsisH} size="xs" />
</IconButton>
</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;
if(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 {
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 App from "./App";
import * as serviceWorker from "./serviceWorker";
import store from "./store";
import { fetchSensors } from "./actions/sensorwikiActions";
store.dispatch(fetchSensors());
fetchSensors();
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
<App />,
document.getElementById("root")
);

14
src/reducers/boardReducer.js
View File

@ -1,12 +1,20 @@
import { BOARD } from '../actions/types';
import mini_opacity from "../data/mini_opacity.png"
import mcu_opacity from "../data/mcu_opacity.png"
const initialValue = () => {
if (window.localStorage.getItem("board")) {
return window.localStorage.getItem("board");
if (window.sessionStorage.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 = {
board: initialValue()
};

6
src/reducers/index.js
View File

@ -6,7 +6,8 @@ import generalReducer from './generalReducer';
import projectReducer from './projectReducer';
import messageReducer from './messageReducer';
import authReducer from './authReducer';
import boardReducer from './boardReducer'
import boardReducer from './boardReducer';
import sensorwikiReducer from './sensorwikiReducer';
export default combineReducers({
auth: authReducer,
@ -16,5 +17,6 @@ export default combineReducers({
builder: tutorialBuilderReducer,
project: projectReducer,
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