-
-
${icon_route}${Math.round(metrics.distanceTotal)}m
-
${icon_stopwatch}${metrics.splitFormatted}/500m
-
${icon_bolt}${Math.round(metrics.powerRaw)}watt
-
${icon_paddle}${Math.round(metrics.strokesPerMinute)}/min
- ${metrics?.heartrate ? html`
${icon_heartbeat}${Math.round(metrics.heartrate)}bpm
` : ''}
-
${icon_bolt}${metrics.instantaneousTorque.toFixed(2)}trq
-
${icon_bolt}${metrics.powerRatio.toFixed(2)}ratio
-
${icon_bolt}${metrics.strokeState}
+
${icon_route}${metricValue(metrics, 'distanceTotal')}${metricUnit(metrics, 'distanceTotal')}
+
${icon_stopwatch}${metricValue(metrics, 'splitFormatted')}/500m
+
${icon_bolt}${metricValue(metrics, 'powerRaw')}watt
+
${icon_paddle}${metricValue(metrics, 'strokesPerMinute')}/min
+ ${metrics?.heartrate
+ ? html`
${icon_heartbeat}${metricValue(metrics, 'heartrate')}bpm
`
+ : ''}
+
${icon_bolt}${metricValue(metrics, 'instantaneousTorque')}trq
+
${icon_bolt}${metricValue(metrics, 'powerRatio')}ratio
+
${icon_bolt}${metricValue(metrics, 'strokeState')}
diff --git a/app/client/components/PerformanceDashboard.js b/app/client/components/PerformanceDashboard.js
index 027ab53..c6060ea 100644
--- a/app/client/components/PerformanceDashboard.js
+++ b/app/client/components/PerformanceDashboard.js
@@ -6,6 +6,7 @@
*/
import { customElement, property } from 'lit/decorators.js'
+import { metricUnit, metricValue } from '../lib/helper.js'
import { icon_bolt, icon_clock, icon_fire, icon_heartbeat, icon_paddle, icon_route, icon_stopwatch } from '../lib/icons.js'
import { APP_STATE } from '../store/appState.js'
import { AppElement, css, html } from './AppElement.js'
@@ -51,15 +52,15 @@ export class PerformanceDashboard extends AppElement {
appState = APP_STATE
render () {
- const metrics = this.calculateFormattedMetrics(this.appState.metrics)
+ const metrics = this.appState.metrics
return html`
-
-
-
-
+
+
+
+
${metrics?.heartrate?.value
? html`
-
+
${metrics?.heartrateBatteryLevel?.value
? html`
@@ -67,39 +68,10 @@ export class PerformanceDashboard extends AppElement {
: ''
}
`
- : html``}
-
-
+ : html``}
+
+
`
}
-
- // todo: so far this is just a port of the formatter from the initial proof of concept client
- // we could split this up to make it more readable and testable
- calculateFormattedMetrics (metrics) {
- const fieldFormatter = {
- distanceTotal: (value) => value >= 10000
- ? { value: (value / 1000).toFixed(1), unit: 'km' }
- : { value: Math.round(value), unit: 'm' },
- caloriesTotal: (value) => Math.round(value),
- power: (value) => Math.round(value),
- strokesPerMinute: (value) => Math.round(value)
- }
-
- const formattedMetrics = {}
- for (const [key, value] of Object.entries(metrics)) {
- const valueFormatted = fieldFormatter[key] ? fieldFormatter[key](value) : value
- if (valueFormatted.value !== undefined && valueFormatted.unit !== undefined) {
- formattedMetrics[key] = {
- value: valueFormatted.value,
- unit: valueFormatted.unit
- }
- } else {
- formattedMetrics[key] = {
- value: valueFormatted
- }
- }
- }
- return formattedMetrics
- }
}
diff --git a/app/client/lib/helper.js b/app/client/lib/helper.js
index 448491d..2972541 100644
--- a/app/client/lib/helper.js
+++ b/app/client/lib/helper.js
@@ -19,3 +19,40 @@ export function filterObjectByKeys (object, keys) {
return obj
}, {})
}
+
+/**
+ * Picks a metric from the metrics object and presents its value in a human readable format
+ * @param {Object} metrics raw metrics object
+ * @param {String} metric selected metric
+ * @returns String value of metric in human readable format
+ */
+export function metricValue (metrics, metric) {
+ const formatMap = {
+ distanceTotal: (value) => value >= 10000
+ ? (value / 1000).toFixed(1)
+ : Math.round(value),
+ caloriesTotal: (value) => Math.round(value),
+ power: (value) => Math.round(value),
+ powerRaw: (value) => Math.round(value),
+ strokesPerMinute: (value) => Math.round(value),
+ instantaneousTorque: (value) => value.toFixed(2),
+ powerRatio: (value) => value.toFixed(2)
+ }
+ if (metrics[metric] === undefined) {
+ return '--'
+ }
+ return formatMap[metric] ? formatMap[metric](metrics[metric]) : metrics[metric]
+}
+
+/**
+ * Picks a metric from the metrics object and presents its unit in a human readable format
+ * @param {Object} metrics raw metrics object
+ * @param {String} metric selected metric
+ * @returns String value of metric unit in human readable format
+ */
+export function metricUnit (metrics, metric) {
+ const unitMap = {
+ distanceTotal: (value) => value >= 10000 ? 'km' : 'm'
+ }
+ return unitMap[metric] ? unitMap[metric](metrics[metric]) : ''
+}
diff --git a/app/client/store/appState.js b/app/client/store/appState.js
index 5541e6c..d73758d 100644
--- a/app/client/store/appState.js
+++ b/app/client/store/appState.js
@@ -8,7 +8,7 @@
export const APP_STATE = {
// currently can be STANDALONE (Mobile Home Screen App), KIOSK (Raspberry Pi deployment) or '' (default)
appMode: '',
- // currently can be DASHBOARD or 'ROWINGGAMES' (default)
+ // currently can be DASHBOARD or 'ROWINGGAMES'
activeRoute: 'DASHBOARD',
// contains all the rowing metrics that are delivered from the backend
metrics: {},