Fix bug re. ignoring app mode

Refactor appMode setting so it becomes internal to the DashboardAction
component as it is not used anywhere else. This prevents exposing
unnecessary - essentially internal - state to the global appState.

app/client/components/DashboardActions.js

@@ -77,8 +77,8 @@ export class DashboardActions extends AppElement {
   @property({ type: Object })
     config = {}
 
-  @property({ type: Object })
-    appMode = 'BROWSER'
+  @state()
+    _appMode = 'BROWSER'
 
   @state()
     _dialog
@@ -105,12 +105,25 @@ export class DashboardActions extends AppElement {
   `
   }
 
+  firstUpdated () {
+    switch (new URLSearchParams(window.location.search).get('mode')) {
+      case 'standalone':
+        this._appMode = 'STANDALONE'
+        break
+      case 'kiosk':
+        this._appMode = 'KIOSK'
+        break
+      default:
+        this._appMode = 'BROWSER'
+    }
+  }
+
   renderOptionalButtons () {
     const buttons = []
     // 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.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>
@@ -121,7 +134,7 @@ 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.appMode === 'KIOSK' && this.config?.shutdownEnabled) {
+    if (this._appMode === 'KIOSK' && this.config?.shutdownEnabled) {
       buttons.push(html`
       <button @click=${this.shutdown}>${icon_poweroff}</button>
     `)

app/client/lib/app.js

@@ -9,12 +9,7 @@ import NoSleep from 'nosleep.js'
 import { filterObjectByKeys } from './helper.js'
 
 export function createApp (app) {
-  const urlParameters = new URLSearchParams(window.location.search)
-  const mode = urlParameters.get('mode')
-  const appMode = mode === 'standalone' ? 'STANDALONE' : mode === 'kiosk' ? 'KIOSK' : 'BROWSER'
-  app.updateState({ ...app.getState(), appMode })
-
-  const stravaAuthorizationCode = urlParameters.get('code')
+  const stravaAuthorizationCode = new URLSearchParams(window.location.search).get('code')
 
   let socket
 

app/client/store/appState.js

@@ -6,8 +6,6 @@
 */
 
 export const APP_STATE = {
-  // currently can be STANDALONE (Mobile Home Screen App), KIOSK (Raspberry Pi deployment) or '' (default)
-  appMode: '',
   // contains all the rowing metrics that are delivered from the backend
   metrics: {},
   config: {

app/client/store/dashboardMetrics.js

@@ -49,5 +49,5 @@ export const DASHBOARD_METRICS = {
 
   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: (appState, config) => html`<dashboard-actions .appMode=${appState.appMode} .config=${config}></dashboard-actions>` }
+  actions: { displayName: 'Actions', size: 1, template: (_, config) => html`<dashboard-actions .config=${config}></dashboard-actions>` }
 }