Add PrusaMMU Support. Fixes #1176

src/components/index.ts

@@ -17,6 +17,7 @@ import { MainScreenComponent } from './main-screen/main-screen.component';
 import { PrintControlComponent } from './main-screen/print-control/print-control.component';
 import { PrinterStatusComponent } from './main-screen/printer-status/printer-status.component';
 import { NotificationComponent } from './notification/notification.component';
+import { PrusaMMUComponent } from './plugins/prusa-mmu/prusa-mmu.component';
 import { ResetComponent } from './reset/reset.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SettingsIconComponent } from './settings/settings-icon/settings-icon.component';
@@ -72,4 +73,5 @@ export default [
   StandbyComponent,
   UpdateComponent,
   QuickControlComponent,
+  PrusaMMUComponent,
 ];

src/components/main-screen/main-screen.component.html

@@ -10,3 +10,4 @@
   <app-printer-status></app-printer-status>
   <app-bottom-bar></app-bottom-bar>
 </div>
+<app-prusa-mmu *ngIf="usePrusaMMU && prusaMMUService.filamentPickerIsVisible"></app-prusa-mmu>

src/components/main-screen/main-screen.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { ConfigService } from '../../services/config.service';
 import { EventService } from '../../services/event.service';
 import { FilesService } from '../../services/files/files.service';
+import { PrusaMMUService } from '../../services/prusammu/prusa-mmu.service';
 
 @Component({
   selector: 'app-main-screen',
@@ -12,15 +13,19 @@ import { FilesService } from '../../services/files/files.service';
 })
 export class MainScreenComponent {
   public printing = false;
+  usePrusaMMU = false;
 
   public constructor(
     private eventService: EventService,
     private fileService: FilesService,
     private configService: ConfigService,
     private router: Router,
+    public prusaMMUService: PrusaMMUService,
   ) {
     if (!this.configService.isInitialized()) {
       this.router.navigate(['/']);
+    } else {
+      this.usePrusaMMU = this.configService.isPrusaMMUPluginEnabled();
     }
   }
 

src/components/plugins/prusa-mmu/enabled-filament-only.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { Filament } from '../../../model/octoprint/octoprint-settings.model';
+
+@Pipe({ name: 'enabledFilamentOnly', standalone: false })
+export class EnabledFilamentOnlyPipe implements PipeTransform {
+  public transform(filaments: Filament[]): Filament[] {
+    return filaments.filter(filament => filament.enabled);
+  }
+}

src/components/plugins/prusa-mmu/prusa-mmu.component.html

@@ -0,0 +1,28 @@
+<div class="prusammu">
+  <div class="prusammu-wrapper">
+    <div class="prusammu-container" (click)="$event.stopPropagation()">
+      <fa-icon icon="xmark" class="prusammu__close" (click)="cancelSelection()" />
+      <div class="prusammu__content">
+        <div class="prusammu__heading" i18n="@@select-filament-for-mmu">select filament for MMU</div>
+        <div *ngIf="filamentsReady">
+          <div class="prusammu__sub-heading" i18n="@@select-filament-from-source">
+            from: {{ prusaMMUService.source }}
+          </div>
+          <ul class="prusammu__list files">
+            <li
+              matRipple
+              class="files__object"
+              (click)="setFilament(filament)"
+              *ngFor="let filament of prusaMMUService.filaments | enabledFilamentOnly">
+              <fa-icon [icon]="['fas', 'paint-brush']" [style.color]="filament.color"></fa-icon>
+              <span class="prusammu__section-heading">{{ filament.id }}: {{ filament.name }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="files" *ngIf="!filamentsReady">
+          <ng-lottie id="loadingAnimation" [options]="loadingOptions"></ng-lottie>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>