diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 7d6100c..5322ad3 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -26,8 +26,8 @@ const CodeEditor = (props) => { const [resetDialog, setResetDialog] = useState(false); const [blocklyCode, setBlocklyCode] = useState(""); const [defaultValue, setDefaultValue] = useState( - sessionStorage.getItem("ArduinoCode") - ? sessionStorage.getItem("ArduinoCode") + localStorage.getItem("ArduinoCode") + ? localStorage.getItem("ArduinoCode") : ` #include //needs to be always included @@ -129,7 +129,7 @@ void loop() { }; const saveValue = () => { - sessionStorage.setItem("ArduinoCode", value); + localStorage.setItem("ArduinoCode", value); setAutoSave(true); setTimeout(() => setAutoSave(false), 1000); }; diff --git a/src/components/CodeEditor/SaveIcon.js b/src/components/CodeEditor/SaveIcon.js index 739b4b4..0a7d8e5 100644 --- a/src/components/CodeEditor/SaveIcon.js +++ b/src/components/CodeEditor/SaveIcon.js @@ -1,93 +1,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useSelector } from "react-redux"; -import { - faCircleNotch, - faSave, - faSpinner, -} from "@fortawesome/free-solid-svg-icons"; +import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons"; import Tooltip from "@material-ui/core/Tooltip"; -import { IconButton } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; -const SaveIcon = ({ loading }) => { - const value = useSelector((state) => state.general.autoSave); - - return ( -
- {value === true ? ( - - - {loading && ( - - )} - - - - ) : ( - - { - this.propTypes.setAutoSave(true); - }} - > - {loading && ( - - )} - - - +const SaveIcon = ({ loading }) => ( + +
+ {loading && ( + )} +
- ); -}; - -SaveIcon.propTypes = { - setAutoSave: PropTypes.func.isRequired, - autoSave: PropTypes.bool.isRequired, -}; + +); export default SaveIcon; diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js index 856272c..adfb095 100644 --- a/src/components/CodeViewer.js +++ b/src/components/CodeViewer.js @@ -1,30 +1,30 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; import Prism from "prismjs"; import "prismjs/themes/prism.css"; import "prismjs/plugins/line-numbers/prism-line-numbers"; import "prismjs/plugins/line-numbers/prism-line-numbers.css"; - -import withWidth from '@material-ui/core/withWidth'; -import { withStyles } from '@material-ui/core/styles'; -import MuiAccordion from '@material-ui/core/Accordion'; -import MuiAccordionSummary from '@material-ui/core/AccordionSummary'; -import MuiAccordionDetails from '@material-ui/core/AccordionDetails'; -import { Card } from '@material-ui/core'; -import * as Blockly from 'blockly' - +import withWidth from "@material-ui/core/withWidth"; +import { withStyles } from "@material-ui/core/styles"; +import MuiAccordion from "@material-ui/core/Accordion"; +import MuiAccordionSummary from "@material-ui/core/AccordionSummary"; +import MuiAccordionDetails from "@material-ui/core/AccordionDetails"; +import { Card, Switch } from "@material-ui/core"; +import * as Blockly from "blockly"; +import { default as MonacoEditor } from "@monaco-editor/react"; +import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react"; const Accordion = withStyles((theme) => ({ root: { border: `1px solid ${theme.palette.secondary.main}`, - boxShadow: 'none', - '&:before': { - display: 'none', + boxShadow: "none", + "&:before": { + display: "none", }, - '&$expanded': { - margin: 'auto', + "&$expanded": { + margin: "auto", }, }, expanded: {}, @@ -34,15 +34,15 @@ const AccordionSummary = withStyles((theme) => ({ root: { backgroundColor: theme.palette.secondary.main, borderBottom: `1px solid white`, - marginBottom: '-1px', - minHeight: '50px', - '&$expanded': { - minHeight: '50px', + marginBottom: "-1px", + minHeight: "50px", + "&$expanded": { + minHeight: "50px", }, }, content: { - '&$expanded': { - margin: '12px 0', + "&$expanded": { + margin: "12px 0", }, }, expanded: {}, @@ -54,40 +54,60 @@ const AccordionDetails = withStyles((theme) => ({ }, }))(MuiAccordionDetails); - class CodeViewer extends Component { - constructor(props) { super(props); this.state = { + code: this.props.arduino, + changed: false, expanded: true, - componentHeight: null + componentHeight: null, }; this.myDiv = React.createRef(); } componentDidMount() { - Prism.highlightAll(); - this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' }); + this.setState({ componentHeight: this.myDiv.current.offsetHeight + "px" }); } - componentDidUpdate(props, state) { - if (this.myDiv.current && this.myDiv.current.offsetHeight + 'px' !== this.state.componentHeight) { - this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' }); + componentDidUpdate(prevProps, prevState) { + // if (this.props.arduino !== prevProps.arduino) { + // this.setState({ changed: true }); + + // console.log(`code changed: ${this.state.changed}`); + // if (this.state.changed && prevState.code !== this.props.arduino) { + // this.setState({ code: this.props.arduino }); + // this.setState({ changed: false }); + // } + + // if (this.state.code !== prevState.code && this.state.changed) { + // this.setState({ changed: false }); + // } + + // if (this.props.arduino !== this.state.code) { + // this.setState({ changed: true }); + // //this.setState({ code: this.props.arduino }); + // } + + if ( + this.myDiv.current && + this.myDiv.current.offsetHeight + "px" !== this.state.componentHeight + ) { + this.setState({ + componentHeight: this.myDiv.current.offsetHeight + "px", + }); } - Prism.highlightAll(); } onChange = () => { this.setState({ expanded: !this.state.expanded }); - - } + }; render() { - var curlyBrackets = '{ }'; - var unequal = '<>'; + var curlyBrackets = "{ }"; + var unequal = "<>"; return ( - + - {curlyBrackets} -
{Blockly.Msg.codeviewer_arduino}
+ + {curlyBrackets} + +
+ {Blockly.Msg.codeviewer_arduino} +
- - 
-              
-                {this.props.arduino}
-              
-
+ + - {unequal} -
{Blockly.Msg.codeviewer_xml}
+ + {unequal} + +
+ {Blockly.Msg.codeviewer_xml} +
- - 
-              
-                {`${this.props.xml}`}
-              
-
+ + ); - }; + } } CodeViewer.propTypes = { arduino: PropTypes.string.isRequired, xml: PropTypes.string.isRequired, - tooltip: PropTypes.string.isRequired + tooltip: PropTypes.string.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ arduino: state.workspace.code.arduino, xml: state.workspace.code.xml, - tooltip: state.workspace.code.tooltip + tooltip: state.workspace.code.tooltip, }); export default connect(mapStateToProps, null)(withWidth()(CodeViewer)); diff --git a/src/components/Home.js b/src/components/Home.js index de833e3..de58de8 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -22,8 +22,7 @@ import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import TooltipViewer from "./TooltipViewer"; import Dialog from "./Dialog"; -import AutoSave from "./Workspace/AutoSave"; - +// import Autosave from "./Workspace/AutoSave"; const styles = (theme) => ({ codeOn: { backgroundColor: theme.palette.primary.main, @@ -55,7 +54,7 @@ class Home extends Component { key: "", message: "", open: true, - initialXml: sessionStorage.getItem("autoSaveXML"), + initialXml: localStorage.getItem("autoSaveXML"), }; } @@ -116,7 +115,6 @@ class Home extends Component { render() { return (
- {this.props.statistics ? (
@@ -127,6 +125,7 @@ class Home extends Component { className="workspaceFunc" style={{ float: "right", height: "40px", marginBottom: "20px" }} > + {/* */} - + {item.text === "CodeEditor" ? ( + + + + ) : ( + + )} ); diff --git a/src/components/Workspace/AutoSave.js b/src/components/Workspace/AutoSave.js index b116853..68911a8 100644 --- a/src/components/Workspace/AutoSave.js +++ b/src/components/Workspace/AutoSave.js @@ -32,7 +32,7 @@ class AutoSave extends Component { saveValue = () => { this.setState({ ...this.state, saved: true }); - sessionStorage.setItem("autoSaveXML", this.props.xml); + localStorage.setItem("autoSaveXML", this.props.xml); setTimeout(() => this.setState({ ...this.state, saved: false }), 1000); }; diff --git a/src/components/Workspace/WorkspaceFunc.js b/src/components/Workspace/WorkspaceFunc.js index b090294..188847e 100644 --- a/src/components/Workspace/WorkspaceFunc.js +++ b/src/components/Workspace/WorkspaceFunc.js @@ -13,7 +13,7 @@ import ShareProject from "./ShareProject"; import ResetWorkspace from "./ResetWorkspace"; import DeleteProject from "./DeleteProject"; import CopyCode from "./CopyCode"; - +import AutoSave from "./AutoSave"; class WorkspaceFunc extends Component { componentDidUpdate() { console.log(this.props.autosave); @@ -21,7 +21,10 @@ class WorkspaceFunc extends Component { render() { return ( -
+
+ {!this.props.assessment & !this.props.multiple ? : null} {!this.props.assessment ? ( ({ workspaceName: { + minHeight: "40px", backgroundColor: theme.palette.secondary.main, - borderRadius: '25px', - display: 'inline-flex', - cursor: 'pointer', - '&:hover': { + borderRadius: "25px", + display: "inline-flex", + cursor: "pointer", + "&:hover": { color: theme.palette.primary.main, - } - } + }, + }, }); - class WorkspaceName extends Component { - constructor(props) { super(props); this.inputRef = React.createRef(); this.state = { - title: '', - content: '', + title: "", + content: "", open: false, name: props.name, description: props.description, snackbar: false, - type: '', - key: '', - message: '' + type: "", + key: "", + message: "", }; } @@ -59,47 +58,100 @@ class WorkspaceName extends Component { } toggleDialog = () => { - this.setState({ open: !this.state, title: '', content: '' }); - } + this.setState({ open: !this.state, title: "", content: "" }); + }; setFileName = (e) => { this.setState({ name: e.target.value }); - } + }; setDescription = (e) => { this.setState({ description: e.target.value }); - } + }; renameWorkspace = () => { this.props.workspaceName(this.state.name); this.toggleDialog(); - if (this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery') { - if (this.props.projectType === 'gallery' || this.state.projectType === 'gallery') { + if ( + this.props.projectType === "project" || + this.props.projectType === "gallery" || + this.state.projectType === "gallery" + ) { + if ( + this.props.projectType === "gallery" || + this.state.projectType === "gallery" + ) { this.props.setDescription(this.state.description); } - if (this.state.projectType === 'gallery') { + if (this.state.projectType === "gallery") { this.saveGallery(); } else { - this.props.updateProject(this.props.projectType, this.props.project._id); + this.props.updateProject( + this.props.projectType, + this.props.project._id + ); } } else { - this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}` }); + this.setState({ + snackbar: true, + type: "success", + key: Date.now(), + message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}`, + }); } - } + }; render() { return (
- +
{ if (this.props.multiple) { this.props.workspaceName(this.props.project.title); if (this.props.projectType === 'gallery') { this.props.setDescription(this.props.project.description); } } this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern' : this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.' : 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }} + onClick={() => { + if (this.props.multiple) { + this.props.workspaceName(this.props.project.title); + if (this.props.projectType === "gallery") { + this.props.setDescription(this.props.project.description); + } + } + this.setState({ + open: true, + title: + this.props.projectType === "gallery" + ? "Projektdaten ändern" + : this.props.projectType === "project" + ? "Projekt umbenennen" + : "Projekt benennen", + content: + this.props.projectType === "gallery" + ? "Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf 'Eingabe'." + : "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Eingabe'.", + }); + }} > - {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl' : 'xs', this.props.width) ? - {this.props.name} - : null} -
- + {this.props.name && + !isWidthDown( + this.props.projectType === "project" || + this.props.projectType === "gallery" + ? "xl" + : "xs", + this.props.width + ) ? ( + + {this.props.name} + + ) : null} +
+
@@ -114,23 +166,69 @@ class WorkspaceName extends Component { open={this.state.open} title={this.state.title} content={this.state.content} - onClose={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }} - onClick={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }} - button={'Abbrechen'} + onClose={() => { + this.toggleDialog(); + this.setState({ + name: this.props.name, + description: this.props.description, + }); + }} + onClick={() => { + this.toggleDialog(); + this.setState({ + name: this.props.name, + description: this.props.description, + }); + }} + button={"Abbrechen"} > -
- {this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ? +
+ {this.props.projectType === "gallery" || + this.state.projectType === "gallery" ? (
- - + +
- : } - + ) : ( + + )} +
); - }; + } } WorkspaceName.propTypes = { @@ -142,10 +240,14 @@ WorkspaceName.propTypes = { message: PropTypes.object.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ name: state.workspace.name, description: state.project.description, message: state.message, }); -export default connect(mapStateToProps, { workspaceName, setDescription, updateProject })(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceName))); +export default connect(mapStateToProps, { + workspaceName, + setDescription, + updateProject, +})(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceName)));