From bcb114919158d5597aea1a4319ed4b5ff3857fa5 Mon Sep 17 00:00:00 2001
From: Lars Saalbach <lars.saalbach@googlemail.com>
Date: Sun, 1 Sep 2024 23:33:05 +0200
Subject: [PATCH] #785 - Make it possible to slide cards to show graph

---
 src/app/app.scss                              |  27 +-
 .../brew-information.component.html           | 407 +++++++++---------
 .../brew-information.component.scss           |  10 +
 .../brew-information.component.ts             |  38 ++
 .../graph-display-card.component.ts           |   6 +-
 .../photo-add/photo-add.component.html        |   2 +-
 .../photo-view/photo-view.component.html      |   2 +-
 .../photo-popover.component.html              |   2 +-
 .../update-popover.component.html             |   2 +-
 .../welcome-popover.component.html            |   2 +-
 10 files changed, 283 insertions(+), 215 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index a2c6f01c5..e760198ff 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -944,24 +944,27 @@ swiper-container {
   --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
 }
 
-swiper-slide {
-  display: flex;
-  position: relative;
+swiper-container.swiper {
+  swiper-slide {
+    display: flex;
+    position: relative;
 
-  flex-direction: column;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
 
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 
-  font-size: 18px;
+    font-size: 18px;
 
-  text-align: center;
-  box-sizing: border-box;
+    text-align: center;
+    box-sizing: border-box;
+  }
 }
 
+
 swiper-slide img {
   width: auto;
   max-width: 100%;
diff --git a/src/components/brew-information/brew-information.component.html b/src/components/brew-information/brew-information.component.html
index 7d174be66..f4869a3e1 100644
--- a/src/components/brew-information/brew-information.component.html
+++ b/src/components/brew-information/brew-information.component.html
@@ -1,247 +1,260 @@
-<div *ngIf="layout === 'brew'">
-  <ion-card class='long-card brew-layout' tappable (click)='showBrew()' (long-press)='longPressEditBrew($event)'>
-    <ion-card-content #card class='no-ion-col-vertical-padding ion-padding-top'>
-      <ion-grid class='no-padding-bottom' style='padding-top:0px;'>
-        <ion-row style='height:60px;'>
-          <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding'
-                   *ngIf='(settings?.brew_display_bean_image != true || bean?.hasPhotos() === false) && !preparation?.hasPhotos()'>
-            <ion-icon class='full-sized-icon' name='{{preparation.getIcon()}}'></ion-icon>
-          </ion-col>
-          <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding' size='1'
-                   *ngIf='(settings?.brew_display_bean_image != true || bean?.hasPhotos() === false) && preparation?.hasPhotos()'>
-            <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
-              <async-image [filePath]='preparation?.attachments[0]' class='bean-slider'></async-image>
-            </div>
-          </ion-col>
-          <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding' size='1'
-                   *ngIf='settings?.brew_display_bean_image == true && bean?.hasPhotos()'>
-            <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
-              <async-image [filePath]='bean?.attachments[0]' class='bean-slider'></async-image>
-            </div>
-          </ion-col>
-          <ion-col size-xs='9' size-xl='11' size-sm='11' size-md='11' size-lg='11' style='margin: auto 0;'>
-            <ion-grid class='ion-no-padding'>
-              <ion-row class='ion-padding-bottom-half'>
-                <ion-col size='10'>
-                  <ion-title class='ion-no-padding font-size-18'>
-                    <ion-icon *ngIf='brew.best_brew' name='trophy'
-                              style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
-                    <ion-icon *ngIf='brew.favourite' name='heart'
-                              style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
-                    <ion-icon *ngIf='brew?.flow_profile' name='analytics-outline'
-                              style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
-                    <strong>{{ brew.config.unix_timestamp | formatDate:[settings?.date_format] }}</strong><span
-                    class='ion-padding-start'>{{ brew.config.unix_timestamp | formatDate:["HH:mm"] }}</span></ion-title>
-                </ion-col>
-                <ion-col size='2'>
-                  <ion-button (click)='showBrewActions($event)' class='button-top-absolute' color='accent' fill='clear'>
-                    <ion-icon name='beanconqueror-dots' slot='icon-only'></ion-icon>
-                  </ion-button>
-                </ion-col>
-              </ion-row>
-              <ion-row>
-                <ion-col [size]='brew?.rating>0 ? (hasCustomRatingRange()? 10:8) :12'>
-                  <div class='ion-no-padding font-size-20 ion-title brew-title'>
-                    <ion-icon style='top: 3px;position: relative;margin-right:5px;' name='snow-outline'
-                              *ngIf='bean.isFrozen()'></ion-icon>
-                    <ng-container *ngIf='bean.isUnfrozen()'>(<ion-icon style='top: 3px;position: relative;' name='snow-outline'></ion-icon>)
-                    </ng-container>
-                    {{ bean?.name }}<span class='font-size-16' *ngIf='bean?.roaster'>&nbsp;({{ bean?.roaster }})</span>
-                  </div>
-                </ion-col>
-                <ion-col *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.rating,
+<div *ngIf="layout === 'brew'" #brewInformationContainer>
+  <swiper-container #swiper  pager="true" [pagination]="{ draggable: true, clickable: true }">
+    <swiper-slide>
+      <ion-card #ionCardParent class='long-card brew-layout' tappable (click)='showBrew()' (long-press)='longPressEditBrew($event)'>
+        <ion-card-content #card class='no-ion-col-vertical-padding ion-padding-top'>
+          <ion-grid class='no-padding-bottom' style='padding-top:0px;'>
+            <ion-row style='height:60px;'>
+              <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding'
+                       *ngIf='(settings?.brew_display_bean_image != true || bean?.hasPhotos() === false) && !preparation?.hasPhotos()'>
+                <ion-icon class='full-sized-icon' name='{{preparation.getIcon()}}'></ion-icon>
+              </ion-col>
+              <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding' size='1'
+                       *ngIf='(settings?.brew_display_bean_image != true || bean?.hasPhotos() === false) && preparation?.hasPhotos()'>
+                <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
+                  <async-image [filePath]='preparation?.attachments[0]' class='bean-slider'></async-image>
+                </div>
+              </ion-col>
+              <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' class='ion-no-padding' size='1'
+                       *ngIf='settings?.brew_display_bean_image == true && bean?.hasPhotos()'>
+                <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
+                  <async-image [filePath]='bean?.attachments[0]' class='bean-slider'></async-image>
+                </div>
+              </ion-col>
+              <ion-col size-xs='9' size-xl='11' size-sm='11' size-md='11' size-lg='11' style='margin: auto 0;'>
+                <ion-grid class='ion-no-padding'>
+                  <ion-row class='ion-padding-bottom-half'>
+                    <ion-col size='10'>
+                      <ion-title class='ion-no-padding font-size-18'>
+                        <ion-icon *ngIf='brew.best_brew' name='trophy'
+                                  style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
+                        <ion-icon *ngIf='brew.favourite' name='heart'
+                                  style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
+                        <ion-icon *ngIf='brew?.flow_profile' name='analytics-outline'
+                                  style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
+                        <strong>{{ brew.config.unix_timestamp | formatDate:[settings?.date_format] }}</strong><span
+                        class='ion-padding-start'>{{ brew.config.unix_timestamp | formatDate:["HH:mm"] }}</span></ion-title>
+                    </ion-col>
+                    <ion-col size='2'>
+                      <ion-button (click)='showBrewActions($event)' class='button-top-absolute' color='accent' fill='clear'>
+                        <ion-icon name='beanconqueror-dots' slot='icon-only'></ion-icon>
+                      </ion-button>
+                    </ion-col>
+                  </ion-row>
+                  <ion-row>
+                    <ion-col [size]='brew?.rating>0 ? (hasCustomRatingRange()? 10:8) :12'>
+                      <div class='ion-no-padding font-size-20 ion-title brew-title'>
+                        <ion-icon style='top: 3px;position: relative;margin-right:5px;' name='snow-outline'
+                                  *ngIf='bean.isFrozen()'></ion-icon>
+                        <ng-container *ngIf='bean.isUnfrozen()'>(<ion-icon style='top: 3px;position: relative;' name='snow-outline'></ion-icon>)
+                        </ng-container>
+                        {{ bean?.name }}<span class='font-size-16' *ngIf='bean?.roaster'>&nbsp;({{ bean?.roaster }})</span>
+                      </div>
+                    </ion-col>
+                    <ion-col *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.rating,
                       preparation?.visible_list_view_parameters.rating,
                       preparation?.use_custom_parameters) && (brew?.rating > 0 && hasCustomRatingRange() === false)'
-                         size='4'>
-                  <ngx-stars #brewStars [color]="'#BFB9B0'" [initialStars]='brew.rating' [maxStars]='5'
-                             [readonly]='true' [wholeStars]='true' class='ion-float-right brew-stars'>
-                  </ngx-stars>
-                </ion-col>
-                <ion-col *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.rating,
+                             size='4'>
+                      <ngx-stars #brewStars [color]="'#BFB9B0'" [initialStars]='brew.rating' [maxStars]='5'
+                                 [readonly]='true' [wholeStars]='true' class='ion-float-right brew-stars'>
+                      </ngx-stars>
+                    </ion-col>
+                    <ion-col *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.rating,
                       preparation?.visible_list_view_parameters.rating,
                       preparation?.use_custom_parameters) && (brew?.rating > 0  && hasCustomRatingRange() === true)'
