Added Profile selection and a Standby Clock

Author: makers-cave

src/app/app.module.ts

@@ -64,6 +64,10 @@ import { ToggleSwitchComponent } from './shared/toggle-switch/toggle-switch.comp
 import { StandbyComponent } from './standby/standby.component';
 import { UpdateComponent } from './update/update.component';
 import { URLSafePipe } from './url.pipe';
+import { ProfilesComponent } from './profiles/profiles.component';
+import { ProfileService } from './services/profiles/profiles.service';
+import { ProfileOctoprintService } from './services/profiles/profiles.octoprint.service';
+import { ConfirmComponent } from './confirm/confirm.component';
 
 export function playerFactory(): LottiePlayer {
   return player;
@@ -103,6 +107,8 @@ export function playerFactory(): LottiePlayer {
     PurgeFilamentComponent,
     CustomActionsComponent,
     ToggleSwitchComponent,
+    ProfilesComponent,
+    ConfirmComponent,
   ],
   imports: [
     AppRoutingModule,
@@ -123,6 +129,17 @@ export function playerFactory(): LottiePlayer {
     EventService,
     NotificationService,
     [
+      {
+        provide: ProfileService,
+        deps: [ConfigService, NotificationService, HttpClient],
+        useFactory: (
+          configService: ConfigService,
+          notificationService: NotificationService,
+          httpClient: HttpClient,
+        ) => {
+          return new ProfileOctoprintService(configService, notificationService, httpClient);
+        },
+      },
       {
         provide: SystemService,
         deps: [ConfigService, NotificationService, HttpClient],

src/app/app.routing.module.ts

@@ -9,6 +9,7 @@ import { FilamentComponent } from './filament/filament.component';
 import { FilesComponent } from './files/files.component';
 import { MainScreenComponent } from './main-screen/main-screen.component';
 import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component';
+import { ProfilesComponent } from './profiles/profiles.component';
 import { SettingsComponent } from './settings/settings.component';
 import { StandbyComponent } from './standby/standby.component';
 
@@ -49,6 +50,10 @@ const routes: Routes = [
     path: 'standby',
     component: StandbyComponent,
   },
+  {
+    path: 'profiles',
+    component: ProfilesComponent,
+  },
 ];
 
 @NgModule({

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

@@ -1,6 +1,6 @@
 <table class="bottom-bar">
   <tr>
-    <td class="bottom-bar__printer-name">{{ getPrinterName() }}</td>
+    <td class="bottom-bar__printer-name" (click)="showProfiles()">{{ PrinterName }}</td>
     <td class="bottom-bar__enclosure-temperature" *ngIf="enclosureTemperature">
       <img src="assets/thermometer.svg" class="bottom-bar__enclosure-temperature-icon" />
       {{ enclosureTemperature.temperature }}{{ enclosureTemperature.unit }}
@@ -10,3 +10,4 @@
     </td>
   </tr>
 </table>
+<app-profiles *ngIf="profiles" (closeFunction)="hideProfiles()"></app-profiles>

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

@@ -5,6 +5,7 @@ import { ConfigService } from '../config/config.service';
 import { PrinterState, PrinterStatus, TemperatureReading } from '../model';
 import { NotificationService } from '../notification/notification.service';
 import { EnclosureService } from '../services/enclosure/enclosure.service';
+import { ProfileService } from '../services/profiles/profiles.service';
 import { SocketService } from '../services/socket/socket.service';
 
 @Component({
@@ -18,12 +19,14 @@ export class BottomBarComponent implements OnDestroy {
 
   public printerStatus: PrinterState;
   public enclosureTemperature: TemperatureReading;
-
+  public profiles:boolean = false;
+  public PrinterName:String;
   public constructor(
     private socketService: SocketService,
     private configService: ConfigService,
     private enclosureService: EnclosureService,
     private notificationService: NotificationService,
+    private profileService: ProfileService
   ) {
     if (this.configService.getAmbientTemperatureSensorName() !== null) {
       this.subscriptions.add(
@@ -52,17 +55,33 @@ export class BottomBarComponent implements OnDestroy {
         }
       }),
     );
+    this.getPrinterName();
   }
 
   public getStringStatus(printerState: PrinterState): string {
     return PrinterState[printerState];
   }
 
-  public getPrinterName(): string {
-    return this.configService.getPrinterName();
+  public getPrinterName(): void {
+    this.profileService.getActiveProfile().subscribe((profile)=>{
+      this.PrinterName = profile.name;
+    });
   }
 
   public ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
+
+  public showProfiles(){
+    if (this.printerStatus == PrinterState.operational){
+      this.profiles = true;
+    }
+  }
+
+  public hideProfiles(): void {
+    setTimeout((): void => {
+      this.profiles = false;
+      this.getPrinterName();
+    }, 350);
+  }
 }

src/app/confirm/confirm.component.html

@@ -0,0 +1,13 @@
+<div style="z-index: 9999" class="confirm__wrapper" *ngIf="show">
+    <div class="confirm">
+      <h1 i18n="@@are-you-sure">are you sure?</h1>
+      <p class="confirm__sub-heading" i18n="@@confirm-exec">{{Question}}</p>
+      <p class="confirm__gcode" *ngIf="Command">{{ Command }}</p>
+      <img
+        class="confirm__icon"
+        src="assets/confirm-small.svg"
+        (click)="okClicked()"
+      />
+      <img class="confirm__icon" src="assets/cancel-small.svg" (click)="cancelClicked()" />
+    </div>
+</div>

src/app/confirm/confirm.component.scss

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmComponent } from './confirm.component';
+
+describe('ConfirmComponent', () => {
+  let component: ConfirmComponent;
+  let fixture: ComponentFixture<ConfirmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/confirm/confirm.component.spec.ts

@@ -0,0 +1,35 @@
+import { _getShadowRoot } from '@angular/cdk/platform';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.scss']
+})
+export class ConfirmComponent implements OnInit {
+  public show: boolean;
+  @Input() Question: string;
+  @Input() Command?: string;
+  @Input() 
+  get Show(): boolean{
+    return this.show;
+  };
+  set Show(value){
+    this.show = value;
+  };
+  @Output() Ok = new EventEmitter();
+  @Output() Cancel = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  okClicked(): void {
+    this.Ok.emit();
+    this.show = false;
+  }
+  cancelClicked(): void{
+    this.show = false;
+    this.Cancel.emit();
+  }
+}

src/app/confirm/confirm.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { OctoprintPrinterProfile } from '../model/octoprint';
 import { NotificationService } from '../notification/notification.service';
 import { PrinterService } from '../services/printer/printer.service';
+import { ProfileService } from '../services/profiles/profiles.service';
 
 @Component({
   selector: 'app-control',
@@ -15,8 +16,8 @@ export class ControlComponent {
   public jogDistance = 10;
   public showHelp = false;
 
-  public constructor(private printerService: PrinterService, private notificationService: NotificationService) {
-    this.printerService.getActiveProfile().subscribe(
+  public constructor(private printerService: PrinterService, private profileService: ProfileService, private notificationService: NotificationService) {
+    this.profileService.getActiveProfile().subscribe(
       (printerProfile: OctoprintPrinterProfile) => (this.printerProfile = printerProfile),
       err => {
         this.notificationService.setError(

src/app/control/control.component.ts

@@ -37,3 +37,7 @@ export interface TemperatureHeatbedCommand {
 export interface DisconnectCommand {
   command: string;
 }
+
+export interface ProfileCommand {
+  current: boolean;
+}