Main page

package.json

@@ -11,6 +11,7 @@
     "@react-three/drei": "^8.20.2",
     "@react-three/fiber": "^7.0.26",
     "@reduxjs/toolkit": "^1.7.1",
+    "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -68,6 +69,7 @@
   "devDependencies": {
     "@types/deep-equal": "^1.0.1",
     "@types/three": "^0.139.0",
+    "file-loader": "^6.2.0",
     "sass": "^1.51.0"
   }
 }

src/components/App/App.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './App.module.scss';
 import { Route, Routes } from 'react-router-dom';
-import Layout from '../Layout/Layout';
-import { MainPage, DIRPage, PCAPage, NotFoundPage } from '../../pages';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { useAppSelector } from '../../services/store/hooks';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { MainPageLayout, AppLayout } from '../Layouts';
+import { MainPage, DIRPage, PCAPage, NotFoundPage } from '../../pages';
 
 function App() {
 
@@ -19,12 +19,14 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <Routes>
-        <Route path='/' element={<Layout />}>
+        <Route path='/' element={<MainPageLayout />}>
           <Route index element={<MainPage />}/>
+        </Route>
+        <Route path='/app' element={<AppLayout />}>
           <Route path='pca' element={<PCAPage />}/>
           <Route path='dir' element={<DIRPage />}/>
-          <Route path='*' element={<NotFoundPage />}/>
         </Route>
+        <Route path='*' element={<NotFoundPage />}/>
       </Routes>
     </ThemeProvider>
   );

src/components/Graph/StereoGraphDIR/StereoGraphDIR.tsx → src/components/AppGraphs/StereoGraphDIR/StereoGraphDIR.tsx

@@ -10,11 +10,11 @@ import getInterpretationIDs from "../../../utils/graphs/formatters/getInterpreta
 import CoordinateSystem from "../../Sub/Graphs/CoordinateSystem/CoordinateSystem";
 import dataToStereoDIR from "../../../utils/graphs/formatters/stereo/dataToStereoDIR";
 
