From 89432fef996db8bda80f3d6ecdd040de236b1afb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ab=C3=A1sz?= <>
Date: Fri, 24 Mar 2023 21:35:21 +0100
Subject: [PATCH] Expose app configs to the metric tile factory

Make all settings available to the metric creator factory in order for
subcomponents (e.g DashboardAction) to use it without depending directly
on the global appState.
---
 app/client/components/DashboardActions.js     | 21 ++++++++++++-------
 app/client/components/PerformanceDashboard.js |  4 ++--
 app/client/store/dashboardMetrics.js          | 20 +++++++++---------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/client/components/DashboardActions.js b/app/client/components/DashboardActions.js
index e416917..e8aa034 100644
--- a/app/client/components/DashboardActions.js
+++ b/app/client/components/DashboardActions.js
@@ -6,7 +6,7 @@
 */
 
 import { AppElement, html, css } from './AppElement.js'
-import { customElement, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { icon_undo, icon_expand, icon_compress, icon_poweroff, icon_bluetooth, icon_upload, icon_heartbeat, icon_antplus } from '../lib/icons.js'
 import './AppDialog.js'
 
@@ -74,6 +74,12 @@ export class DashboardActions extends AppElement {
     }
   `
 
+  @property({ type: Object })
+    config = {}
+
+  @property({ type: Object })
+    appMode = 'BROWSER'
+
   @state()
     _dialog
 
@@ -84,11 +90,11 @@ export class DashboardActions extends AppElement {
       ${this.renderOptionalButtons()}
       <button @click=${this.switchHrmPeripheralMode}>
         ${icon_heartbeat}
-        <div class="text">${this.appState?.config?.hrmPeripheralMode}</div>
+        <div class="text">${this.config?.hrmPeripheralMode}</div>
       </button>
       <button @click=${this.switchAntPeripheralMode}>
         ${icon_antplus}
-        <div class="text">${this.appState?.config?.antPeripheralMode}</div>
+        <div class="text">${this.config?.antPeripheralMode}</div>
       </button>
     </div>
       <div class="text-button">
@@ -104,7 +110,7 @@ export class DashboardActions extends AppElement {
     // changing to fullscreen mode only makes sence when the app is openend in a regular
     // webbrowser (kiosk and standalone mode are always in fullscreen view) and if the
     // browser supports this feature
-    if (this.appState?.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
+    if (this.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
       buttons.push(html`
       <button @click=${this.toggleFullscreen}>
         <div id="fullscreen-icon">${icon_expand}</div>
@@ -115,13 +121,13 @@ export class DashboardActions extends AppElement {
     // add a button to power down the device, if browser is running on the device in kiosk mode
     // and the shutdown feature is enabled
     // (might also make sence to enable this for all clients but then we would need visual feedback)
-    if (this.appState?.appMode === 'KIOSK' && this.appState?.config?.shutdownEnabled) {
+    if (this.appMode === 'KIOSK' && this.config?.shutdownEnabled) {
       buttons.push(html`
       <button @click=${this.shutdown}>${icon_poweroff}</button>
     `)
     }
 
-    if (this.appState?.config?.stravaUploadEnabled) {
+    if (this.config?.stravaUploadEnabled) {
       buttons.push(html`
       <button @click=${this.uploadTraining}>${icon_upload}</button>
     `)
@@ -130,8 +136,7 @@ export class DashboardActions extends AppElement {
   }
 
   blePeripheralMode () {
-    const value = this.appState?.config?.blePeripheralMode
-
+    const value = this.config?.blePeripheralMode
     switch (value) {
       case 'PM5':
         return 'C2 PM5'
diff --git a/app/client/components/PerformanceDashboard.js b/app/client/components/PerformanceDashboard.js
index 48c1620..5b6f244 100644
--- a/app/client/components/PerformanceDashboard.js
+++ b/app/client/components/PerformanceDashboard.js
@@ -64,10 +64,10 @@ export class PerformanceDashboard extends AppElement {
 
   dashboardMetricComponentsFactory = (appState) => {
     const metrics = appState.metrics
-    const configs = appState.config.guiConfigs
+    const configs = appState.config
 
     const dashboardMetricComponents = Object.keys(DASHBOARD_METRICS).reduce((dashboardMetrics, key) => {
-      dashboardMetrics[key] = DASHBOARD_METRICS[key].template(metrics, configs.showIcons)
+      dashboardMetrics[key] = DASHBOARD_METRICS[key].template(metrics, configs)
 
       return dashboardMetrics
     }, {})
diff --git a/app/client/store/dashboardMetrics.js b/app/client/store/dashboardMetrics.js
index cd6ee12..3d3975d 100644
--- a/app/client/store/dashboardMetrics.js
+++ b/app/client/store/dashboardMetrics.js
@@ -9,27 +9,27 @@ export const DASHBOARD_METRICS = {
   distance: {
     displayName: 'Distance',
     size: 1,
-    template: (metrics, showIcon) => {
+    template: (metrics, config) => {
       const linearDistance = formatDistance(metrics?.totalLinearDistance)
 
-      return simpleMetricFactory(linearDistance.distance, linearDistance.unit, showIcon ? icon_route : '')
+      return simpleMetricFactory(linearDistance.distance, linearDistance.unit, config.guiConfigs.showIcons ? icon_route : '')
     }
   },
-  pace: { displayName: 'Pace/500', size: 1, template: (metrics, showIcon) => simpleMetricFactory(secondsToPace(500 / metrics?.cycleLinearVelocity), '/500m', showIcon ? icon_stopwatch : '') },
-  power: { displayName: 'Power', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', showIcon ? icon_bolt : '') },
-  stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', showIcon ? icon_paddle : '') },
+  pace: { displayName: 'Pace/500', size: 1, template: (metrics, config) => simpleMetricFactory(secondsToPace(500 / metrics?.cycleLinearVelocity), '/500m', config.guiConfigs.showIcons ? icon_stopwatch : '') },
+  power: { displayName: 'Power', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', config.guiConfigs.showIcons ? icon_bolt : '') },
+  stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', config.guiConfigs.showIcons ? icon_paddle : '') },
   heartRate: {
     displayName: 'Heart rate',
     size: 1,
-    template: (metrics, showIcon) => html`<dashboard-metric .icon=${showIcon ? icon_heartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
+    template: (metrics, config) => html`<dashboard-metric .icon=${config.guiConfigs.showIcons ? icon_heartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
   ${metrics?.heartrateBatteryLevel
   ? html`<battery-icon .batteryLevel=${metrics?.heartrateBatteryLevel}></battery-icon>`
   : ''}
 </dashboard-metric>`
   },
-  totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, showIcon) => simpleMetricFactory(metrics?.totalNumberOfStrokes, 'stk', showIcon ? icon_paddle : '') },
-  calories: { displayName: 'Calories', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.totalCalories), 'kcal', showIcon ? icon_fire : '') },
-  timer: { displayName: 'Timer', size: 1, template: (metrics, showIcon) => simpleMetricFactory(secondsToPace(metrics?.totalMovingTime), '', showIcon ? icon_clock : '') },
+  totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, config) => simpleMetricFactory(metrics?.totalNumberOfStrokes, 'stk', config.guiConfigs.showIcons ? icon_paddle : '') },
+  calories: { displayName: 'Calories', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.totalCalories), 'kcal', config.guiConfigs.showIcons ? icon_fire : '') },
+  timer: { displayName: 'Timer', size: 1, template: (metrics, config) => simpleMetricFactory(secondsToPace(metrics?.totalMovingTime), '', config.guiConfigs.showIcons ? icon_clock : '') },
   forceCurve: { displayName: 'Force curve', size: 2, template: (metrics) => html`<dashboard-force-curve .value=${metrics.driveHandleForceCurve} style="grid-column: span 2"></dashboard-force-curve>` },
-  actions: { displayName: 'Actions', size: 1, template: () => html`<dashboard-actions></dashboard-actions>` }
+  actions: { displayName: 'Actions', size: 1, template: (appState, config) => html`<dashboard-actions .appMode=${appState.appMode} .config=${config}></dashboard-actions>` }
 }