diff --git a/app/client/components/DashboardMetric.js b/app/client/components/DashboardMetric.js index 185c89f..215a89a 100644 --- a/app/client/components/DashboardMetric.js +++ b/app/client/components/DashboardMetric.js @@ -35,7 +35,7 @@ export class DashboardMetric extends AppElement { ` @property({ type: Object }) - icon + icon = '' @property({ type: String }) unit = '' @@ -47,7 +47,7 @@ export class DashboardMetric extends AppElement { return html`
${this.icon}
- ${this.value !== undefined ? this.value : '--'} + ${this.value !== undefined ? this.value : '--'} ${this.unit}
diff --git a/app/client/components/PerformanceDashboard.js b/app/client/components/PerformanceDashboard.js index 91492b6..22c01b5 100644 --- a/app/client/components/PerformanceDashboard.js +++ b/app/client/components/PerformanceDashboard.js @@ -64,25 +64,25 @@ export class PerformanceDashboard extends AppElement { } ` dashboardMetricComponents = (formattedMetrics, appState) => ({ - distance: html``, + distance: html``, - pace: html``, + pace: html``, - power: html``, + power: html``, - stkRate: html``, + stkRate: html``, - heartRate: html` + heartRate: html` ${formattedMetrics?.heartrateBatteryLevel?.value ? html`` : ''} `, - totalStk: html``, + totalStk: html``, - calories: html``, + calories: html``, - timer: html``, + timer: html``, forceCurve: html``, diff --git a/app/client/components/SettingsDialog.js b/app/client/components/SettingsDialog.js index 9e15267..9bec86b 100644 --- a/app/client/components/SettingsDialog.js +++ b/app/client/components/SettingsDialog.js @@ -6,7 +6,7 @@ */ import { AppElement, html, css } from './AppElement.js' -import { customElement, property, queryAll } from 'lit/decorators.js' +import { customElement, property, query, queryAll } from 'lit/decorators.js' import { icon_settings } from '../lib/icons.js' import './AppDialog.js' @@ -73,14 +73,26 @@ export class DashboardActions extends AppElement { text-align: center; background-color: var(--theme-widget-color); } + + .show-icons-selector { + display: flex; + gap: 8px; + } + + app-dialog > *:last-child { + margin-bottom: -24px; + } ` @property({ type: Object }) config - @queryAll('input') + @queryAll('.metric-selector>input') inputs + @query('input[name="showIcons"]') + showIconInput + static get properties () { return { selectedMetrics: { type: Array }, @@ -93,6 +105,7 @@ export class DashboardActions extends AppElement { super() this.selectedMetrics = [] this.sumSelectedSlots = 0 + this.showIcons = true this.isValid = false } @@ -132,6 +145,10 @@ export class DashboardActions extends AppElement { ${this.renderSelectedMetrics()} +

+ + +

` } @@ -139,6 +156,7 @@ export class DashboardActions extends AppElement { firstUpdated () { this.selectedMetrics = this.config.dashboardMetrics this.sumSelectedSlots = this.selectedMetrics.length + this.showIcons = this.config.showIcons if (this.sumSelectedSlots === 8) { this.isValid = true } else { @@ -147,6 +165,7 @@ export class DashboardActions extends AppElement { [...this.inputs].forEach(input => { input.checked = this.selectedMetrics.find(metric => metric === input.name) !== undefined }) + this.showIconInput.checked = this.showIcons } renderSelectedMetrics () { @@ -181,6 +200,10 @@ export class DashboardActions extends AppElement { } } + toggleIcons (e) { + this.showIcons = e.target.checked + } + isFormValid () { return this.sumSelectedSlots === 8 && this.selectedMetrics[3] !== this.selectedMetrics[4] } @@ -194,7 +217,8 @@ export class DashboardActions extends AppElement { config: { ...this.appState.config, guiConfigs: { - dashboardMetrics: this.selectedMetrics + dashboardMetrics: this.selectedMetrics, + showIcons: this.showIcons } } }, diff --git a/app/client/store/appState.js b/app/client/store/appState.js index 454a0cd..ee1af51 100644 --- a/app/client/store/appState.js +++ b/app/client/store/appState.js @@ -22,7 +22,8 @@ export const APP_STATE = { // true if remote device shutdown is enabled shutdownEnabled: false, guiConfigs: { - dashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories', 'actions'] + dashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories', 'actions'], + showIcons: true } } }