-export interface IStereoGraph extends IGraph {
+export interface IStereoGraphDIR extends IGraph {
   data: IDirData;
 };
 
-const StereoGraphDIR: FC<IStereoGraph> = ({ graphId, width, height, data }) => {
+const StereoGraphDIR: FC<IStereoGraphDIR> = ({ graphId, width, height, data }) => {
 
   // ToDo: 
   // 1. менять viewBox в зависимости от размера группы data (horizontal-data + vertical-data) || STOPPED

src/components/Graph/StereoGraphDIR/StereoGraphVGP.tsx → src/components/AppGraphs/StereoGraphDIR/StereoGraphVGP.tsx

@@ -11,11 +11,11 @@ import CoordinateSystem from "../../Sub/Graphs/CoordinateSystem/CoordinateSystem
 import dataToStereoDIR from "../../../utils/graphs/formatters/stereo/dataToStereoDIR";
 import dataToStereoVGP from "../../../utils/graphs/formatters/stereo/dataToStereoVGP";
 
-export interface IStereoGraph extends IGraph {
+export interface IStereoGraphVGP extends IGraph {
   data: VGPData;
 };
 
-const StereoGraphVGP: FC<IStereoGraph> = ({ graphId, width, height, data }) => {
+const StereoGraphVGP: FC<IStereoGraphVGP> = ({ graphId, width, height, data }) => {
 
   // ToDo: 
   // 1. менять viewBox в зависимости от размера группы data (horizontal-data + vertical-data) || STOPPED

src/components/AppGraphs/index.ts

@@ -0,0 +1,19 @@
+import MagGraph from "./MagGraph/MagGraph";
+import StereoGraph from "./StereoGraph/StereoGraph";
+import ZijdGraph from "./ZijdGraph/ZijdGraph";
+import StereoGraphDIR from "./StereoGraphDIR/StereoGraphDIR";
+import StereoGraphVGP from "./StereoGraphDIR/StereoGraphVGP";
+
+import { IZijdGraph } from "./ZijdGraph/ZijdGraph";
+import { IStereoGraph } from "./StereoGraph/StereoGraph";
+import { IMagGraph } from "./MagGraph/MagGraph";
+
+export {
+  MagGraph,
+  StereoGraph,
+  ZijdGraph,
+  StereoGraphDIR,
+  StereoGraphVGP,
+};
+
+export type { IZijdGraph, IStereoGraph, IMagGraph };

src/components/Main/AppNavigation/AppNavigation.tsx → src/components/AppLogic/AppNavigation/AppNavigation.tsx

@@ -33,11 +33,11 @@ const AppNavigation: FC = ({}) => {
     <div className={styles.navButtons}>
       <NavButton 
         label={isSmallScreen ? 'PCA' : 'Магнитные чистки (PCA)'}
-        to={'pca'}
+        to={'/app/pca'}
       />
       <NavButton 
         label={isSmallScreen ? 'DIR' : 'Статистика направлений (DIR)'}
-        to={'dir'}
+        to={'/app/dir'}
       />
       <NavButton 
         label={'Репозиторий проекта'}

src/components/Main/ToolsDIR/PMTests/FoldTestContainer.tsx → src/components/AppLogic/ToolsDIR/PMTests/FoldTestContainer.tsx

@@ -4,7 +4,7 @@ import { useWindowSize } from '../../../../utils/GlobalHooks';
 import GraphsSkeleton from './GraphsSkeleton';
 import { FoldTestResult, IDirData } from '../../../../utils/GlobalTypes';
 import { foldTestBootstrap } from '../../../../utils/statistics/PMTests';
-import FoldTestGraph from '../../../Graph/FoldTestGraph/FoldTestGraph';
+import FoldTestGraph from '../../../AppGraphs/FoldTestGraph/FoldTestGraph';
 import { Button, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import {

src/components/Main/VGP/Graphs.tsx → src/components/AppLogic/VGP/Graphs.tsx

@@ -3,7 +3,7 @@ import styles from './VGP.module.scss';
 import { useWindowSize } from '../../../utils/GlobalHooks';
 import { VGPData } from '../../../utils/GlobalTypes';
 import GraphsSkeleton from './GraphsSkeleton';
-import StereoGraphVGP from '../../../components/Graph/StereoGraphDIR/StereoGraphVGP';
+import { StereoGraphVGP } from '../../AppGraphs';
 import { useAppDispatch, useAppSelector } from "../../../services/store/hooks";
 
 // interface IGraphs {

src/components/Main/index.ts → src/components/AppLogic/index.ts

@@ -8,8 +8,6 @@ import StatisticsDataTableDIR from "./DataTablesDIR/StatisticsDataTable/Statisti
 import ToolsPMD from "./ToolsPMD/ToolsPMD";
 import ToolsDIR from "./ToolsDIR/ToolsDIR";
 
-import DynamicLogo from "./DynamicLogo/DynamicLogo";
-
 export {
   AppSettings,
   AppNavigation,
@@ -20,5 +18,4 @@ export {
   StatisticsDataTableDIR,
   ToolsPMD,
   ToolsDIR,
-  DynamicLogo,
 };

src/components/Layout/Layout.tsx → src/components/Layouts/AppLayout/AppLayout.tsx

@@ -1,30 +1,29 @@
-import React, { FC, useCallback, useEffect, useState } from "react";
-import styles from "./Layout.module.scss";
+import React, { FC, useCallback } from "react";
+import styles from "./AppLayout.module.scss";
 import { Outlet, RouteProps, useLocation, } from "react-router-dom";
-import { AppSettings, AppNavigation } from "../Main";
+import { useAppDispatch } from "../../../services/store/hooks";
+import { addDirStatFiles, addTreatmentFiles } from "../../../services/reducers/files";
+import { AppSettings, AppNavigation } from "../../AppLogic";
+import { useDropzone } from "react-dropzone";
 import { useTheme } from '@mui/material/styles';
 import {
   bgColorMain,
   bgColorBlocks,
   boxShadowStyle,
   textColor
-} from '../../utils/ThemeConstants';
-import { useAppDispatch } from "../../services/store/hooks";
-import { addDirStatFiles, addInputFiles, addTreatmentFiles, setDirStatFiles, setInputFiles, setTreatmentFiles } from "../../services/reducers/files";
-import { useDropzone } from "react-dropzone";
+} from '../../../utils/ThemeConstants';
 
-const Layout: FC<RouteProps> = () => {
+const AppLayout: FC<RouteProps> = () => {
 
   const dispatch = useAppDispatch();
   const location = useLocation();
   const theme = useTheme();
-  const currentPage = location.pathname.slice(1, location.pathname.length);
+  const currentPage = location.pathname.split('/').pop() || location.pathname;
 
   const handleFileUpload = (event: any, files?: Array<File>) => {;
     const acceptedFiles = files ? files : Array.from(event.currentTarget.files);
     if (currentPage === 'pca') dispatch(addTreatmentFiles(acceptedFiles));
     if (currentPage === 'dir') dispatch(addDirStatFiles(acceptedFiles));
-    // dispatch(addInputFiles(acceptedFiles));
   };
 
   const onDrop = useCallback(acceptedFiles => {
@@ -98,4 +97,4 @@ const Layout: FC<RouteProps> = () => {
   );
 };
 
-export default Layout;
+export default AppLayout;

src/components/Layouts/MainPageLayout/MainPageLayout.module.scss

@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto !important;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}

src/components/Layouts/MainPageLayout/MainPageLayout.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import styles from "./MainPageLayout.module.scss";
+import { Outlet, RouteProps } from "react-router-dom";
+import { useTheme } from '@mui/material/styles';
+import {
+  bgColorMain,
+  bgColorBlocks,
+  boxShadowStyle,
+  textColor
+} from '../../../utils/ThemeConstants';
+
+const MainPageLayout: FC<RouteProps> = () => {
+
+  const theme = useTheme();
+
+  return (
+    <div 
+      className={`${styles.container} ${styles[theme.palette.mode]}`}
+      style={{
+        backgroundColor: bgColorMain(theme.palette.mode),
+      }}
+    >
+      <Outlet />
+    </div>
+  );
+};
+
+export default MainPageLayout;

src/components/Layouts/index.ts

@@ -0,0 +1,7 @@
+import MainPageLayout from "./MainPageLayout/MainPageLayout";
+import AppLayout from "./AppLayout/AppLayout";
+
+export {
+  MainPageLayout,
+  AppLayout,
+};

src/components/MainPage/About/About.module.scss

@@ -0,0 +1,9 @@
+.container {
+  padding: 0 24px;
+  margin-bottom: 24px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/components/MainPage/About/About.tsx

@@ -0,0 +1,45 @@
+
+import React from 'react';
+import styles from './About.module.scss';
+import { Typography, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor } from '../../../utils/ThemeConstants';
+import { NavLink } from 'react-router-dom';
+
+const About = () => {
+
+  const theme = useTheme();
+
+  return (
+    <div className={styles.container}>
+      <Typography variant='h3' color={textColor(theme.palette.mode)} textAlign='center' mb='16px'>
+        Работайте с результатами палеомагнитных исследований. 
+      </Typography>
+      <Typography variant='h4' color={textColor(theme.palette.mode)} textAlign='center' mb='16px'>
+        В любое время, в любом месте, с любого устройства.
+      </Typography>
+      <Typography variant='h4' color={textColor(theme.palette.mode)} textAlign='center'>
+        И не беспокойтесь о защите данных.
+      </Typography>
+
+      <NavLink to={'/app/pca'} style={{textDecoration: 'none'}}>
+        <Button
+          variant="contained"
+          color="primary"
+          sx={{
+            textTransform: 'none',
+            fontSize: '18px',
+            borderRadius: '4px',
+            padding: '8px 24px',
+            width: 'fit-content',
+            mt: '42px',
+          }}
+        >
+          Приступить к работе
+        </Button>
+      </NavLink>
+    </div>
+  );
+};
+
+export default About;

src/components/MainPage/Description/Description.module.scss

@@ -0,0 +1,71 @@
+.container {
+  position: relative;
+  padding: 72px 240px 52px 240px;
+  margin: 48px 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 100%;
+  min-height: 120px;
+}
+
+.icon {
+  position: absolute;
+  top: -60px;
+  left: calc(50% - 36px);
+
+  width: 72px;
+  height: 72px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 12px;
+
+  background-color: #fff;
+}
+
+.indicator {
+  position: absolute;
+  width: 100%;
+  height: 10px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0 168px;
+  bottom: -32px;
+  box-sizing: border-box;
+
+  &:hover {
+    & .indicatorItem {
+      height: 9px;
+    }
+  }
+
+  & .indicatorItem {
+    height: 7px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  & .active {
+    box-shadow: 0px 0px 5px 1px #119dff;
+  }
+}