some small chenges in device ui

This commit is contained in:
tdv
2025-09-04 12:10:04 +03:00
parent 247a2ed6b2
commit c38dd658f5
2 changed files with 225 additions and 139 deletions

View File

@@ -26,45 +26,65 @@ const usrIDs = selectedUserIds.value
</script>
<template>
<Card>
<CardHeader>
<Card class="flex w-full max-w-4xl mx-auto">
<CardHeader class="pb-4">
<CardTitle>
Dashboard
</CardTitle>
</CardHeader>
<CardContent>
<Label for="users">Allowed users</Label>
<AssignDevice v-model="usrIDs"></AssignDevice>
<Button>Start recording</Button>
<Button>Stop recording</Button>
<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>
<Separator>Communication settings</Separator>
<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>
<NumberField id="jitter" :default-value="10" :min="5">
<Label for="jitter"> Jitter in seconds </Label>
<NumberFieldContent>
<NumberFieldDecrement></NumberFieldDecrement>
<NumberFieldInput></NumberFieldInput>
<NumberFieldIncrement></NumberFieldIncrement>
</NumberFieldContent>
</NumberField>
<CardContent class="flex-1 space-y-6">
<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>
<Label for="sleepdate">Date/time to sleep</Label>
<DataRangePicker id="sleepdate"></DataRangePicker>
<div class="space-y-2 gap-4">
<Label for="sleepdate">Date/time to sleep</Label>
<DataRangePicker id="sleepdate"></DataRangePicker>
</div>
</CardContent>
</Card>
</template>