From 8bc44bd59d92bfc87e1f2a19fc9f11289ffd6bc4 Mon Sep 17 00:00:00 2001
From: csasq <csasq@csasq.ru>
Date: Mon, 19 Aug 2024 18:14:00 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BD=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5?=
 =?UTF-8?q?=D0=B9=D1=81=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B0=20=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/screens/PollsScreen.css |  11 ++
 frontend/src/screens/PollsScreen.jsx | 197 +++++++++++++++++++--------
 2 files changed, 149 insertions(+), 59 deletions(-)

diff --git a/frontend/src/screens/PollsScreen.css b/frontend/src/screens/PollsScreen.css
index a2b4f33..73bd997 100644
--- a/frontend/src/screens/PollsScreen.css
+++ b/frontend/src/screens/PollsScreen.css
@@ -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;
+}
diff --git a/frontend/src/screens/PollsScreen.jsx b/frontend/src/screens/PollsScreen.jsx
index d9bed5b..d4c3dfe 100644
--- a/frontend/src/screens/PollsScreen.jsx
+++ b/frontend/src/screens/PollsScreen.jsx
@@ -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>