diff --git a/.gitignore b/.gitignore
index 05f3d8a..08ddc1d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -78,4 +78,5 @@ node_modules
tmp/
build/
config/config.js
+config/stravatoken
data/
diff --git a/app/WebServer.js b/app/WebServer.js
index 368e0fa..6eb1eec 100644
--- a/app/WebServer.js
+++ b/app/WebServer.js
@@ -28,14 +28,14 @@ function createWebServer () {
const wss = new WebSocketServer({ server })
- wss.on('connection', function connection (ws) {
+ wss.on('connection', function connection (client) {
log.debug('websocket client connected')
- emitter.emit('clientConnected', ws)
- ws.on('message', function incoming (data) {
+ emitter.emit('clientConnected', client)
+ client.on('message', function incoming (data) {
try {
const message = JSON.parse(data)
if (message) {
- emitter.emit('messageReceived', message)
+ emitter.emit('messageReceived', message, client)
} else {
log.warn(`invalid message received: ${data}`)
}
@@ -43,13 +43,24 @@ function createWebServer () {
log.error(err)
}
})
- ws.on('close', function () {
+ client.on('close', function () {
log.debug('websocket client disconnected')
})
})
- function notifyClients (message) {
- const messageString = JSON.stringify(message)
+ function notifyClient (client, type, data) {
+ const messageString = JSON.stringify({ type, data })
+ if (wss.clients.has(client)) {
+ if (client.readyState === WebSocket.OPEN) {
+ client.send(messageString)
+ }
+ } else {
+ log.error('trying to send message to a client that does not exist')
+ }
+ }
+
+ function notifyClients (type, data) {
+ const messageString = JSON.stringify({ type, data })
wss.clients.forEach(function each (client) {
if (client.readyState === WebSocket.OPEN) {
client.send(messageString)
@@ -58,6 +69,7 @@ function createWebServer () {
}
return Object.assign(emitter, {
+ notifyClient,
notifyClients
})
}
diff --git a/app/client/components/AppDialog.js b/app/client/components/AppDialog.js
new file mode 100644
index 0000000..eab5d2e
--- /dev/null
+++ b/app/client/components/AppDialog.js
@@ -0,0 +1,111 @@
+'use strict'
+/*
+ Open Rowing Monitor, https://github.com/laberning/openrowingmonitor
+
+ Component that renders a html dialog
+*/
+
+import { AppElement, html, css } from './AppElement.js'
+import { customElement, property } from 'lit/decorators.js'
+import { ref, createRef } from 'lit/directives/ref.js'
+
+@customElement('app-dialog')
+export class AppDialog extends AppElement {
+ constructor () {
+ super()
+ this.dialog = createRef()
+ }
+
+ static styles = css`
+ dialog {
+ border: none;
+ color: var(--theme-font-color);
+ background-color: var(--theme-widget-color);
+ border-radius: var(--theme-border-radius);
+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+ padding: 1.6rem;
+ max-width: 80%;
+ }
+ dialog::backdrop {
+ background: none;
+ backdrop-filter: contrast(15%) blur(2px);
+ }
+
+ button {
+ outline:none;
+ background-color: var(--theme-button-color);
+ border: 0;
+ border-radius: var(--theme-border-radius);
+ color: var(--theme-font-color);
+ margin: 0.2em 0;
+ font-size: 60%;
+ text-decoration: none;
+ display: inline-flex;
+ width: 4em;
+ height: 2.5em;
+ justify-content: center;
+ align-items: center;
+ }
+ button:hover {
+ filter: brightness(150%);
+ }
+
+ fieldset {
+ border: 0;
+ margin: unset;
+ padding: unset;
+ margin-block-end: 1em;
+ }
+ ::slotted(*) { font-size: 80%; }
+ ::slotted(p) { font-size: 55%; }
+
+ menu {
+ display: flex;
+ gap: 0.5em;
+ justify-content: flex-end;
+ margin: 0;
+ padding: 0;
+ }
+ `
+
+ @property({ type: Boolean, reflect: true })
+ dialogOpen
+
+ render () {
+ return html`
+
+
+
+ `
+ }
+
+ close (event) {
+ if (event.target.returnValue !== 'confirm') {
+ this.dispatchEvent(new CustomEvent('close', { detail: 'cancel' }))
+ } else {
+ this.dispatchEvent(new CustomEvent('close', { detail: 'confirm' }))
+ }
+ }
+
+ firstUpdated () {
+ this.dialog.value.showModal()
+ }
+
+ updated (changedProperties) {
+ if (changedProperties.has('dialogOpen')) {
+ if (this.dialogOpen) {
+ this.dialog.value.showModal()
+ } else {
+ this.dialog.value.close()
+ }
+ }
+ }
+}
diff --git a/app/client/components/DashboardActions.js b/app/client/components/DashboardActions.js
index f92d4cb..8eb5359 100644
--- a/app/client/components/DashboardActions.js
+++ b/app/client/components/DashboardActions.js
@@ -6,8 +6,9 @@
*/
import { AppElement, html, css } from './AppElement.js'
-import { customElement } from 'lit/decorators.js'
-import { icon_undo, icon_expand, icon_compress, icon_poweroff, icon_bluetooth } from '../lib/icons.js'
+import { customElement, state } from 'lit/decorators.js'
+import { icon_undo, icon_expand, icon_compress, icon_poweroff, icon_bluetooth, icon_upload } from '../lib/icons.js'
+import './AppDialog.js'
@customElement('dashboard-actions')
export class DashboardActions extends AppElement {
@@ -16,14 +17,23 @@ export class DashboardActions extends AppElement {
outline:none;
background-color: var(--theme-button-color);
border: 0;
+ border-radius: var(--theme-border-radius);
color: var(--theme-font-color);
- padding: 0.5em 0.9em 0.3em 0.9em;
margin: 0.2em 0;
font-size: 60%;
- text-align: center;
text-decoration: none;
- display: inline-block;
+ display: inline-flex;
width: 3.5em;
+ height: 2.5em;
+ justify-content: center;
+ align-items: center;
+ }
+ button:hover {
+ filter: brightness(150%);
+ }
+
+ #fullscreen-icon {
+ display: inline-flex;
}
#windowed-icon {
@@ -31,7 +41,7 @@ export class DashboardActions extends AppElement {
}
.icon {
- height: 1.8em;
+ height: 1.7em;
}
.peripheral-mode {
@@ -43,18 +53,22 @@ export class DashboardActions extends AppElement {
display: none;
}
#windowed-icon {
- display: inline;
+ display: inline-flex;
}
}
`
+ @state({ type: Object })
+ dialog
+
render () {
return html`
- ${icon_undo}
- ${this.renderOptionalButtons()}
- ${icon_bluetooth}
- ${this.peripheralMode()}
- `
+ ${icon_undo}
+ ${this.renderOptionalButtons()}
+ ${icon_bluetooth}
+ ${this.peripheralMode()}
+ ${this.dialog ? this.dialog : ''}
+ `
}
renderOptionalButtons () {
@@ -62,33 +76,41 @@ 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.appState?.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
buttons.push(html`
-
- ${icon_expand}
- ${icon_compress}
-
- `)
+
+ ${icon_expand}
+ ${icon_compress}
+
+ `)
}
- // a shutdown button only makes sence when the app is openend as app on a mobile
- // device. at some point we might also think of using this to power down the raspi
- // when we are running in kiosk mode
- if (this.appState.appMode === 'STANDALONE') {
+ // 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) {
buttons.push(html`
- ${icon_poweroff}
- `)
+ ${icon_poweroff}
+ `)
+ }
+
+ if (this.appState?.config?.stravaUploadEnabled) {
+ buttons.push(html`
+ ${icon_upload}
+ `)
}
return buttons
}
peripheralMode () {
- const value = this.appState?.peripheralMode
+ const value = this.appState?.config?.peripheralMode
if (value === 'PM5') {
return 'C2 PM5'
} else if (value === 'FTMSBIKE') {
return 'FTMS Bike'
- } else {
+ } else if (value === 'FTMS') {
return 'FTMS Rower'
+ } else {
+ return ''
}
}
@@ -103,10 +125,6 @@ export class DashboardActions extends AppElement {
}
}
- close () {
- window.close()
- }
-
reset () {
this.sendEvent('triggerAction', { command: 'reset' })
}
@@ -114,4 +132,34 @@ export class DashboardActions extends AppElement {
switchPeripheralMode () {
this.sendEvent('triggerAction', { command: 'switchPeripheralMode' })
}
+
+ uploadTraining () {
+ this.dialog = html`
+
+ ${icon_upload}
+ Do you want to finish your workout and upload it to Strava?
+
+ `
+ function dialogClosed (event) {
+ this.dialog = undefined
+ if (event.detail === 'confirm') {
+ this.sendEvent('triggerAction', { command: 'uploadTraining' })
+ }
+ }
+ }
+
+ shutdown () {
+ this.dialog = html`
+
+ ${icon_poweroff}
+ Do you want to shutdown the device?
+
+ `
+ function dialogClosed (event) {
+ this.dialog = undefined
+ if (event.detail === 'confirm') {
+ this.sendEvent('triggerAction', { command: 'shutdown' })
+ }
+ }
+ }
}
diff --git a/app/client/components/PerformanceDashboard.js b/app/client/components/PerformanceDashboard.js
index a928b28..0d04013 100644
--- a/app/client/components/PerformanceDashboard.js
+++ b/app/client/components/PerformanceDashboard.js
@@ -37,6 +37,7 @@ export class PerformanceDashboard extends AppElement {
text-align: center;
position: relative;
padding: 0.5em 0.2em 0 0.2em;
+ border-radius: var(--theme-border-radius);
}
dashboard-actions {
diff --git a/app/client/index.html b/app/client/index.html
index b49ccde..22ef8e8 100644
--- a/app/client/index.html
+++ b/app/client/index.html
@@ -23,6 +23,7 @@
--theme-font-family: Verdana, "Lucida Sans Unicode", sans-serif;
--theme-font-color: #f5f5f5;
--theme-warning-color: #ff0000;
+ --theme-border-radius: 3px;
}
body {
diff --git a/app/client/lib/app.js b/app/client/lib/app.js
index 074f8e2..90f5801 100644
--- a/app/client/lib/app.js
+++ b/app/client/lib/app.js
@@ -12,23 +12,40 @@ const rowingMetricsFields = ['strokesTotal', 'distanceTotal', 'caloriesTotal', '
'heartrateBatteryLevel', 'splitFormatted', 'strokesPerMinute', 'durationTotalFormatted']
export function createApp (app) {
- const mode = window.location.hash
- const appMode = mode === '#:standalone:' ? 'STANDALONE' : mode === '#:kiosk:' ? 'KIOSK' : 'BROWSER'
+ 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')
+
let socket
initWebsocket()
resetFields()
requestWakeLock()
+ function websocketOpened () {
+ if (stravaAuthorizationCode) {
+ handleStravaAuthorization(stravaAuthorizationCode)
+ }
+ }
+
+ function handleStravaAuthorization (stravaAuthorizationCode) {
+ if (socket)socket.send(JSON.stringify({ command: 'stravaAuthorizationCode', data: stravaAuthorizationCode }))
+ }
+
+ let initialWebsocketOpenend = true
function initWebsocket () {
// use the native websocket implementation of browser to communicate with backend
- // eslint-disable-next-line no-undef
socket = new WebSocket(`ws://${location.host}/websocket`)
socket.addEventListener('open', (event) => {
console.log('websocket opened')
+ if (initialWebsocketOpenend) {
+ websocketOpened()
+ initialWebsocketOpenend = false
+ }
})
socket.addEventListener('error', (error) => {
@@ -46,21 +63,37 @@ export function createApp (app) {
// todo: we should use different types of messages to make processing easier
socket.addEventListener('message', (event) => {
try {
- const data = JSON.parse(event.data)
-
- let activeFields = rowingMetricsFields
- // if we are in reset state only update heart rate
- if (data.strokesTotal === 0) {
- activeFields = ['heartrate', 'heartrateBatteryLevel']
+ const message = JSON.parse(event.data)
+ if (!message.type) {
+ console.error('message does not contain messageType specifier', message)
+ return
}
+ const data = message.data
+ switch (message.type) {
+ case 'config': {
+ app.updateState({ ...app.getState(), config: data })
+ break
+ }
+ case 'metrics': {
+ let activeFields = rowingMetricsFields
+ // if we are in reset state only update heart rate
+ if (data.strokesTotal === 0) {
+ activeFields = ['heartrate', 'heartrateBatteryLevel']
+ }
- const filteredData = filterObjectByKeys(data, activeFields)
-
- let updatedState = { ...app.getState(), metrics: filteredData }
- if (data.peripheralMode) {
- updatedState = { ...app.getState(), peripheralMode: data.peripheralMode }
+ const filteredData = filterObjectByKeys(data, activeFields)
+ app.updateState({ ...app.getState(), metrics: filteredData })
+ break
+ }
+ case 'authorizeStrava': {
+ const currentUrl = encodeURIComponent(window.location.href)
+ window.location.href = `https://www.strava.com/oauth/authorize?client_id=${data.stravaClientId}&response_type=code&redirect_uri=${currentUrl}&approval_prompt=force&scope=activity:write`
+ break
+ }
+ default: {
+ console.error(`unknown message type: ${message.type}`, message.data)
+ }
}
- app.updateState(updatedState)
} catch (err) {
console.log(err)
}
@@ -90,13 +123,27 @@ export function createApp (app) {
}
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)
+ switch (action.command) {
+ case 'switchPeripheralMode': {
+ if (socket)socket.send(JSON.stringify({ command: 'switchPeripheralMode' }))
+ break
+ }
+ case 'reset': {
+ resetFields()
+ if (socket)socket.send(JSON.stringify({ command: 'reset' }))
+ break
+ }
+ case 'uploadTraining': {
+ if (socket)socket.send(JSON.stringify({ command: 'uploadTraining' }))
+ break
+ }
+ case 'shutdown': {
+ if (socket)socket.send(JSON.stringify({ command: 'shutdown' }))
+ break
+ }
+ default: {
+ console.error('no handler defined for action', action)
+ }
}
}
diff --git a/app/client/lib/icons.js b/app/client/lib/icons.js
index a5a22c8..23b9a75 100644
--- a/app/client/lib/icons.js
+++ b/app/client/lib/icons.js
@@ -24,3 +24,4 @@ export const icon_poweroff = svg`