frontend: make snowflakes slower

backend/src/user.py

@@ -138,6 +138,34 @@ def registerUserEndpoints(app, database):
         except Exception as e:
             return jsonify(success=False, message=str(e)), 500
 
+    @app.route('/users/attendance/all', methods=['GET'])
+    def get_attendance_all():
+        token = request.args.get('token')
+
+        if not token:
+            return jsonify(success=False, message="Token is required"), 400
+
+        query_session = "SELECT * FROM sessions WHERE Token=%s"
+        
+        try:
+            result = database.query(query_session, params=(token,))
+            if not result:
+                return jsonify(success=False, message="Token is invalid or expired"), 401
+
+            attendance_query = "SELECT Name, Attendance FROM users"
+            attendance_result = database.query(attendance_query)
+
+            if not attendance_result:
+                return jsonify(success=False, message="No users found"), 404
+            
+            attendance_list = [{"name": row[0], "attendance": row[1]} for row in attendance_result]
+            
+            return jsonify(success=True, attendance_list=attendance_list), 200
+
+        except Exception as e:
+            return jsonify(success=False, message=str(e)), 500
+
+
 
 
 

frontend/src/components/AttendnaceTable.tsx

@@ -1,16 +1,60 @@
+import { useEffect, useState } from "react";
+import useFetchUser from "../utils/fetchUser";
 import CenteredContainer from "./ChildrenContainer";
+import type { User } from "../types";
+
+const processAttendance = (attendance: boolean | null): string => {
+    if (attendance == null) {
+        return "Пока не ответил"
+    }
+    return (attendance == true) ? "Да!" : "Не в этот раз"
+}
 
 function AttendanceTable() {
 
+    const {getAttendanceAll} = useFetchUser()
+    const [userAttendanceData, setUserAttendnaceData] = useState<User[]>([])
+
+    const fetchUserData = async () => {
+        const userData = await getAttendanceAll()
+        setUserAttendnaceData(userData)
+    }
+
+    const handleRefresh = () => {
+        fetchUserData()
+    }
+
+    useEffect(() => {
+        fetchUserData()
+    }, [])
+
     return (
         <>
             <CenteredContainer>
                 <h2>Кто празднует?</h2>
-                <p className="mainText">
-                    Вскоре, вы сможете видеть всех, кто приедет и будет праздновать с нами. Данная фича по полной в разработке!
-                    <br/><br/>
-                    Таблица в производстве... Ожидайте к <b>началу-середние ноября</b>
-                </p>
+                {userAttendanceData && (
+                    <div className="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Пятка</th>
+                                    <th>Празднует с нами?</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {userAttendanceData && userAttendanceData.map((item) => (
+                                    <tr>
+                                        <td>{item.name}</td>
+                                        <td>{processAttendance(item.attendance)}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                        <p className="scroll-instruction">Таблицу можно скроллить</p>
+                    </div>
+                )}
+                <br/>
+                <button onClick={handleRefresh}>Обновить</button>
             </CenteredContainer>
         </>
     )

frontend/src/components/Snowflakes.css

@@ -14,7 +14,7 @@
     top: -10%; /* Start above the top of the screen */
     color: white; /* Snowflake color */
     font-size: 1em; /* Size of the snowflake; adjust as needed */
-    opacity: 0.8; /* Transparency */
+    opacity: 0.5; /* Transparency */
     animation: fall linear infinite; /* Apply the fall animation */
 }
 

frontend/src/components/Snowflakes.tsx

@@ -13,7 +13,7 @@ const Snowflakes: React.FC = () => {
                     className="snowflake"
                     style={{
                         left: `${Math.random() * 100}vw`, // Random position across the full width
-                        animationDuration: `${Math.random() * 3 + 2}s`, // Random fall duration between 2s and 5s
+                        animationDuration: `${Math.random() * 20 + 10}s`, // Random fall duration between 2s and 5s
                     }}
                 >
                     ❄️

frontend/src/types/index.d.ts

@@ -10,3 +10,8 @@ export interface Furniture {
 export interface Hosting {
     furniture: Furniture[]; // Array of furniture items
 }
+
+export interface User {
+    attendance: boolean | null
+    name: string
+}

frontend/src/utils/fetchUser.tsx

@@ -2,6 +2,7 @@ import { useCookies } from 'react-cookie';
 import { API_URL } from '../constants/constants';
 import { hashPassword } from './hashPassword';
 import { useState } from 'react';
+import type { User } from '../types';
 
 const useFetchUser = () => {
     const [isLoading, setIsLoading] = useState(false)
@@ -162,7 +163,30 @@ const useFetchUser = () => {
         }
     }
 
-    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading };
+    const getAttendanceAll = async (): Promise<User[]> => {
+        const token = apiCookie.apiToken
+        try {
+            const response = await fetch(`${API_URL}/users/attendance/all?token=${encodeURIComponent(token)}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const data = await response.json();
+
+            if (!data.success) throw new Error(data.message);
+
+            return data.attendance_list
+        } catch (error) {
+            console.error('Error retrieving attendance:', error);
+            return []
+        }
+    }
+
+
+    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading, getAttendanceAll };
 };
 
 export default useFetchUser;