-                         size='2' class='ion-text-right'>
-                  <ion-badge>{{ this.uiHelper.toFixedIfNecessary(brew.rating, 2) }}</ion-badge>
-                </ion-col>
-              </ion-row>
-            </ion-grid>
-          </ion-col>
-        </ion-row>
-        <div *ngIf="collapsed" style='height:10px;'></div>
-        <ion-row *ngIf="!collapsed">
-          <ion-col>
-            <hr />
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-      <ion-grid *ngIf="!collapsed" class='no-ion-col-vertical-padding limit-grid-overflow'>
-        <ion-row class='ion-padding-bottom-half'>
-          <ion-col size='6' *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.method_of_preparation,
+                             size='2' class='ion-text-right'>
+                      <ion-badge>{{ this.uiHelper.toFixedIfNecessary(brew.rating, 2) }}</ion-badge>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-col>
+            </ion-row>
+            <div *ngIf="collapsed" style='height:10px;'></div>
+            <ion-row *ngIf="!collapsed">
+              <ion-col>
+                <hr />
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+          <ion-grid *ngIf="!collapsed" class='no-ion-col-vertical-padding limit-grid-overflow'>
+            <ion-row class='ion-padding-bottom-half'>
+              <ion-col size='6' *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.method_of_preparation,
                       preparation?.visible_list_view_parameters.method_of_preparation,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ preparation?.name }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill,
