Add errorview

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

@@ -143,23 +143,29 @@ export const UI = {
   compiledialog_text:
     "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
 
-/**
- * File Upload Dialog
- */
+  /**
+   * File Upload Dialog
+   */
 
-  warning_file_board: "Der ausgewählte Boardtyp unterscheidet sich von dem Boardtyp des geladenen Projekts. Möglicherweise funktioniert das Projekt nicht wie erwartet.",
-  dialog_confirm: "Möchtest du das Projekt aus der XML-Datei wirklich einfügen? Alle aktuellen Blöcke werden gelöscht.",
-  warning_old_xml_file: "Die XML-Datei wurde mit einer älteren Version von Blockly erstellt. Standardmäßig wird das Board auf 'senseBox MCU' gesetzt.",
+  warning_file_board:
+    "Der ausgewählte Boardtyp unterscheidet sich von dem Boardtyp des geladenen Projekts. Möglicherweise funktioniert das Projekt nicht wie erwartet.",
+  dialog_confirm:
+    "Möchtest du das Projekt aus der XML-Datei wirklich einfügen? Alle aktuellen Blöcke werden gelöscht.",
+  warning_old_xml_file:
+    "Die XML-Datei wurde mit einer älteren Version von Blockly erstellt. Standardmäßig wird das Board auf 'senseBox MCU' gesetzt.",
 
-/** Open Project */
+  /** Open Project */
   dialog_title: "Blöcke öffnen",
   no_blocks_found_title: "Keine Blöcke",
-  no_blocks_found_text:"Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.",
+  no_blocks_found_text:
+    "Es wurden keine Blöcke detektiert. Bitte überprüfe den XML-Code und versuche es erneut.",
   xml_loaded: "Das Projekt aus der XML-Datei wurde erfolgreich eingefügt.",
   no_valid_data_type_title: "Unzulässiger Dateityp",
-  no_valid_data_type_text:"Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.",
+  no_valid_data_type_text:
+    "Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.",
   no_valid_xml_title: "Ungültige XML",
-  no_valid_xml_text:"Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.",
+  no_valid_xml_text:
+    "Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.",
   /**
    * Buttons
    *
@@ -214,8 +220,8 @@ export const UI = {
   settings_compiler: "Compiler URL",
   settings_compiler_text:
     "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_helperText:
+    "Die URL muss mit https:// oder http:// beginnen",
 
   /**
    * 404
@@ -307,7 +313,8 @@ export const UI = {
 
   compile_overlay_head: "Dein Programm wird nun kompiliert und heruntergeladen",
   compile_overlay_text: "Kopiere es anschließend auf deine senseBox MCU",
-  compile_overlay_text_esp32: "Übertrage es anschließend auf deine MCU-S2 und habe einen kleinen Moment Geduld.\n Sobald der Programmcode erfolgreich übertragen wurde, leuchtet die RGB-LED grün auf.\n Dieser Prozess kann bis zu 60 Sekunden dauern.",
+  compile_overlay_text_esp32:
+    "Übertrage es anschließend auf deine MCU-S2 und habe einen kleinen Moment Geduld.\n Sobald der Programmcode erfolgreich übertragen wurde, leuchtet die RGB-LED grün auf.\n Dieser Prozess kann bis zu 60 Sekunden dauern.",
   compile_overlay_help: "Benötigst du mehr Hilfe? Dann schaue hier: ",
 
   /**
@@ -325,6 +332,13 @@ export const UI = {
   drawer_ideerror_text:
     "Beim kompilieren ist ein Fehler aufgetreten, überprüfe deine Blöcke.",
 
+  /**
+   * Error View
+   */
+  suggestion_pre_text: "Versuch es mal mit: ",
+
+  display_not_declared:
+    "Stelle sicher, dasss du das Display im Setup initialisiert hast.",
   /**
    * Code Editor
    *  */
@@ -355,5 +369,6 @@ export const UI = {
   sensorinfo_measurable_phenos: "Messbare Phänomene",
   sensorinfo_manufacturer: "Hersteller",
   sensorinfo_lifetime: "Lebensdauer",
-  sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
+  sensorinfo_explanation:
+    "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor ",
 };

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

@@ -338,6 +338,12 @@ export const UI = {
   codeeditor_compile_progress:
     "Your code will now be compiled and then downloaded to your computer",
 
+  /**
+   * Error view
+   */
+
+  suggestion_pre_text: "Maybe you should try:",
+  display_not_declared: "Initialise the display in the setup() function",
   /**
    * Device Selection
    * */

src/components/CodeEditor/ErrorView.js

@@ -0,0 +1,91 @@
+import * as Blockly from "blockly/core";
+import { Divider } from "@mui/material";
+
+export const ErrorView = ({ error }) => {
+  const errorMessage = JSON.parse(error);
+  const cleanedProcess = errorMessage.process.replace(
+    /\/tmp\/[a-zA-Z0-9]+\/[^:]+:/g,
+    ""
+  );
+  const errorSuggestions = {
+    "'display' was not declared in this scope":
+      Blockly.Msg.display_not_declared,
+  };
+
+  const getSuggestion = (process) => {
+    for (const key in errorSuggestions) {
+      if (process.includes(key)) {
+        return errorSuggestions[key];
+      }
+    }
+    return null;
+  };
+  const suggestion = getSuggestion(cleanedProcess);
+
+  // Inline CSS styles based on your color scheme
+  const containerStyle = {
+    backgroundColor: "black",
+    color: "#E47128",
+    padding: "1rem",
+    borderRadius: "8px",
+    marginBottom: "16px",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  };
+
+  const headerStyle = {
+    color: "#4EAF47",
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+  };
+
+  const textStyle = {
+    color: "#4EAF47",
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+  };
+
+  const dividerStyle = {
+    backgroundColor: "white",
+    height: "1px",
+    margin: "1rem 0",
+  };
+
+  const suggestionStyle = {
+    backgroundColor: "#f0f4f8",
+    border: "1px solid #4EAF47",
+    color: "#333",
+    borderRadius: "6px",
+    padding: "0.75rem",
+    marginTop: "1rem",
+    marginLeft: "1rem",
+    paddingLeft: "1rem",
+    maxWidth: "fit-content",
+    boxShadow: "0 2px 5px rgba(0, 0, 0, 0.1)",
+  };
+
+  const suggestionTextStyle = {
+    color: "#4EAF47",
+    fontWeight: "bold",
+  };
+
+  return (
+    <div>
+      <h2 style={headerStyle}>{Blockly.Msg.drawer_ideerror_head} </h2>
+      <p style={textStyle}> {Blockly.Msg.drawer_ideerror_text}</p>
+      {suggestion && (
+        <div style={suggestionStyle}>
+          <strong style={suggestionTextStyle}>
+            {Blockly.Msg.suggestion_pre_text}
+          </strong>{" "}
+          {suggestion}
+        </div>
+      )}
+      <div style={dividerStyle}></div>
+      <div style={containerStyle}>
+        <strong>{errorMessage.exit}</strong>
+        <pre>{cleanedProcess}</pre>
+      </div>
+    </div>
+  );
+};

src/components/Workspace/Compile.js

@@ -20,6 +20,7 @@ import Copy from "../copy.svg";
 import MuiDrawer from "@mui/material/Drawer";
 import Dialog from "../Dialog";
 import copyesp32 from "../copy_esp32.svg";
+import { ErrorView } from "../CodeEditor/ErrorView";
 const styles = (theme) => ({
   backdrop: {
     zIndex: theme.zIndex.drawer + 1,
@@ -48,7 +49,7 @@ const styles = (theme) => ({
 const Drawer = withStyles((theme) => ({
   paperAnchorBottom: {
     backgroundColor: "black",
-    height: "20vH",
+    height: "30vH",
   },
 }))(MuiDrawer);
 
@@ -283,35 +284,7 @@ class Compile extends Component {
           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>
+          <ErrorView error={this.state.error} />
         </Drawer>
         <Dialog
           style={{ zIndex: 9999999 }}