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

Merge pull request #220 from sensebox/dev/migrateMUI

Browse Source 
Dev/migrate mUI
This commit is contained in:
Mario Pesch 2023-01-06 12:59:59 +01:00 committed by GitHub
commit a0bc371bdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
76 changed files with 603 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@ -10,12 +10,15 @@
"@blockly/plugin-typed-variable-modal": "^4.0.5", "@blockly/plugin-typed-variable-modal": "^4.0.5",
"@blockly/workspace-backpack": "^2.0.12", "@blockly/workspace-backpack": "^2.0.12",
"@blockly/zoom-to-fit": "^2.0.14", "@blockly/zoom-to-fit": "^2.0.14",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.19", "@fortawesome/react-fontawesome": "^0.1.19",
"@material-ui/core": "^4.12.4",
"@material-ui/lab": "^4.0.0-alpha.61",
"@monaco-editor/react": "^4.3.1", "@monaco-editor/react": "^4.3.1",
"@mui/lab": "^5.0.0-alpha.110",
"@mui/material": "^5.10.16",
"@mui/styles": "^5.10.16",
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
@ -36,7 +39,7 @@
"react-rating-stars-component": "^2.2.0", "react-rating-stars-component": "^2.2.0",
"react-redux": "^7.2.9", "react-redux": "^7.2.9",
"react-router-dom": "^5.3.3", "react-router-dom": "^5.3.3",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.1",
"react-share": "^4.4.0", "react-share": "^4.4.0",
"react-spinners": "^0.13.3", "react-spinners": "^0.13.3",
"reactour": "^1.18.7", "reactour": "^1.18.7",

2
src/App.css
View File

@ -53,7 +53,7 @@ td {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
text-align: left; text-align: left;
background-color: #4eaf47; border-color: #4eaf47;
color: white; color: white;
} }

4
src/App.js
View File

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

6
src/components/Alert.js
View File

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

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

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

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

@ -611,7 +611,6 @@ class Toolbox extends React.Component {
colour={getColour().procedures} colour={getColour().procedures}
custom="PROCEDURE" custom="PROCEDURE"
></Category> ></Category>
<sep></sep>
<Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}> <Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}>
<Category <Category
name={Blockly.Msg.toolbox_serial} name={Blockly.Msg.toolbox_serial}

6
src/components/Breadcrumbs.js
View File

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

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

@ -2,11 +2,11 @@ import React from "react";
import { useState, useRef } from "react"; import { useState, useRef } from "react";
import { default as MonacoEditor } from "@monaco-editor/react"; import { default as MonacoEditor } from "@monaco-editor/react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Button, Grid } from "@material-ui/core"; import { Button, Grid } from "@mui/material";
import Blockly from "blockly/core"; import Blockly from "blockly/core";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import Drawer from "@material-ui/core/Drawer"; import Drawer from "@mui/material/Drawer";
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import SaveIcon from "./SaveIcon"; import SaveIcon from "./SaveIcon";

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

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

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

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

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

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

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

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

14
src/components/CodeViewer.js
View File

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

8
src/components/DeviceSelection.js
View File

