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/CommandSender.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { CommandDefinition } from '@/composables/command.ts';
+import { ref } from 'vue';
+import CommandParameter from '@/components/CommandParameter.vue';
+import FlexDivider from '@/components/FlexDivider.vue';
+import type { DynamicDataType } from '@/composables/dynamic.ts';
+
+const props = defineProps<{
+    command: CommandDefinition | null;
+}>();
+
+const parameters = ref<{ [key: string]: DynamicDataType }>({});
+const busy = ref(false);
+const result = ref('');
+
+async function sendCommand() {
+    const command = props.command;
+    const params = parameters.value;
+    if (!command) {
+        return;
+    }
+    busy.value = true;
+    result.value = 'Loading...';
+
+    const response = await fetch(`/api/cmd/${command.name}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(params),
+    });
+    if (response.ok) {
+        result.value = await response.json();
+    } else {
+        result.value = await response.text();
+    }
+    busy.value = false;
+}
+</script>
+
+<template>
+    <div class="row" v-if="!command">
+        <span> No Command Selected </span>
+    </div>
+    <template v-else>
+        <div class="row">
+            <span>
+                {{ command.name }}
+            </span>
+        </div>
+        <FlexDivider></FlexDivider>
+        <CommandParameter
+            v-for="param in command.parameters"
+            :key="param.name"
+            :parameter="param"
+            v-model="parameters[param.name]"
+        ></CommandParameter>
+        <div class="row">
+            <button :disabled="busy" @click.stop.prevent="sendCommand">
+                Send
+            </button>
+        </div>
+        <div class="row shrink grow"></div>
+        <div class="row">{{ result }}</div>
+    </template>
+</template>
+
+<style scoped lang="scss"></style>