Merge branch 'pageSettings' into 'unstable'

Page settings

See merge request internship-2025/survey-webapp/survey-webapp!6

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",

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"

SurveyFrontend/src/components/MainComponent/MainComponent.tsx

@@ -2,12 +2,16 @@ 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('Вопросы');
+    const [activePage, setActivePage] = useState(
+        localStorage.getItem("activePage") || "Вопросы"
+    );
 
     const handleNavigationClick = (title: string) => {
         setActivePage(title);
+        localStorage.setItem('activePage', title);
     }
 
     return (
@@ -16,7 +20,8 @@ const MainComponent: React.FC = () => {
                 activePage={activePage}
                 onNavigationClick={handleNavigationClick}
             />
-            <Survey />
+            { activePage === 'Вопросы' && <Survey />}
+            {activePage === 'Настройки' && <SettingSurvey />}
         </main>
     )
 }

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}) => {

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css

@@ -0,0 +1,25 @@
+/*SettingSurvey.module.css*/
+
+.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;
+}

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx

@@ -0,0 +1,22 @@
+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>
+    )
+}
+
+export default SettingSurvey;

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;
+}

SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import styles from "./TimeEvent.module.css";
+
+interface TimeEventProps {
+    title: string;
+}
+
+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}
+                    value={date}
+                    onChange={(e) => setDate(e.target.value)}
+                />
+                <input
+                    type="time"
+                    className={styles.inputTime}
+                    value={time}
+                    onChange={(e) => setTime(e.target.value)}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default TimeEvent;

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;

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;