@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Dialog from "./Dialog"; import Dialog from "./Dialog";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { IconButton, Grid, Avatar, Typography } from "@material-ui/core"; import { IconButton, Grid, Avatar, Typography } from "@mui/material";
import { setBoard } from "../actions/boardAction"; import { setBoard } from "../actions/boardAction";
const styles = (theme) => ({ const styles = (theme) => ({
@ -67,7 +67,7 @@ class DeviceSeclection extends Component {
<div> <div>
<Grid container spacing={2} style={{ textAlign: "center" }}> <Grid container spacing={2} style={{ textAlign: "center" }}>
<Grid item xs={6}> <Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mcu")}> <IconButton onClick={(e) => this.onclick(e, "mcu")} size="large">
<Avatar <Avatar
alt="Sensebox MCU" alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png" src="/media/hardware/senseboxmcu.png"
@ -95,7 +95,7 @@ class DeviceSeclection extends Component {
<p>Sensebox ESP</p> <p>Sensebox ESP</p>
</Grid> */} </Grid> */}
<Grid item xs={6}> <Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mini")}> <IconButton onClick={(e) => this.onclick(e, "mini")} size="large">
<Avatar <Avatar
alt="Sensebox Mini" alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png" src="/media/hardware/senseboxmcumini.png"

10
src/components/Dialog.js
View File

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

24
src/components/Faq.js
View File

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

2
src/components/Footer.js
View File

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

10
src/components/Home.js
View File

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

2
src/components/Impressum.js
View File

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

8
src/components/MaxBlocks.js
View File

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

40
src/components/Navbar.js
View File

@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Drawer from "@material-ui/core/Drawer"; import Drawer from "@mui/material/Drawer";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@mui/material/AppBar";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import List from "@material-ui/core/List"; import List from "@mui/material/List";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import LinearProgress from "@material-ui/core/LinearProgress"; import LinearProgress from "@mui/material/LinearProgress";
import Tour from "reactour"; import Tour from "reactour";
import { Badge } from "@material-ui/core"; import { Badge } from "@mui/material";
import { home, assessment } from "./Tour"; import { home, assessment } from "./Tour";
import { import {
faBars, faBars,
@ -40,7 +40,7 @@ import {
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
const styles = (theme) => ({ const styles = (theme) => ({
drawerWidth: { drawerWidth: {
@ -116,7 +116,7 @@ class Navbar extends Component {
onClick={this.toggleDrawer} onClick={this.toggleDrawer}
style={{ margin: "0 10px" }} style={{ margin: "0 10px" }}
className="MenuButton" className="MenuButton"
> size="large">
<FontAwesomeIcon icon={faBars} /> <FontAwesomeIcon icon={faBars} />
</IconButton> </IconButton>
<Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}> <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
@ -142,7 +142,7 @@ class Navbar extends Component {
</Link> </Link>
) : null} ) : null}
{isHome ? ( {isHome ? (
<Tooltip title={Blockly.Msg.tooltip_start_tour} arrow> <Tooltip title={'Start Tour'} arrow>
<IconButton <IconButton
color="inherit" color="inherit"
className={`openTour ${this.props.classes.button}`} className={`openTour ${this.props.classes.button}`}
@ -150,13 +150,13 @@ class Navbar extends Component {
this.openTour(); this.openTour();
}} }}
style={{ margin: "0 30px 0 auto" }} style={{ margin: "0 30px 0 auto" }}
> size="large">
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
) : null} ) : null}
{isAssessment ? ( {isAssessment ? (
<Tooltip title={Blockly.Msg.tooltip_start_tour} arrow> <Tooltip title={'Start tour'} arrow>
<IconButton <IconButton
color="inherit" color="inherit"
className={`openTour ${this.props.classes.button}`} className={`openTour ${this.props.classes.button}`}
@ -164,7 +164,7 @@ class Navbar extends Component {
this.openTour(); this.openTour();
}} }}
style={{ margin: "0 30px 0 auto" }} style={{ margin: "0 30px 0 auto" }}
> size="large">
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -267,7 +267,7 @@ class Navbar extends Component {
<FontAwesomeIcon icon={item.icon} /> <FontAwesomeIcon icon={item.icon} />
</ListItemIcon> </ListItemIcon>
{item.text === "Code Editor" ? ( {item.text === "Code Editor" ? (
<Badge badgeContent={"Experimental"} color="primary"> <Badge badgeContent={"Experimental"} color="primary" overlap="rectangular">
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</Badge> </Badge>
) : ( ) : (

6
src/components/News.js
View File

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

4
src/components/NotFound.js
View File

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

2
src/components/Privacy.js
View File

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

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

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

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

@ -11,13 +11,13 @@ import BlocklyWindow from "../Blockly/BlocklyWindow";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import WorkspaceFunc from "../Workspace/WorkspaceFunc"; import WorkspaceFunc from "../Workspace/WorkspaceFunc";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@mui/material/Paper";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import Backdrop from "@material-ui/core/Backdrop"; import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import DeviceSelection from "../DeviceSelection"; import DeviceSelection from "../DeviceSelection";
const styles = (theme) => ({ const styles = (theme) => ({

10
src/components/SensorInfo.js
View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import Box from "@material-ui/core/Box"; import Box from "@mui/material/Box";
import Tab from "@material-ui/core/Tab"; import Tab from "@mui/material/Tab";
import TabContext from "@material-ui/lab/TabContext"; import TabContext from "@mui/lab/TabContext";
import TabList from "@material-ui/lab/TabList"; import TabList from "@mui/lab/TabList";
import TabPanel from "@material-ui/lab/TabPanel"; import TabPanel from "@mui/lab/TabPanel";
import store from "../store"; import store from "../store";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import * as Blockly from "blockly"; import * as Blockly from "blockly";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10
src/components/Snackbar.js
View File

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

20
src/components/TooltipViewer.js
View File

@ -1,19 +1,21 @@
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { connect } from "react-redux";
import withWidth from "@material-ui/core/withWidth"; import { Button, Card } from "@mui/material";
import { Button, Card } from "@material-ui/core";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@mui/material/CardContent";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import Dialog from "@material-ui/core/Dialog"; import Dialog from "@mui/material/Dialog";
import DialogActions from "@material-ui/core/DialogActions"; import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@material-ui/core/DialogContent"; import DialogContent from "@mui/material/DialogContent";
import Slide from "@material-ui/core/Slide"; import Slide from "@mui/material/Slide";
import SensorInfo from "./SensorInfo"; import SensorInfo from "./SensorInfo";
import store from "../store"; 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) { const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />; return <Slide direction="up" ref={ref} {...props} />;
}); });
@ -53,7 +55,7 @@ class TooltipViewer extends Component {
{Blockly.Msg.tooltip_viewer} {Blockly.Msg.tooltip_viewer}
</Typography> </Typography>
<Typography variant="body2" component="p"> <Typography variant="body2" component="span">
<ReactMarkdown linkTarget="_blank"> <ReactMarkdown linkTarget="_blank">
{this.props.tooltip} {this.props.tooltip}
</ReactMarkdown> </ReactMarkdown>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,11 +17,11 @@ import clsx from "clsx";
import Breadcrumbs from "../Breadcrumbs"; import Breadcrumbs from "../Breadcrumbs";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { alpha } from "@material-ui/core/styles"; import { alpha } from "@mui/material/styles";
import { withStyles } from "@material-ui/core/styles"; import withStyles from '@mui/styles/withStyles';
import Grid from "@material-ui/core/Grid"; import Grid from "@mui/material/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@mui/material/Paper";
import Typography from "@material-ui/core/Typography"; import Typography from "@mui/material/Typography";
import { import {
faCheck, faCheck,
@ -33,10 +33,10 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import ReactStars from "react-rating-stars-component"; import ReactStars from "react-rating-stars-component";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@mui/material/IconButton";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import Divider from "@material-ui/core/Divider"; import Divider from "@mui/material/Divider";
import DeviceSelection from "../DeviceSelection"; import DeviceSelection from "../DeviceSelection";
const styles = (theme) => ({ const styles = (theme) => ({
@ -287,6 +287,7 @@ class TutorialHome extends Component {
icon={ icon={
tutorialStatus === "Success" ? faCheck : faTimes tutorialStatus === "Success" ? faCheck : faTimes
} }
/> />
) : ( ) : (
<Typography <Typography
@ -379,7 +380,7 @@ class TutorialHome extends Component {
type: "success", type: "success",
}); });
}} }}
> size="large">
<FontAwesomeIcon icon={faShareAlt} size="xs" /> <FontAwesomeIcon icon={faShareAlt} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -390,7 +391,7 @@ class TutorialHome extends Component {
<IconButton <IconButton
className={`publicTutorial ${this.props.classes.button}`} className={`publicTutorial ${this.props.classes.button}`}
disabled={!tutorial.public} disabled={!tutorial.public}
> size="large">
<FontAwesomeIcon icon={faEye} size="xs" /> <FontAwesomeIcon icon={faEye} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -402,7 +403,7 @@ class TutorialHome extends Component {
<IconButton <IconButton
className={`publicTutorial ${this.props.classes.button}`} className={`publicTutorial ${this.props.classes.button}`}
disabled={!tutorial.review} disabled={!tutorial.review}
> size="large">
<FontAwesomeIcon icon={faUserCheck} size="xs" /> <FontAwesomeIcon icon={faUserCheck} size="xs" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -7,16 +7,19 @@ import { setDescription, updateProject } from "../../actions/projectActions";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; import withStyles from '@mui/styles/withStyles';
import { withStyles } from "@material-ui/core/styles"; import Button from "@mui/material/Button";
import Button from "@material-ui/core/Button"; import Tooltip from "@mui/material/Tooltip";
import Tooltip from "@material-ui/core/Tooltip"; import TextField from "@mui/material/TextField";
import TextField from "@material-ui/core/TextField"; import Typography from "@mui/material/Typography";
import Typography from "@material-ui/core/Typography";
import { faPen } from "@fortawesome/free-solid-svg-icons"; import { faPen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
const styles = (theme) => ({ const styles = (theme) => ({
workspaceName: { workspaceName: {
@ -105,8 +108,7 @@ class WorkspaceName extends Component {
return ( return (
<div style={this.props.style}> <div style={this.props.style}>
<Tooltip <Tooltip
title={`${Blockly.Msg.tooltip_project_title} ${ title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ""
this.props.name ? `: ${this.props.name}` : ""
}`} }`}
arrow arrow
style={{ height: "100%" }} style={{ height: "100%" }}
@ -150,6 +152,7 @@ class WorkspaceName extends Component {
<div style={{ width: "40px", display: "flex" }}> <div style={{ width: "40px", display: "flex" }}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faPen} icon={faPen}
style={{ height: "18px", width: "18px", margin: "auto" }} style={{ height: "18px", width: "18px", margin: "auto" }}
/> />
</div> </div>
@ -187,31 +190,31 @@ class WorkspaceName extends Component {
this.state.projectType === "gallery" ? ( this.state.projectType === "gallery" ? (
<div> <div>
<TextField <TextField
variant="standard"
autoFocus autoFocus
placeholder={ placeholder={
this.state.saveXml ? "Dateiname" : "Projekttitel" this.state.saveXml ? "Dateiname" : "Projekttitel"
} }
value={this.state.name} value={this.state.name}
onChange={this.setFileName} onChange={this.setFileName}
style={{ marginBottom: "10px" }} style={{ marginBottom: "10px" }} />
/>
<TextField <TextField
variant="standard"
fullWidth fullWidth
multiline multiline
placeholder={"Projektbeschreibung"} placeholder={"Projektbeschreibung"}
value={this.state.description} value={this.state.description}
onChange={this.setDescription} onChange={this.setDescription}
style={{ marginBottom: "10px" }} style={{ marginBottom: "10px" }} />
/>
</div> </div>
) : ( ) : (
<TextField <TextField
variant="standard"
autoFocus autoFocus
placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"} placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"}
value={this.state.name} value={this.state.name}
onChange={this.setFileName} onChange={this.setFileName}
style={{ marginRight: "10px" }} style={{ marginRight: "10px" }} />
/>
)} )}
<Button <Button
disabled={!this.state.name} disabled={!this.state.name}

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

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

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");
}
}

4
src/index.js
View File

@ -11,9 +11,7 @@ store.dispatch(fetchSensors());
fetchSensors(); fetchSensors();
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <App />,
<App />
</React.StrictMode>,
document.getElementById("root") document.getElementById("root")
); );