From 9b67ebf431dde607a323b2e2f5d2413e849e9751 Mon Sep 17 00:00:00 2001 From: Andrei Duvakin Date: Tue, 28 Jan 2025 18:51:35 +0500 Subject: [PATCH] ._. --- WEB/app/src/app/app.css | 55 ++++- WEB/app/src/app/components/сalendar.js | 48 ++++ WEB/app/src/app/page.js | 297 +++++++++++++------------ 3 files changed, 252 insertions(+), 148 deletions(-) create mode 100644 WEB/app/src/app/components/сalendar.js diff --git a/WEB/app/src/app/app.css b/WEB/app/src/app/app.css index e7324e7..94723b5 100644 --- a/WEB/app/src/app/app.css +++ b/WEB/app/src/app/app.css @@ -110,8 +110,8 @@ .calendar { margin: 2vw; - border: 1px solid black; height: 25vw; + padding: 2vw; } .events { @@ -131,3 +131,56 @@ flex-direction: row; justify-content: space-between; } + +.calendar-container { + width: 350px; + text-align: center; + font-family: Arial, sans-serif; +} + +.calendar-header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #2f9836; + color: white; + padding: 10px; + border-radius: 8px; +} + +.calendar-header button { + background: none; + border: none; + color: white; + font-size: 20px; + cursor: pointer; +} + +.calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 5px; + margin-top: 10px; +} + +.calendar-weekday { + font-weight: bold; + text-align: center; +} + +.calendar-day, .empty-cell { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; +} + +.calendar-day { + cursor: pointer; +} + +.calendar-day:hover { + background-color: #cfcfcf; +} diff --git a/WEB/app/src/app/components/сalendar.js b/WEB/app/src/app/components/сalendar.js new file mode 100644 index 0000000..b12abea --- /dev/null +++ b/WEB/app/src/app/components/сalendar.js @@ -0,0 +1,48 @@ +'use client'; + +import {useState} from "react"; + +const Calendar = () => { + const [currentDate, setCurrentDate] = useState(new Date()); + + const year = currentDate.getFullYear(); + const month = currentDate.getMonth(); + + const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1)); + const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1)); + + const generateCalendar = () => { + const firstDayOfMonth = new Date(year, month, 1).getDay(); // День недели 1-го числа (0 - воскресенье) + const daysInMonth = new Date(year, month + 1, 0).getDate(); // Количество дней в месяце + + const startOffset = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; + + const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1); + return [...Array(startOffset).fill(null), ...daysArray]; + }; + + const days = generateCalendar(); + const weekDays = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]; + + return ( +
+
+ +

{currentDate.toLocaleString("ru-RU", {month: "long", year: "numeric"})}

