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
}
}
}