Merge pull request #27 from leaphy-robotics/development

Add error handling for failing uploads and switch from leaphy-blockly to the new npm package

angular.json

@@ -28,17 +28,17 @@
               "src/assets",
               {
                 "glob": "**/*",
-                "input": "./node_modules/leaphy-blockly/media",
+                "input": "./node_modules/@leaphy-robotics/leaphy-blockly/media",
                 "output": "./media"
               },
               {
                 "glob": "en.json",
-                "input": "./node_modules/leaphy-blockly/msg/json",
+                "input": "./node_modules/@leaphy-robotics/leaphy-blockly/msg/json",
                 "output": "./msg/json"
               },
               {
                 "glob": "nl.json",
-                "input": "./node_modules/leaphy-blockly/msg/json",
+                "input": "./node_modules/@leaphy-robotics/leaphy-blockly/msg/json",
                 "output": "./msg/json"
               }
             ],
@@ -48,9 +48,9 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "./node_modules/leaphy-blockly/blockly_compressed.js",
-              "./node_modules/leaphy-blockly/blocks_compressed.js",
-              "./node_modules/leaphy-blockly/arduino_compressed.js",
+              "./node_modules/@leaphy-robotics/leaphy-blockly/blockly_compressed.js",
+              "./node_modules/@leaphy-robotics/leaphy-blockly/blocks_compressed.js",
+              "./node_modules/@leaphy-robotics/leaphy-blockly/arduino_compressed.js",
               "./node_modules/jquery/dist/jquery.min.js",
               "./node_modules/bootstrap/dist/js/bootstrap.min.js",
               "./node_modules/prismjs/prism.js",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "leaphy_easybloqs",
-  "productName": "Leaphy easybloqs",
+  "name": "leaphy_webbased",
+  "productName": "Leaphy Webbased",
   "author": "Leaphy Robotics",
   "description": "Build Leaphy Arduino programs",
   "version": "1.2.2",
@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "~14.3.0",
     "@angular/router": "~14.3.0",
     "@fortawesome/fontawesome-free": "^6.1.1",
+    "@leaphy-robotics/leaphy-blockly": "^3.0.6",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@serialport/parser-readline": "^10.3.0",
@@ -41,7 +42,6 @@
     "chartjs-adapter-moment": "^1.0.0",
     "intel-hex": "^0.2.0",
     "jquery": "^3.5.1",
-    "leaphy-blockly": "3.0.1",
     "moment": "^2.29.4",
     "ng2-charts": "3.0.11",
     "prismjs": "^1.28.0",

src/app/effects/blockly-editor.effects.ts

@@ -30,7 +30,7 @@ export class BlocklyEditorEffects {
             .pipe(filter(language => !!language))
             .subscribe(async language => {
                 console.log('Loading Blockly translations for language: ' + language.code);
-                const translations = await import(`node_modules/leaphy-blockly/msg/${language.code}.js`);
+                const translations = await import(`node_modules/@leaphy-robotics/leaphy-blockly/msg/${language.code}.js`);
                 Blockly.setLocale(translations);
             });
 

src/app/modules/core/dialogs/upload/upload.dialog.html

@@ -1,6 +1,9 @@
 <div class="container">
   <p id="upload-status">{{ statusMessage }}</p>
   <progress id="upload-progress-bar" class="progress-bar" max="150" [value]="progressBarWidth"></progress>
+  <pre id="error-message" class="hidden">
+
+  </pre>
   <div id="return-options" class="hidden">
     <button class="block-environment" (click)="returnBlockEnvironment()">{{ "LEAVE_UPLOADING" | translate }}</button>
     <button class="help-environment" (click)="returnHelpEnvironment()">{{ "UPLOADING_ISSUE_HELP" | translate }}</button>

src/app/modules/core/dialogs/upload/upload.dialog.scss

@@ -9,6 +9,11 @@
   display: none;
 }
 
+#error-message {
+  color: red;
+  width: 100%;
+}
+
 .block-environment {
   padding: 10px 20px;
   font-size: 14px;

src/app/modules/core/dialogs/upload/upload.dialog.ts

@@ -42,7 +42,10 @@ export class UploadDialog {
         xhr.onload = () => {
           if (xhr.status === 200) {
             resolve(xhr.response);
-          } else {
+          } else if (xhr.status === 500) {
+            reject(new Error('Request failed: ' + xhr.status + ' ' + xhr.response.detail));
+          }
+          else {
             reject(new Error('Request failed: ' + xhr.status));
           }
           xhr.abort();
@@ -57,10 +60,28 @@ export class UploadDialog {
       });
     }
     this.onUpdate('COMPILATION_STARTED');
-    const response = await makeRequest(source_code, board, libraries);
+    const response = await makeRequest(source_code, board, libraries).catch(error => {
+      this.onUpdate('COMPILATION_FAILED');
+      if (!error.toString().startsWith("Error: Request failed: 500 ")) {
+        console.error(error);
+        return;
+      }
+      // make the printed red text
+      console.log('%c' + error.toString().replace("Error: Request failed: 500 ", ""), 'color: red');
+
+      // remove the last 4 lines of the error message
+      const errorLines = error.toString().replace("Error: Request failed: 500 ", "").split("\n");
+      errorLines.splice(errorLines.length - 5, 5);
+      const errorString = errorLines.join("\n");
+      this.onError(errorString);
+      this.showReturnOptions();
+    });
+    if (response === undefined) {
+        return;
+    }
     const hex = response['hex']; // Extract the "hex" property from the response
-    this.progressBarWidth += 25;
     this.onUpdate('COMPILATION_COMPLETE');
+    this.progressBarWidth += 25;
 
     if ('serial' in navigator) {
 
@@ -134,5 +155,10 @@ export class UploadDialog {
     this.dialogRef.close("HELP_ENVIRONMENT");
   }
 
+    onError(error: string) {
+      document.getElementById("error-message").innerText = error;
+      document.getElementById("error-message").classList.remove("hidden");
+    }
+
   protected readonly document = document;
 }

yarn.lock

@@ -1592,6 +1592,13 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@leaphy-robotics/leaphy-blockly@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@leaphy-robotics/leaphy-blockly/-/leaphy-blockly-3.0.6.tgz#2f0118d95e8086e4e7bcf4e4e8d5d78d38d65536"
+  integrity sha512-9WVXLXZiIJXLR8gwLrAp4820xe2u26cXxk4NcpTApYT0zOf79CHR33zlZFg2hCv+0VC1J7lCeTvK93nEKsGD/A==
+  dependencies:
+    jsdom "15.2.1"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -5517,13 +5524,6 @@ klona@^2.0.4, klona@^2.0.5:
   resolved "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
-leaphy-blockly@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/leaphy-blockly/-/leaphy-blockly-3.0.1.tgz#63ea44b0f8e2a81c9615ba12573d6178504dc2ed"
-  integrity sha512-1sfROm0fqbt67CnQgX+tgcKjGv06xt6MIlU/jOPY6WK0Sg7gUjDNBqY0i5FJoNw2nVQIFHJTA5nB87zkyl71XA==
-  dependencies:
-    jsdom "15.2.1"
-
 less-loader@11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-11.0.0.tgz#a31b2bc5cdfb62f1c7de9b2d01cd944c22b1a024"