make compiler interchangable, closes #357

.env

@@ -1,4 +1,5 @@
-REACT_APP_COMPILER_URL=https://compile.sensebox.de
+REACT_APP_INITIAL_COMPILER_URL=https://compiler.sensebox.de
+
 REACT_APP_BOARD=sensebox-mcu
 REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
 

src/App.js

@@ -17,6 +17,7 @@ import {
 } from "@mui/material/styles";
 
 import Content from "./components/Content";
+import { setCompiler } from "./actions/generalActions";
 
 const theme = createTheme({
   palette: {
@@ -36,6 +37,9 @@ const theme = createTheme({
 class App extends Component {
   componentDidMount() {
     store.dispatch(loadUser());
+    // set initial compiler 
+    console.log("compiler",  process.env.REACT_APP_INITIAL_COMPILER_URL)
+    store.dispatch(setCompiler(process.env.REACT_APP_INITIAL_COMPILER_URL));
   }
 
   render() {

src/components/Blockly/msg/de/ui.js

@@ -222,6 +222,7 @@ export const UI = {
     "Geben die URL des Compilers ein, den du verwenden möchten. Die Standard-URL ist: https://compiler.sensebox.de",
   settings_compiler_helperText:
     "Die URL muss mit https:// oder http:// beginnen",
+    settings_compiler_readOnly: "Compiler URL ändern",
 
   /**
    * 404

src/components/Blockly/msg/en/ui.js

@@ -215,6 +215,7 @@ export const UI = {
   settings_compiler_text:
     "Enter the URL of the compiler you want to use. The default compiler is: https://compiler.sensebox.de",
   settings_compiler_helperText: "Die URL must start https:// or http://",
+  settings_compiler_readOnly: "Change compiler URL",
 
   /**
    * 404

src/components/CodeEditor/CodeEditor.js

@@ -36,7 +36,7 @@ const CodeEditor = (props) => {
           : "sensebox-esp32s2",
       sketch: editorRef.current.getValue(),
     };
-    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
+    fetch(`${this.props.selectedCompiler}/compile`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(data),
@@ -53,7 +53,7 @@ const CodeEditor = (props) => {
         //setId(result);
         const filename = "sketch";
         window.open(
-          `${process.env.REACT_APP_COMPILER_URL}/download?id=${result}&board=${
+          `${this.props.selectedCompiler}/download?id=${result}&board=${
             store.getState().board.board === "mcu"
               ? "sensebox-mcu"
               : "sensebox-esp32s2"

src/components/Settings/CompilerSelector.js

@@ -24,45 +24,52 @@ class CompilerSelector extends Component {
     // Ensure that Blockly.setLocale is adopted in the component.
     // Otherwise, the text will not be displayed until the next update of the component.
     this.forceUpdate();
+
   }
 
+
   changeStatus = () => {
     this.setState({ readOnly: !this.state.readOnly });
   };
 
   render() {
     return (
       <div>
-        <Typography style={{ fontWeight: "bold" }}>
-          {Blockly.Msg.settings_compiler}
-        </Typography>
-        <FormHelperText
-          style={{
-            color: "black",
-            lineHeight: 1.3,
-            marginBottom: "8px",
-          }}
-        >
-          {Blockly.Msg.settings_compiler_text}
-        </FormHelperText>
-        <FormControl variant="standard">
-          <TextField
-            id="outlined-helperText"
-            label="Helper text"
-            helperText={Blockly.Msg.settings_compiler_helperText}
-            onChange={(e) => this.props.setCompiler(e.target.value)}
-            value={this.props.selectedCompiler}
-            InputProps={{
-              readOnly: !this.state.readOnly,
-            }}
-          />
-          <FormControlLabel
-            control={<Checkbox defaultChecked />}
-            checked={this.state.readOnly}
-            onChange={this.changeStatus}
-            label="Change URL"
-          />
-        </FormControl>
+      <Typography style={{ fontWeight: "bold" }}>
+        {Blockly.Msg.settings_compiler}
+      </Typography>
+      <FormHelperText
+        style={{
+        color: "black",
+        lineHeight: 1.3,
+        marginBottom: "8px",
+        }}
+      >
+        {Blockly.Msg.settings_compiler_text}
+      </FormHelperText>
+      <FormControl variant="standard">
+        <FormControlLabel
+        control={<Checkbox defaultChecked />}
+        checked={this.state.readOnly}
+        onChange={this.changeStatus}
+        label={Blockly.Msg.settings_compiler_readOnly}
+        />
+        <TextField
+        id="outlined-helperText"
+        label="Helper text"
+        helperText={Blockly.Msg.settings_compiler_helperText}
+        onChange={(e) => this.props.setCompiler(e.target.value)}
+        value={this.props.selectedCompiler}
+        InputProps={{
+          readOnly: !this.state.readOnly,
+        }}
+        style={{
+          backgroundColor: !this.state.readOnly ? "#f0f0f0" : "white",
+          color: this.state.readOnly ? "gray" : "black",
+          borderRadius: "5px",
+        }}
+        />
+      </FormControl>
       </div>
     );
   }

src/reducers/generalReducer.js

@@ -23,7 +23,7 @@ const initialPlatform = () => {
 };
 
 const initialCompiler = () => {
-  return process.env.REACT_APP_COMPILER_URL;
+  return process.env.INITIAL_COMPILER_URL;
 };
 
 const initialSounds = () => {