Expose app configs to the metric tile factory
Make all settings available to the metric creator factory in order for subcomponents (e.g DashboardAction) to use it without depending directly on the global appState.
This commit is contained in:
Abász
parent
a4ef6d86b0
commit
89432fef99
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { AppElement, html, css } from './AppElement.js'
|
||||
import { customElement, state } from 'lit/decorators.js'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import { icon_undo, icon_expand, icon_compress, icon_poweroff, icon_bluetooth, icon_upload, icon_heartbeat, icon_antplus } from '../lib/icons.js'
|
||||
import './AppDialog.js'
|
||||
|
||||
|
|
@ -74,6 +74,12 @@ export class DashboardActions extends AppElement {
|
|||
}
|
||||
`
|
||||
|
||||
@property({ type: Object })
|
||||
config = {}
|
||||
|
||||
@property({ type: Object })
|
||||
appMode = 'BROWSER'
|
||||
|
||||
@state()
|
||||
_dialog
|
||||
|
||||
|
|
@ -84,11 +90,11 @@ export class DashboardActions extends AppElement {
|
|||
${this.renderOptionalButtons()}
|
||||
<button @click=${this.switchHrmPeripheralMode}>
|
||||
${icon_heartbeat}
|
||||
<div class="text">${this.appState?.config?.hrmPeripheralMode}</div>
|
||||
<div class="text">${this.config?.hrmPeripheralMode}</div>
|
||||
</button>
|
||||
<button @click=${this.switchAntPeripheralMode}>
|
||||
${icon_antplus}
|
||||
<div class="text">${this.appState?.config?.antPeripheralMode}</div>
|
||||
<div class="text">${this.config?.antPeripheralMode}</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-button">
|
||||
|
|
@ -104,7 +110,7 @@ export class DashboardActions extends AppElement {
|
|||
// changing to fullscreen mode only makes sence when the app is openend in a regular
|
||||
// webbrowser (kiosk and standalone mode are always in fullscreen view) and if the
|
||||
// browser supports this feature
|
||||
if (this.appState?.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
|
||||
if (this.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
|
||||
buttons.push(html`
|
||||
<button @click=${this.toggleFullscreen}>
|
||||
<div id="fullscreen-icon">${icon_expand}</div>
|
||||
|
|
@ -115,13 +121,13 @@ export class DashboardActions extends AppElement {
|
|||
// add a button to power down the device, if browser is running on the device in kiosk mode
|
||||
// and the shutdown feature is enabled
|
||||
// (might also make sence to enable this for all clients but then we would need visual feedback)
|
||||
if (this.appState?.appMode === 'KIOSK' && this.appState?.config?.shutdownEnabled) {
|
||||
if (this.appMode === 'KIOSK' && this.config?.shutdownEnabled) {
|
||||
buttons.push(html`
|
||||
<button @click=${this.shutdown}>${icon_poweroff}</button>
|
||||
`)
|
||||
}
|
||||
|
||||
if (this.appState?.config?.stravaUploadEnabled) {
|
||||
if (this.config?.stravaUploadEnabled) {
|
||||
buttons.push(html`
|
||||
<button @click=${this.uploadTraining}>${icon_upload}</button>
|
||||
`)
|
||||
|
|
@ -130,8 +136,7 @@ export class DashboardActions extends AppElement {
|
|||
}
|
||||
|
||||
blePeripheralMode () {
|
||||
const value = this.appState?.config?.blePeripheralMode
|
||||
|
||||
const value = this.config?.blePeripheralMode
|
||||
switch (value) {
|
||||
case 'PM5':
|
||||
return 'C2 PM5'
|
||||
|
|
|
|||
|
|
@ -64,10 +64,10 @@ export class PerformanceDashboard extends AppElement {
|
|||
|
||||
dashboardMetricComponentsFactory = (appState) => {
|
||||
const metrics = appState.metrics
|
||||
const configs = appState.config.guiConfigs
|
||||
const configs = appState.config
|
||||
|
||||
const dashboardMetricComponents = Object.keys(DASHBOARD_METRICS).reduce((dashboardMetrics, key) => {
|
||||
dashboardMetrics[key] = DASHBOARD_METRICS[key].template(metrics, configs.showIcons)
|
||||
dashboardMetrics[key] = DASHBOARD_METRICS[key].template(metrics, configs)
|
||||
|
||||
return dashboardMetrics
|
||||
}, {})
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ export const DASHBOARD_METRICS = {
|
|||
distance: {
|
||||
displayName: 'Distance',
|
||||
size: 1,
|
||||
template: (metrics, showIcon) => {
|
||||
template: (metrics, config) => {
|
||||
const linearDistance = formatDistance(metrics?.totalLinearDistance)
|
||||
|
||||
return simpleMetricFactory(linearDistance.distance, linearDistance.unit, showIcon ? icon_route : '')
|
||||
return simpleMetricFactory(linearDistance.distance, linearDistance.unit, config.guiConfigs.showIcons ? icon_route : '')
|
||||
}
|
||||
},
|
||||
pace: { displayName: 'Pace/500', size: 1, template: (metrics, showIcon) => simpleMetricFactory(secondsToPace(500 / metrics?.cycleLinearVelocity), '/500m', showIcon ? icon_stopwatch : '') },
|
||||
power: { displayName: 'Power', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', showIcon ? icon_bolt : '') },
|
||||
stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', showIcon ? icon_paddle : '') },
|
||||
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, showIcon) => html`<dashboard-metric .icon=${showIcon ? icon_heartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
|
||||
template: (metrics, config) => html`<dashboard-metric .icon=${config.guiConfigs.showIcons ? icon_heartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
|
||||
${metrics?.heartrateBatteryLevel
|
||||
? html`<battery-icon .batteryLevel=${metrics?.heartrateBatteryLevel}></battery-icon>`
|
||||
: ''}
|
||||
</dashboard-metric>`
|
||||
},
|
||||
totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, showIcon) => simpleMetricFactory(metrics?.totalNumberOfStrokes, 'stk', showIcon ? icon_paddle : '') },
|
||||
calories: { displayName: 'Calories', size: 1, template: (metrics, showIcon) => simpleMetricFactory(formatNumber(metrics?.totalCalories), 'kcal', showIcon ? icon_fire : '') },
|
||||
timer: { displayName: 'Timer', size: 1, template: (metrics, showIcon) => simpleMetricFactory(secondsToPace(metrics?.totalMovingTime), '', showIcon ? icon_clock : '') },
|
||||
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 : '') },
|
||||
forceCurve: { displayName: 'Force curve', size: 2, template: (metrics) => html`<dashboard-force-curve .value=${metrics.driveHandleForceCurve} style="grid-column: span 2"></dashboard-force-curve>` },
|
||||
actions: { displayName: 'Actions', size: 1, template: () => html`<dashboard-actions></dashboard-actions>` }
|
||||
actions: { displayName: 'Actions', size: 1, template: (appState, config) => html`<dashboard-actions .appMode=${appState.appMode} .config=${config}></dashboard-actions>` }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue