created prototype of tasks for device and dialog, that shows all tasks for admin per each device

management-ui/src/customcompometns/DeviceDashboard.vue

@@ -18,11 +18,54 @@ import {
     NumberFieldInput,
 } from '@/components/ui/number-field'
 import AssignDevice from "./AssignDevice.vue";
-import { ref } from "vue";
+import { ref, type PropType } from "vue";
 import Separator from "@/components/ui/separator/Separator.vue";
 import DataRangePicker from "./DataRangePicker.vue";
+import { api } from "@/lib/api";
+import type { Task } from "@/lib/interfaces";
 const selectedUserIds = ref<string[]>([])
 const usrIDs = selectedUserIds.value
+
+const props = defineProps({
+    guid: { type: String as PropType<string>, required: true },
+})
+
+const sending = ref(false)
+async function startRecording() {
+    const dto: Task = {
+        type: 'start_recording',
+        payload: '' // empty as requested
+    }
+    // debug
+    console.log('CreateTaskDto →', dto)
+
+    try {
+        sending.value = true
+        await api.post(`/device/${encodeURIComponent(props.guid)}/task`, dto)
+    } catch (e) {
+        console.error('Failed to create task:', e)
+    } finally {
+        sending.value = false
+    }
+}
+
+async function stopRecording() {
+    const dto: Task = {
+        type: 'stop_recording',
+        payload: '' // empty as requested
+    }
+    // debug
+    console.log('CreateTaskDto →', dto)
+
+    try {
+        sending.value = true
+        await api.post(`/device/${encodeURIComponent(props.guid)}/task`, dto)
+    } catch (e) {
+        console.error('Failed to create task:', e)
+    } finally {
+        sending.value = false
+    }
+}
 </script>
 
 <template>
@@ -41,8 +84,12 @@ const usrIDs = selectedUserIds.value
             </div>
 
             <div class="flex space-x-4 pt-2 gap-4">
-                <Button>Start recording</Button>
-                <Button>Stop recording</Button>
+                <Button :disabled="sending" @click="startRecording">
+                    {{ sending ? 'Starting…' : 'Start recording' }}
+                </Button>
+                <Button :disabled="sending" @click="stopRecording">
+                    {{ sending ? 'Stopping…' : 'Stop recording' }}
+                </Button>
             </div>
             <div class="space-y-2 gap-4">
                 <NumberField id="duration" :default-value="120" :min="30">