chore: add board selector (#245)

* chore: add board selector * chore: prettier * fix: switch from blocks to env issue * chore: prettier * chore: fix esp32 protocol * chore: fix rp2040 protocol * chore: change generics to baserobots (DRY) * fix: arduino every -> arduino nano every * chore: remove feature flags for block env
leaphy-robotics · Apr 23, 2024 · b3ea191 · b3ea191
1 parent a499d96
commit b3ea191
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 13 deletions.
diff --git a/src/app/domain/robots.ts b/src/app/domain/robots.ts
@@ -1,3 +1,4 @@
+import { arduino } from "@leaphy-robotics/leaphy-blocks";
 import Avrdude from "../services/arduino-uploader/protocols/avrdude";
 import {
     BaseNano,
@@ -6,6 +7,8 @@ import {
     BaseUno,
     RobotType,
 } from "./robot.type";
+import DFU from "../services/arduino-uploader/protocols/dfu";
+import Pico from "../services/arduino-uploader/protocols/pico";
 
 const defaultLibraries = [
     "Leaphy Extensions",
@@ -121,15 +124,6 @@ export const arduinoUnoRobotType = new BaseUno(
     },
 );
 
-export const genericRobotType = new BaseUno(
-    "l_code",
-    "Leaphy C++",
-    "c++.svg",
-    null,
-    defaultLibraries.concat(["QMC5883LCompass", "Arduino_APDS9960"]),
-    {},
-);
-
 export const arduinoNanoRobotType = new BaseNano(
     "l_nano",
     "Arduino Nano",
@@ -195,3 +189,76 @@ export const arduinoMegaRobotType = new RobotType(
         showLeaphySensors: true,
     },
 );
+
+/* Generic robots for the C++ code editor */
+
+export const genericRobotType = new BaseUno(
+    "l_code",
+    "Leaphy C++",
+    "c++.svg",
+    null,
+    [],
+);
+
+export const arduinoUnoRobotTypeGeneric = new BaseUno(
+    "l_uno",
+    "Arduino Uno",
+    "uno.svg",
+    null,
+    [],
+);
+
+export const arduinoMegaRobotTypeGeneric = new RobotType(
+    "l_mega",
+    { protocol: Avrdude, microcontroller: "atmega2560" },
+    "Arduino Mega",
+    "mega.svg",
+    null,
+    "arduino:avr:mega",
+    "arduino:avr",
+    [],
+);
+
+export const arduinoNanoRobotTypeGeneric = new BaseNano(
+    "l_nano",
+    "Arduino Nano",
+    "nano.svg",
+    null,
+    [],
+);
+
+export const arduinoNanoESP32RobotTypeGeneric = new BaseNanoESP32(
+    "l_nano_esp32",
+    "Arduino Nano ESP32",
+    "nano.svg",
+    null,
+    [],
+);
+
+export const arduinoNanoEveryRobotTypeGeneric = new RobotType(
+    "l_nano_every",
+    { protocol: Avrdude, microcontroller: "megaavr" },
+    "Arduino Nano Every",
+    "nano.svg",
+    null,
+    "megaavr:avr:every",
+    "megaavr:avr",
+    [],
+);
+
+export const arduinoNanoRP2040RobotTypeGeneric = new BaseNanoRP2040(
+    "l_nano_rp2040",
+    "Arduino Nano RP2040",
+    "nano.svg",
+    null,
+    [],
+);
+
+export const genericRobots = [
+    arduinoUnoRobotTypeGeneric,
+    arduinoNanoRobotTypeGeneric,
+    arduinoNanoESP32RobotTypeGeneric,
+    arduinoNanoRP2040RobotTypeGeneric,
+    arduinoMegaRobotTypeGeneric,
+    arduinoNanoEveryRobotTypeGeneric,
+];
diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html
@@ -8,9 +8,29 @@
     <div class="flex-header">
         <div class="flex-buttons">
             <!-- Add ngIf to check for URL ending with "driverissues" -->
+
             @if (
                 isDriverIssuesUrl() && this.appState.selectedRobotType$ | async
             ) {
+                @if (
+                    (appState.codeEditor$ | async) === CodeEditorType.CPP &&
+                    (appState.canChangeCodeEditor$ | async) === false
+                ) {
+                    <!--                    Add a drop down to select an robot -->
+                    <mat-form-field class="robot-select-dropdown">
+                        <mat-select
+                            [(value)]="selectedRobot"
+                            (selectionChange)="onRobotSelected($event)"
+                        >
+                            <mat-option
+                                *ngFor="let robot of genericRobots"
+                                [value]="robot.name"
+                            >
+                                {{ robot.name }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                }
                 <button mat-stroked-button [matMenuTriggerFor]="projectMenu">
                     {{ "PROJECT" | translate }}
                 </button>

diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss
@@ -1,3 +1,8 @@
+.robot-select-dropdown {
+    padding-top: 5%;
+    padding-right: 5%;
+}
+
 .header-container {
     background-color: var(--leaphy-color-primary);
     padding: 10px 0; /* Added padding to prevent content from being too close to the edges */

diff --git a/src/app/modules/components/header/header.component.ts b/src/app/modules/components/header/header.component.ts
@@ -8,7 +8,11 @@ import { CodeEditorType } from "../../../domain/code-editor.type";
 import { RobotWiredState } from "../../../state/robot.wired.state";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import JSZip from "jszip";
-import { microPythonRobotType } from "../../../domain/robots";
+import {
+    arduinoUnoRobotType,
+    genericRobots,
+    microPythonRobotType,
+} from "../../../domain/robots";
 import { DebugInformationDialog } from "../../core/dialogs/debug-information/debug-information.dialog";
 import { MatDialog } from "@angular/material/dialog";
 import { UploadDialog } from "../../core/dialogs/upload/upload.dialog";
@@ -17,13 +21,18 @@ import { PythonUploaderService } from "../../../services/python-uploader/PythonU
 import { ConnectPythonDialog } from "../../core/dialogs/connect-python/connect-python.dialog";
 import { StatusMessageDialog } from "../../core/dialogs/status-message/status-message.dialog";
 import { WorkspaceService } from "../../../services/workspace.service";
+import { MatSelectChange } from "@angular/material/select";
+import { RobotType } from "../../../domain/robot.type";
 
 @Component({
     selector: "app-header",
     templateUrl: "./header.component.html",
     styleUrls: ["./header.component.scss"],
 })
 export class HeaderComponent {
+    selectedRobot: string =
+        this.appState.selectedRobotType?.name || genericRobots[0].name;
+
     constructor(
         public appState: AppState,
         public blocklyState: BlocklyEditorState,
@@ -246,4 +255,17 @@ export class HeaderComponent {
 
     protected readonly AppState = AppState;
     protected readonly microPythonRobotType = microPythonRobotType;
+    protected readonly CodeEditorType = CodeEditorType;
+
+    onRobotSelected($event: MatSelectChange) {
+        this.selectedRobot = $event.value;
+        for (const robot of this.genericRobots) {
+            if (robot.name === this.selectedRobot) {
+                this.appState.setSelectedRobotType(robot);
+                break;
+            }
+        }
+    }
+
+    protected readonly genericRobots = genericRobots;
 }
diff --git a/src/app/modules/shared/components/button-bar/button-bar.component.html b/src/app/modules/shared/components/button-bar/button-bar.component.html
@@ -1,5 +1,5 @@
 <div class="sidenav-buttons">
-    @if ((appState.codeEditor$ | async) !== CodeEditorType.Python) {
+    @if ((appState.codeEditor$ | async) === CodeEditorType.Beginner) {
         <button
             [attr.tooltip]="'READ_CODE' | translate"
             [ngClass]="{
@@ -8,7 +8,6 @@
                     (blocklyState.isSideNavOpen$ | async)
             }"
             (click)="onSideNavToggled()"
-            [disabled]="(appState.codeEditor$ | async) !== 1"
         >
             <mat-icon>code</mat-icon>
         </button>

diff --git a/src/app/modules/shared/components/button-bar/button-bar.component.ts b/src/app/modules/shared/components/button-bar/button-bar.component.ts
@@ -31,4 +31,6 @@ export class ButtonBarComponent {
 
     protected readonly AppState = AppState;
     protected readonly CodeEditorType = CodeEditorType;
+
+    onShowBoardSelectClicked() {}
 }
diff --git a/src/app/state/app.state.ts b/src/app/state/app.state.ts
@@ -6,6 +6,7 @@ import {
     arduinoNanoRobotType,
     arduinoNanoRP2040RobotType,
     arduinoUnoRobotType,
+    genericRobots,
     genericRobotType,
     leaphyClickRobotType,
     leaphyFlitzNanoRobotType,
@@ -170,7 +171,15 @@ export class AppState {
 
         this.canChangeCodeEditor$ = this.selectedRobotType$
             .pipe(filter((robotType) => !!robotType))
-            .pipe(map((robotType) => robotType !== genericRobotType));
+            .pipe(
+                map(
+                    (robotType) =>
+                        !(
+                            genericRobots.includes(robotType) ||
+                            robotType === genericRobotType
+                        ),
+                ),
+            );
     }
 
     private selectedRobotTypeSubject$ = new BehaviorSubject<RobotType>(null);