+ +
+ +
+ {weekDays.map((day) => ( +
{day}
+ ))} + {days.map((day, index) => + day ?
{day}
: +
+ )} +
+
+ ); +}; + +export default Calendar; diff --git a/WEB/app/src/app/page.js b/WEB/app/src/app/page.js index 10d8b89..bf47eba 100644 --- a/WEB/app/src/app/page.js +++ b/WEB/app/src/app/page.js @@ -3,170 +3,173 @@ import './app.css'; import Header from './components/header.js'; import EmployeeCard from './components/employee-card.js'; -import { useEffect, useState } from 'react'; +import {useEffect, useState} from 'react'; import RSSFeed from './components/news-card.js'; import EventCard from './components/event-card'; +import Calendar from "./components/сalendar"; export default function Home() { - const [searchString, setSearchString] = useState(''); - const [employees, setEmployees] = useState([]); - const [news, setNews] = useState([]); - const [events, setEvents] = useState([]); + const [searchString, setSearchString] = useState(''); + const [employees, setEmployees] = useState([]); + const [news, setNews] = useState([]); + const [events, setEvents] = useState([]); - useEffect(() => { - fetchEmployees(); - fetchRSS(); - fetchEvents(); - - const interval = setInterval( - () => { + useEffect(() => { fetchEmployees(); fetchRSS(); fetchEvents(); - }, 5000 - ) - return () => { - clearInterval(interval); - } - }, []); + const interval = setInterval( + () => { + fetchEmployees(); + fetchRSS(); + fetchEvents(); + }, 5000 + ) - useEffect(() => { - filterData(); - }, [searchString]) + return () => { + clearInterval(interval); + } + }, []); - const fetchEmployees = async () => { - try { - const data = await fetch('http://localhost:5000/employees'); + useEffect(() => { + filterData(); + }, [searchString]) - if (data.ok) { - const json_data = await data.json(); - setEmployees(json_data) - } + const fetchEmployees = async () => { + try { + const data = await fetch('http://localhost:5000/employees'); - } catch { + if (data.ok) { + const json_data = await data.json(); + setEmployees(json_data) + } - } - } + } catch { - const fetchEvents = async () => { - try { - const data = await fetch('http://localhost:5000/events'); - - if (data.ok) { - const json_data = await data.json(); - setEvents(json_data) - } - - } catch { - - } - } - - const fetchRSS = async () => { - try { - const response = await fetch("http://127.0.0.1:5000/rss"); - - if (response.ok) { - const json_data = await response.json(); - setNews(json_data); - } - - } catch (error) { - console.error("Ошибка загрузки RSS:", error); - } - }; - - const filterData = (data, fields) => { - if (data === undefined) { - return data; + } } - if (!searchString.trim()) return data; + const fetchEvents = async () => { + try { + const data = await fetch('http://localhost:5000/events'); - return data.filter(item => - fields.some(field => - String(item[field] || "").toLowerCase().includes(searchString.toLowerCase()) - ) + if (data.ok) { + const json_data = await data.json(); + setEvents(json_data) + } + + } catch { + + } + } + + const fetchRSS = async () => { + try { + const response = await fetch("http://127.0.0.1:5000/rss"); + + if (response.ok) { + const json_data = await response.json(); + setNews(json_data); + } + + } catch (error) { + console.error("Ошибка загрузки RSS:", error); + } + }; + + const filterData = (data, fields) => { + if (data === undefined) { + return data; + } + + if (!searchString.trim()) return data; + + return data.filter(item => + fields.some(field => + String(item[field] || "").toLowerCase().includes(searchString.toLowerCase()) + ) + ); + }; + + const filteredEmployees = filterData(employees, ["last_name", "first_name", "patronymic", "post", "email", "phone", "birthday"]); + const filteredEvents = filterData(events, ["title", "description", "author"]); + const filteredNews = filterData(news, ["title", "description"]); + + return ( + <> +
+
+ +
+

+ Сотрудники +

+ +
+ + {filteredEmployees.length > 0 ? ( + filteredEmployees.map( + (employee) => ( + + ) + ) + ) : ( +

Сотрудники не найдены

+ )} + +
+ +
+ +
+ +
+ +
+

+ Календарь +

+ + +
+ +
+

+ События +

+ + {filteredEvents.length > 0 ? (filteredEvents.map( + (event, index) => ( + + ) + )) : ( +

События не найдены

+ )} + +
+ +
+ +
+

+ Новости +

+ +
+ {filteredNews.length > 0 ? (filteredNews.map((article, index) => ( + + ))) : ( +

Новости не найдены

+ ) + } +
+ +
+ +
+ +
+ ); - }; - - const filteredEmployees = filterData(employees, ["last_name", "first_name", "patronymic", "post", "email", "phone", "birthday"]); - const filteredEvents = filterData(events, ["title", "description", "author"]); - const filteredNews = filterData(news, ["title", "description"]); - - return ( - <> -
-
- -
-

- Сотрудники -

- -
- - {filteredEmployees.length > 0 ? ( - filteredEmployees.map( - (employee) => ( - - ) - ) - ) : ( -

Сотрудники не найдены

- )} - -
- -
- -
- -
- -
-

- Календарь -

-
- -
-

- События -

- - {filteredEvents.length > 0 ? (filteredEvents.map( - (event, index) => ( - - ) - )) : ( -

События не найдены

- )} - -
- -
- -
-

- Новости -

- -
- {filteredNews.length > 0? (filteredNews.map((article, index) => ( - - ))) : ( -

Новости не найдены

- ) - } -
- -
- -
- -
- - ); }