Проработан интерфейс редактора опроса
Этот коммит содержится в:
родитель
dead15033c
Коммит
8bc44bd59d
@ -38,3 +38,14 @@
|
||||
flex-shrink: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.poll-edit .content .message-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.poll-edit .content .message-settings > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -21,9 +21,126 @@ const PollContext = React.createContext({
|
||||
const apiUrl = new URL(window.location)
|
||||
apiUrl.pathname = '/api/polls'
|
||||
|
||||
const MessageType = {
|
||||
TEXT: 'text',
|
||||
POLL: 'poll',
|
||||
MEDIA: 'media',
|
||||
CONTACT: 'contact',
|
||||
DICE: 'dice',
|
||||
}
|
||||
|
||||
const getMessageTypeIcon = (messageType) => {
|
||||
switch (messageType) {
|
||||
case MessageType.TEXT: return 'title'
|
||||
case MessageType.POLL: return 'ballot'
|
||||
case MessageType.MEDIA: return 'attach_file'
|
||||
case MessageType.CONTACT: return 'contacts'
|
||||
case MessageType.DICE: return 'casino'
|
||||
default: return 'chat'
|
||||
}
|
||||
}
|
||||
|
||||
function renderMessage (messageType) {
|
||||
switch (messageType) {
|
||||
case MessageType.TEXT:
|
||||
return (
|
||||
<div className="message-settings">
|
||||
<div className="title md-typescale-title-small">Текст</div>
|
||||
|
||||
<md-outlined-text-field
|
||||
type="textarea"
|
||||
label="Текст"
|
||||
value=""
|
||||
rows="6"
|
||||
required="required" />
|
||||
</div>
|
||||
)
|
||||
|
||||
case MessageType.POLL:
|
||||
return (
|
||||
<div className="message-settings">
|
||||
<div className="title md-typescale-title-small">Опрос</div>
|
||||
|
||||
<md-outlined-text-field
|
||||
label="Вопрос"
|
||||
value=""
|
||||
required="required">
|
||||
<md-icon slot="leading-icon">contact_support</md-icon>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<div className="title md-typescale-label-medium">Варианты ответа</div>
|
||||
|
||||
<div className="poll-options">
|
||||
|
||||
<div className="poll-option">
|
||||
<md-outlined-text-field
|
||||
class="option-text"
|
||||
label="Добавить ответ"
|
||||
value=""
|
||||
required="required"/>
|
||||
<md-icon-button class="option-action">
|
||||
<md-icon>adjust</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="title md-typescale-title-small">Настройки</div>
|
||||
|
||||
<div>
|
||||
<label className="md-typescale-body-large">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Анонимное голосование
|
||||
</label>
|
||||
|
||||
<label className="md-typescale-body-large">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Выбор нескольких ответов
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case MessageType.MEDIA:
|
||||
return (
|
||||
<div className="message-settings">
|
||||
<div className="title md-typescale-title-small">Медиа</div>
|
||||
|
||||
<div className="messege-files"></div>
|
||||
|
||||
<md-filled-button>
|
||||
Прикрепить файл
|
||||
<md-icon slot="icon">attach_file</md-icon>
|
||||
</md-filled-button>
|
||||
</div>
|
||||
)
|
||||
|
||||
case MessageType.CONTACT:
|
||||
return (
|
||||
<div className="message-settings">
|
||||
<div className="title md-typescale-title-small">Контакт</div>
|
||||
|
||||
<md-outlined-text-field
|
||||
label="Номер телефона"
|
||||
value=""
|
||||
required="required"/>
|
||||
|
||||
<md-outlined-text-field
|
||||
label="Имя"
|
||||
value=""
|
||||
required="required"/>
|
||||
</div>
|
||||
)
|
||||
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export default function PollsScreen() {
|
||||
const [polls, setPolls] = useState([])
|
||||
const [editPoll, setEditPoll] = useState(false)
|
||||
const [messageType, setMessageType] = useState(null)
|
||||
|
||||
const fetchPolls = async () => {
|
||||
const response = await fetch('/api/polls')
|
||||
@ -62,10 +179,10 @@ export default function PollsScreen() {
|
||||
setEditPoll={setEditPoll}>
|
||||
|
||||
<md-outlined-text-field
|
||||
label="Название"
|
||||
value={editPoll ? editPoll.name : ''}
|
||||
supporting-text="Отображается в списке опросов"
|
||||
required="required">
|
||||
label="Название"
|
||||
value={editPoll ? editPoll.name : ''}
|
||||
supporting-text="Отображается в списке опросов"
|
||||
required="required">
|
||||
<md-icon slot="leading-icon">title</md-icon>
|
||||
</md-outlined-text-field>
|
||||
|
||||
@ -124,7 +241,7 @@ export default function PollsScreen() {
|
||||
value=""
|
||||
supporting-text="Время отправки сообщения"
|
||||
required="required">
|
||||
<md-icon slot="leading-icon">title</md-icon>
|
||||
<md-icon slot="leading-icon">line_start_circle</md-icon>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<md-outlined-text-field
|
||||
@ -132,7 +249,7 @@ export default function PollsScreen() {
|
||||
value=""
|
||||
supporting-text="Время прекращения обработки событий"
|
||||
required="required">
|
||||
<md-icon slot="leading-icon">title</md-icon>
|
||||
<md-icon slot="leading-icon">line_end_circle</md-icon>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<div>
|
||||
@ -147,75 +264,37 @@ export default function PollsScreen() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<md-outlined-select label="Тип" value="poll" required="required">
|
||||
<md-outlined-select
|
||||
label="Тип"
|
||||
value={messageType}
|
||||
onInput={(event) => setMessageType(event.target.value)}
|
||||
required="required">
|
||||
|
||||
<md-icon slot="leading-icon">attach_file</md-icon>
|
||||
<md-icon slot="leading-icon">{getMessageTypeIcon(messageType)}</md-icon>
|
||||
|
||||
<md-select-option value="text">
|
||||
<md-select-option value={MessageType.TEXT}>
|
||||
<div slot="headline">Текст</div>
|
||||
</md-select-option>
|
||||
|
||||
<md-select-option value="poll">
|
||||
<md-select-option value={MessageType.POLL}>
|
||||
<div slot="headline">Опрос</div>
|
||||
</md-select-option>
|
||||
|
||||
<md-select-option value="image">
|
||||
<div slot="headline">Изображение</div>
|
||||
<md-select-option value={MessageType.MEDIA}>
|
||||
<div slot="headline">Медиа</div>
|
||||
</md-select-option>
|
||||
|
||||
<md-select-option value="video">
|
||||
<div slot="headline">Видео</div>
|
||||
<md-select-option value={MessageType.CONTACT}>
|
||||
<div slot="headline">Контакт</div>
|
||||
</md-select-option>
|
||||
|
||||
<md-select-option value="audio">
|
||||
<div slot="headline">Аудио</div>
|
||||
</md-select-option>
|
||||
|
||||
<md-select-option value="file">
|
||||
<div slot="headline">Файл</div>
|
||||
<md-select-option value={MessageType.DICE}>
|
||||
<div slot="headline">Игральная кость</div>
|
||||
</md-select-option>
|
||||
|
||||
</md-outlined-select>
|
||||
|
||||
<div className="title md-typescale-title-small">Опрос</div>
|
||||
|
||||
<md-outlined-text-field
|
||||
label="Вопрос"
|
||||
value=""
|
||||
required="required">
|
||||
<md-icon slot="leading-icon">contact_support</md-icon>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<div className="title md-typescale-label-medium">Варианты ответа</div>
|
||||
|
||||
<div className="poll-options">
|
||||
|
||||
<div className="poll-option">
|
||||
<md-outlined-text-field
|
||||
class="option-text"
|
||||
label="Добавить ответ"
|
||||
value=""
|
||||
required="required"/>
|
||||
<md-icon-button class="option-action">
|
||||
<md-icon>adjust</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="title md-typescale-title-small">Настройки</div>
|
||||
|
||||
<div>
|
||||
<label className="md-typescale-body-large">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Анонимное голосование
|
||||
</label>
|
||||
|
||||
<label className="md-typescale-body-large">
|
||||
<md-checkbox touch-target="wrapper"></md-checkbox>
|
||||
Выбор нескольких ответов
|
||||
</label>
|
||||
</div>
|
||||
{renderMessage(messageType)}
|
||||
|
||||
</Card>
|
||||
|
||||
|
||||
Загрузка…
Ссылка в новой задаче
Block a user