From bf55638e82accb82426ee5b65391507f1c3a7a7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ab=C3=A1sz?= <> Date: Sat, 25 Mar 2023 14:27:18 +0100 Subject: [PATCH] Add new metric tiles - Add drag factor (int) - Add distance per stroke (meters with 1 decimal place) - Add drive length (meters with 2 decimal places) - Add drive duration (seconds with 2 decimal places) - Add recovery duration (seconds with 2 decimal places) --- app/client/lib/icons.js | 1 + app/client/store/dashboardMetrics.js | 28 +++++++++++++++++++++++----- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/app/client/lib/icons.js b/app/client/lib/icons.js index 78d6e13..4adea7a 100644 --- a/app/client/lib/icons.js +++ b/app/client/lib/icons.js @@ -28,3 +28,4 @@ export const icon_upload = svg`` export const icon_settings = svg`` +export const rower_icon = svg`` diff --git a/app/client/store/dashboardMetrics.js b/app/client/store/dashboardMetrics.js index 3d3975d..300db7b 100644 --- a/app/client/store/dashboardMetrics.js +++ b/app/client/store/dashboardMetrics.js @@ -1,6 +1,6 @@ import { html } from 'lit' import { simpleMetricFactory, formatDistance, formatNumber, secondsToPace } from '../lib/helper' -import { icon_bolt, icon_clock, icon_fire, icon_heartbeat, icon_paddle, icon_route, icon_stopwatch } from '../lib/icons' +import { icon_bolt, icon_clock, icon_fire, icon_heartbeat, icon_paddle, icon_route, icon_stopwatch, rower_icon } from '../lib/icons' import '../components/DashboardForceCurve.js' import '../components/DashboardActions.js' import '../components/BatteryIcon.js' @@ -15,21 +15,39 @@ export const DASHBOARD_METRICS = { return simpleMetricFactory(linearDistance.distance, linearDistance.unit, config.guiConfigs.showIcons ? icon_route : '') } }, + 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, config) => html` - ${metrics?.heartrateBatteryLevel - ? html`` - : ''} -` + ${metrics?.heartrateBatteryLevel + ? html`` + : ''} + ` }, + 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 : '') }, + + distancePerStk: { displayName: 'Dist per Stroke', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleDistance, 1), 'm', config.guiConfigs.showIcons ? rower_icon : '') }, + + dragFactor: { displayName: 'Drag factor', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.dragFactor), '', config.guiConfigs.showIcons ? 'Drag' : '') }, + + driveLength: { displayName: 'Drive length', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveLength, 2), 'm', config.guiConfigs.showIcons ? 'Drive' : '') }, + + driveDuration: { displayName: 'Drive duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveDuration, 2), 'sec', config.guiConfigs.showIcons ? 'Drive' : '') }, + + recoveryDuration: { displayName: 'Recovery duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.recoveryDuration, 2), 'sec', config.guiConfigs.showIcons ? 'Recovery' : '') }, + forceCurve: { displayName: 'Force curve', size: 2, template: (metrics) => html`` }, + actions: { displayName: 'Actions', size: 1, template: (appState, config) => html`` } }