Add the ability to hide icons

Implement GUI setting to hide icons in exchange for increased font size
(implements: #131)

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`
       <div class="label">${this.icon}</div>
       <div class="content">
-        <span class="metric-value">${this.value !== undefined ? this.value : '--'}</span>
+        <span class="metric-value" style="${this.icon === '' ? 'font-size: 200%;' : ''}">${this.value !== undefined ? this.value : '--'}</span>
         <span class="metric-unit">${this.unit}</span>
       </div>
       <slot></slot>

app/client/components/PerformanceDashboard.js

@@ -64,25 +64,25 @@ export class PerformanceDashboard extends AppElement {
     }
   `
   dashboardMetricComponents = (formattedMetrics, appState) => ({
-    distance: html`<dashboard-metric .icon=${icon_route} .unit=${formattedMetrics?.totalLinearDistanceFormatted?.unit || 'm'} .value=${formattedMetrics?.totalLinearDistanceFormatted?.value}></dashboard-metric>`,
+    distance: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_route : ''} .unit=${formattedMetrics?.totalLinearDistanceFormatted?.unit || 'm'} .value=${formattedMetrics?.totalLinearDistanceFormatted?.value}></dashboard-metric>`,
 
-    pace: html`<dashboard-metric .icon=${icon_stopwatch} unit="/500m" .value=${formattedMetrics?.cyclePaceFormatted?.value}></dashboard-metric>`,
+    pace: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_stopwatch : ''} unit="/500m" .value=${formattedMetrics?.cyclePaceFormatted?.value}></dashboard-metric>`,
 
-    power: html`<dashboard-metric .icon=${icon_bolt} unit="watt" .value=${formattedMetrics?.cyclePower?.value}></dashboard-metric>`,
+    power: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_bolt : ''} unit="watt" .value=${formattedMetrics?.cyclePower?.value}></dashboard-metric>`,
 
-    stkRate: html`<dashboard-metric .icon=${icon_paddle} unit="/min" .value=${formattedMetrics?.cycleStrokeRate?.value}></dashboard-metric>`,
+    stkRate: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_paddle : ''} unit="/min" .value=${formattedMetrics?.cycleStrokeRate?.value}></dashboard-metric>`,
 
-    heartRate: html`<dashboard-metric .icon=${icon_heartbeat} unit="bpm" .value=${formattedMetrics?.heartrate?.value}>
+    heartRate: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_heartbeat : ''} unit="bpm" .value=${formattedMetrics?.heartrate?.value}>
           ${formattedMetrics?.heartrateBatteryLevel?.value
           ? html`<battery-icon .batteryLevel=${formattedMetrics?.heartrateBatteryLevel?.value}></battery-icon>`
             : ''}
     </dashboard-metric>`,
 
-    totalStk: html`<dashboard-metric .icon=${icon_paddle} unit="total" .value=${formattedMetrics?.totalNumberOfStrokes?.value}></dashboard-metric>`,
+    totalStk: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_paddle : ''} unit="total" .value=${formattedMetrics?.totalNumberOfStrokes?.value}></dashboard-metric>`,
 
-    calories: html`<dashboard-metric .icon=${icon_fire} unit="kcal" .value=${formattedMetrics?.totalCalories?.value}></dashboard-metric>`,
+    calories: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_fire : ''} unit="kcal" .value=${formattedMetrics?.totalCalories?.value}></dashboard-metric>`,
 
-    timer: html`<dashboard-metric .icon=${icon_clock} .value=${formattedMetrics?.totalMovingTimeFormatted?.value}></dashboard-metric>`,
+    timer: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_clock : ''} .value=${formattedMetrics?.totalMovingTimeFormatted?.value}></dashboard-metric>`,
 
     forceCurve: html`<dashboard-force-curve .value=${appState?.metrics.driveHandleForceCurve} style="grid-column: span 2"></dashboard-force-curve>`,
 

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()}
       </table>
     </div>
+    <p class="show-icons-selector">
+      <label for="actions">Show icons</label>
+      <input @change=${this.toggleIcons} name="showIcons" type="checkbox" />
+    </p>
     </app-dialog>
   `
   }
@@ -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
             }
           }
         },

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