openrowingmonitor/app/client/components/AppElement.js

36 lines
933 B
JavaScript

'use strict'
/*
Open Rowing Monitor, https://github.com/laberning/openrowingmonitor
Base Component for all other App Components
*/
import { LitElement } from 'lit'
import { property } from 'lit/decorators.js'
import { APP_STATE } from '../store/appState.js'
export * from 'lit'
export class AppElement extends LitElement {
// this is how we implement a global state: a global state object is passed via properties
// to child components
@property({ type: Object })
appState = APP_STATE
// ..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(eventType, {
detail: eventData,
bubbles: true,
composed: true
})
)
}
}