add a new code Editor
This commit is contained in:
Mario Pesch
@@ -0,0 +1,206 @@
|
||||
import React from "react";
|
||||
import { useState, useRef } from "react";
|
||||
import { default as MonacoEditor } from "@monaco-editor/react";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import { Button, Grid } from "@material-ui/core";
|
||||
import Blockly from "blockly/core";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import { saveAs } from "file-saver";
|
||||
import Drawer from "@material-ui/core/Drawer";
|
||||
import Sidebar from "./Sidebar";
|
||||
import Dialog from "../Dialog";
|
||||
|
||||
const CodeEditor = (props) => {
|
||||
const [fileHandle, setFileHandle] = useState();
|
||||
const [fileContent, setFileContent] = useState("");
|
||||
const [progress, setProgress] = useState(false);
|
||||
const [id, setId] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const editorRef = useRef(null);
|
||||
|
||||
const compile = () => {
|
||||
setProgress(true);
|
||||
const data = {
|
||||
board: process.env.REACT_APP_BOARD,
|
||||
sketch: editorRef.current.getValue(),
|
||||
};
|
||||
fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
if (data.code === "Internal Server Error") {
|
||||
setProgress(false);
|
||||
setOpen(true);
|
||||
setError(data.message);
|
||||
}
|
||||
setProgress(false);
|
||||
const result = data.data.id;
|
||||
setId(result);
|
||||
console.log(result);
|
||||
const filename = "sketch";
|
||||
window.open(
|
||||
`${process.env.REACT_APP_COMPILER_URL}/download?id=${result}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
|
||||
"_self"
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const saveIno = () => {
|
||||
var filename = "sketch";
|
||||
var code = editorRef.current.getValue();
|
||||
|
||||
filename = `${filename}.ino`;
|
||||
var blob = new Blob([code], { type: "text/plain;charset=utf-8" });
|
||||
saveAs(blob, filename);
|
||||
};
|
||||
|
||||
const openIno = async () => {
|
||||
const [myFileHandle] = await window.showOpenFilePicker();
|
||||
setFileHandle(myFileHandle);
|
||||
|
||||
const file = await myFileHandle.getFile();
|
||||
const contents = await file.text();
|
||||
setFileContent(contents);
|
||||
};
|
||||
|
||||
const toggleDrawer = (anchor, open) => (event) => {
|
||||
if (
|
||||
event.type === "keydown" &&
|
||||
(event.key === "Tab" || event.key === "Shift")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const loadCode = () => {
|
||||
editorRef.current.setValue("test");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Grid container spacing={2}>
|
||||
<Drawer
|
||||
anchor={"bottom"}
|
||||
open={open}
|
||||
onClose={toggleDrawer("bottom", false)}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
color: "#4EAF47",
|
||||
paddingLeft: "1rem",
|
||||
paddingRight: "1rem",
|
||||
}}
|
||||
>
|
||||
{Blockly.Msg.drawer_ideerror_head}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
color: "#4EAF47",
|
||||
paddingLeft: "1rem",
|
||||
paddingRight: "1rem",
|
||||
}}
|
||||
>
|
||||
{Blockly.Msg.drawer_ideerror_text}
|
||||
</p>
|
||||
<Divider style={{ backgroundColor: "white" }} />
|
||||
<p
|
||||
style={{
|
||||
backgroundColor: "black",
|
||||
color: "#E47128",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{`${error}`}{" "}
|
||||
</p>
|
||||
</Drawer>
|
||||
<Grid item lg={8}>
|
||||
<h1>Code Editor</h1>
|
||||
<MonacoEditor
|
||||
height="80vh"
|
||||
defaultLanguage="cpp"
|
||||
defaultValue={`
|
||||
void setup () {
|
||||
|
||||
}
|
||||
|
||||
void loop(){
|
||||
|
||||
}`}
|
||||
value={fileContent}
|
||||
onMount={(editor, monaco) => {
|
||||
editorRef.current = editor;
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item lg={4}>
|
||||
<Button
|
||||
style={{ padding: "1rem", margin: "1rem" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => compile()}
|
||||
>
|
||||
Kompilieren
|
||||
</Button>
|
||||
<Button
|
||||
style={{ padding: "1rem", margin: "1rem" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => saveIno()}
|
||||
>
|
||||
Save Code
|
||||
</Button>
|
||||
<Button
|
||||
style={{ padding: "1rem", margin: "1rem" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => openIno()}
|
||||
>
|
||||
Open Code
|
||||
</Button>
|
||||
<Button
|
||||
style={{ padding: "1rem", margin: "1rem" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => loadCode()}
|
||||
>
|
||||
Reset Editor
|
||||
</Button>
|
||||
<Sidebar />
|
||||
<Dialog
|
||||
style={{ zIndex: 9999999 }}
|
||||
fullWidth
|
||||
maxWidth={"sm"}
|
||||
open={progress}
|
||||
title={Blockly.Msg.tabletDialog_headline}
|
||||
content={""}
|
||||
>
|
||||
<div>{Blockly.Msg.tabletDialog_text}</div>
|
||||
<div>
|
||||
{Blockly.Msg.tabletDialog_more}{" "}
|
||||
<a
|
||||
href="https://sensebox.de/app"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
https://sensebox.de/app
|
||||
</a>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withRouter(CodeEditor);
|
||||
@@ -0,0 +1,338 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { workspaceName } from "../../actions/workspaceActions";
|
||||
|
||||
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
|
||||
|
||||
import { withStyles } from "@material-ui/core/styles";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Backdrop from "@material-ui/core/Backdrop";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Blockly from "blockly/core";
|
||||
import Copy from "../copy.svg";
|
||||
import 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 MuiDrawer from "@material-ui/core/Drawer";
|
||||
import Dialog from "../Dialog";
|
||||
|
||||
const styles = (theme) => ({
|
||||
backdrop: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
color: "#fff",
|
||||
},
|
||||
iconButton: {
|
||||
backgroundColor: theme.palette.button.compile,
|
||||
color: theme.palette.primary.contrastText,
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.button.compile,
|
||||
color: theme.palette.primary.contrastText,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.palette.button.compile,
|
||||
color: theme.palette.primary.contrastText,
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.button.compile,
|
||||
color: theme.palette.primary.contrastText,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const Drawer = withStyles((theme) => ({
|
||||
paperAnchorBottom: {
|
||||
backgroundColor: "black",
|
||||
height: "20vH",
|
||||
},
|
||||
}))(MuiDrawer);
|
||||
|
||||
class Compile extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
progress: false,
|
||||
open: false,
|
||||
file: false,
|
||||
title: "",
|
||||
content: "",
|
||||
name: props.name,
|
||||
error: "",
|
||||
appLink: "",
|
||||
appDialog: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
Prism.highlightAll();
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if (props.name !== this.props.name) {
|
||||
this.setState({ name: this.props.name });
|
||||
}
|
||||
Prism.highlightAll();
|
||||
}
|
||||
|
||||
compile = () => {
|
||||
this.setState({ progress: true });
|
||||
const data = {
|
||||
board: process.env.REACT_APP_BOARD,
|
||||
sketch: this.props.arduino,
|
||||
};
|
||||
fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
if (data.code === "Internal Server Error") {
|
||||
this.setState({
|
||||
progress: false,
|
||||
file: false,
|
||||
open: true,
|
||||
title: Blockly.Msg.compiledialog_headline,
|
||||
content: Blockly.Msg.compiledialog_text,
|
||||
error: data.message,
|
||||
});
|
||||
}
|
||||
this.setState({ id: data.data.id }, () => {
|
||||
this.createFileName();
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
//this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
|
||||
});
|
||||
};
|
||||
|
||||
download = () => {
|
||||
const id = this.state.id;
|
||||
const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
|
||||
this.toggleDialog();
|
||||
this.props.workspaceName(this.state.name);
|
||||
window.open(
|
||||
`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
|
||||
"_self"
|
||||
);
|
||||
this.setState({ progress: false });
|
||||
};
|
||||
|
||||
toggleDialog = () => {
|
||||
this.setState({ open: !this.state, progress: false, appDialog: false });
|
||||
};
|
||||
|
||||
createFileName = () => {
|
||||
if (this.props.platform === true) {
|
||||
const filename = detectWhitespacesAndReturnReadableResult(
|
||||
this.state.name
|
||||
);
|
||||
this.setState({
|
||||
link: `blocklyconnect-app://sketch/${filename}/${this.state.id}`,
|
||||
});
|
||||
this.setState({ appDialog: true });
|
||||
} else {
|
||||
if (this.state.name) {
|
||||
this.download();
|
||||
} else {
|
||||
this.setState({
|
||||
file: true,
|
||||
open: true,
|
||||
title: "Projekt kompilieren",
|
||||
content:
|
||||
"Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// if (this.state.name) {
|
||||
// this.download();
|
||||
// } else {
|
||||
// this.setState({
|
||||
// file: true,
|
||||
// open: true,
|
||||
// title: "Projekt kompilieren",
|
||||
// content:
|
||||
// "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
setFileName = (e) => {
|
||||
this.setState({ name: e.target.value });
|
||||
};
|
||||
|
||||
toggleDrawer = (anchor, open) => (event) => {
|
||||
if (
|
||||
event.type === "keydown" &&
|
||||
(event.key === "Tab" || event.key === "Shift")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{}}>
|
||||
{this.props.iconButton ? (
|
||||
<Tooltip
|
||||
title={Blockly.Msg.tooltip_compile_code}
|
||||
arrow
|
||||
style={{ marginRight: "5px" }}
|
||||
>
|
||||
<IconButton
|
||||
className={`compileBlocks ${this.props.classes.iconButton}`}
|
||||
onClick={() => this.compile()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faClipboardCheck} size="l" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
style={{ float: "right", color: "white" }}
|
||||
variant="contained"
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.compile()}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faClipboardCheck}
|
||||
style={{ marginRight: "5px" }}
|
||||
/>{" "}
|
||||
Kompilieren
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{this.props.platform === false ? (
|
||||
<Backdrop
|
||||
className={this.props.classes.backdrop}
|
||||
open={this.state.progress}
|
||||
>
|
||||
<div className="overlay">
|
||||
<img src={Copy} width="400" alt="copyimage"></img>
|
||||
<h2>{Blockly.Msg.compile_overlay_head}</h2>
|
||||
<p>{Blockly.Msg.compile_overlay_text}</p>
|
||||
<p>
|
||||
{Blockly.Msg.compile_overlay_help}
|
||||
<a href="/faq" target="_blank">
|
||||
FAQ
|
||||
</a>
|
||||
</p>
|
||||
<CircularProgress color="inherit" />
|
||||
</div>
|
||||
</Backdrop>
|
||||
) : (
|
||||
<Backdrop
|
||||
className={this.props.classes.backdrop}
|
||||
open={this.state.progress}
|
||||
>
|
||||
<div className="overlay">
|
||||
{/* <img src={Copy} width="400" alt="copyimage"></img> */}
|
||||
<h2>Dein Code wird kompiliert!</h2>
|
||||
<p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
|
||||
<p>
|
||||
{Blockly.Msg.compile_overlay_help}
|
||||
<a href="/faq" target="_blank">
|
||||
FAQ
|
||||
</a>
|
||||
</p>
|
||||
<CircularProgress color="inherit" />
|
||||
</div>
|
||||
</Backdrop>
|
||||
)}
|
||||
<Drawer
|
||||
anchor={"bottom"}
|
||||
open={this.state.open}
|
||||
onClose={this.toggleDrawer("bottom", false)}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
color: "#4EAF47",
|
||||
paddingLeft: "1rem",
|
||||
paddingRight: "1rem",
|
||||
}}
|
||||
>
|
||||
{Blockly.Msg.drawer_ideerror_head}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
color: "#4EAF47",
|
||||
paddingLeft: "1rem",
|
||||
paddingRight: "1rem",
|
||||
}}
|
||||
>
|
||||
{Blockly.Msg.drawer_ideerror_text}
|
||||
</p>
|
||||
<Divider style={{ backgroundColor: "white" }} />
|
||||
<p
|
||||
style={{
|
||||
backgroundColor: "black",
|
||||
color: "#E47128",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{`${this.state.error}`}{" "}
|
||||
</p>
|
||||
</Drawer>
|
||||
<Dialog
|
||||
style={{ zIndex: 9999999 }}
|
||||
fullWidth
|
||||
maxWidth={"sm"}
|
||||
open={this.state.appDialog}
|
||||
title=""
|
||||
content={""}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>
|
||||
<p>Dein Code wurde erfolgreich kompiliert</p>
|
||||
<a href={this.state.link}>
|
||||
<Button
|
||||
style={{ color: "white" }}
|
||||
variant="contained"
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.toggleDialog()}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faClipboardCheck}
|
||||
style={{ marginRight: "5px" }}
|
||||
/>{" "}
|
||||
Starte Übertragung
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Compile.propTypes = {
|
||||
arduino: PropTypes.string.isRequired,
|
||||
name: PropTypes.string,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
platform: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
arduino: state.workspace.code.arduino,
|
||||
name: state.workspace.name,
|
||||
platform: state.general.platform,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { workspaceName })(
|
||||
withStyles(styles, { withTheme: true })(Compile)
|
||||
);
|
||||
@@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
import Blockly from "blockly";
|
||||
import Accordion from "@material-ui/core/Accordion";
|
||||
import AccordionSummary from "@material-ui/core/AccordionSummary";
|
||||
import AccordionDetails from "@material-ui/core/AccordionDetails";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import { LibraryVersions } from "../../data/versions.js";
|
||||
import { ArduinoExamples } from "../../data/arduinoExamples.js";
|
||||
import Editor, { useMonaco } from "@monaco-editor/react";
|
||||
import { Button } from "@material-ui/core";
|
||||
import Dialog from "../Dialog";
|
||||
|
||||
const Sidebar = () => {
|
||||
const [alert, setAlert] = React.useState(false);
|
||||
|
||||
const monaco = useMonaco();
|
||||
const loadCode = (code) => {
|
||||
console.log(code);
|
||||
console.log(monaco);
|
||||
const defaultCode = `
|
||||
void setup () {
|
||||
|
||||
}
|
||||
|
||||
void loop(){
|
||||
|
||||
}`;
|
||||
var currentCode = monaco.editor.getModels()[0].getValue();
|
||||
|
||||
setAlert(true);
|
||||
monaco.editor.getModels()[0].setValue(code);
|
||||
};
|
||||
|
||||
const toggleDialog = () => {
|
||||
setAlert(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={""}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography>Beispiele</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>
|
||||
{ArduinoExamples().map((object, i) => {
|
||||
return (
|
||||
<Button
|
||||
style={{ padding: "1rem", margin: "1rem" }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => loadCode(object.code)}
|
||||
>
|
||||
{object.name}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={""}
|
||||
aria-controls="panel2a-content"
|
||||
id="panel2a-header"
|
||||
>
|
||||
<Typography>Installierte Libraries</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>
|
||||
<p>
|
||||
For Dokumentation take a look at the installed libraries and their
|
||||
source
|
||||
</p>
|
||||
{LibraryVersions().map((object, i) => {
|
||||
return (
|
||||
<p>
|
||||
<a href={object.link} target="_blank" rel="noreferrer">
|
||||
{object.library} {object.version}
|
||||
</a>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
<Dialog
|
||||
style={{ zIndex: 9999999 }}
|
||||
fullWidth
|
||||
maxWidth={"sm"}
|
||||
open={alert}
|
||||
title={Blockly.Msg.tabletDialog_headline}
|
||||
content={""}
|
||||
onClose={() => toggleDialog()}
|
||||
onClick={() => toggleDialog()}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>{Blockly.Msg.tabletDialog_text}</div>
|
||||
<div>
|
||||
{Blockly.Msg.tabletDialog_more}{" "}
|
||||
<a href="https://sensebox.de/app" target="_blank" rel="noreferrer">
|
||||
https://sensebox.de/app
|
||||
</a>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user