From dead15033c4aa453f7f634a4e34b423299c9ffc6 Mon Sep 17 00:00:00 2001
From: "Gleb O. Ivaniczkij" <csasq@csasq.ru>
Date: Sun, 18 Aug 2024 10:14:51 +0300
Subject: [PATCH] =?UTF-8?q?JS-=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20React=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B8=D0=BC=D0=B5=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD=D1=8B=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0?=
 =?UTF-8?q?=D1=82=20JSX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{MainActivity.js => MainActivity.jsx}     |  0
 frontend/src/components/{Card.js => Card.jsx} |  0
 ...llScreenDialog.js => FullScreenDialog.jsx} |  4 +-
 .../{NavigationBar.js => NavigationBar.jsx}   |  0
 .../{PollListItem.js => PollListItem.jsx}     |  0
 frontend/src/components/Scaffold.css          |  1 +
 .../components/{Scaffold.js => Scaffold.jsx}  |  0
 .../components/{Snackbar.js => Snackbar.jsx}  |  0
 .../{TopAppBar.js => TopAppBar.jsx}           |  0
 frontend/src/{index.js => index.jsx}          |  0
 .../{ChatsScreen.js => ChatsScreen.jsx}       |  0
 ...DashboardScreen.js => DashboardScreen.jsx} |  0
 frontend/src/screens/PollsScreen.css          | 21 ++---
 .../{PollsScreen.js => PollsScreen.jsx}       | 83 +++++++++++++------
 .../{UsersScreen.js => UsersScreen.jsx}       |  0
 15 files changed, 73 insertions(+), 36 deletions(-)
 rename frontend/src/activities/{MainActivity.js => MainActivity.jsx} (100%)
 rename frontend/src/components/{Card.js => Card.jsx} (100%)
 rename frontend/src/components/{FullScreenDialog.js => FullScreenDialog.jsx} (87%)
 rename frontend/src/components/{NavigationBar.js => NavigationBar.jsx} (100%)
 rename frontend/src/components/{PollListItem.js => PollListItem.jsx} (100%)
 rename frontend/src/components/{Scaffold.js => Scaffold.jsx} (100%)
 rename frontend/src/components/{Snackbar.js => Snackbar.jsx} (100%)
 rename frontend/src/components/{TopAppBar.js => TopAppBar.jsx} (100%)
 rename frontend/src/{index.js => index.jsx} (100%)
 rename frontend/src/screens/{ChatsScreen.js => ChatsScreen.jsx} (100%)
 rename frontend/src/screens/{DashboardScreen.js => DashboardScreen.jsx} (100%)
 rename frontend/src/screens/{PollsScreen.js => PollsScreen.jsx} (64%)
 rename frontend/src/screens/{UsersScreen.js => UsersScreen.jsx} (100%)

diff --git a/frontend/src/activities/MainActivity.js b/frontend/src/activities/MainActivity.jsx
similarity index 100%
rename from frontend/src/activities/MainActivity.js
rename to frontend/src/activities/MainActivity.jsx
diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.jsx
similarity index 100%
rename from frontend/src/components/Card.js
rename to frontend/src/components/Card.jsx
diff --git a/frontend/src/components/FullScreenDialog.js b/frontend/src/components/FullScreenDialog.jsx
similarity index 87%
rename from frontend/src/components/FullScreenDialog.js
rename to frontend/src/components/FullScreenDialog.jsx
index 6fd421f..ee4d5e1 100644
--- a/frontend/src/components/FullScreenDialog.js
+++ b/frontend/src/components/FullScreenDialog.jsx
@@ -8,12 +8,12 @@ import './FullScreenDialog.css'
 import React from "react";
 
 const floatingActionButton = (
-    <md-fab>
+    <md-fab label="Добавить сообщение">
         <md-icon slot="icon">add</md-icon>
     </md-fab>
 )
 
