From ae51520966e353b861f0a35c4198213abf4c911e Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Tue, 15 Apr 2025 23:13:18 +0500
Subject: [PATCH 1/3] open page settings

---
 .../MainComponent/MainComponent.tsx           |  4 +++-
 .../NavigationItem/NavigationItem.tsx         |  2 +-
 .../SettingSurvey/SettingSurvey.module.css    |  6 ++++++
 .../SettingSurvey/SettingSurvey.tsx           | 14 +++++++++++++
 .../src/components/TimeEvent/TimeEvent.tsx    | 20 +++++++++++++++++++
 SurveyFrontend/src/pages/Results.tsx          | 11 ++++++++++
 SurveyFrontend/src/pages/Settings.tsx         | 15 ++++++++++++++
 7 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
 create mode 100644 SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
 create mode 100644 SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx

diff --git a/SurveyFrontend/src/components/MainComponent/MainComponent.tsx b/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
index 9ee2f41..c5d5cc9 100644
--- a/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
+++ b/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
@@ -2,6 +2,7 @@ import Navigation from "../Navigation/Navigation.tsx";
 import React, {useState} from "react";
 import styles from './MainComponent.module.css'
 import Survey from "../Survey/Survey.tsx";
+import SettingSurvey from "../SettingSurvey/SettingSurvey.tsx";
 
 const MainComponent: React.FC = () => {
     const [activePage, setActivePage] = useState('Вопросы');
@@ -16,7 +17,8 @@ const MainComponent: React.FC = () => {
                 activePage={activePage}
                 onNavigationClick={handleNavigationClick}
             />
-            <Survey />
+            { activePage === 'Вопросы' && <Survey />}
+            {activePage === 'Настройки' && <SettingSurvey />}
         </main>
     )
 }
