lm-cyber · lm-cyber · Apr 12, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
@@ -7,6 +7,15 @@
             ],
             "@data/*": [
                 "data/*"
+            ],
+            "@pages/*": [
+                "pages/*"
+            ],
+            "@components/*": [
+                "components/*"
+            ],
+            "@images/*": [
+                "images/*"
             ]
         }
     },

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -49,6 +49,7 @@
     "react-dom": "^18.2.0",
     "react-plotly.js": "^2.6.0",
     "react-refresh": "^0.11.0",
+    "react-router-dom": "^6.22.3",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
     "sass-loader": "^12.3.0",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>ML Model</title>
+  <title>Команда А</title>
 </head>
 
 <body>

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,23 +1,34 @@
 import "./styles/App.css"
 import "bootstrap/dist/css/bootstrap.min.css"
 
-import Predict from "components/Predict"
-import ModelPlot from "components/ModelPlot"
+import { BrowserRouter, Routes, Route } from "react-router-dom"
 
+import { PublicRoutes } from "@data/routes"
+import Error from "@pages/Error/Error"
+import NavBar from "@components/NavBar"
 
-export default function App() {
-    return (
-        <div className="App">
 
-            <br />
+export default function App() {
 
-            <Predict />
+    return (
+        <BrowserRouter>
+            <div className="App">
+                <NavBar />
 
-            <br />
-            <br />
-            <br />
+                <br />
 
-            <ModelPlot />
-        </div>
+                <Routes>
+                    {PublicRoutes.map((route) =>
+                        <Route
+                            key={route.path}
+                            path={route.path}
+                            errorElement={<Error />}
+                            element={route.element}
+                            exact
+                        />
+                    )}
+                </Routes>
+            </div>
+        </BrowserRouter>
     )
 }
diff --git a/frontend/src/components/ModelPlot.jsx b/frontend/src/components/ModelPlot.jsx
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -0,0 +1,44 @@
+import "@components/styles/NavBar.css"
+import img from "@images/yandex-logo.jpg"
+
+import { Link } from "react-router-dom"
+import { Container, Nav, Navbar, Offcanvas } from "react-bootstrap"
+
+
+export default function NavBar() {
+    return (
+        <>
+            {
+                [false].map((expand) => (
+                    <Navbar key={expand} expand={expand} className="bg-body-tertiary mb-3">
+                        <Container fluid>
+                            <Navbar.Brand as={Link} to="/">
+                                <img id="home-icon" src={img} />
+                                Команда А
+                            </Navbar.Brand>
+
+                            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
+                            <Navbar.Offcanvas
+                                id={`offcanvasNavbar-expand-${expand}`}
+                                aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
+                                placement="end"
+                            >
+                                <Offcanvas.Header closeButton>
+                                    <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
+                                        предсказания
+                                    </Offcanvas.Title>
+                                </Offcanvas.Header>
+                                <Offcanvas.Body>
+                                    <Nav className="justify-content-end flex-grow-1 pe-3">
+                                        <Nav.Link as={Link} to="/predict_day/">на один день</Nav.Link>
+                                        <Nav.Link as={Link} to="/predict_interval/">на интервал</Nav.Link>
+                                    </Nav>
+                                </Offcanvas.Body>
+                            </Navbar.Offcanvas>
+                        </Container>
+                    </Navbar>
+                ))
+            }
+        </>
+    );
+}
diff --git a/frontend/src/components/Predict.jsx b/frontend/src/components/Predict.jsx
diff --git a/frontend/src/components/PredictForm.jsx b/frontend/src/components/PredictForm.jsx
diff --git a/frontend/src/components/styles/NavBar.css b/frontend/src/components/styles/NavBar.css
@@ -0,0 +1,5 @@
+#home-icon {
+    width: 40px;
+    margin: 10px;
+    border-radius: 50%;
+}
diff --git a/frontend/src/data/routes.js b/frontend/src/data/routes.js
@@ -0,0 +1,18 @@
+import Home from "@pages/Home/Home"
+import PredictDay from "@pages/PredictDay/PredictDay"
+import PredictInterval from "@pages/PredictInterval/PredictInterval"
+
+export var PublicRoutes = [
+    {
+        path: "/",
+        element: <Home />
+    },
+    {
+        path: "/predict_day/",
+        element: <PredictDay />
+    },
+    {
+        path: "/predict_interval/",
+        element: <PredictInterval />
+    },
+]
diff --git a/frontend/src/images/yandex-logo.jpg b/frontend/src/images/yandex-logo.jpg
diff --git a/frontend/src/pages/Error/Error.jsx b/frontend/src/pages/Error/Error.jsx
@@ -0,0 +1,9 @@
+import "@pages/Error/styles/Error.css"
+
+export default function Error() {
+    return (
+        <div className="Error">
+            <h2>Error</h2>
+        </div>
+    )
+}
diff --git a/frontend/src/pages/Error/styles/Error.css b/frontend/src/pages/Error/styles/Error.css
@@ -0,0 +1,14 @@
+.Error {
+    position: fixed;
+    top: 30%;
+    bottom: 30%;
+    right: 30%;
+    left: 30%;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    font-size: xx-large;
+    background-color: rgb(181, 173, 173);
+    color: rgb(250, 244, 244);
+}
diff --git a/frontend/src/pages/Home/Home.jsx b/frontend/src/pages/Home/Home.jsx
@@ -0,0 +1,25 @@
+import ListGroup from 'react-bootstrap/ListGroup'
+
+
+export default function Home() {
+    return (
+        <div className="Home">
+            <h2 className="text-center">
+                22. Предсказание стоимости акций на основе финансовых новостей
+            </h2>
+
+            <br />
+
+            <ListGroup horizontal>
+                <ListGroup.Item>Елизавета Мирова @elithie</ListGroup.Item>
+                <ListGroup.Item>Рощин Филипп @qwerty111ytrewq</ListGroup.Item>
+                <ListGroup.Item>Алан Насибуллин @Alan_Nasibullin</ListGroup.Item>
+                <ListGroup.Item>Евгений Поликанин @Nmmage</ListGroup.Item>
+            </ListGroup>
+
+            <br />
+
+            <h5 className="text-center">Куратор: Дмитрий Качкин</h5>
+        </div>
+    )
+}