-export default function ({
+export default function FullScreenDialog({
     setEditPoll,
     classList,
     children,
diff --git a/frontend/src/components/NavigationBar.js b/frontend/src/components/NavigationBar.jsx
similarity index 100%
rename from frontend/src/components/NavigationBar.js
rename to frontend/src/components/NavigationBar.jsx
diff --git a/frontend/src/components/PollListItem.js b/frontend/src/components/PollListItem.jsx
similarity index 100%
rename from frontend/src/components/PollListItem.js
rename to frontend/src/components/PollListItem.jsx
diff --git a/frontend/src/components/Scaffold.css b/frontend/src/components/Scaffold.css
index 7d8e321..fe11b91 100644
--- a/frontend/src/components/Scaffold.css
+++ b/frontend/src/components/Scaffold.css
@@ -13,6 +13,7 @@
 .scaffold > .content {
     flex-grow: 1;
     flex-shrink: 1;
+    padding-bottom: 8rem !important;
     overflow-y: auto;
 }
 
diff --git a/frontend/src/components/Scaffold.js b/frontend/src/components/Scaffold.jsx
similarity index 100%
rename from frontend/src/components/Scaffold.js
rename to frontend/src/components/Scaffold.jsx
diff --git a/frontend/src/components/Snackbar.js b/frontend/src/components/Snackbar.jsx
similarity index 100%
rename from frontend/src/components/Snackbar.js
rename to frontend/src/components/Snackbar.jsx
diff --git a/frontend/src/components/TopAppBar.js b/frontend/src/components/TopAppBar.jsx
similarity index 100%
rename from frontend/src/components/TopAppBar.js
rename to frontend/src/components/TopAppBar.jsx
diff --git a/frontend/src/index.js b/frontend/src/index.jsx
similarity index 100%
rename from frontend/src/index.js
rename to frontend/src/index.jsx
diff --git a/frontend/src/screens/ChatsScreen.js b/frontend/src/screens/ChatsScreen.jsx
similarity index 100%
rename from frontend/src/screens/ChatsScreen.js
rename to frontend/src/screens/ChatsScreen.jsx
diff --git a/frontend/src/screens/DashboardScreen.js b/frontend/src/screens/DashboardScreen.jsx
similarity index 100%
rename from frontend/src/screens/DashboardScreen.js
rename to frontend/src/screens/DashboardScreen.jsx
diff --git a/frontend/src/screens/PollsScreen.css b/frontend/src/screens/PollsScreen.css
index 1ae8537..a2b4f33 100644
--- a/frontend/src/screens/PollsScreen.css
+++ b/frontend/src/screens/PollsScreen.css
@@ -1,39 +1,40 @@
-label,
-.messages-title,
-.title {
+.poll-edit .content label,
+.poll-edit .content .messages-title,
+.poll-edit .content .title {
     color: var(--md-sys-color-on-surface);
 }
 
-label {
+.poll-edit .content label {
     display: flex;
     align-items: center;
+    margin: 0;
 }
 
-.messages-title {
+.poll-edit .content .messages-title {
     margin: 1rem 0;
 }
 
-.title:not(:first-child) {
+.poll-edit .content .title:not(:first-child) {
     margin-top: 1rem;
 }
 
-.poll-options {
+.poll-edit .content .poll-options {
     display: flex;
     flex-direction: column;
 }
 
-.poll-options > .poll-option {
+.poll-edit .content .poll-options > .poll-option {
     flex-shrink: 0;
     display: flex;
     align-items: center;
 }
 
-.poll-options > .poll-option > .option-text {
+.poll-edit .content .poll-options > .poll-option > .option-text {
     flex-grow: 1;
     flex-shrink: 1;
 }
 
-.poll-options > .poll-option > .option-action {
+.poll-edit .content .poll-options > .poll-option > .option-action {
     flex-shrink: 0;
     margin-left: 1rem;
 }
diff --git a/frontend/src/screens/PollsScreen.js b/frontend/src/screens/PollsScreen.jsx
similarity index 64%
rename from frontend/src/screens/PollsScreen.js
rename to frontend/src/screens/PollsScreen.jsx
index ca2379c..d9bed5b 100644
--- a/frontend/src/screens/PollsScreen.js
+++ b/frontend/src/screens/PollsScreen.jsx
@@ -4,7 +4,7 @@ import '@material/web/fab/fab'
 import '@material/web/icon/icon'
 import '@material/web/select/outlined-select'
 import '@material/web/select/select-option'
-import '@material/web/iconbutton/filled-icon-button'
+import '@material/web/iconbutton/icon-button'
 import '@material/web/checkbox/checkbox'
 
 import PollListItem from '../components/PollListItem'
@@ -18,7 +18,7 @@ const PollContext = React.createContext({
     fetchPolls: () => {},
 })
 
-const apiUrl = new URL(location)
+const apiUrl = new URL(window.location)
 apiUrl.pathname = '/api/polls'
 
 export default function PollsScreen() {
@@ -58,12 +58,13 @@ export default function PollsScreen() {
             </md-list>
 
             <FullScreenDialog
-                setEditPoll={setEditPoll}
-                classList={editPoll ? 'open' : 'close'}>
+                classList={`poll-edit ${editPoll ? 'open' : 'close'}`}
+                setEditPoll={setEditPoll}>
 
                 <md-outlined-text-field
                         label="Название"
                         value={editPoll ? editPoll.name : ''}
+                        supporting-text="Отображается в списке опросов"
                         required="required">
                     <md-icon slot="leading-icon">title</md-icon>
                 </md-outlined-text-field>
@@ -108,7 +109,43 @@ export default function PollsScreen() {
 
                     <Card>
 
-                        <div className="title md-typescale-title-small">Сообщение 1</div>
+                        <div className="title md-typescale-title-small">Общее</div>
+
+                        <md-outlined-text-field
+                            label="Название"
+                            value=""
+                            supporting-text="Позволяет идентифицировать сообщение"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <md-outlined-text-field
+                            label="Время начала"
+                            value=""
+                            supporting-text="Время отправки сообщения"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <md-outlined-text-field
+                            label="Время окончания"
+                            value=""
+                            supporting-text="Время прекращения обработки событий"
+                            required="required">
+                            <md-icon slot="leading-icon">title</md-icon>
+                        </md-outlined-text-field>
+
+                        <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>
 
                         <md-outlined-select label="Тип" value="poll" required="required">
 
@@ -140,6 +177,8 @@ export default function PollsScreen() {
 
                         </md-outlined-select>
 
+                        <div className="title md-typescale-title-small">Опрос</div>
+
                         <md-outlined-text-field
                             label="Вопрос"
                             value=""
@@ -147,7 +186,7 @@ export default function PollsScreen() {
                             <md-icon slot="leading-icon">contact_support</md-icon>
                         </md-outlined-text-field>
 
-                        <div className="title md-typescale-title-small">Варианты ответа</div>
+                        <div className="title md-typescale-label-medium">Варианты ответа</div>
 
                         <div className="poll-options">
 
@@ -156,31 +195,27 @@ export default function PollsScreen() {
                                     class="option-text"
                                     label="Добавить ответ"
                                     value=""
-                                    required="required" />
-                                <md-filled-icon-button class="option-action">
-                                    <md-icon>arrow_forward</md-icon>
-                                </md-filled-icon-button>
+                                    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>
 
-                        <label className="md-typescale-body-large">
-                            <md-checkbox touch-target="wrapper"></md-checkbox>
-                            Анонимное голосование
-                        </label>
+                        <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>
-
-                        <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>
 
diff --git a/frontend/src/screens/UsersScreen.js b/frontend/src/screens/UsersScreen.jsx
similarity index 100%
rename from frontend/src/screens/UsersScreen.js
rename to frontend/src/screens/UsersScreen.jsx