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

add autosave to blocks

Browse Source 
closes #58
This commit is contained in:
Mario Pesch
2022-01-27 19:14:28 +01:00
parent 748c29c260
commit 9f7ba27d69
8 changed files with 315 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CodeEditor/CodeEditor.js
+3 -3
View File
@@ -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 <senseBoxIO.h> //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);
};
src/components/CodeEditor/SaveIcon.js
+32 -83
View File
@@ -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 (
<div>
{value === true ? (
<Tooltip title={"Auto save enabled"} arrow placement="right">
<IconButton
style={{
width: "40px",
height: "40px",
position: "absolute",
}}
>
{loading && (
<FontAwesomeIcon
style={{ position: "absolute" }}
icon={faCircleNotch}
spin={true}
size="2x"
color="#4EAF47"
/>
)}
<FontAwesomeIcon
style={{
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)",
}}
icon={faSave}
color={loading ? "gray" : "#4EAF47"}
size={loading ? "1x" : "md"}
/>
</IconButton>
</Tooltip>
) : (
<Tooltip title={"Auto save disabled"} arrow placement="right">
<IconButton
style={{
width: "40px",
height: "40px",
position: "absolute",
}}
onClick={() => {
this.propTypes.setAutoSave(true);
}}
>
{loading && (
<FontAwesomeIcon
style={{ position: "absolute" }}
icon={faCircleNotch}
spin={true}
size="2x"
color="#4EAF47"
/>
)}
<FontAwesomeIcon
style={{
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)",
}}
icon={faSave}
color={loading ? "gray" : "#4EAF47"}
size={loading ? "1x" : "md"}
/>
</IconButton>
</Tooltip>
const SaveIcon = ({ loading }) => (
<Tooltip title={"Auto save enabled"} arrow placement="right">
<div
style={{
position: "relative",
width: "2rem",
height: "2rem",
margin: "1rem",
}}
>
{loading && (
<FontAwesomeIcon
style={{ position: "absolute" }}
icon={faCircleNotch}
spin={true}
size="2x"
color="grey"
/>
)}
<FontAwesomeIcon
style={{
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)",
}}
icon={faSave}
color={loading ? "grey" : "green"}
size={loading ? "1x" : "lg"}
/>
</div>
);
};
SaveIcon.propTypes = {
setAutoSave: PropTypes.func.isRequired,
autoSave: PropTypes.bool.isRequired,
};
</Tooltip>
);
export default SaveIcon;