+                <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ preparation?.name }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill,
                       preparation?.visible_list_view_parameters.mill,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_MILL" |translate }}</ion-label>
-            <br />
-            <ion-text>{{ mill?.name }}</ion-text>
-          </ion-col>
-          <ion-col size='6'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_IN_OUT_BR" | translate }}</ion-label>
-            <br />
-            <ion-text *ngIf='preparation?.style_type !== PREPARATION_STYLE_TYPE.ESPRESSO'>
-              {{ brew?.grind_weight | number : '.0-2' }}gr
-              / {{ brew.brew_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_quantity_type] }}&nbsp;({{ brew?.getBrewRatio() }}
-              )
-            </ion-text>
-            <ion-text *ngIf='preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO'>
-              {{ brew?.grind_weight | number : '.0-2' }}gr
-              / {{ brew.brew_beverage_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_beverage_quantity_type] }}&nbsp;({{ brew?.getBrewRatio() }}
-              )
-            </ion-text>
-          </ion-col>
-          <ion-col *ngIf='brew?.brew_time && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_time,
+                <ion-label class='card-headline'>{{ "BREW_DATA_MILL" |translate }}</ion-label>
+                <br />
+                <ion-text>{{ mill?.name }}</ion-text>
+              </ion-col>
+              <ion-col size='6'>
+                <ion-label class='card-headline'>{{ "BREW_DATA_IN_OUT_BR" | translate }}</ion-label>
+                <br />
+                <ion-text *ngIf='preparation?.style_type !== PREPARATION_STYLE_TYPE.ESPRESSO'>
+                  {{ brew?.grind_weight | number : '.0-2' }}gr
+                  / {{ brew.brew_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_quantity_type] }}&nbsp;({{ brew?.getBrewRatio() }}
+                  )
+                </ion-text>
+                <ion-text *ngIf='preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO'>
+                  {{ brew?.grind_weight | number : '.0-2' }}gr
+                  / {{ brew.brew_beverage_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_beverage_quantity_type] }}&nbsp;({{ brew?.getBrewRatio() }}
+                  )
+                </ion-text>
+              </ion-col>
+              <ion-col *ngIf='brew?.brew_time && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_time,
                       preparation?.visible_list_view_parameters.brew_time,
                       preparation?.use_custom_parameters)' size='6'>
