77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import {Input, Select, Stack, Checkbox, Box, Text, Divider } from '@chakra-ui/react'
|
|||
|
|
import DatePicker from "react-datepicker";
|
|||
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|||
|
|
import TimePicker from 'react-time-picker';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const statusValues: any = ['draft', 'template', 'stop', 'start']
|
|||
|
|
|
|||
|
|
export default () => {
|
|||
|
|
const [startDate, setStartDate] = React.useState<any>(null);
|
|||
|
|
const [value, onChange] = React.useState<string>("");
|
|||
|
|
return(
|
|||
|
|
<Box
|
|||
|
|
padding="20px"
|
|||
|
|
>
|
|||
|
|
<Stack
|
|||
|
|
backgroundColor="lightgray"
|
|||
|
|
padding="20px"
|
|||
|
|
>
|
|||
|
|
<Text>Название опроса (максимум 280 символов)</Text>
|
|||
|
|
<Input placeholder='name' />
|
|||
|
|
<Text>Описание опроса</Text>
|
|||
|
|
<Input placeholder='description' />
|
|||
|
|
<Input type="hidden" placeholder='config' />
|
|||
|
|
<Text>Статус опроса</Text>
|
|||
|
|
<Select defaultValue="draft">
|
|||
|
|
{
|
|||
|
|
statusValues.map((e:string,i:number)=> {
|
|||
|
|
return <option key={i} value={e}>{e}</option>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Select>
|
|||
|
|
</Stack>
|
|||
|
|
<Stack padding="20px">
|
|||
|
|
<Text>Сохранить устройство</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Divider/>
|
|||
|
|
<Text>Разрешить пользователям перепроходить опрос</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Divider/>
|
|||
|
|
<Text>Сохранять статистику неполных прохождений</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Divider/>
|
|||
|
|
<Text>Уведомлять по почте при каждом прохождении опроса</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Divider/>
|
|||
|
|
<Text>Сохранять статистику только для уникального прохождения опроса</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Divider/>
|
|||
|
|
</Stack>
|
|||
|
|
<Stack
|
|||
|
|
backgroundColor="lightgray"
|
|||
|
|
padding="20px"
|
|||
|
|
>
|
|||
|
|
<Text>Выбрать время до которого проводится опрос</Text>
|
|||
|
|
<TimePicker
|
|||
|
|
format="HH : mm ss"
|
|||
|
|
disableClock={true}
|
|||
|
|
amPmAriaLabel={"am"}
|
|||
|
|
onChange={(e:any) => onChange(e)}
|
|||
|
|
value={value}
|
|||
|
|
/>
|
|||
|
|
<Text>Разрешить ставить на паузу</Text>
|
|||
|
|
<Checkbox/>
|
|||
|
|
<Text>Дата проведения опроса</Text>
|
|||
|
|
<DatePicker
|
|||
|
|
selected={startDate}
|
|||
|
|
onChange={(date) => setStartDate(date)}
|
|||
|
|
timeInputLabel="Time:"
|
|||
|
|
dateFormat="MM/dd/yyyy h:mm aa"
|
|||
|
|
showTimeInput
|
|||
|
|
/>
|
|||
|
|
</Stack>
|
|||
|
|
</Box>
|
|||
|
|
)
|
|||
|
|
}
|