diff --git a/SurveyFrontend/src/components/NavigationItem/NavigationItem.tsx b/SurveyFrontend/src/components/NavigationItem/NavigationItem.tsx
index 743b9ee..1ef2735 100644
--- a/SurveyFrontend/src/components/NavigationItem/NavigationItem.tsx
+++ b/SurveyFrontend/src/components/NavigationItem/NavigationItem.tsx
@@ -4,7 +4,7 @@ import styles from './NavigationItem.module.css'
 interface NavigationItemProps{
     title: string;
     onClick(): void;
-    isActive: boolean; //Дописать для активной ссылки, для класса
+    isActive: boolean;
 }
 
 const NavigationItem: React.FC<NavigationItemProps> = ({title, onClick, isActive}) => {
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
new file mode 100644
index 0000000..1ba1e33
--- /dev/null
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
@@ -0,0 +1,6 @@
+/*SettingSurvey.module.css*/
+
+.settingSurvey{
+    width: 65%;
+    margin-left: 8.9%;
+}
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
new file mode 100644
index 0000000..f391dfb
--- /dev/null
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
+import styles from "./SettingSurvey.module.css";
+
+
+const SettingSurvey: React.FC = () => {
+    return (
+        <div className={styles.settingSurvey}>
+            <SurveyInfo />
+        </div>
+    )
+}
+
+export default SettingSurvey;
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
new file mode 100644
index 0000000..9eed782
--- /dev/null
+++ b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+interface TimeEventProps {
+    title: string;
+
+}
+
+const TimeEvent: React.FC<TimeEventProps> = ({title}) => {
+    return (
+        <div>
+            <h2>{title}</h2>
+            <div>
+
+            </div>
+        </div>
+    );
+};
+
+export default TimeEvent;
\ No newline at end of file
diff --git a/SurveyFrontend/src/pages/Results.tsx b/SurveyFrontend/src/pages/Results.tsx
index e69de29..429ae09 100644
--- a/SurveyFrontend/src/pages/Results.tsx
+++ b/SurveyFrontend/src/pages/Results.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Header from "../components/Header/Header.tsx";
+
+
+const Results: React.FC = () => {
+    return (
+        <Header />
+    )
+}
+
+export default Results;
\ No newline at end of file
diff --git a/SurveyFrontend/src/pages/Settings.tsx b/SurveyFrontend/src/pages/Settings.tsx
index e69de29..5666a55 100644
--- a/SurveyFrontend/src/pages/Settings.tsx
+++ b/SurveyFrontend/src/pages/Settings.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from "../components/Header/Header.tsx";
+import MainComponent from "../components/MainComponent/MainComponent.tsx";
+
+
+const Settings: React.FC = () => {
+    return (
+        <>
+            <Header />
+            <MainComponent />
+        </>
+    );
+};
+
+export default Settings;
\ No newline at end of file

From e9bfc9e554dfe4c9404a667c4cd1b4243ff73a3c Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Wed, 16 Apr 2025 00:03:09 +0500
Subject: [PATCH 2/3] page settings

---
 SurveyFrontend/package-lock.json              |  7 ++++
 SurveyFrontend/package.json                   |  1 +
 .../SettingSurvey/SettingSurvey.module.css    | 19 ++++++++++
 .../SettingSurvey/SettingSurvey.tsx           |  8 ++++
 .../components/TimeEvent/TimeEvent.module.css | 37 +++++++++++++++++++
 .../src/components/TimeEvent/TimeEvent.tsx    | 21 +++++++++--
 6 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css

diff --git a/SurveyFrontend/package-lock.json b/SurveyFrontend/package-lock.json
index 2129a70..38b21e5 100644
--- a/SurveyFrontend/package-lock.json
+++ b/SurveyFrontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "survey-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@formkit/tempo": "^0.1.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "uuid": "^11.1.0"
@@ -842,6 +843,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@formkit/tempo": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@formkit/tempo/-/tempo-0.1.2.tgz",
+      "integrity": "sha512-jNPPbjL8oj7hK3eHX++CwbR6X4GKQt+x00/q4yeXkwynXHGKL27dylYhpEgwrmediPP4y7s0XtN1if/M/JYujg==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/SurveyFrontend/package.json b/SurveyFrontend/package.json
index 8865293..150e7f9 100644
--- a/SurveyFrontend/package.json
+++ b/SurveyFrontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formkit/tempo": "^0.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "uuid": "^11.1.0"
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
index 1ba1e33..40b5a44 100644
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
@@ -3,4 +3,23 @@
 .settingSurvey{
     width: 65%;
     margin-left: 8.9%;
+}
+
+.startEndTime{
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+}
+
+.param{
+    background-color: #FFFFFF;
+    padding-top: 15px;
+    padding-bottom: 97px;
+    padding-left: 19px;
+}
+
+.param h2{
+    font-size: 24px;
+    font-weight: 600;
+    border-radius: 4px;
 }
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
index f391dfb..e83f446 100644
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
 import styles from "./SettingSurvey.module.css";
+import TimeEvent from "../TimeEvent/TimeEvent.tsx";
 
 
 const SettingSurvey: React.FC = () => {
     return (
         <div className={styles.settingSurvey}>
             <SurveyInfo />
+            <div className={styles.startEndTime}>
+                <TimeEvent title='Время начала'/>
+                <TimeEvent title='Время окончания'/>
+            </div>
+            <div className={styles.param}>
+                <h2>Параметры видимости</h2>
+            </div>
         </div>
     )
 }
diff --git a/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css b/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
new file mode 100644
index 0000000..107d917
--- /dev/null
+++ b/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
@@ -0,0 +1,37 @@
+/*TimeEvent.module.css*/
+
+
+.timeEvent{
+    width: 49%;
+    padding: 17px 25px 48px 20px;
+    background-color: #FFFFFF;
+    border-radius: 6px;
+    margin-bottom: 34px;
+}
+
+.title{
+    font-weight: 600;
+    font-size: 24px;
+    margin-bottom: 23px;
+}
+
+.datetime{
+    display: flex;
+    justify-content: space-between;
+}
+
+.inputDate{
+    border: 3px solid #007AFF26;
+    padding: 12px 107px 12px 21px;
+    font-size: 20px; /*??????????????????????? в макете указано bodyLarge/Size*/
+    font-weight: 400;
+    border-radius: 3px;
+}
+
+.inputTime{
+    border: 3px solid #007AFF26;
+    padding: 12px 42px;
+    font-size: 20px; /*??????????????????????? в макете указано bodyLarge/Size*/
+    font-weight: 400;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
index 9eed782..9c07a6a 100644
--- a/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
+++ b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { format } from "@formkit/tempo";
+import styles from "./TimeEvent.module.css";
 
 
 interface TimeEventProps {
@@ -7,11 +9,22 @@ interface TimeEventProps {
 }
 
 const TimeEvent: React.FC<TimeEventProps> = ({title}) => {
-    return (
-        <div>
-            <h2>{title}</h2>
-            <div>
+    const date = new Date();
 
+    return (
+        <div className={styles.timeEvent}>
+            <h2 className={styles.title}>{title}</h2>
+            <div className={styles.datetime}>
+                <input
+                    className={styles.inputDate}
+                    type='date'
+                    placeholder={format(date, "MM/DD/YYYY")}
+                />
+                <input
+                    className={styles.inputTime}
+                    type='time'
+                    placeholder={format(date, "HH:mm")}
+                />
             </div>
         </div>
     );

From 457d895042c62c4e3673a016066465cff3492729 Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Tue, 22 Apr 2025 18:13:41 +0500
Subject: [PATCH 3/3] refactor settings

---
 .../MainComponent/MainComponent.tsx           |  5 ++-
 .../components/TimeEvent/TimeEvent.module.css |  2 +-
 .../src/components/TimeEvent/TimeEvent.tsx    | 32 +++++++++++++------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/SurveyFrontend/src/components/MainComponent/MainComponent.tsx b/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
index c5d5cc9..695dbf5 100644
--- a/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
+++ b/SurveyFrontend/src/components/MainComponent/MainComponent.tsx
@@ -5,10 +5,13 @@ import Survey from "../Survey/Survey.tsx";
 import SettingSurvey from "../SettingSurvey/SettingSurvey.tsx";
 
 const MainComponent: React.FC = () => {
-    const [activePage, setActivePage] = useState('Вопросы');
+    const [activePage, setActivePage] = useState(
+        localStorage.getItem("activePage") || "Вопросы"
+    );
 
     const handleNavigationClick = (title: string) => {
         setActivePage(title);
+        localStorage.setItem('activePage', title);
     }
 
     return (
diff --git a/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css b/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
index 107d917..4417f66 100644
--- a/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
+++ b/SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
@@ -34,4 +34,4 @@
     font-size: 20px; /*??????????????????????? в макете указано bodyLarge/Size*/
     font-weight: 400;
     border-radius: 3px;
-}
\ No newline at end of file
+}
diff --git a/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
index 9c07a6a..4b8c810 100644
--- a/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
+++ b/SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx
@@ -1,29 +1,41 @@
-import React from 'react';
-import { format } from "@formkit/tempo";
+import React, { useState } from 'react';
 import styles from "./TimeEvent.module.css";
 
-
 interface TimeEventProps {
     title: string;
-
 }
 
-const TimeEvent: React.FC<TimeEventProps> = ({title}) => {
-    const date = new Date();
+const TimeEvent: React.FC<TimeEventProps> = ({ title }) => {
+    const [date, setDate] = useState<string>(() => {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const day = String(now.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    });
+
+    const [time, setTime] = useState<string>(() => {
+        const now = new Date();
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        return `${hours}:${minutes}`;
+    });
 
     return (
         <div className={styles.timeEvent}>
             <h2 className={styles.title}>{title}</h2>
             <div className={styles.datetime}>
                 <input
+                    type="date"
                     className={styles.inputDate}
-                    type='date'
-                    placeholder={format(date, "MM/DD/YYYY")}
+                    value={date}
+                    onChange={(e) => setDate(e.target.value)}
                 />
                 <input
+                    type="time"
                     className={styles.inputTime}
-                    type='time'
-                    placeholder={format(date, "HH:mm")}
+                    value={time}
+                    onChange={(e) => setTime(e.target.value)}
                 />
             </div>
         </div>