-            <ion-label class='card-headline'>{{ 'BREW_DATA_TIME' | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getFormattedTotalCoffeeBrewTime() }}</ion-text>
-          </ion-col>
-          <ion-col *ngIf="(brew?.grind_size != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.grind_size,
+                <ion-label class='card-headline'>{{ 'BREW_DATA_TIME' | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getFormattedTotalCoffeeBrewTime() }}</ion-text>
+              </ion-col>
+              <ion-col *ngIf="(brew?.grind_size != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.grind_size,
                       preparation?.visible_list_view_parameters.grind_size,
                       preparation?.use_custom_parameters)) ||  (brew?.mill_speed > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill_speed,
                       preparation?.visible_list_view_parameters.mill_speed,
                       preparation?.use_custom_parameters))" size='6'>
-            <ion-label class='card-headline'>{{ 'BREW_DATA_GRIND_SIZE' | translate }}</ion-label>
-            <br />
-            <ion-text><span *ngIf="brew?.grind_size != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.grind_size,
+                <ion-label class='card-headline'>{{ 'BREW_DATA_GRIND_SIZE' | translate }}</ion-label>
+                <br />
+                <ion-text><span *ngIf="brew?.grind_size != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.grind_size,
                       preparation?.visible_list_view_parameters.grind_size,
                       preparation?.use_custom_parameters)">{{ brew?.grind_size }}</span><span *ngIf='brew?.mill_speed > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill_speed,
                       preparation?.visible_list_view_parameters.mill_speed,
                       preparation?.use_custom_parameters)'>&nbsp;@&nbsp;{{ brew?.mill_speed }}</span></ion-text>
