action command prompts

src/app/config/setup/octoprint-authentication/octoprint-authentication.component.ts

@@ -48,7 +48,7 @@ export class OctoprintAuthenticationComponent {
   private sendLoginRequest(): void {
     this.authService.startAuthProcess(this.octoprintURL).subscribe(
       token => {
-        this.notificationService.setNotification(
+        this.notificationService.setInfo(
           $localize`:@@login-request-sent:Login request send!`,
           $localize`:@@login-request-sent-message:Please confirm the request via the popup in the OctoPrint WebUI.`,
         );

src/app/event.service.ts

@@ -3,8 +3,9 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import { ConfigService } from './config/config.service';
-import { PrinterEvent } from './model/event.model';
+import { PrinterEvent, PrinterNotification } from './model/event.model';
 import { SocketService } from './services/socket/socket.service';
+import { NotificationService } from './notification/notification.service';
 
 @Injectable()
 export class EventService implements OnDestroy {
@@ -15,35 +16,89 @@ export class EventService implements OnDestroy {
   public constructor(
     private socketService: SocketService,
     private configService: ConfigService,
+    private notificationService: NotificationService,
     private router: Router,
   ) {
     this.subscriptions.add(
-      this.socketService.getEventSubscribable().subscribe((event: PrinterEvent) => {
-        if (event === PrinterEvent.PRINTING || event === PrinterEvent.PAUSED) {
-          setTimeout(() => {
-            this.printing = true;
-          }, 500);
+      this.socketService.getEventSubscribable().subscribe((event: PrinterEvent | PrinterNotification) => {
+        if (this.isPrinterNotification(event)) {
+          this.handlePrinterNotification(event);
         } else {
-          setTimeout(() => {
-            this.printing = false;
-          }, 1000);
-        }
-
-        if (event === PrinterEvent.CLOSED) {
-          this.router.navigate(['/standby']);
-        } else if (event === PrinterEvent.CONNECTED) {
-          setTimeout(() => {
-            if (this.configService.isTouchscreen()) {
-              this.router.navigate(['/main-screen']);
-            } else {
-              this.router.navigate(['/main-screen-no-touch']);
-            }
-          }, 1000);
+          this.handlePrinterEvent(event);
         }
       }),
     );
   }
 
+  // https://stackoverflow.com/questions/14425568/interface-type-check-with-typescript
+  // https://stackoverflow.com/questions/8511281/check-if-a-value-is-an-object-in-javascript/8511350#8511350
+  private isPrinterNotification(object: any): object is PrinterNotification {
+    return typeof object === 'object'
+      && object !== null
+      && ('text' in object || 'message' in object || 'action' in object);
+  }
+
+  private handlePrinterNotification(event: PrinterNotification): void {
+    const messages = {
+      'FilamentRunout T0': $localize`:@@prompt-filament-runout-t0:Filament runout detected. Ejecting filament, please wait...`,
+      'Nozzle Parked': $localize`:@@prompt-filament-runout:A filament runout has been detected. Please remove the ejected filament, insert filament from a new spool and press Continue.`,
+      'Continue': $localize`:@@prompt-continue:Continue`,
+      'Paused': $localize`:@@prompt-filament-runout-resume:The filament has been primed. Do you want to continue printing?`,
+      'PurgeMore': $localize`:@@prompt-filament-runout-purge:Purge more filament`,
+      'Heater Timeout': $localize`:@@prompt-heater-timeout:The hotend has been disabled due to inactivity, to avoid burning the filament. Press Reheat when ready to resume.`,
+      'Reheat': $localize`:@@prompt-reheat:Reheat`,
+      'Reheat Done': $localize`:@@prompt-reheat-done:The hotend is now ready.`,
+    };
+    if (event.action === 'close') {
+      this.notificationService.closeNotification();
+    } else if (event.choices?.length > 0) {
+      // event is action:prompt
+      this.notificationService.setPrompt(
+        $localize`:@@action-required:Action required`,
+        messages[event.text] || event.text,
+        event.choices.map(c => messages[c] || c)
+      );
+    } else if (event.choices?.length == 0) {
+      // event is action:prompt without choices
+      this.notificationService.setWarning(
+        $localize`:@@printer-information:Printer information`,
+        messages[event.text] || event.text
+      );
+    } else {
+      // event is action:notification
+      // this.notificationService.setInfo(
+      //   $localize`:@@printer-information:Printer information`,
+      //   messages[event.message] || event.message
+      // );
+      // TODO: annoying as a notification
+      // should be put with an autoclear timeout in the bottom-right statusline
+    }
+  }
+
+  private handlePrinterEvent(event: PrinterEvent): void {
+    if (event === PrinterEvent.PRINTING || event === PrinterEvent.PAUSED) {
+      setTimeout(() => {
+        this.printing = true;
+      }, 500);
+    } else {
+      setTimeout(() => {
+        this.printing = false;
+      }, 1000);
+    }
+
+    if (event === PrinterEvent.CLOSED) {
+      this.router.navigate(['/standby']);
+    } else if (event === PrinterEvent.CONNECTED) {
+      setTimeout(() => {
+        if (this.configService.isTouchscreen()) {
+          this.router.navigate(['/main-screen']);
+        } else {
+          this.router.navigate(['/main-screen-no-touch']);
+        }
+      }, 1000);
+    }
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }

src/app/model/event.model.ts

@@ -6,3 +6,11 @@ export enum PrinterEvent {
   IDLE,
   UNKNOWN,
 }
+
+// either notification (message) or prompt (action, text and choices)
+export interface PrinterNotification {
+  message?: string,
+  action?: string,
+  text?: string,
+  choices?: string[],
+}

src/app/model/system.model.ts

@@ -2,6 +2,7 @@ export interface Notification {
   heading: string;
   text: string;
   type: string;
+  choices?: string[];
   closed: () => void;
 }
 

src/app/notification/notification.component.html

@@ -1,9 +1,29 @@
 <div
   class="notification"
+  *ngIf="!notification.choices"
   [ngClass]="['notification__border-' + notification.type, show ? 'notification__show' : '']"
   (click)="hideNotification()"
 >
   <span class="notification__heading">{{ notification.heading }}</span>
   <span class="notification__text">{{ notification.text }}</span>
   <span class="notification__close" i18n="@@tap-close">tap this card to close it</span>
 </div>
+
+<div
+  class="notification-prompt"
+  *ngIf="notification.choices?.length > 0"
+  [ngClass]="[show ? 'notification-prompt__show' : '']"
+>
+  <div class="notification__heading">{{ notification.heading }}</div>
+  <div class="notification__text">{{ notification.text }}</div>
+  <div class="notification-prompt__choices">
+    <div
+      class="notification-prompt__choice"
+      *ngFor="let choice of notification.choices; index as i; first as isFirst"
+      [ngClass]="[isFirst ? 'notification-prompt__choice-first' : '']"
+      (click)="answerPrompt(i)"
+    >
+      {{ choice }}
+    </div>
+  </div>
+</div>

src/app/notification/notification.component.scss

@@ -11,6 +11,46 @@
   z-index: 100;
   border-right: 1vw solid #5a6675;
 
+  &-prompt {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0vw;
+    top: -100vh;
+    transition: top 0.7s ease-in-out;
+    background-color: #5a6675;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    &__show {
+      top: 0vh;
+    }
+
+    &__choices {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 0vw 5vw;
+    }
+
+    &__choice {
+      display: block;
+      font-size: 3vw;
+      background-color: #2196f3;
+      text-align: center;
+      padding: 3vh;
+      border-radius: 0.8vw;
+      margin: 1vw;
+
+      &-first {
+        background-color: #44bd32;
+      }
+    }
+  }
+
   &__show {
     top: 5vh;
   }
@@ -47,7 +87,7 @@
       border-left: 1vw solid #fbc531;
     }
 
-    &-notification {
+    &-info {
       border-left: 1vw solid #44bd32;
     }
   }

src/app/notification/notification.component.ts

@@ -1,7 +1,10 @@
 import { Component, NgZone, OnDestroy } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { Subscription } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { Notification } from '../model';
+import { ConfigService } from '../config/config.service';
 import { NotificationService } from './notification.service';
 
 @Component({
@@ -16,11 +19,17 @@ export class NotificationComponent implements OnDestroy {
     heading: '',
     text: '',
     type: '',
+    choices: null,
     closed: null,
   };
   public show = false;
 
-  public constructor(private notificationService: NotificationService, private zone: NgZone) {
+  public constructor(
+    private notificationService: NotificationService,
+    private zone: NgZone,
+    private http: HttpClient,
+    private configService: ConfigService,
+  ) {
     this.subscriptions.add(
       this.notificationService
         .getObservable()
@@ -35,6 +44,21 @@ export class NotificationComponent implements OnDestroy {
     }
   }
 
+  public answerPrompt(index: number): void {
+    this.http
+      .post(
+        this.configService.getApiURL('plugin/action_command_prompt'),
+        { command: 'select', choice: index },
+        this.configService.getHTTPHeaders()
+      )
+      .pipe(
+        catchError(error =>
+          this.notificationService.setError($localize`:@@error-answer-prompt:Can't answer prompt!`, error.message),
+        ),
+      )
+      .subscribe();
+  }
+
   private setNotification(notification: Notification | 'close'): void {
     this.zone.run(() => {
       if (notification === 'close') {

src/app/notification/notification.service.ts

@@ -49,13 +49,25 @@ export class NotificationService {
     });
   }
 
-  public setNotification(heading: string, text: string): Promise<void> {
+  public setInfo(heading: string, text: string): Promise<void> {
     return new Promise(resolve => {
       if (this.observer) {
-        this.observer.next({ heading, text, type: 'notification', closed: resolve });
+        this.observer.next({ heading, text, type: 'info', closed: resolve });
       } else {
         setTimeout(() => {
-          this.setNotification(heading, text);
+          this.setInfo(heading, text);
+        }, 1000);
+      }
+    });
+  }
+
+  public setPrompt(heading: string, text: string, choices: string[]): Promise<void> {
+    return new Promise(resolve => {
+      if (this.observer) {
+        this.observer.next({ heading, text, type: 'prompt', choices, closed: resolve });
+      } else {
+        setTimeout(() => {
+          this.setPrompt(heading, text, choices);
         }, 1000);
       }
     });

src/app/services/socket/socket.octoprint.service.ts

@@ -7,7 +7,7 @@ import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 
 import { ConfigService } from '../../config/config.service';
 import { ConversionService } from '../../conversion.service';
-import { JobStatus, PrinterEvent, PrinterState, PrinterStatus, SocketAuth } from '../../model';
+import { JobStatus, PrinterEvent, PrinterNotification, PrinterState, PrinterStatus, SocketAuth } from '../../model';
 import {
   DisplayLayerProgressData,
   OctoprintFilament,
@@ -25,7 +25,7 @@ export class OctoPrintSocketService implements SocketService {
 
   private printerStatusSubject: Subject<PrinterStatus>;
   private jobStatusSubject: Subject<JobStatus>;
-  private eventSubject: Subject<PrinterEvent>;
+  private eventSubject: Subject<PrinterEvent | PrinterNotification>;
 
   private printerStatus: PrinterStatus;
   private jobStatus: JobStatus;
@@ -39,7 +39,7 @@ export class OctoPrintSocketService implements SocketService {
   ) {
     this.printerStatusSubject = new ReplaySubject<PrinterStatus>();
     this.jobStatusSubject = new Subject<JobStatus>();
-    this.eventSubject = new ReplaySubject<PrinterEvent>();
+    this.eventSubject = new ReplaySubject<PrinterEvent | PrinterNotification>();
   }
 
   //==== SETUP & AUTH ====//
@@ -116,6 +116,27 @@ export class OctoPrintSocketService implements SocketService {
     this.socket.next(payload);
   }
 
+  private handlePluginMessage(pluginMessage: OctoprintPluginMessage) {
+    const plugins = [
+      {
+        check: (plugin: string) => plugin === 'DisplayLayerProgress-websocket-payload'
+          && this.configService.isDisplayLayerProgressEnabled(),
+        handler: (data: unknown) => {
+          this.extractFanSpeed(data as DisplayLayerProgressData);
+          this.extractLayerHeight(data as DisplayLayerProgressData);
+        },
+      },
+      {
+        check: (plugin: string) => ['action_command_prompt', 'action_command_notification'].includes(plugin),
+        handler: (data: unknown) => this.eventSubject.next(data as PrinterNotification),
+      },
+    ];
+
+    plugins.forEach(plugin =>
+      plugin.check(pluginMessage.plugin.plugin) && plugin.handler(pluginMessage.plugin.data)
+    );
+  }
+
   private setupSocket(resolve: () => void) {
     this.socket.subscribe(message => {
       if (Object.hasOwnProperty.bind(message)('current')) {
@@ -124,14 +145,7 @@ export class OctoPrintSocketService implements SocketService {
       } else if (Object.hasOwnProperty.bind(message)('event')) {
         this.extractPrinterEvent(message as OctoprintSocketEvent);
       } else if (Object.hasOwnProperty.bind(message)('plugin')) {
-        const pluginMessage = message as OctoprintPluginMessage;
-        if (
-          pluginMessage.plugin.plugin === 'DisplayLayerProgress-websocket-payload' &&
-          this.configService.isDisplayLayerProgressEnabled()
-        ) {
-          this.extractFanSpeed(pluginMessage.plugin.data as DisplayLayerProgressData);
-          this.extractLayerHeight(pluginMessage.plugin.data as DisplayLayerProgressData);
-        }
+        this.handlePluginMessage(message as OctoprintPluginMessage);
       } else if (Object.hasOwnProperty.bind(message)('reauth')) {
         this.systemService.getSessionKey().subscribe(socketAuth => this.authenticateSocket(socketAuth));
       } else if (Object.hasOwnProperty.bind(message)('connected')) {
@@ -303,7 +317,7 @@ export class OctoPrintSocketService implements SocketService {
     return this.jobStatusSubject.pipe(startWith(this.jobStatus));
   }
 
-  public getEventSubscribable(): Observable<PrinterEvent> {
+  public getEventSubscribable(): Observable<PrinterEvent | PrinterNotification> {
     return this.eventSubject;
   }
 }