#837 - We changed to more filter pipes and reduced get preparation ca…

…lls for change detection

src/app/brew/brew-detail/brew-detail.component.ts

@@ -28,6 +28,9 @@ import { BrewPopoverExtractionComponent } from '../brew-popover-extraction/brew-
 import { BrewBrewingGraphComponent } from '../../../components/brews/brew-brewing-graph/brew-brewing-graph.component';
 import { sleep } from '../../../classes/devices';
 import { ShareService } from '../../../services/shareService/share-service.service';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
+import { Bean } from '../../../classes/bean/bean';
+import { Mill } from '../../../classes/mill/mill';
 
 declare var Plotly;
 @Component({
@@ -51,6 +54,10 @@ export class BrewDetailComponent {
   @ViewChild('brewBrewingGraphEl', { static: false })
   public brewBrewingGraphEl: BrewBrewingGraphComponent;
 
+  public bean: Bean;
+  /**We named it that way, because the graph-componeneted access it aswell **/
+  public choosenPreparation: Preparation;
+  public mill: Mill;
   constructor(
     private readonly modalController: ModalController,
     public uiHelper: UIHelper,
@@ -80,6 +87,10 @@ export class BrewDetailComponent {
     if (this.brew) {
       const copy: IBrew = this.uiHelper.copyData(this.brew);
       this.data.initializeByObject(copy);
+
+      this.bean = this.data.getBean();
+      this.choosenPreparation = this.data.getPreparation();
+      this.mill = this.data.getMill();
     }
     if (this.showCupping()) {
       // Set timeout else element wont be visible
@@ -118,7 +129,7 @@ export class BrewDetailComponent {
   }
 
   public getPreparation(): Preparation {
-    return this.data.getPreparation();
+    return this.choosenPreparation;
   }
   public showSectionAfterBrew(): boolean {
     return this.uiBrewHelper.showSectionAfterBrew(this.getPreparation());
@@ -172,6 +183,9 @@ export class BrewDetailComponent {
     this.editActive = false;
     if (returningBrew) {
       this.data = returningBrew;
+      this.bean = this.data.getBean();
+      this.choosenPreparation = this.data.getPreparation();
+      this.mill = this.data.getMill();
       this.initializeFlowChartOnGraphEl();
     }
   }
@@ -188,7 +202,7 @@ export class BrewDetailComponent {
       .format(formattingStr);
     return formatted;
   }
-  private showCupping(): boolean {
+  public showCupping(): boolean {
     return this.uiBrewHelper.showCupping(this.data);
   }
 
@@ -365,4 +379,6 @@ export class BrewDetailComponent {
     await popover.present();
     await popover.onWillDismiss();
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }

src/app/brew/brew-flow/brew-flow.component.html

@@ -12,7 +12,7 @@
           <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('realtime_flow')" *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
             [outline]="!brewComponent.brewBrewingGraphEl.traces.realtimeFlowTrace?.visible" class="flowreal">{{'BREW_FLOW_WEIGHT_REALTIME' |
             translate}}</ion-chip>
-          <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && this.brew.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
+          <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
             [outline]="!brewComponent.brewBrewingGraphEl.traces.pressureTrace?.visible" class="pressure">{{'BREW_PRESSURE_FLOW' |
             translate}}</ion-chip>
           <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('temperature')" *ngIf="temperatureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
@@ -62,20 +62,21 @@
       <ion-grid class="ion-text-center ion-no-padding brew-information-panel">
         <ion-row style="padding-bottom:5px;">
           <ion-col  *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
-            size="{{this.getGraphIonColSize()}}" style="padding-right:5px;">
+            size="{{graphIconColSize}}" style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center weight-card" style="height: 100%;">
               <ion-card-header>
                 <div #smartScaleWeightDetail>? g</div>
                 <div #smartScaleWeightSecondDetail *ngIf="smartScaleSupportsTwoWeight()">?g</div>
-                <span style='font-size:16px;'>({{brewComponent.brewBrewingGraphEl.data.getBrewRatio()}})</span>
+                <span style='font-size:16px;'>({{brewComponent.brewBrewingGraphEl.data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})</span>
+
               </ion-card-header>
               <ion-card-content>
                 <ion-icon name="beanconqueror-scale-outline"></ion-icon>
               </ion-card-content>
             </ion-card>
           </ion-col>
           <ion-col  *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center flow-card" style="height: 100%;">
               <ion-card-header>
                 <div class='information-tile-no-overflow'><span #smartScaleWeightPerSecondDetail>?</span> g/s</div>
@@ -87,8 +88,8 @@
               </ion-card-content>
             </ion-card>
           </ion-col>
-          <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && this.brew.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+          <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center pressure-card" style="height: 100%;">
               <ion-card-header>
                 <div #pressureDetail>? bar</div>
@@ -99,7 +100,7 @@
             </ion-card>
           </ion-col>
           <ion-col *ngIf="temperatureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
-                   size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+                   size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center temperature-card" style="height: 100%;">
               <ion-card-header>
                 <div #temperatureDetail>? °C</div>
@@ -110,7 +111,7 @@
             </ion-card>
           </ion-col>
           <ion-col
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center timer-card" style="height: 100%;">
               <ion-card-header>
                 <span class='information-tile-no-overflow' #timerElement></span>

src/app/brew/brew-flow/brew-flow.component.ts

@@ -25,6 +25,7 @@ import { UIAlert } from '../../../services/uiAlert';
 
 import { PreparationDeviceType } from '../../../classes/preparationDevice';
 import { UIHelper } from 'src/services/uiHelper';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var Plotly;
 
@@ -90,6 +91,8 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
   protected readonly PREPARATION_STYLE_TYPE = PREPARATION_STYLE_TYPE;
   protected heightInformationBlock: number = 50;
 
+  public graphIconColSize: number = 2.4;
+  public bluetoothSubscription: Subscription = undefined;
   constructor(
     private readonly modalController: ModalController,
     public readonly uiHelper: UIHelper,
@@ -235,6 +238,13 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
         ) &&
         this.brew.getPreparation().style_type ===
           PREPARATION_STYLE_TYPE.ESPRESSO;
+
+      this.graphIconColSize = this.getGraphIonColSize();
+      this.bluetoothSubscription = this.bleManager
+        .attachOnEvent()
+        .subscribe((_type) => {
+          this.graphIconColSize = this.getGraphIonColSize();
+        });
     }
     setTimeout(() => {
       if (!this.isDetail) {
@@ -444,6 +454,10 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
   }
 
   public async ngOnDestroy() {
+    if (this.bluetoothSubscription) {
+      this.bluetoothSubscription.unsubscribe();
+      this.bluetoothSubscription = undefined;
+    }
     if (this.brewFlowGraphSubscription) {
       this.brewFlowGraphSubscription.unsubscribe();
       this.brewFlowGraphSubscription = undefined;
@@ -492,4 +506,6 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
       BrewFlowComponent.COMPONENT_ID
     );
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }

src/components/brew-information/brew-information.component.html

@@ -219,7 +219,7 @@
                 <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD_TOOL" | translate }}</ion-label>
                 <div>
                   <ion-chip
-                    *ngFor='let uuid of brew?.method_of_preparation_tools;let i=index;'>{{ brew?.getPreparationToolName(uuid) }}
+                    *ngFor='let uuid of brew?.method_of_preparation_tools;let i=index;'>{{brew | brewFunctionPipe: [BREW_FUNCTION_PIPE_ENUM.GET_PREPARATION_TOOL_NAME,uuid] }}
                   </ion-chip>
                 </div>
               </ion-col>

src/components/brews/brew-brewing-graph/brew-brewing-graph.component.html

@@ -1,7 +1,7 @@
 
 <ion-item [hidden]="shallFlowProfileBeHidden()" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])" class="ion-padding-bottom-half" lines="none">
+                      brewComponent.choosenPreparation.brew_order.while.brew_time,
+                      brewComponent.choosenPreparation.use_custom_parameters])" class="ion-padding-bottom-half" lines="none">
   <div class="ion-text-center" style="width:100%">
     <ion-chip (click)="toggleChartLines('weight')" *ngIf="
     smartScaleConnected() ||
@@ -18,7 +18,7 @@
     || (isDetail === true && this.traces.weightTrace?.x?.length >0)"
               [outline]="!this.traces.realtimeFlowTrace?.visible" class="flowreal">{{'BREW_FLOW_WEIGHT_REALTIME' |
       translate}}</ion-chip>
-    <ion-chip (click)="toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() && getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO) ||
+    <ion-chip (click)="toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO) ||
     ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected())
     || (isDetail === true && this.traces.pressureTrace?.x?.length >0)"
               [outline]="!this.traces.pressureTrace?.visible" class="pressure">{{'BREW_PRESSURE_FLOW' | translate}}</ion-chip>
@@ -40,20 +40,20 @@
 <ion-item [hidden]="shallFlowProfileBeHidden()" *ngIf='isDetail ===false' lines="none">
   <ion-grid class="ion-text-center ion-no-padding brew-information-panel">
     <ion-row style="padding-bottom:5px;">
-      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{this.getGraphIonColSize()}}"
+      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{graphIconColSize}}"
                style="padding-right:5px;">
         <ion-card class="flow-profile ion-text-center weight-card" style="height: 100%;">
           <ion-card-header>
             <div #smartScaleWeight>? g</div>
             <div #smartScaleSecondWeight *ngIf="smartScaleSupportsTwoWeight()">?g</div>
-            <div class='information-tile-no-overflow'>({{data.getBrewRatio()}})</div>
+            <div class='information-tile-no-overflow'>({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})</div>
           </ion-card-header>
           <ion-card-content>
             <ion-icon name="beanconqueror-scale-outline"></ion-icon>
           </ion-card-content>
         </ion-card>
       </ion-col>
-      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{this.getGraphIonColSize()}}"
+      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{graphIconColSize}}"
                style="padding-right:5px;">
         <ion-card class="flow-profile ion-text-center flow-card" style="height: 100%;">
           <ion-card-header>
@@ -66,8 +66,8 @@
           </ion-card-content>
         </ion-card>
       </ion-col>
-      <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO" style="padding-right:5px;"
-               size="{{this.getGraphIonColSize()}}">
+      <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO" style="padding-right:5px;"
+               size="{{graphIconColSize}}">
         <ion-card class="flow-profile ion-text-center pressure-card" style="height: 100%;">
           <ion-card-header>
             <div #pressure>? bar</div>
@@ -78,7 +78,7 @@
         </ion-card>
       </ion-col>
       <ion-col *ngIf="temperatureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
-               size="{{this.getGraphIonColSize()}}">
+               size="{{graphIconColSize}}">
         <ion-card class="flow-profile ion-text-center temperature-card" style="height: 100%;">
           <ion-card-header>
             <div #temperature>? °C</div>

src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts

@@ -65,6 +65,7 @@ import { TextToSpeechService } from '../../../services/textToSpeech/text-to-spee
 import { SanremoYOUDevice } from '../../../classes/preparationDevice/sanremo/sanremoYOUDevice';
 import { SanremoYOUMode } from '../../../enums/preparationDevice/sanremo/sanremoYOUMode';
 import { GraphHelperService } from '../../../services/graphHelper/graph-helper.service';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var Plotly;
 
@@ -162,6 +163,8 @@ export class BrewBrewingGraphComponent implements OnInit {
   public textToSpeechWeightInterval: any = undefined;
   public textToSpeechTimerInterval: any = undefined;
 
+  public graphIconColSize: number = 2;
+
   constructor(
     private readonly platform: Platform,
     private readonly bleManager: CoffeeBluetoothDevicesService,
@@ -287,6 +290,7 @@ export class BrewBrewingGraphComponent implements OnInit {
           }
           // If scale disconnected, sometimes the timer run but the screen was not refreshed, so maybe it helpes to detect the change.
           setTimeout(() => {
+            this.graphIconColSize = this.getGraphIonColSize();
             this.checkChanges();
           }, 200);
           this.brewComponent?.brewBrewingPreparationDeviceEl?.checkChanges();
@@ -532,6 +536,7 @@ export class BrewBrewingGraphComponent implements OnInit {
       timeout = 1000;
     }
     setTimeout(() => {
+      this.graphIconColSize = this.getGraphIonColSize();
       try {
         Plotly.purge(this.profileDiv.nativeElement);
       } catch (ex) {}
@@ -3863,4 +3868,6 @@ export class BrewBrewingGraphComponent implements OnInit {
     }
     return false;
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }

src/components/brews/brew-brewing/brew-brewing.component.html

@@ -298,7 +298,7 @@
         <ion-item class="ion-no-margin-important" lines='none'>
           <ion-label id='brew_quantity' position="stacked">
             <h2>{{"BREW_DATA_BREW_QUANTITY" | translate}}</h2>
-            <p style="top: -7px; position: relative;">({{data.getBrewRatio()}} , {{data.getGramsPerLiter()}})</p>
+            <p style="top: -7px; position: relative;">({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}} , {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_GRAMS_PER_LITER}})</p>
           </ion-label>
           <ion-input aria-labelledby='brew_quantity' [(ngModel)]="data.brew_quantity" inputmode="decimal"
                      placeholder="{{'BREW.PLACE_HOLDER.BREW_DATA_BREW_QUANTITY' | translate}}" prevent-characters
@@ -403,7 +403,7 @@ <h2>{{"BREW_DATA_BREW_QUANTITY" | translate}}</h2>
               <h2>{{"BREW_DATA_BREW_BEVERAGE_QUANTITY" | translate}}</h2>
               <p style="top: -7px; position: relative;"
                  *ngIf="choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO || (data.brew_quantity <=0 && data.brew_beverage_quantity >0)">
-                ({{data.getBrewRatio()}} , {{data.getGramsPerLiter()}})</p>
+                ({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}} , {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_GRAMS_PER_LITER}})</p>
             </ion-label>
             <ion-input aria-labelledby='brew_beverage_quantity' [(ngModel)]="data.brew_beverage_quantity" inputmode="decimal"
                        placeholder="{{'BREW.PLACE_HOLDER.BREW_DATA_BREW_BEVERAGE_QUANTITY' | translate}}" prevent-characters