-          </ion-col>
-          <ion-col *ngIf='brew?.tds > 0 && brew?.brew_beverage_quantity>0' size='6'>
-            <ion-label class='card-headline'>{{ 'BREW_DATA_TDS_EY' | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.tds }},&nbsp;%{{ brew?.getExtractionYield() }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.brew_temperature > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_temperature,
+              </ion-col>
+              <ion-col *ngIf='brew?.tds > 0 && brew?.brew_beverage_quantity>0' size='6'>
+                <ion-label class='card-headline'>{{ 'BREW_DATA_TDS_EY' | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.tds }},&nbsp;%{{ brew?.getExtractionYield() }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.brew_temperature > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_temperature,
                       preparation?.visible_list_view_parameters.brew_temperature,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ 'BREW_DATA_BREW_TEMPERATURE' | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.brew_temperature }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf="brew?.pressure_profile !=='' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.pressure_profile,
+                <ion-label class='card-headline'>{{ 'BREW_DATA_BREW_TEMPERATURE' | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.brew_temperature }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf="brew?.pressure_profile !=='' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.pressure_profile,
                       preparation?.visible_list_view_parameters.pressure_profile,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ 'BREW_DATA_PRESSURE_PROFILE' | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.pressure_profile }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.bean_weight_in > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.bean_weight_in,
+                <ion-label class='card-headline'>{{ 'BREW_DATA_PRESSURE_PROFILE' | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.pressure_profile }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.bean_weight_in > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.bean_weight_in,
                       preparation?.visible_list_view_parameters.bean_weight_in,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_BEAN_WEIGHT_IN" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.bean_weight_in }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.mill_timer > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill_timer,
+                <ion-label class='card-headline'>{{ "BREW_DATA_BEAN_WEIGHT_IN" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.bean_weight_in }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.mill_timer > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.mill_timer,
                       preparation?.visible_list_view_parameters.mill_timer,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_MILL_TIMER" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.mill_timer }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf="brew?.vessel_name !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.vessel,
+                <ion-label class='card-headline'>{{ "BREW_DATA_MILL_TIMER" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.mill_timer }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf="brew?.vessel_name !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.vessel,
                       preparation?.visible_list_view_parameters.vessel,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ "BREW_DATA_VESSEL_NAME_WEIGHT" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.vessel_name }} / {{ brew?.vessel_weight }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.brew_temperature_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_temperature_time,
+                <ion-label class='card-headline'>{{ "BREW_DATA_VESSEL_NAME_WEIGHT" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.vessel_name }} / {{ brew?.vessel_weight }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.brew_temperature_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.brew_temperature_time,
                       preparation?.visible_list_view_parameters.brew_temperature_time,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_TEMPERATURE_TIME" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getFormattedTotalCoffeeTemperatureTime() }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.coffee_blooming_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_blooming_time,
+                <ion-label class='card-headline'>{{ "BREW_DATA_TEMPERATURE_TIME" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getFormattedTotalCoffeeTemperatureTime() }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.coffee_blooming_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_blooming_time,
                       preparation?.visible_list_view_parameters.coffee_blooming_time,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_BLOOMING_TIME" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getFormattedTotalCoffeeBloomingTime() }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='(preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO && brew?.coffee_first_drip_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_first_drip_time,
+                <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_BLOOMING_TIME" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getFormattedTotalCoffeeBloomingTime() }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='(preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO && brew?.coffee_first_drip_time > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_first_drip_time,
                       preparation?.visible_list_view_parameters.coffee_first_drip_time,
                       preparation?.use_custom_parameters)) || (preparation?.use_custom_parameters &&  preparation?.visible_list_view_parameters.coffee_first_drip_time && brew?.coffee_first_drip_time > 0)'>
-            <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_FIRST_DRIP_TIME" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getFormattedTotalCoffeeFirstDripTime() }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf="brew?.water !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.water,
+                <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_FIRST_DRIP_TIME" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getFormattedTotalCoffeeFirstDripTime() }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf="brew?.water !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.water,
                       preparation?.visible_list_view_parameters.water,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ "BREW_DATA_WATER" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getWater().name }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf="brew?.coffee_type !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_type,
+                <ion-label class='card-headline'>{{ "BREW_DATA_WATER" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getWater().name }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf="brew?.coffee_type !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_type,
                       preparation?.visible_list_view_parameters.coffee_type,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_TYPE" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.coffee_type }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf="brew?.coffee_concentration !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_concentration,
+                <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_TYPE" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.coffee_type }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf="brew?.coffee_concentration !== '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.coffee_concentration,
                       preparation?.visible_list_view_parameters.coffee_concentration,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_CONCENTRATION" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.coffee_concentration }}</ion-text>
-          </ion-col>
-          <ion-col size='6' *ngIf='brew?.getBean()?.roastingDate && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.bean_age_by_brew_date,
+                <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_CONCENTRATION" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.coffee_concentration }}</ion-text>
+              </ion-col>
+              <ion-col size='6' *ngIf='brew?.getBean()?.roastingDate && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.bean_age_by_brew_date,
                       preparation?.visible_list_view_parameters.bean_age_by_brew_date,
                       preparation?.use_custom_parameters)'>
-            <ion-label class='card-headline'>{{ "BREW_INFORMATION_BEAN_AGE" | translate }}</ion-label>
-            <br />
-            <ion-text>{{ brew?.getCalculatedBeanAge() }}</ion-text>
-          </ion-col>
-          <ion-col size='12' *ngIf='brew?.method_of_preparation_tools.length > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.method_of_preparation_tool,
+                <ion-label class='card-headline'>{{ "BREW_INFORMATION_BEAN_AGE" | translate }}</ion-label>
+                <br />
+                <ion-text>{{ brew?.getCalculatedBeanAge() }}</ion-text>
+              </ion-col>
+              <ion-col size='12' *ngIf='brew?.method_of_preparation_tools.length > 0 && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.method_of_preparation_tool,
                       preparation?.visible_list_view_parameters.method_of_preparation_tool,
                       preparation?.use_custom_parameters)'>
-            <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) }}
-              </ion-chip>
-            </div>
-          </ion-col>
-          <ion-col *ngIf='(brew?.hasCustomFlavors() || brew?.hasPredefinedFlavors())' size='12'>
-            <ion-label class='card-headline'>{{ 'BREW_DATA_FLAVOR' | translate }}</ion-label>
-            <br />
-            <ion-text class='ion-text-wrap'>{{ getCuppedBrewFlavors() }}</ion-text>
-          </ion-col>
-          <ion-col size='12' *ngIf="brew?.note != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.note,
+                <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) }}
+                  </ion-chip>
+                </div>
+              </ion-col>
+              <ion-col *ngIf='(brew?.hasCustomFlavors() || brew?.hasPredefinedFlavors())' size='12'>
+                <ion-label class='card-headline'>{{ 'BREW_DATA_FLAVOR' | translate }}</ion-label>
+                <br />
+                <ion-text class='ion-text-wrap'>{{ getCuppedBrewFlavors() }}</ion-text>
+              </ion-col>
+              <ion-col size='12' *ngIf="brew?.note != '' && uiBrewHelper.fieldVisible(settings.visible_list_view_parameters.note,
                       preparation?.visible_list_view_parameters.note,
                       preparation?.use_custom_parameters)">
