Implement Commanding (#6)

Reviewed-on: #6
Co-authored-by: Sergey Savelyev <sergeysav.nn@gmail.com>
Co-committed-by: Sergey Savelyev <sergeysav.nn@gmail.com>

frontend/src/composables/command.ts

@@ -0,0 +1,53 @@
+import { ref, toValue, watchEffect } from 'vue';
+import { type MaybeRefOrGetter } from 'vue';
+import type { AnyTypeId } from '@/composables/dynamic.ts';
+
+export interface CommandParameterDefinition {
+    name: string;
+    data_type: AnyTypeId;
+}
+
+export interface CommandDefinition {
+    name: string;
+    parameters: CommandParameterDefinition[];
+}
+
+export function useAllCommands() {
+    const data = ref<CommandDefinition[] | null>(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const error = ref<any | null>(null);
+
+    watchEffect(async () => {
+        try {
+            const res = await fetch(`/api/cmd`);
+            data.value = await res.json();
+            error.value = null;
+        } catch (e) {
+            data.value = null;
+            error.value = e;
+        }
+    });
+
+    return { data, error };
+}
+
+export function useCommand(name: MaybeRefOrGetter<string>) {
+    const data = ref<CommandDefinition | null>(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const error = ref<any | null>(null);
+
+    watchEffect(async () => {
+        const name_value = toValue(name);
+
+        try {
+            const res = await fetch(`/api/cmd/${name_value}`);
+            data.value = await res.json();
+            error.value = null;
+        } catch (e) {
+            data.value = null;
+            error.value = e;
+        }
+    });
+
+    return { data, error };
+}

frontend/src/composables/dynamic.ts

@@ -1,3 +1,29 @@
+export const NumericTypes = ['Float32', 'Float64'] as const;
+export type NumericTypeId = (typeof NumericTypes)[number];
+export const BooleanTypes = ['Boolean'] as const;
+export type BooleanTypeId = (typeof BooleanTypes)[number];
+export const AnyTypes = [...NumericTypes, ...BooleanTypes] as const;
+export type AnyTypeId = (typeof AnyTypes)[number];
+
+export function isNumericType(type: AnyTypeId): type is NumericTypeId {
+    return NumericTypes.some((it) => it == type);
+}
+export function isBooleanType(type: AnyTypeId): type is BooleanTypeId {
+    return BooleanTypes.some((it) => it == type);
+}
+
+export type DynamicDataType = number | boolean;
+
+export type CommandParameterData =
+    | {
+          type: 'constant';
+          value: DynamicDataType;
+      }
+    | {
+          type: 'input';
+          id: string;
+      };
+
 export type DynamicComponentData =
     | { type: 'text'; text: string; justify_right: boolean }
     | { type: 'telemetry'; data: string }
@@ -6,6 +32,17 @@ export type DynamicComponentData =
           columns: number;
           equal_width: boolean;
           cells: OptionalDynamicComponentData[][];
+      }
+    | {
+          type: 'input';
+          id: string;
+          data_type: AnyTypeId;
+      }
+    | {
+          type: 'command_button';
+          text: string;
+          command_name: string;
+          parameters: { [key: string]: CommandParameterData };
       };
 
 export type OptionalDynamicComponentData =

frontend/src/composables/telemetry.ts

@@ -1,10 +1,11 @@
 import { ref, toValue, watchEffect } from 'vue';
 import { type MaybeRefOrGetter } from 'vue';
+import type { AnyTypeId } from '@/composables/dynamic.ts';
 
 export interface TelemetryDefinition {
     uuid: string;
     name: string;
-    data_type: string;
+    data_type: AnyTypeId;
 }
 
 export function useAllTelemetry() {