90 lines
3.5 KiB
Vue
90 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
NumberField,
|
|
NumberFieldContent,
|
|
NumberFieldDecrement,
|
|
NumberFieldIncrement,
|
|
NumberFieldInput,
|
|
} from '@/components/ui/number-field'
|
|
import AssignDevice from "./AssignDevice.vue";
|
|
import { ref } from "vue";
|
|
import Separator from "@/components/ui/separator/Separator.vue";
|
|
import DataRangePicker from "./DataRangePicker.vue";
|
|
const selectedUserIds = ref<string[]>([])
|
|
const usrIDs = selectedUserIds.value
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="flex w-full max-w-4xl mx-auto">
|
|
<CardHeader class="pb-4">
|
|
<CardTitle>
|
|
Dashboard
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="flex-1 grid gap-4 py-4">
|
|
<div class="grid gap-5">
|
|
<div class="grid space-y-2 grid-cols-4 items-center">
|
|
<Label for="users">Allowed users</Label>
|
|
<AssignDevice v-model="usrIDs" class="col-span-3 w-full"></AssignDevice>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-4 pt-2 gap-4">
|
|
<Button>Start recording</Button>
|
|
<Button>Stop recording</Button>
|
|
</div>
|
|
<div class="space-y-2 gap-4">
|
|
<NumberField id="duration" :default-value="120" :min="30">
|
|
<Label for="duration"> Record duration in seconds</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement></NumberFieldDecrement>
|
|
<NumberFieldInput></NumberFieldInput>
|
|
<NumberFieldIncrement></NumberFieldIncrement>
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
|
|
<Separator class="my-6">Communication settings</Separator>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<NumberField id="polling" :default-value="60" :min="30">
|
|
<Label for="polling"> Timeout interwal in seconds </Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement></NumberFieldDecrement>
|
|
<NumberFieldInput></NumberFieldInput>
|
|
<NumberFieldIncrement></NumberFieldIncrement>
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
<div class="space-y-2">
|
|
|
|
<NumberField id="jitter" :default-value="10" :min="5">
|
|
<Label for="jitter"> Jitter in seconds </Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement></NumberFieldDecrement>
|
|
<NumberFieldInput></NumberFieldInput>
|
|
<NumberFieldIncrement></NumberFieldIncrement>
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
</div>
|
|
<Separator></Separator>
|
|
<div class="space-y-2 gap-4">
|
|
<Label for="sleepdate">Date/time to sleep</Label>
|
|
<DataRangePicker id="sleepdate"></DataRangePicker>
|
|
</div>
|
|
|
|
</CardContent>
|
|
</Card>
|
|
</template> |