-            <ion-label class='card-headline'>{{ "BREW_DATA_NOTES" | translate }}</ion-label>
-            <br />
-            <ion-text>
-              <pre>{{ brew?.note }}</pre>
-            </ion-text>
-          </ion-col>
+                <ion-label class='card-headline'>{{ "BREW_DATA_NOTES" | translate }}</ion-label>
+                <br />
+                <ion-text>
+                  <pre>{{ brew?.note }}</pre>
+                </ion-text>
+              </ion-col>
+
+            </ion-row>
+          </ion-grid>
+        </ion-card-content>
+      </ion-card>
+    </swiper-slide>
+    <swiper-slide *ngIf='brew.flow_profile'>
+      <ion-card class='long-card brew-layout' [style.height.px]="getElementHeight()" [style.width.px]="getElementWidth()">
+        <ion-card-content class='no-ion-col-vertical-padding ion-padding-top'>
+          <graph-display-card [chartWidth]='getElementOffsetWidth()' [chartHeight]='getElementOffsetHeight()' [flowProfilePath]='brew.flow_profile'></graph-display-card>
+        </ion-card-content>
+      </ion-card>
+
+    </swiper-slide>
+  </swiper-container>
 
-        </ion-row>
-      </ion-grid>
-    </ion-card-content>
-  </ion-card>
   <div style='height:10px;'></div>
 </div>
 <ion-card class='long-card dashboard-layout' tappable (click)='showBrew()' (long-press)='longPressEditBrew($event)'
