Allow for dynamic Cockpit Actions and add support for customizable HTTP request actions

src/App.vue

@@ -343,6 +343,7 @@ import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
 import { ConfigComponent } from './types/general'
+import ConfigurationActionsView from './views/ConfigurationActionsView.vue'
 import ConfigurationAlertsView from './views/ConfigurationAlertsView.vue'
 import ConfigurationDevelopmentView from './views/ConfigurationDevelopmentView.vue'
 import ConfigurationGeneralView from './views/ConfigurationGeneralView.vue'
@@ -410,6 +411,11 @@ const configMenu = [
  title: 'Mission',
  component: markRaw(ConfigurationMissionView) as ConfigComponent,
  },
+ {
+ icon: 'mdi-run-fast',
+ title: 'Actions',
+ component: markRaw(ConfigurationActionsView) as ConfigComponent,
+ },
 ]
 
 watch(

src/libs/actions/data-lake.ts

@@ -0,0 +1,78 @@
+/**
+ * A variable to be used on a Cockpit action
+ * @param { string } id - The id of the variable
+ * @param { string } name - The name of the variable
+ * @param { 'string' | 'number' | 'boolean' } type - The type of the variable (string, number or boolean)
+ * @param { string } description - What the variable does or means
+ */
+class CockpitActionVariable {
+ id: string
+ name: string
+ type: 'string' | 'number' | 'boolean'
+ description?: string
+ // eslint-disable-next-line jsdoc/require-jsdoc
+ constructor(id: string, name: string, type: 'string' | 'number' | 'boolean', description?: string) {
+ this.id = id
+ this.name = name
+ this.type = type
+ this.description = description
+ }
+}
+
+const cockpitActionVariableInfo: Record<string, CockpitActionVariable> = {}
+export const cockpitActionVariableData: Record<string, string | number | boolean> = {}
+const cockpitActionVariableListeners: Record<string, ((value: string | number | boolean) => void)[]> = {}
+
+export const getAllCockpitActionVariablesInfo = (): Record<string, CockpitActionVariable> => {
+ return cockpitActionVariableInfo
+}
+
+export const getCockpitActionVariableInfo = (id: string): CockpitActionVariable | undefined => {
+ return cockpitActionVariableInfo[id]
+}
+
+export const createCockpitActionVariable = (variable: CockpitActionVariable): void => {
+ if (cockpitActionVariableInfo[variable.id]) {
+ throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+ }
+ cockpitActionVariableInfo[variable.id] = variable
+}
+
+export const updateCockpitActionVariableInfo = (variable: CockpitActionVariable): void => {
+ if (!cockpitActionVariableInfo[variable.id]) {
+ throw new Error(`Cockpit action variable with id '${variable.id}' does not exist. Create it first.`)
+ }
+ cockpitActionVariableInfo[variable.id] = variable
+}
+
+export const getCockpitActionVariableData = (id: string): string | number | boolean | undefined => {
+ return cockpitActionVariableData[id]
+}
+
+export const setCockpitActionVariableData = (id: string, data: string | number | boolean): void => {
+ cockpitActionVariableData[id] = data
+ notifyCockpitActionVariableListeners(id)
+}
+
+export const deleteCockpitActionVariable = (id: string): void => {
+ delete cockpitActionVariableInfo[id]
+ delete cockpitActionVariableData[id]
+}
+
+export const listenCockpitActionVariable = (id: string, listener: (value: string | number | boolean) => void): void => {
+ if (!cockpitActionVariableListeners[id]) {
+ cockpitActionVariableListeners[id] = []
+ }
+ cockpitActionVariableListeners[id].push(listener)
+}
+
+export const unlistenCockpitActionVariable = (id: string): void => {
+ delete cockpitActionVariableListeners[id]
+}
+
+const notifyCockpitActionVariableListeners = (id: string): void => {
+ if (cockpitActionVariableListeners[id]) {
+ const value = cockpitActionVariableData[id]
+ cockpitActionVariableListeners[id].forEach((listener) => listener(value))
+ }
+}

src/libs/actions/http-request.ts

@@ -0,0 +1,160 @@
+import {
+ availableCockpitActions,
+ CockpitAction,
+ CockpitActionsFunction,
+ deleteAction,
+ registerActionCallback,
+ registerNewAction,
+} from '../joystick/protocols/cockpit-actions'
+import { getCockpitActionVariableData } from './data-lake'
+
+const httpRequestActionIdPrefix = 'http-request-action'
+
+/**
+ * The types of HTTP methods that can be used.
+ */
+export enum HttpRequestMethod {
+ GET = 'GET',
+ POST = 'POST',
+ PUT = 'PUT',
+ DELETE = 'DELETE',
+ PATCH = 'PATCH',
+}
+export const availableHttpRequestMethods: HttpRequestMethod[] = Object.values(HttpRequestMethod)
+
+export type HttpRequestActionConfig = {
+ /**
+ * The name of the action.
+ */
+ name: string
+ /**
+ * The URL to send the request to.
+ */
+ url: string
+ /**
+ * The HTTP method to use.
+ */
+ method: HttpRequestMethod
+ /**
+ * The headers to send with the request.
+ */
+ headers: Record<string, string>
+ /**
+ * The URL parameters to send with the request.
+ */
+ urlParams: Record<string, string>
+ /**
+ * The body of the request.
+ */
+ body: string
+}
+
+let registeredHttpRequestActionConfigs: Record<string, HttpRequestActionConfig> = {}
+
+export const registerHttpRequestActionConfig = (action: HttpRequestActionConfig): void => {
+ const id = `${httpRequestActionIdPrefix} (${action.name})`
+ registeredHttpRequestActionConfigs[id] = action
+ saveHttpRequestActionConfigs()
+ updateCockpitActions()
+}
+
+export const getHttpRequestActionConfig = (id: string): HttpRequestActionConfig | undefined => {
+ return registeredHttpRequestActionConfigs[id]
+}
+
+export const getAllHttpRequestActionConfigs = (): Record<string, HttpRequestActionConfig> => {
+ return registeredHttpRequestActionConfigs
+}
+
+export const deleteHttpRequestActionConfig = (id: string): void => {
+ delete registeredHttpRequestActionConfigs[id]
+ saveHttpRequestActionConfigs()
+ updateCockpitActions()
+}
+
+export const updateHttpRequestActionConfig = (id: string, updatedAction: HttpRequestActionConfig): void => {
+ registeredHttpRequestActionConfigs[id] = updatedAction
+ saveHttpRequestActionConfigs()
+ updateCockpitActions()
+}
+
+export const updateCockpitActions = (): void => {
+ Object.entries(availableCockpitActions).forEach(([id]) => {
+ if (id.includes(httpRequestActionIdPrefix)) {
+ deleteAction(id as CockpitActionsFunction)
+ }
+ })
+
+ const httpResquestActions = getAllHttpRequestActionConfigs()
+ for (const [id, action] of Object.entries(httpResquestActions)) {
+ try {
+ const cockpitAction = new CockpitAction(id as CockpitActionsFunction, action.name)
+ registerNewAction(cockpitAction)
+ registerActionCallback(cockpitAction, getHttpRequestActionCallback(id))
+ } catch (error) {
+ console.error(`Error registering action ${id}: ${error}`)
+ }
+ }
+}
+
+export const loadHttpRequestActionConfigs = (): void => {
+ const savedActions = localStorage.getItem('cockpit-http-request-actions')
+ if (savedActions) {
+ registeredHttpRequestActionConfigs = JSON.parse(savedActions)
+ }
+}
+
+export const saveHttpRequestActionConfigs = (): void => {
+ localStorage.setItem('cockpit-http-request-actions', JSON.stringify(registeredHttpRequestActionConfigs))
+}
+
+export type HttpRequestActionCallback = () => void
+
+export const getHttpRequestActionCallback = (id: string): HttpRequestActionCallback => {
+ const action = getHttpRequestActionConfig(id)
+ if (!action) {
+ throw new Error(`Action with id ${id} not found.`)
+ }
+
+ let parsedBody = action.body
+ const parsedUrlParams = action.urlParams
+
+ const cockpitInputsInBody = action.body.match(/{{\s*([^{}\s]+)\s*}}/g)
+ if (cockpitInputsInBody) {
+ for (const input of cockpitInputsInBody) {
+ const parsedInput = input.replace('{{', '').replace('}}', '').trim()
+ const inputData = getCockpitActionVariableData(parsedInput)
+ if (inputData) {
+ parsedBody = parsedBody.replace(input, inputData.toString())
+ }
+ }
+ }
+
+ const cockpitInputsInUrlParams = Object.entries(action.urlParams).filter(
+ ([, value]) => typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')
+ )
+ if (cockpitInputsInUrlParams) {
+ for (const [key, value] of cockpitInputsInUrlParams) {
+ const parsedInput = value.replace('{{', '').replace('}}', '').trim()
+ const inputData = getCockpitActionVariableData(parsedInput)
+ if (inputData) {
+ parsedUrlParams[key] = inputData.toString()
+ }
+ }
+ }
+
+ const url = new URL(action.url)
+
+ url.search = new URLSearchParams(parsedUrlParams).toString()
+
+ return () => {
+ fetch(url, {
+ method: action.method,
+ headers: action.headers,
+ body: action.method === HttpRequestMethod.GET ? undefined : parsedBody,
+ })
+ }
+}
+
+loadHttpRequestActionConfigs()
+updateCockpitActions()

src/libs/joystick/protocols.ts

@@ -7,14 +7,15 @@ import {
 } from './protocols/mavlink-manual-control'
 import { modifierKeyActions, otherAvailableActions } from './protocols/other'
 
-export const allAvailableAxes: ProtocolAction[] = [
- ...Object.values(mavlinkManualControlAxes),
- ...Object.values(otherAvailableActions),
-]
+export const allAvailableAxes = (): ProtocolAction[] => {
+ return [...Object.values(mavlinkManualControlAxes), ...Object.values(otherAvailableActions)]
+}
 
-export const allAvailableButtons: ProtocolAction[] = [
- ...Object.values(availableCockpitActions),
- ...Object.values(availableMavlinkManualControlButtonFunctions),
- ...Object.values(otherAvailableActions),
- ...Object.values(modifierKeyActions),
-]
+export const allAvailableButtons = (): ProtocolAction[] => {
+ return [
+ ...Object.values(availableCockpitActions),
+ ...Object.values(availableMavlinkManualControlButtonFunctions),
+ ...Object.values(otherAvailableActions),
+ ...Object.values(modifierKeyActions),
+ ]
+}