adds handling of some initial events

app/client/components/App.js

@@ -30,10 +30,14 @@ export class App extends AppElement {
     // this is how we implement changes to the global state:
     // once any child component sends this CustomEvent we update the global state according
     // to the changes that were passed to us
-    this.addEventListener('app-state-changed', (event) => {
+    this.addEventListener('appStateChanged', (event) => {
       const newState = event.detail
       this.globalAppState = newState
     })
+
+    this.addEventListener('triggerAction', (event) => {
+      this.app.handleAction(event.detail)
+    })
   }
 
   static properties = {

app/client/components/AppElement.js

@@ -19,9 +19,14 @@ export class AppElement extends LitElement {
   // ..and state changes are send back to the root component of the app by dispatching
   // a CustomEvent
   updateState () {
+    this.sendEvent('appStateChanged', { ...this.appState })
+  }
+
+  // a helper to dispatch events to the parent components
+  sendEvent (eventType, eventData) {
     this.dispatchEvent(
-      new CustomEvent('app-state-changed', {
-        detail: { ...this.appState },
+      new CustomEvent(eventType, {
+        detail: eventData,
         bubbles: true,
         composed: true
       })

app/client/components/DashboardActions.js

@@ -49,15 +49,14 @@ export class DashboardActions extends AppElement {
     window.close()
   }
 
-  // todo: should use events instead of communicating via a global app object
   reset () {
-    window.app.reset()
+    this.sendEvent('triggerAction', { command: 'reset' })
   }
 
   switchPeripheralMode () {
-    // window.app.switchPeripheralMode()
     // todo: this is just a test property to see if the concept works...
-    this.appState.peripheralMode = 'PM5'
-    this.updateState()
+    // this.appState.peripheralMode = 'PM5'
+    // this.updateState()
+    this.sendEvent('triggerAction', { command: 'switchPeripheralMode' })
   }
 }

app/client/lib/network.js

@@ -125,13 +125,15 @@ export function createApp () {
     }
   }
 
-  function reset () {
-    resetFields()
-    if (socket)socket.send(JSON.stringify({ command: 'reset' }))
-  }
-
-  function switchPeripheralMode () {
-    if (socket)socket.send(JSON.stringify({ command: 'switchPeripheralMode' }))
+  function handleAction (action) {
+    if (action.command === 'switchPeripheralMode') {
+      if (socket)socket.send(JSON.stringify({ command: 'switchPeripheralMode' }))
+    } else if (action.command === 'reset') {
+      resetFields()
+      if (socket)socket.send(JSON.stringify({ command: 'reset' }))
+    } else {
+      console.error('no handler defined for action', action)
+    }
   }
 
   function setMetricsCallback (callback) {
@@ -142,8 +144,7 @@ export function createApp () {
   }
 
   return {
-    reset,
-    switchPeripheralMode,
+    handleAction,
     metrics,
     setMetricsCallback
   }