diff --git a/src/components/brew-information/brew-information.component.scss b/src/components/brew-information/brew-information.component.scss
index 655feba5f..693bf49f2 100644
--- a/src/components/brew-information/brew-information.component.scss
+++ b/src/components/brew-information/brew-information.component.scss
@@ -143,6 +143,16 @@
     max-height: 60px;
     object-fit:cover;
   }
+
+  swiper-slide {
+    display: flex;
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+  }
+
+
 }
 
 
diff --git a/src/components/brew-information/brew-information.component.ts b/src/components/brew-information/brew-information.component.ts
index 209b94c7e..637b9a0c0 100644
--- a/src/components/brew-information/brew-information.component.ts
+++ b/src/components/brew-information/brew-information.component.ts
@@ -51,6 +51,18 @@ export class BrewInformationComponent implements OnInit {
   @Input() public layout: string = 'brew';
   @ViewChild('card', { read: ElementRef })
   public cardEl: ElementRef;
+
+  @ViewChild('swiper', { static: false }) public brewInformationSlider:
+    | ElementRef
+    | undefined;
+
+  @ViewChild('ionCardParent', { static: false }) public ionCardParent:
+    | ElementRef
+    | any;
+
+  @ViewChild('brewInformationContainer', { read: ElementRef, static: false })
+  public brewInformationContainer: ElementRef;
+
   @ViewChild('brewStars', { read: NgxStarsComponent, static: false })
   public brewStars: NgxStarsComponent;
 
@@ -128,6 +140,32 @@ export class BrewInformationComponent implements OnInit {
     this.brewAction.emit([BREW_ACTION.DETAIL, this.brew]);
   }
 
+  public getElementOffsetWidth() {
+    if (this.brewInformationContainer?.nativeElement?.offsetWidth) {
+      return this.brewInformationContainer?.nativeElement?.offsetWidth - 50;
+    }
+    return 0;
+  }
+  public getElementOffsetHeight() {
+    if (this.brewInformationContainer?.nativeElement?.offsetHeight) {
+      return this.brewInformationContainer?.nativeElement?.offsetHeight - 50;
+    }
+    return 0;
+  }
+
+  public getElementHeight() {
+    if (this.ionCardParent?.el.offsetHeight) {
+      return this.ionCardParent?.el.offsetHeight;
+    }
+    return 200;
+  }
+  public getElementWidth() {
+    if (this.ionCardParent?.el.offsetWidth) {
+      return this.ionCardParent?.el.offsetWidth;
+    }
+    return 200;
+  }
+
   public async showBrewActions(event): Promise<void> {
     event.stopPropagation();
     event.stopImmediatePropagation();
diff --git a/src/components/graph-display-card/graph-display-card.component.ts b/src/components/graph-display-card/graph-display-card.component.ts
index 4fd0b40e8..4334b6239 100644
--- a/src/components/graph-display-card/graph-display-card.component.ts
+++ b/src/components/graph-display-card/graph-display-card.component.ts
@@ -31,6 +31,7 @@ export class GraphDisplayCardComponent implements OnInit {
   @Input() public meticulousHistoryData: HistoryListingEntry;
 
   @Input() public chartWidth: number;
+  @Input() public chartHeight: number;
 
   public flow_profile_raw: BrewFlow = new BrewFlow();
 
@@ -97,7 +98,10 @@ export class GraphDisplayCardComponent implements OnInit {
       chartWidth = this.chartWidth;
     }
 
-    const chartHeight: number = 150;
+    let chartHeight: number = 150;
+    if (this.chartHeight) {
+      chartHeight = this.chartHeight;
+    }
 
     let tickFormat = '%S';
 
diff --git a/src/components/photo-add/photo-add.component.html b/src/components/photo-add/photo-add.component.html
index c2975a83e..099304c2e 100644
--- a/src/components/photo-add/photo-add.component.html
+++ b/src/components/photo-add/photo-add.component.html
@@ -2,7 +2,7 @@
   <ion-icon class="icon-16" name="beanconqueror-add"></ion-icon>&nbsp;{{"ADD_PHOTO" | translate}}
 </ion-item>
 <div *ngIf="data?.attachments && data.attachments.length > 0">
-  <swiper-container  [pagination]="{ clickable: true, dragable:true }"  #photoSlides pager="true">
+  <swiper-container class='swiper'  [pagination]="{ clickable: true, dragable:true }"  #photoSlides pager="true">
     <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
       <ion-button [disabled]='i===0' (click)="sortLeft(i)" class="position-absolute-button-sort-left" tappable color="accent" fill="clear">
         <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
diff --git a/src/components/photo-view/photo-view.component.html b/src/components/photo-view/photo-view.component.html
index eec878722..9b25041d7 100644
--- a/src/components/photo-view/photo-view.component.html
+++ b/src/components/photo-view/photo-view.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="data?.attachments && data.attachments.length > 0">
-  <swiper-container [pagination]="{ clickable: true, dragable:true }" #photoSlides pager="true">
+  <swiper-container  class='swiper' [pagination]="{ clickable: true, dragable:true }" #photoSlides pager="true">
     <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
       <async-image class="brew-image" filePath="{{attachment}}"></async-image>
     </swiper-slide>
diff --git a/src/popover/photo-popover/photo-popover.component.html b/src/popover/photo-popover/photo-popover.component.html
index ecb0bc64c..feb076c2d 100644
--- a/src/popover/photo-popover/photo-popover.component.html
+++ b/src/popover/photo-popover/photo-popover.component.html
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
   <div *ngIf="data?.attachments && data.attachments.length > 0">
-    <swiper-container  [pagination]="{ clickable: true, dragable:true }"   #photoSlides pager="true">
+    <swiper-container  class='swiper'  [pagination]="{ clickable: true, dragable:true }"   #photoSlides pager="true">
       <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
         <async-image class="brew-image" filePath="{{attachment}}"></async-image>
       </swiper-slide>
diff --git a/src/popover/update-popover/update-popover.component.html b/src/popover/update-popover/update-popover.component.html
index 5cb174de2..376a1bb6f 100644
--- a/src/popover/update-popover/update-popover.component.html
+++ b/src/popover/update-popover/update-popover.component.html
@@ -1,6 +1,6 @@
 <ion-content #updateContent class="ion-padding-top">
 
-  <swiper-container #slider allow-touch-move='false'  [pagination]="{ draggable: false, clickable: false }" pager="true">
+  <swiper-container  class='swiper' #slider allow-touch-move='false'  [pagination]="{ draggable: false, clickable: false }" pager="true">
     <swiper-slide *ngFor="let version of versions;let last = last;let i=index;" >
       <div [style.display]="i+1===this.slide?'block':'none'" class="ion-padding-horizontal" style='text-align:center;'>
         <div>
diff --git a/src/popover/welcome-popover/welcome-popover.component.html b/src/popover/welcome-popover/welcome-popover.component.html
index 97da5ca43..4098a24a4 100644
--- a/src/popover/welcome-popover/welcome-popover.component.html
+++ b/src/popover/welcome-popover/welcome-popover.component.html
@@ -30,7 +30,7 @@
 </ion-content>
 <!--We just add 50% height for first slide of analytics, else the image wouldn't be displayed -->
 <ion-footer  class="ion-no-border" [style.maxHeight]="slide===1 ? '50%' : 'inherit'" style="overflow:auto;">
-  <swiper-container #slider allow-touch-move='false' [pagination]="{ draggable: false, clickable: false }"  pager="true">
+  <swiper-container  class='swiper' #slider allow-touch-move='false' [pagination]="{ draggable: false, clickable: false }"  pager="true">
     <swiper-slide>
       <!--Hide the long text, because else the slide would have a scrollable context -->
       <div [hidden]="slide!=1"  class="ion-padding-top ion-margin-horizontal">