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/components/CommandParameterListConfigurator.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import {
+    type CommandParameterData,
+    type DynamicDataType,
+    isBooleanType,
+    isNumericType,
+} from '@/composables/dynamic.ts';
+import { useCommand } from '@/composables/command.ts';
+import { watch } from 'vue';
+import FlexDivider from '@/components/FlexDivider.vue';
+import CommandParameterDataConfigurator from '@/components/CommandParameterDataConfigurator.vue';
+
+const props = defineProps<{
+    command_name: string;
+}>();
+
+const model = defineModel<{ [key: string]: CommandParameterData }>({
+    required: true,
+});
+
+const { data: command_info } = useCommand(props.command_name);
+
+watch([command_info], ([cmd_info]) => {
+    if (cmd_info == null) {
+        return;
+    }
+    const model_value = model.value;
+    for (const key in model_value) {
+        const is_valid_param = cmd_info.parameters.some(
+            (param) => param.name == key,
+        );
+        if (!is_valid_param) {
+            delete model_value[key];
+        }
+    }
+    for (const param of cmd_info.parameters) {
+        let model_param_value: CommandParameterData | undefined =
+            model_value[param.name];
+        if (model_param_value) {
+            switch (model_param_value.type) {
+                case 'constant':
+                    if (
+                        typeof model_param_value.value == 'number' &&
+                        !isNumericType(param.data_type)
+                    ) {
+                        model_param_value = undefined;
+                    } else if (
+                        typeof model_param_value.value == 'boolean' &&
+                        !isBooleanType(param.data_type)
+                    ) {
+                        model_param_value = undefined;
+                    }
+                    break;
+                case 'input':
+                    // Nothing to do
+                    break;
+            }
+        }
+        if (!model_param_value) {
+            let default_value: DynamicDataType = 0;
+            if (isNumericType(param.data_type)) {
+                default_value = 0;
+            } else if (isBooleanType(param.data_type)) {
+                default_value = false;
+            }
+            model_param_value = {
+                type: 'constant',
+                value: default_value,
+            };
+        }
+        model_value[param.name] = model_param_value;
+    }
+    model.value = model_value;
+});
+</script>
+
+<template>
+    <template v-if="command_info">
+        <template v-for="param in command_info.parameters" :key="param.name">
+            <FlexDivider></FlexDivider>
+            <div class="row">
+                <label>{{ param.name }}</label>
+                <select v-model="model[param.name].type">
+                    <option value="constant">Constant</option>
+                    <option value="input">Input</option>
+                </select>
+            </div>
+            <CommandParameterDataConfigurator
+                :param="param"
+                v-model="model[param.name]"
+            ></CommandParameterDataConfigurator>
+        </template>
+    </template>
+    <template v-else>
+        <span> Loading... </span>
+    </template>
+</template>
+
+<style scoped lang="scss"></style>