Merge pull request #40 from mikeiken/dev

Enhance UI and API integration with routing

.github/workflows/on-release.yml

@@ -26,7 +26,7 @@ env:
 # There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
 jobs:
   build-and-push-image-django:
-    if: github.event_name != 'pull_request'
+    if: github.event_name == 'push'
     runs-on: ubuntu-latest
     # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
     permissions:
@@ -86,7 +86,7 @@ jobs:
           docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}${{ env.DJANGO_SUFFIX }}:$STRIPPED_TAG
 
   build-and-push-image-frontend:
-    if: github.event_name != 'pull_request'
+    if: github.event_name == 'push'
     runs-on: ubuntu-latest
 
     permissions:
@@ -143,7 +143,7 @@ jobs:
           docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}${{ env.FRONTEND_SUFFIX }}:$STRIPPED_TAG
 
   build-and-push-image-nginx:
-    if: github.event_name != 'pull_request'
+    if: github.event_name == 'push'
     runs-on: ubuntu-latest
 
     permissions:
@@ -200,7 +200,7 @@ jobs:
           docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}${{ env.NGINX_SUFFIX }}:$STRIPPED_TAG
 
   build-and-push-image-psql:
-    if: github.event_name != 'pull_request'
+    if: github.event_name == 'push'
     runs-on: ubuntu-latest
 
     permissions:

frontend/package.json

@@ -10,6 +10,7 @@
     "boxicons": "^2.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
   },

frontend/src/App.js

@@ -1,13 +1,12 @@
 import './App.css';
-// import AuthForm from './components/auth/auth';
+import AuthForm from './components/auth/auth';
 import MainPage from './components/main-page/MainPage';
 // import AddItemButton from './components/add-item/AddItemButton';
 
 function App() {
   return (
     <div className="App">
-      {/* <AuthForm/> */}
-      <MainPage/>
+      <MainPage />
     </div>
   );
 }

frontend/src/components/add-item/add-item-button.css

@@ -1,7 +1,7 @@
 .add-button {
     position: fixed; /* Заменяем на fixed, чтобы кнопка не смещалась при прокрутке */
     right: 40px; /* Отступ от правого края */
-    bottom: 90px; /* Отступ от нижнего края */
+    bottom: 40px; /* Отступ от нижнего края */
     width: 100px;
     height: 100px;
     border-radius: 50%;

frontend/src/components/api/instance.js

@@ -16,8 +16,7 @@ export const Routes = {
         logout: '/logout',
     },
     PRODUCTS: {
-        potato: '/potato',
-        carrot: '/carrot',
+        plant: '/plant',
 
     },
 }

frontend/src/components/auth/components/style.css → frontend/src/components/auth/components/auth-style.css

@@ -20,20 +20,26 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  overflow: hidden;
 }
 
 /* Обертка для всего содержимого */
 .main-wrapper {
-  position: relative;
-  z-index: 2; /* Устанавливаем, чтобы форма была поверх видео */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh; /* Высота экрана */
+  height: 100vh;
+  width: 400px;
 }
 
 /* Стиль для формы */
 .wrapper {
+  position: absolute;
   z-index: 3;
   background-color: rgba(255, 255, 255, 0.9);
   padding: 40px;
@@ -46,7 +52,7 @@
 .input-box {
   position: relative;
   margin-bottom: 20px;
-  width: 100%; /* Добавляем ширину для контейнера */
+  width: 100%; 
 }
 
 /* Поле ввода */

frontend/src/components/auth/components/background.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import './style.css'
+import './auth-style.css'
 import Form from './form'
 
 export default function AuthFormBackgroundComponent() {

frontend/src/components/auth/components/form.js

@@ -1,5 +1,4 @@
 import React from 'react'
-
 export default function Form() {
   return (
     <div className='wrapper'>

frontend/src/components/card/Card.js

@@ -17,7 +17,7 @@ export default function Card(props) {
     return (
         <>
             <div className={`card-wrapper ${isVisible ? 'fade-in' : ''}`} onClick={() => setModalActive(true)}>
-                <img src={process.env.PUBLIC_URL + '/CannibalPirate.png'} alt='Placeholder' />
+                <img src={process.env.PUBLIC_URL + '/man.jpg'} alt='Placeholder' />
                 <h1>{props.label}</h1>
                 <p>{props.description}</p>
             </div>

frontend/src/components/card/modal/Modal.js

@@ -6,7 +6,7 @@ export default function Modal(props) {
     <div className={props.active ? "modal active" : "modal"} onClick={() => props.setActive(false)}>
       <div className={props.active ? "modal-content active" : "modal-content"} onClick={e => e.stopPropagation()}>
         <h1>{props.label}</h1>
-        <img src={process.env.PUBLIC_URL + '/CannibalPirate.png'} alt={''}></img>
+        <img src={process.env.PUBLIC_URL + '/man.jpg'} alt={''}></img>
         <p>{props.description}</p>
         <div className='horizontal-direction'>
           <button className='btn-1'>Удобрить</button>

frontend/src/components/card/modal/modal-card-style.css

@@ -35,6 +35,7 @@
 .modal-content img {
     margin: 20px;
     width: 400px;
+    border-radius: 20px;
 }
 
 .modal-content p {

frontend/src/components/card/style-card.css

@@ -36,7 +36,8 @@
 }
 
 .card-wrapper img {
-    width: 130px !important;
+    width: 200px !important;
+    border-radius: 20px;
     filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
     padding: 0;
 }

frontend/src/components/header/Header.js

@@ -1,19 +1,29 @@
 import React from 'react'
 import './style.css'
+import { Routes, Route, Link } from 'react-router-dom';
+import AuthForm from '../auth/auth';
 
 export default function Header() {
     return (
         <>
             <div className='header'>
                 <img className='logo' src={process.env.PUBLIC_URL + '/logo.png'}></img>
                 <nav className='navbar'>
-                    <a href='#'>Участки</a>
-                    <a href='#'>Подрядчики</a>
-                    <a href='#'>Лицензия</a>
-                    <a href='#'>О нас</a>
+
+                    <Link to=''>Участки</Link>
+                    <Link to=''>Подрядчики</Link>
+                    <Link to=''>Лицензия</Link>
+                    <Link to=''>О нас</Link>
+
                 </nav>
-                <button className='login-btn'>Войти</button>
+                <Link to='/login'>
+                    <button className='login-btn'>Войти</button>
+                </Link>
+
             </div>
+            <Routes>
+                <Route path='/login' element={<AuthForm />} />
+            </Routes>
         </>
     )
 }

frontend/src/components/header/style.css

@@ -1,16 +1,24 @@
 .header {
-    position: fixed;
-    top: 0;
-    left: 0;
+    border-radius: 20px;
+    position: relative;
+    top: 1vh;
+    left: 1vh;
+    right: 1vh;
+    /* Добавляем отступ справа */
     height: 100px;
-    width: 100%;
     background-color: #ece4d3;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 1;
+    max-width: 99%;
+    transition: .3s ease;
 }
 
+
+.header:hover {
+    transform: scale(1.005);
+}
 .logo {
     max-width: 200px;
     height: 100px;
@@ -19,7 +27,7 @@
 
 .navbar {
     margin-top: 70px;
-    margin-right: 100px;
+    margin-left: 50%;
 }
 
 .navbar a {

frontend/src/components/main-page/MainPage.js

@@ -1,33 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Header from '../header/Header';
-import Footer from '../footer/Footer';
 import Card from '../card/Card';
 import AddItemButton from '../add-item/AddItemButton';
 import './style.css';
+import axios from 'axios';
 
 export default function MainPage() {
-    const [cards, setCards] = useState([{ label: 'картошка', description: 'омерзительная тварь (нет)' }]);
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
-    const addCard = () => {
-        // Добавляем новую карточку, можно сделать динамичнее
-        setCards([...cards, { label: 'новая карточка', description: 'описание новой карточки' }]);
-    };
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await axios.get('http://homelab.kerasi.ru/api/v1/plant/?format=json');
+                setData(response.data);
+            } catch (err) {
+                setError(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+
+        return () => {
+            console.log(data);
+        };
+    }, []);
 
     return (
-        <div>
+        <div className='max-height'>
             <Header />
             <div className='h-container'>
                 <div className='box1'>
-                    наверное выбор всякой всячины
+
                 </div>
                 <div className='box2'>
-                    {cards.map((card, index) => (
-                        <Card key={index} label={card.label + ` ${index}`} description={card.description} />
-                    ))}
-                    <AddItemButton onAdd={addCard} />
+                    {loading ? (
+                        <div className='centered-spinner'>
+                            <div className="spinner"></div>
+                        </div>
+                    ) : error ? (
+                        <p className='centered-spinner'>Error: {error.message}</p>
+                    ) : data.length === 0 ? (
+                        <p>Пусто</p>
+                    ) : (
+                        data.map(item => (
+                            <Card key={item.id} label={item.name} description={item.nutrients} />
+                        ))
+                    )}
+                    {/* <AddItemButton onAdd={''} /> */}
                 </div>
+
             </div>
-            <Footer />
         </div>
     );
 }

frontend/src/index.js

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import {BrowserRouter} from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

frontend/yarn.lock

@@ -1668,6 +1668,11 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
+"@remix-run/router@1.19.2":
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.19.2.tgz#0c896535473291cb41f152c180bedd5680a3b273"
+  integrity sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -8050,6 +8055,21 @@ react-router-dom@^4.2.2:
     react-router "^4.3.1"
     warning "^4.0.1"
 
+react-router-dom@^6.26.2:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.2.tgz#a6e3b0cbd6bfd508e42b9342099d015a0ac59680"
+  integrity sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==
+  dependencies:
+    "@remix-run/router" "1.19.2"
+    react-router "6.26.2"
+
+react-router@6.26.2:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.26.2.tgz#2f0a68999168954431cdc29dd36cec3b6fa44a7e"
+  integrity sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==
+  dependencies:
+    "@remix-run/router" "1.19.2"
+
 react-router@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"