Files
telemetry_visualization/frontend/src/components/CommandParameterListConfigurator.vue

106 lines
3.4 KiB
Vue

<script setup lang="ts">
import {
type CommandParameterData,
type DynamicDataType,
getLimits,
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' ||
typeof model_param_value.value == 'bigint') &&
!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 === undefined) {
let default_value: DynamicDataType = 0;
if (isNumericType(param.data_type)) {
if (getLimits(param.data_type).is_big) {
default_value = 0n;
} else {
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>