@@ -456,7 +456,7 @@ <h2>{{"BREW_DATA_BREW_BEVERAGE_QUANTITY" | translate}}</h2>
                       choosenPreparation.brew_order.after.tds,
                       choosenPreparation.use_custom_parameters])" lines="inset">
     <ion-label>
-      {{'BREW_DATA_CALCULATED_EXTRACTION_YIELD' | translate}}: {{data.getExtractionYield()}}
+      {{'BREW_DATA_CALCULATED_EXTRACTION_YIELD' | translate}}: {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_EXTRACTION_YIELD}}
     </ion-label>
     <ion-button *ngIf="data.tds && data.getExtractionYield()" style="margin-left:0px;"
                 (click)="showExtractionChart($event)" tabIndex="1" class="big-icon-only" fill="clear" slot="end"

src/components/brews/brew-brewing/brew-brewing.component.ts

@@ -76,6 +76,7 @@ import { BrewBrewingPreparationDeviceComponent } from '../brew-brewing-preparati
 import { HapticService } from '../../../services/hapticService/haptic.service';
 import { BrewFlow } from '../../../classes/brew/brewFlow';
 import { Bean } from '../../../classes/bean/bean';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var cordova;
 
@@ -1455,4 +1456,6 @@ export class BrewBrewingComponent implements OnInit, AfterViewInit {
     await popover.present();
     const data = await popover.onWillDismiss();
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }