From 7d736c10b59a9a15f56b9b5a04759e8bd287362a Mon Sep 17 00:00:00 2001
From: goblinrf <egorkislitsa2@gmail.com>
Date: Sat, 16 Dec 2023 19:26:16 +0300
Subject: [PATCH] Done

---
 Lab5/src/components/api/cards_api.js | 46 +++++++++++++++++++++++++
 Lab5/src/main.jsx                    |  6 ++++
 Lab5/src/pages/NewsPage.jsx          | 50 ++++++++++++++++++++++++++++
 Lab5/src/pages/Page2.jsx             |  2 +-
 Lab5/src/pages/Page5.jsx             |  1 +
 Lab5/src/pages/button.css            | 11 ++++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 Lab5/src/components/api/cards_api.js
 create mode 100644 Lab5/src/pages/NewsPage.jsx
 create mode 100644 Lab5/src/pages/button.css

diff --git a/Lab5/src/components/api/cards_api.js b/Lab5/src/components/api/cards_api.js
new file mode 100644
index 0000000..0b7075b
--- /dev/null
+++ b/Lab5/src/components/api/cards_api.js
@@ -0,0 +1,46 @@
+// cards_api.js
+
+// URL вашего JSON-сервера с данными о новостях
+const API_URL = 'http://localhost:8081/lines';
+
+// Функция для получения всех новостей
+export const getAllLines = async () => {
+  try {
+    const response = await fetch(API_URL);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при получении новостей:', error);
+    throw error;
+  }
+};
+
+// Функция для получения одной новости по id
+export const getLine = async (id) => {
+  try {
+    const response = await fetch(`${API_URL}/${id}`);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при получении новости:', error);
+    throw error;
+  }
+};
+
+// Функция для обновления новости
+export const updateLine = async (id, newData) => {
+  try {
+    const response = await fetch(`${API_URL}/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(newData),
+    });
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при обновлении новости:', error);
+    throw error;
+  }
+};
diff --git a/Lab5/src/main.jsx b/Lab5/src/main.jsx
index 4fdc574..ef3bdd9 100644
--- a/Lab5/src/main.jsx
+++ b/Lab5/src/main.jsx
@@ -9,6 +9,7 @@ import Page1 from './pages/Page1.jsx';
 import Page2 from './pages/Page2.jsx';
 import Page3 from './pages/Page3.jsx';
 import Page4 from './pages/Page4.jsx';
+import NewsPage from './pages/NewsPage.jsx';
 import Page5 from './pages/Page5.jsx';
 import Page6 from './pages/Page6.jsx';
 
@@ -34,6 +35,11 @@ const routes = [
     element: <Page4 />,
     title: 'Мир спорта',
   },
+  {
+    path: '/NewsPage',
+    element: <NewsPage />,
+    title: 'Новости',
+  },
   {
     path: '/page5',
     element: <Page5 />,
diff --git a/Lab5/src/pages/NewsPage.jsx b/Lab5/src/pages/NewsPage.jsx
new file mode 100644
index 0000000..bee1188
--- /dev/null
+++ b/Lab5/src/pages/NewsPage.jsx
@@ -0,0 +1,50 @@
+// NewsPage.jsx
+
+import React, { useState, useEffect } from 'react';
+import { getAllLines } from '../components/api/cards_api';
+
+
+const NewsPage = () => {
+  const [news, setNews] = useState([]);
+
+  useEffect(() => {
+    // Получаем все новости при загрузке компонента
+    getAllNews();
+  }, []);
+
+  const getAllNews = async () => {
+    try {
+      // Получаем данные с сервера
+      const data = await getAllLines();
+      setNews(data); // Обновляем состояние новостей
+    } catch (error) {
+      console.error('Ошибка получения новостей:', error);
+    }
+  };
+
+  // Функция для создания карточки на основе данных новости
+  const createNewsCard = (newsData) => {
+    return (
+      <div className="col-md-4" key={newsData.id}>
+        <div className="card news-card">
+          <img src={newsData.image || 'https://via.placeholder.com/200'} className="card-img-top" alt="Изображение новости" />
+          <div className="card-body">
+            <h5 className="card-title">{newsData.price}</h5>
+            <p className="card-text">{newsData.count}</p>
+            <p className="card-text">{newsData.sum}</p>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="container">
+      <div className="row" id="news-cards-container">
+        {news.map((newsItem) => createNewsCard(newsItem))}
+      </div>
+    </div>
+  );
+};
+
+export default NewsPage;
diff --git a/Lab5/src/pages/Page2.jsx b/Lab5/src/pages/Page2.jsx
index 0f251f7..cf7af3e 100644
--- a/Lab5/src/pages/Page2.jsx
+++ b/Lab5/src/pages/Page2.jsx
@@ -90,8 +90,8 @@ const Page2 = () => {
                         </div>
                         <div className="col-md-4">
                             <div className="p-2">
-                                <img src={ulstuLogo} alt="Картинка" className="w-100" />
                                 <img src="./src/assets/image_from_second_1.jpg" alt="Картинка" className="d-block mt-5 w-100" />
+                                <img src="./src/assets/image_from_second_2.jpg" alt="Картинка" className="d-block mt-5 w-100" />
                             </div>
                         </div>
                     </div>
diff --git a/Lab5/src/pages/Page5.jsx b/Lab5/src/pages/Page5.jsx
index dca2842..39cfedb 100644
--- a/Lab5/src/pages/Page5.jsx
+++ b/Lab5/src/pages/Page5.jsx
@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form';
 import { useState,useEffect } from 'react';
 import axios from 'axios';
 import { useDispatch } from 'react-redux';
+import './button.css';
 
 const Page5 = () => {
   const { register, handleSubmit } = useForm();
diff --git a/Lab5/src/pages/button.css b/Lab5/src/pages/button.css
new file mode 100644
index 0000000..c03a530
--- /dev/null
+++ b/Lab5/src/pages/button.css
@@ -0,0 +1,11 @@
+.btn-purple {
+    background-color: #570257; /* Цвет фона кнопки */
+    color: #ffffff; /* Цвет текста на кнопке */
+    /* Другие стили */
+  }
+  
+  .btn-purple:hover {
+    background-color: #450045; /* Цвет фона кнопки при наведении */
+    color: #ffffff; /* Цвет текста на кнопке при наведении */
+    /* Другие стили при наведении */
+  }
\ No newline at end of file