Fix various issues with the initial setup

src/app/app.service.ts

@@ -28,28 +28,28 @@ export class AppService {
 
     // list of all error following an upgrade
     this.updateError = {
-      "/printer should have required property 'zBabystepGCode'": config => (config.printer.zBabystepGCode = 'M290 Z'),
-      "/plugins should have required property 'tpLinkSmartPlug'": config =>
+      "/printer must have required property 'zBabystepGCode'": config => (config.printer.zBabystepGCode = 'M290 Z'),
+      "/plugins must have required property 'tpLinkSmartPlug'": config =>
         (config.plugins.tpLinkSmartPlug = { enabled: false, smartPlugIP: '127.0.0.1' }),
-      "/plugins should have required property 'tasmota'": config =>
+      "/plugins must have required property 'tasmota'": config =>
         (config.plugins.tasmota = { enabled: false, ip: '127.0.0.1', index: null }),
-      "/plugins should have required property 'tasmotaMqtt'": config =>
+      "/plugins must have required property 'tasmotaMqtt'": config =>
         (config.plugins.tasmotaMqtt = { enabled: false, topic: 'topic', relayNumber: null }),
-      "/octodash should have required property 'previewProgressCircle'": config =>
+      "/octodash must have required property 'previewProgressCircle'": config =>
         (config.octodash.previewProgressCircle = false),
-      "/octodash should have required property 'turnOnPrinterWhenExitingSleep'": config => {
+      "/octodash must have required property 'turnOnPrinterWhenExitingSleep'": config => {
         config.octodash.turnOnPrinterWhenExitingSleep = config.plugins.psuControl.turnOnPSUWhenExitingSleep ?? false;
         delete config.plugins.psuControl.turnOnPSUWhenExitingSleep;
       },
-      "/octodash should have required property 'screenSleepCommand'": config =>
+      "/octodash must have required property 'screenSleepCommand'": config =>
         (config.octodash.screenSleepCommand = 'xset dpms force standby'),
-      "/octodash should have required property 'screenWakeupCommand'": config =>
+      "/octodash must have required property 'screenWakeupCommand'": config =>
         (config.octodash.screenWakeupCommand = 'xset s off && xset -dpms && xset s noblank'),
-      "/octodash should have required property 'invertAxisControl'": config =>
+      "/octodash must have required property 'invertAxisControl'": config =>
         (config.octodash.invertAxisControl = { x: false, y: false, z: false }),
-      "/printer should have required property 'disableExtruderGCode'": config =>
+      "/printer must have required property 'disableExtruderGCode'": config =>
         (config.printer.disableExtruderGCode = 'M18 E'),
-      ".octodash should have required property 'showExtruderControl'": config =>
+      "/octodash must have required property 'showExtruderControl'": config =>
         (config.octodash.showExtruderControl = true),
       "/plugins must have required property 'spoolManager'": config =>
         (config.plugins.spoolManager = { enabled: false }),

src/app/bottom-bar/bottom-bar.component.ts

@@ -47,7 +47,7 @@ export class BottomBarComponent implements OnDestroy {
 
     this.subscriptions.add(
       this.socketService.getPrinterStatusSubscribable().subscribe((printerStatus: PrinterStatus): void => {
-        this.printerStatus = printerStatus.status;
+        this.printerStatus = printerStatus?.status;
         if (!this.printerReady) {
           this.printerReady = [PrinterState.operational, PrinterState.printing, PrinterState.paused].includes(
             this.printerStatus,

src/app/config/setup/personalization/personalization.service.ts

@@ -13,7 +13,7 @@ export class PersonalizationService {
 
   public getActivePrinterProfileName(octoprintURL: string, apiKey: string): Observable<string> {
     return this.http
-      .get<OctoprintPrinterProfiles>(`${octoprintURL}printerprofiles`, {
+      .get<OctoprintPrinterProfiles>(`${octoprintURL}api/printerprofiles`, {
         headers: new HttpHeaders({
           'x-api-key': apiKey,
         }),

src/app/config/setup/plugins/plugins.component.html

@@ -3,84 +3,81 @@
 <div class="setup__plugin-list">
   <div class="scroll__thumb-inactive"></div>
   <span>
-    <app-toggle-switch [value]="displayLayerProgressPlugin"
-      (valueChange)="displayLayerProgressPluginChange.emit(!displayLayerProgressPlugin)">
+    <app-toggle-switch
+      [value]="displayLayerProgressPlugin"
+      (valueChange)="displayLayerProgressPluginChange.emit(!displayLayerProgressPlugin)"
+    >
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-display-layer-progress">
-      Display Layer Progress&nbsp;&nbsp;
-    </ng-container>
+    <ng-container i18n="@@plugin-display-layer-progress">Display Layer Progress</ng-container>
   </span>
 
   <span>
     <app-toggle-switch [value]="enclosurePlugin" (valueChange)="enclosurePluginChange.emit(!enclosurePlugin)">
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-enclosure">
-      Enclosure
-    </ng-container>
+    <ng-container i18n="@@plugin-enclosure">Enclosure</ng-container>
   </span>
 
   <span>
-    <app-toggle-switch [value]="filamentManagerPlugin"
-      (valueChange)="filamentManagerPluginChange.emit(!filamentManagerPlugin)"></app-toggle-switch>
-    <ng-container i18n="@@plugin-filament-manager">
-      Filament Manager
-    </ng-container>
+    <app-toggle-switch
+      [value]="filamentManagerPlugin"
+      (valueChange)="filamentManagerPluginChange.emit(!filamentManagerPlugin)"
+    ></app-toggle-switch>
+    <ng-container i18n="@@plugin-filament-manager">Filament Manager</ng-container>
   </span>
 
   <span>
-    <app-toggle-switch [value]="preheatButtonPlugin"
-      (valueChange)="preheatButtonPluginChange.emit(!preheatButtonPlugin)">
+    <app-toggle-switch
+      [value]="spoolManagerPlugin"
+      (valueChange)="spoolManagerPluginChange.emit(!spoolManagerPlugin)"
+    ></app-toggle-switch>
+    <ng-container i18n="@@plugin-spool-manager">Spool Manager (Beta)</ng-container>
+  </span>
+
+  <span>
+    <app-toggle-switch
+      [value]="preheatButtonPlugin"
+      (valueChange)="preheatButtonPluginChange.emit(!preheatButtonPlugin)"
+    >
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-preheat-button">
-      Preheat Button
-    </ng-container>
+    <ng-container i18n="@@plugin-preheat-button">Preheat Button</ng-container>
   </span>
 
   <span>
-    <app-toggle-switch [value]="printTimeGeniusPlugin"
-      (valueChange)="printTimeGeniusPluginChange.emit(!printTimeGeniusPlugin)"></app-toggle-switch>
-    <ng-container i18n="@@plugin-print-time-genius">
-      Print Time Genius
-    </ng-container>
+    <app-toggle-switch
+      [value]="printTimeGeniusPlugin"
+      (valueChange)="printTimeGeniusPluginChange.emit(!printTimeGeniusPlugin)"
+    ></app-toggle-switch>
+    <ng-container i18n="@@plugin-print-time-genius">Print Time Genius</ng-container>
   </span>
 
   <span>
     <app-toggle-switch [value]="psuControlPlugin" (valueChange)="psuControlPluginChange.emit(!psuControlPlugin)">
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-psu-control">
-      PSU Control
-    </ng-container>
+    <ng-container i18n="@@plugin-psu-control">PSU Control</ng-container>
   </span>
 
   <span>
-    <app-toggle-switch [value]="ophomPlugin" (valueChange)="ophomPluginChange.emit(!ophomPlugin)">
-    </app-toggle-switch>
-    <ng-container i18n="@@plugin-opom">
-      Ophom (Phillips HUE)
-    </ng-container>
+    <app-toggle-switch [value]="ophomPlugin" (valueChange)="ophomPluginChange.emit(!ophomPlugin)"> </app-toggle-switch>
+    <ng-container i18n="@@plugin-opom">Ophom (Phillips HUE)</ng-container>
   </span>
 
   <span>
-    <app-toggle-switch [value]="tpLinkSmartPlugPlugin"
-      (valueChange)="tpLinkSmartPlugPluginChange.emit(!tpLinkSmartPlugPlugin)"></app-toggle-switch>
-    <ng-container i18n="@@plugin-tplink-smartplug">
-      TPLink SmartPlug
-    </ng-container>
+    <app-toggle-switch
+      [value]="tpLinkSmartPlugPlugin"
+      (valueChange)="tpLinkSmartPlugPluginChange.emit(!tpLinkSmartPlugPlugin)"
+    ></app-toggle-switch>
+    <ng-container i18n="@@plugin-tplink-smartplug"> TPLink SmartPlug </ng-container>
   </span>
 
   <span>
     <app-toggle-switch [value]="tasmotaPlugin" (valueChange)="tasmotaPluginChange.emit(!tasmotaPlugin)">
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-tasmota">
-      Tasmota
-    </ng-container>
+    <ng-container i18n="@@plugin-tasmota"> Tasmota </ng-container>
   </span>
 
   <span>
     <app-toggle-switch [value]="tasmotaMqttPlugin" (valueChange)="tasmotaMqttPluginChange.emit(!tasmotaMqttPlugin)">
     </app-toggle-switch>
-    <ng-container i18n="@@plugin-tasmota-mqtt">
-      Tasmota MQTT
-    </ng-container>
+    <ng-container i18n="@@plugin-tasmota-mqtt"> Tasmota MQTT </ng-container>
   </span>
-</div>
+</div>

src/app/config/setup/plugins/plugins.component.ts

@@ -9,6 +9,7 @@ export class PluginsComponent {
   @Input() displayLayerProgressPlugin: boolean;
   @Input() enclosurePlugin: boolean;
   @Input() filamentManagerPlugin: boolean;
+  @Input() spoolManagerPlugin: boolean;
   @Input() preheatButtonPlugin: boolean;
   @Input() printTimeGeniusPlugin: boolean;
   @Input() psuControlPlugin: boolean;
@@ -20,6 +21,7 @@ export class PluginsComponent {
   @Output() displayLayerProgressPluginChange = new EventEmitter<boolean>();
   @Output() enclosurePluginChange = new EventEmitter<boolean>();
   @Output() filamentManagerPluginChange = new EventEmitter<boolean>();
+  @Output() spoolManagerPluginChange = new EventEmitter<boolean>();
   @Output() preheatButtonPluginChange = new EventEmitter<boolean>();
   @Output() printTimeGeniusPluginChange = new EventEmitter<boolean>();
   @Output() psuControlPluginChange = new EventEmitter<boolean>();

src/app/config/setup/setup.component.html

@@ -57,6 +57,7 @@
     [(displayLayerProgressPlugin)]="config.plugins.displayLayerProgress.enabled"
     [(enclosurePlugin)]="config.plugins.enclosure.enabled"
     [(filamentManagerPlugin)]="config.plugins.filamentManager.enabled"
+    [(spoolManagerPlugin)]="config.plugins.spoolManager.enabled"
     [(preheatButtonPlugin)]="config.plugins.preheatButton.enabled"
     [(printTimeGeniusPlugin)]="config.plugins.printTimeGenius.enabled"
     [(psuControlPlugin)]="config.plugins.psuControl.enabled"
@@ -74,26 +75,20 @@
           [src]="octoprintConnection ? 'assets/checkmark.svg' : 'assets/error.svg'"
           class="setup__validation-check-icon"
         />
-        <ng-container i18n="@@checking-octoprint-connection">
-          Octoprint Connection
-        </ng-container>
+        <ng-container i18n="@@checking-octoprint-connection"> Octoprint Connection </ng-container>
       </span>
       <div *ngIf="octoprintConnection">
         <span class="setup__validation-check">
           <img src="assets/checkmark.svg" class="setup__validation-check-icon" *ngIf="configValid" />
           <img src="assets/error.svg" class="setup__validation-check-icon" *ngIf="!configValid" />
-          <ng-container i18n="@@checking-config">
-            Validating Config
-          </ng-container>
+          <ng-container i18n="@@checking-config"> Validating Config </ng-container>
         </span>
       </div>
       <div *ngIf="configValid">
         <span class="setup__validation-check">
           <img src="assets/checkmark.svg" class="setup__validation-check-icon" *ngIf="configSaved === null" />
           <img src="assets/error.svg" class="setup__validation-check-icon" *ngIf="configSaved !== null" />
-          <ng-container i18n="@@checking-save">
-            Saving Config
-          </ng-container>
+          <ng-container i18n="@@checking-save"> Saving Config </ng-container>
         </span>
         <span class="setup__validation-errors" *ngIf="configSaved">{{ configSaved }}</span>
       </div>

src/app/config/setup/setup.component.ts

@@ -117,7 +117,7 @@ export class ConfigSetupComponent implements OnInit, OnDestroy {
   }
 
   public finishWizard(): void {
-    this.router.navigate(['/main-screen']);
+    this.electronService.send('reload');
   }
 
   private changePage(value: number): void {