Проработан интерфейс редактора опроса
Этот коммит содержится в:
родитель
dead15033c
Коммит
8bc44bd59d
@ -38,3 +38,14 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 1rem;
|
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)
|
const apiUrl = new URL(window.location)
|
||||||
apiUrl.pathname = '/api/polls'
|
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() {
|
export default function PollsScreen() {
|
||||||
const [polls, setPolls] = useState([])
|
const [polls, setPolls] = useState([])
|
||||||
const [editPoll, setEditPoll] = useState(false)
|
const [editPoll, setEditPoll] = useState(false)
|
||||||
|
const [messageType, setMessageType] = useState(null)
|
||||||
|
|
||||||
const fetchPolls = async () => {
|
const fetchPolls = async () => {
|
||||||
const response = await fetch('/api/polls')
|
const response = await fetch('/api/polls')
|
||||||
@ -124,7 +241,7 @@ export default function PollsScreen() {
|
|||||||
value=""
|
value=""
|
||||||
supporting-text="Время отправки сообщения"
|
supporting-text="Время отправки сообщения"
|
||||||
required="required">
|
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>
|
||||||
|
|
||||||
<md-outlined-text-field
|
<md-outlined-text-field
|
||||||
@ -132,7 +249,7 @@ export default function PollsScreen() {
|
|||||||
value=""
|
value=""
|
||||||
supporting-text="Время прекращения обработки событий"
|
supporting-text="Время прекращения обработки событий"
|
||||||
required="required">
|
required="required">
|
||||||
<md-icon slot="leading-icon">title</md-icon>
|
<md-icon slot="leading-icon">line_end_circle</md-icon>
|
||||||
</md-outlined-text-field>
|
</md-outlined-text-field>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -147,75 +264,37 @@ export default function PollsScreen() {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</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>
|
<div slot="headline">Текст</div>
|
||||||
</md-select-option>
|
</md-select-option>
|
||||||
|
|
||||||
<md-select-option value="poll">
|
<md-select-option value={MessageType.POLL}>
|
||||||
<div slot="headline">Опрос</div>
|
<div slot="headline">Опрос</div>
|
||||||
</md-select-option>
|
</md-select-option>
|
||||||
|
|
||||||
<md-select-option value="image">
|
<md-select-option value={MessageType.MEDIA}>
|
||||||
<div slot="headline">Изображение</div>
|
<div slot="headline">Медиа</div>
|
||||||
</md-select-option>
|
</md-select-option>
|
||||||
|
|
||||||
<md-select-option value="video">
|
<md-select-option value={MessageType.CONTACT}>
|
||||||
<div slot="headline">Видео</div>
|
<div slot="headline">Контакт</div>
|
||||||
</md-select-option>
|
</md-select-option>
|
||||||
|
|
||||||
<md-select-option value="audio">
|
<md-select-option value={MessageType.DICE}>
|
||||||
<div slot="headline">Аудио</div>
|
<div slot="headline">Игральная кость</div>
|
||||||
</md-select-option>
|
|
||||||
|
|
||||||
<md-select-option value="file">
|
|
||||||
<div slot="headline">Файл</div>
|
|
||||||
</md-select-option>
|
</md-select-option>
|
||||||
|
|
||||||
</md-outlined-select>
|
</md-outlined-select>
|
||||||
|
|
||||||
<div className="title md-typescale-title-small">Опрос</div>
|
{renderMessage(messageType)}
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|||||||
Загрузка…
Ссылка в новой задаче
Block a user