141 lines
4.1 KiB
JavaScript
141 lines
4.1 KiB
JavaScript
import React from "react";
|
|
import Blockly from "blockly";
|
|
import { useSelector } from "react-redux";
|
|
import Accordion from "@material-ui/core/Accordion";
|
|
import AccordionSummary from "@material-ui/core/AccordionSummary";
|
|
import AccordionDetails from "@material-ui/core/AccordionDetails";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import { LibraryVersions } from "../../data/versions.js";
|
|
import { useMonaco } from "@monaco-editor/react";
|
|
import { Button } from "@material-ui/core";
|
|
import SerialMonitor from "./SerialMonitor.js";
|
|
import axios from "axios";
|
|
|
|
const Sidebar = () => {
|
|
//const [examples, setExamples] = React.useState([]);
|
|
const user = useSelector((state) => state.auth.user);
|
|
// useEffect(() => {
|
|
// axios
|
|
// .get("https://coelho.opensensemap.org/items/blocklysamples")
|
|
// .then((res) => {
|
|
// setExamples(res.data.data);
|
|
// });
|
|
// }, []);
|
|
const monaco = useMonaco();
|
|
const loadCode = (code) => {
|
|
monaco.editor.getModels()[0].setValue(code);
|
|
};
|
|
|
|
const getOsemScript = (id) => {
|
|
axios
|
|
.get(`https://api.opensensemap.org/boxes/${id}/script/`)
|
|
.then((res) => {
|
|
loadCode(res.data);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{"serial" in navigator ? (
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={""}
|
|
aria-controls="panel1a-content"
|
|
id="panel1a-header"
|
|
>
|
|
<Typography>Serial Monitor</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
<SerialMonitor />
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
) : null}
|
|
{/* <Accordion>
|
|
<AccordionSummary
|
|
expandIcon={""}
|
|
aria-controls="panel1a-content"
|
|
id="panel1a-header"
|
|
>
|
|
<Typography>Beispiele</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
{examples.map((object, i) => {
|
|
return (
|
|
<Button
|
|
style={{ padding: "1rem", margin: "1rem" }}
|
|
variant="contained"
|
|
color="primary"
|
|
key={i}
|
|
onClick={() => loadCode(object.code)}
|
|
>
|
|
{object.name}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion> */}
|
|
{user ? (
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={""}
|
|
aria-controls="panel1a-content"
|
|
id="panel1a-header"
|
|
>
|
|
<Typography>Deine openSenseMap Codes</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
{user.boxes.map((box, i) => {
|
|
return (
|
|
<Button
|
|
style={{ padding: "1rem", margin: "1rem" }}
|
|
variant="contained"
|
|
color="primary"
|
|
key={i}
|
|
onClick={() => getOsemScript(box._id)}
|
|
>
|
|
{box.name}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
) : null}
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={""}
|
|
aria-controls="panel2a-content"
|
|
id="panel2a-header"
|
|
>
|
|
<Typography>{Blockly.Msg.codeeditor_libraries_head}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails
|
|
style={{ padding: 0, height: "60vH", backgroundColor: "white" }}
|
|
>
|
|
<Typography
|
|
style={{ overflow: "auto", width: "100%", padding: "1rem" }}
|
|
>
|
|
<p>{Blockly.Msg.codeeditor_libraries_text}</p>
|
|
{LibraryVersions().map((object, i) => {
|
|
return (
|
|
<p>
|
|
<a href={object.link} target="_blank" rel="noreferrer">
|
|
{object.library} {object.version}
|
|
</a>
|
|
</p>
|
|
);
|
|
})}
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|