Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into features/adminImplement

Browse Source
This commit is contained in:
p2405951
2026-01-13 12:10:33 +01:00
parent b0f0aec16e 2b3bd4a864
commit 46d6a8ab60
51 changed files with 874 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Filter/Filter.jsx
+13 -8
View File
@@ -1,4 +1,5 @@
import styles from "./Filter.module.css";
import Button from "../ui/button/button.jsx"
function Filter({isFilterVisible, filters, setFilters}){
const setAlphabeticalOrder = (order) => {
@@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){
return (
<div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
<abbr title="Tri alphabétique croissant (A à Z)">
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setAlphabeticalOrder("asc")}>
<img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
</button>
</Button>
</abbr>
<abbr title="Tri alphabétique décroissant (Z à A)">
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setAlphabeticalOrder("desc")}>
<img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
</button>
</Button>
</abbr>
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setYearOrder("desc")}>
<img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
</button>
</Button>
</abbr>
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setYearOrder("asc")}>
<img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
</button>
</Button>
</abbr>
</div>
)
src/components/Header/Header.jsx
+83 -26
View File
@@ -1,26 +1,59 @@
import styles from "./Header.module.css"
import { Link, NavLink } from "react-router";
import {useContext, useEffect, useRef, useState} from "react";
import getUserNotifications from "../../utils/getUserNotifications.js";
import {AuthContext} from "../../contexts/auth/AuthContext.js";
import styles from "./Header.module.css"
import getUserNotifications from "../../utils/notifications/getUserNotifications.js";
import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js";
import initEcho from "../../utils/echo/initEcho.js"
import readNotifications from "../../utils/notifications/readNotifications.js";
import getUser from "../../utils/getUser.js";
import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener";
import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
import NotificationCard from "../NotificationCard/NotificationCard.jsx";
function Header() {
const { update, user } = useContext(AuthContext);
const [notificationMenu, setnotificationMenu] = useState(false);
const [unreadNotification, setunreadNotification] = useState(true);
const [unreadNotification, setunreadNotification] = useState(false);
const [mobileMenu, setMobileMenu] = useState(false);
const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
const [notifications, setNotifications] = useState([]);
const notificationRef = useRef(null);
const { user } = useContext(AuthContext);
useEffect(() => {
async function loadNotifications() {
const notifData = await getUserNotifications();
setNotifications(notifData || []);
let echoInstance = null;
let channelsToLeave = [];
async function initializeHeader() {
try {
const [userData, notifData] = await Promise.all([
getUser(),
getUserNotifications()
]);
const data = notifData || [];
setNotifications(data);
const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1);
setunreadNotification(hasUnread);
const echo = initEcho();
echoInstance = echo;
const activeChannels = [
userCreatedListener(echo, userData, setNotifications, setunreadNotification),
userNotificationsListener(echo, userData, setNotifications, setunreadNotification),
];
channelsToLeave = activeChannels.filter(name => name !== null);
} catch (err) {
console.error("Erreur initialisation Header:", err);
}
}
//loadNotifications();
initializeHeader();
const handleClickOutside = (event) => {
if (
notificationRef.current &&
@@ -32,11 +65,48 @@ function Header() {
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
if (echoInstance) {
channelsToLeave.forEach(chan => echoInstance.leave(chan));
}
};
}, []);
const toggleNotificationMenu = async () => {
try {
setnotificationMenu(!notificationMenu);
if (unreadNotification) {
const result = await readNotifications();
if (result) {
setunreadNotification(false);
update();
}
}
} catch (err) {
console.error('Erreur suppression notification :', err);
}
}
async function deleteNotification(notificationId) {
try {
const result = await deleteNotificationUser(notificationId);
if (result) {
setNotifications(prev => prev.filter(n => n.id !== notificationId));
update();
}
} catch (err) {
console.error('Erreur suppression notification :', err);
}
}
return (
<div className={styles.headerContainer}>
<header className={`${styles.header} glassCard`}>
@@ -66,10 +136,7 @@ function Header() {
<div className={styles.headerRightContent}>
<button
className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
onClick={() => {
setnotificationMenu(!notificationMenu);
setunreadNotification(false);
}}
onClick={() => {toggleNotificationMenu();}}
>
<img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
{unreadNotification && <span className={styles.notificationBadge}></span>}
@@ -119,17 +186,7 @@ function Header() {
{notifications.length === 0 ? (
<p className={styles.notification}>Vous n'avez aucune notification !</p>
) : (
notifications.map((notification, index) => (
<div className={styles.notification} key={index}>
<p>{notification.content}</p>
<button
className={styles.closeBtn}
onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
>
<img src="/close.svg" alt="supprimer la notification"/>
</button>
</div>
))
<NotificationCard notifications={notifications} deleteNotification={deleteNotification} />
)}
</div>
</div>
src/components/Header/Header.module.css
+4 -11
View File
@@ -150,13 +150,16 @@
.notificationDiv {
position: absolute;
width: 250px;
width: 300px;
top: 105%;
right: 2rem;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 0;
max-height: 60vh;
overflow: scroll;
scrollbar-width: none;
}
.activeNotificationDiv {
@@ -183,16 +186,6 @@
border-radius: 50%;
}
.closeBtn {
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background: none;
margin: 0;
width: fit-content;
}
.closeBtn:focus {
outline: none;
src/components/IncompleteEvent/IncompleteEvent.module.css
-1
View File
@@ -23,7 +23,6 @@
min-height: 250px;
max-height: 250px;
overflow-y: auto;
padding: 10px;
text-align: center;
box-sizing: border-box;
opacity: 0;
src/components/NotificationCard/NotificationCard.jsx
+34
View File
@@ -0,0 +1,34 @@
import formatDate from "../../utils/date/formatDate.js";
import formatTime from "../../utils/date/formatTime.js";
import styles from "./NotificationCard.module.css"
function NotificationCard({notifications, deleteNotification}) {
return (
notifications.map((notification, index) => (
<div className={styles.notificationCard} key={index}>
<div className={styles.cardHeader}>
<span className={styles.timeTag}>
Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
</span>
<button
className={styles.closeIconButton}
onClick={() => deleteNotification(notification.id)}
title="Supprimer"
>
✕
</button>
</div>
<div className={styles.cardContent}>
<p className={styles.message}>
{notification.content}
</p>
</div>
</div>
))
);
}
export default NotificationCard;
src/components/NotificationCard/NotificationCard.module.css
+44
View File
@@ -0,0 +1,44 @@
.notificationCard {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: background 0.2s ease;
}
.cardHeader {
display: flex;
justify-content: space-between;
align-items: center;
}
.timeTag {
color: #019AFF;
letter-spacing: 0.2px;
}
.message {
margin: 0;
font-size: 1.1rem;
line-height: 1.5;
color: #2c3e50;
font-weight: 400;
}
.closeIconButton {
background: none;
border: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
color: #2c3e50;
}
.closeIconButton:hover {
color: #cc0000;
}
src/components/SearchBar/SearchBar.jsx
+2 -2
View File
@@ -1,8 +1,8 @@
import styles from "./SearchBar.module.css"
import {Link} from "react-router";
import {useEffect, useState} from "react";
import searchEvents from "../../utils/searchEvents.js";
import searchUsers from "../../utils/searchUsers.js";
import searchEvents from "../../utils/events/searchEvents.js";
import searchUsers from "../../utils/users/searchUsers.js";
import { useLocation } from "react-router";
src/components/Task/Task.jsx
+1 -1
View File
@@ -1,5 +1,5 @@
import React, {useEffect, useState} from "react";
import getEventById from "../../utils/event/getEventById.js";
import getEventById from "../../utils/events/getEventById.js";
import styles from "./Task.module.css";
import formatDate from "../../utils/date/formatDate.js";
src/components/ToolBar/ToolBar.jsx
+5 -4
View File
@@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx";
import {useEffect, useState} from "react";
import SearchBar from "../SearchBar/SearchBar.jsx";
import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
import Button from "../ui/button/button.jsx";
function ToolBar({setFilters, filters, showCreate = true}) {
@@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) {
<CreateEventBtn />
) : null}
<button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
<Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
<img src="search.svg" alt="Rechercher"/>
</button>
</Button>
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
<button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
<Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
<img src="filter.svg" alt="Filtrer"/>
</button>
</Button>
<div className={styles.filterMenu}>
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
</div>
src/components/background/background.module.css
-1
View File
@@ -1,4 +1,3 @@
/* BACKGROUND ////////////////////////////////////////////////////////*/
.backgroundContainer {
z-index: 0;
margin: 0;
src/components/createEventBtn/CreateEventBtn.jsx
+23 -5
View File
@@ -3,7 +3,7 @@ import { useState } from "react";
import Modal from "../ui/modal/modal.jsx";
import Button from "../ui/button/button.jsx";
import TextInput from "../ui/input/input.jsx";
import createEvent from "../../utils/event/createEvent.js"
import createEvent from "../../utils/events/createEvent.js"
export default function CreateEventBtn() {
@@ -11,10 +11,15 @@ export default function CreateEventBtn() {
const [isOpen, setIsOpen] = useState(false);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [start, setStart] = useState("");
const [end, setEnd] = useState("");
const handleCreateEvent = async () => {
if(name !== "" || description !== "") await createEvent(name, description);
if(name !== "" || description !== "" || start !== "" || end !== "") {
await createEvent(name, description, start, end);
console.log(start);
}
setIsOpen(false);
}
@@ -26,16 +31,29 @@ export default function CreateEventBtn() {
<section className={styles.section}>
<div className={styles.inputContainer}>
<h2>Titre</h2>
<TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
<TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
</div>
<div className={styles.inputContainer}>
<h2>Description</h2>
<TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
<TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
</div>
<div className={styles.inputContainer}>
<h2>Date</h2>
<div className={styles.dateInputContainer}>
<div className={styles.dateInput}>
<p>Début</p>
<TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
</div>
<div className={styles.dateInput}>
<p>Fin</p>
<TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
</div>
</div>
</div>
<Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
</section>
</Modal>
</>
src/components/createEventBtn/createEventBtn.module.css
+18
View File
@@ -26,6 +26,14 @@
}
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input {
width: 70%;
}
.create {
@@ -38,4 +46,14 @@
gap: 10px;
margin-top: 15px;
margin-bottom: 15px;
}
.dateInputContainer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dateInput {
margin: 1em;
}
src/components/homePage/calendar.jsx
+55 -75
View File
@@ -1,30 +1,39 @@
import {useState} from "react";
import { useState, useMemo, useEffect } from "react";
import styles from "./calendar.module.css";
import formatDateLetter from "../../utils/date/formatDateLetter.js";
import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
function Calendar({ events = [] }) {
function Calendar() {
const events = {
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
"2025-11-14": ["Sortie cinéma"],
"2025-11-15": ["Sortie cinéma"],
"2025-11-17": ["Sortie cinéma"],
};
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const today = new Date();
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
const [currentYear, setCurrentYear] = useState(today.getFullYear());
const [selectedDay, setSelectedDay] = useState(() => {
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
const day = String(today.getDate()).padStart(2, "0");
const key = `${year}-${month}-${day}`;
return {date: key, events: events[key] || []};
});
const [currentYear] = useState(today.getFullYear());
const [selectedDay, setSelectedDay] = useState(null);
const eventsByDate = useMemo(() => {
return events.reduce((acc, ev) => {
if (!ev?.start) return acc;
const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
if (!acc[dateKey]) acc[dateKey] = [];
acc[dateKey].push(ev);
return acc;
}, {});
}, [events]);
useEffect(() => {
const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
setSelectedDay({
date: key,
events: eventsByDate[key] || []
});
}, [eventsByDate]);
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
@@ -34,87 +43,55 @@ function Calendar() {
for (let i = 0; i < startDay; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(i);
const handlePrevMonth = () => {
let newMonth = currentMonth - 1;
let newYear = currentYear;
if (newMonth < 0) {
newMonth = 11;
newYear--;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({date: key, events: events[key] || []});
};
const handleNextMonth = () => {
let newMonth = currentMonth + 1;
let newYear = currentYear;
if (newMonth > 11) {
newMonth = 0;
newYear++;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({date: key, events: events[key] || []});
const selectDay = (year, month, day) => {
const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
setSelectedDay({
date: key,
events: eventsByDate[key] || []
});
};
const handleDayClick = (day) => {
if (!day) return;
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
setSelectedDay({date: key, events: events[key] || []});
selectDay(currentYear, currentMonth, day);
};
return (
<div className={styles.glassCard}>
<div className={`${styles.glassCard} glassCard`}>
<div className={styles.calendarContainer}>
<div className={styles.calendarHeader}>
<button onClick={handlePrevMonth}>◀</button>
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
<p>{monthNames[currentMonth]} {currentYear}</p>
<button onClick={handleNextMonth}>▶</button>
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
</div>
<table className={styles.calendar}>
<thead>
<tr>
<th>Lun</th>
<th>Mar</th>
<th>Mer</th>
<th>Jeu</th>
<th>Ven</th>
<th>Sam</th>
<th>Dim</th>
<th>Lun</th><th>Mar</th><th>Mer</th>
<th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
</tr>
</thead>
<tbody>
{Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
<tr key={weekIndex}>
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
<tr key={w}>
{days.slice(w * 7, w * 7 + 7).map((day, i) => {
if (!day) return <td key={i}></td>;
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
const hasEvent = events[key];
const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
return (
<td
key={index}
key={i}
className={[
day === today.getDate() &&
currentMonth === today.getMonth() &&
currentYear === today.getFullYear()
? styles.today : "",
hasEvent ? styles.hasEvent : "",
selectedDay?.date === key ? styles.selected : ""
].join(" ")}
onClick={() => handleDayClick(day)}
>
{day || ""}
{day}
</td>
);
})}
@@ -124,13 +101,16 @@ function Calendar() {
</table>
{selectedDay && (
<div className={styles.eventBox}>
<h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
<div className={`${styles.eventBox} glassBorder`}>
<h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
{selectedDay.events.length > 0 ? (
<ul>
{selectedDay.events.map((ev, i) => (
<li key={i}>{ev}</li>
{selectedDay.events.map(ev => (
<li key={ev.id}>
<strong>{ev.name}</strong><br />
{ev.description}
</li>
))}
</ul>
) : (
src/components/homePage/calendar.module.css
+10 -13
View File
@@ -1,6 +1,5 @@
.calendarContainer {
padding: 20px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
@@ -107,20 +106,12 @@
.eventBox {
width: 100%;
border-radius: 20px;
padding: 15px;
margin-top: 16px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
.eventBox ul {
list-style-type: disc;
list-style: none;
}
.eventGroup{
@@ -138,8 +129,8 @@
.glassCard {
width: 45%;
max-height: 475px;
margin: 16px 0px 16px 0px;
max-height: 100%;
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
height: fit-content;
background: rgba(255, 255, 255, 0.65);
@@ -162,9 +153,15 @@
@media (max-width: 768px) {
.glassCard {
width: 100%;
margin: 0px;
margin-top: 16px;
margin-bottom: 16px;
max-height: 450px;
}
.calendarContainer {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
}
src/components/homePage/eventList.jsx
+22 -22
View File
@@ -1,47 +1,47 @@
import {useMemo} from "react";
import { useMemo } from "react";
import styles from "./eventList.module.css";
import formatDateLetter from "../../utils/date/formatDateLetter.js";
function eventList() {
const events = {
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
"2025-11-14": ["Sortie cinéma"],
"2025-11-15": ["Sortie cinéma"],
"2025-11-17": ["Sortie cinéma"],
};
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
function EventList({ events }) {
const sortedEvents = useMemo(() => {
return Object.entries(events)
.map(([dateKey, eventList]) => ({date: dateKey, events: eventList}))
.sort((a, b) => new Date(a.date) - new Date(b.date));
return [...events].sort(
(a, b) => new Date(a.start) - new Date(b.start)
);
}, [events]);
return (
<div className={styles.glassCard}>
<div className={styles.eventListContainer}>
<div className={`${styles.glassCard} glassCard`}>
<h2>Liste des événements à venir</h2>
{sortedEvents.length > 0 ? (
<ul className={styles.eventList}>
{sortedEvents.map((eventGroup) => (
<li key={eventGroup.date} className={styles.eventGroup}>
<div className={styles.eventDate}>
<strong>{formatDateLetter(eventGroup.date)}</strong>
<li key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}>
<div className={styles.eventTitle}>
<p className={styles.title}>{eventGroup.name}</p>
<p>{formatDateLetter(eventGroup.start)}</p>
</div>
{/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
<ul className={styles.eventDetails}>
{eventGroup.events.map((event, i) => (
<li key={i}>- {event}</li>
{eventGroup.tasks.map((task, i) => (
<li key={i} className={styles.eventTasks}>
<p>- {task.name} - {task.description}</p>
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
</li>
))}
</ul>
</li>
))}
</ul>
) : (
<p>Aucun événement planifié pour l'instant.</p>
)}
</div>
</div>
);
}
export default eventList;
export default EventList;
src/components/homePage/eventList.module.css
+25 -7
View File
@@ -1,7 +1,7 @@
.glassCard {
width: 45%;
max-height: 475px;
margin: 16px 0px 16px 0px;
max-height: 100%;
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
height: fit-content;
background: rgba(255, 255, 255, 0.65);
@@ -35,9 +35,8 @@
}
.eventDetails {
list-style: none;
margin-top: 10px;
padding: 0;
margin: 0;
}
.dateSelected{
@@ -45,20 +44,39 @@
}
h2{
font-size: 30px;
display: flex;
justify-content: center;
}
.eventListContainer{
width: 100%;
.eventGroup{
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
}
.eventTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.title {
font-weight: bold;
}
.eventTasks {
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 768px) {
.glassCard {
width: 100%;
margin: 0px;
margin-top: 16px;
margin-bottom: 16px;
max-height: 450px;
display: flex;
flex-direction: column;
}
}
src/components/loginform/loginForm.module.css
+2 -2
View File
@@ -5,7 +5,7 @@
input {
width: 100%;
height: 60px;
padding: 0px 10px;
padding: 0 10px;
border: none;
border-radius: 10px;
font-size: 19px;
@@ -33,9 +33,9 @@ input::placeholder{
.inputContainer {
padding: 15px;
width: 100%;
}
/* style scoped (module) */
.loginButton {
display: inline-block;
height: 50px;
src/index.css
+22 -25
View File
@@ -52,33 +52,30 @@ body {
}
/*.glassCard {
width: 100%;
height: fit-content;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
position: relative;
overflow: hidden;
}*/
/* style a montrer a giovanni prcq il est + bo */
.glassCard {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 10px 20px 10px 20px;
background: rgba(255, 255, 255, 0.54);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
}
.glassBorder{
border-radius: 20px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3.2em;
line-height: 1.1;
src/layout.jsx
+1 -1
View File
@@ -11,7 +11,7 @@ function Layout(){
const { user, loading } = useContext(AuthContext);
if (loading) return <p>Loading</p>;
if (loading) return <p>Loading</p>;
if (!user) return <Navigate to="/login" />;
if(user && user.validate === 0) return <Navigate to="/error/validation" />;
src/pages/Admin/AdminPage.jsx
+16 -16
View File
@@ -12,24 +12,24 @@ function AdminPage() {
const { user } = useContext(AuthContext);
const navigate = useNavigate();
const [selected, setSelected] = useState("3");
const [participationRate, setParticipationRate] = useState(89);
const [selected, setSelected] = useState("3");
const [participationRate] = useState(89);
/*if(!user.isAdmin) navigate("/");*/
if(!user.isAdmin) navigate("/");
return (
<div className={styles.container}>
<ParticipationChart
selected={selected}
setSelected={setSelected}
participationRate={participationRate}
/>
<div className={styles.rightSection}>
<IncompleteEvents />
<PendingMembers />
</div>
</div>
);
return (
<div className={styles.container}>
<ParticipationChart
selected={selected}
setSelected={setSelected}
participationRate={participationRate}
/>
<div className={styles.rightSection}>
<IncompleteEvents />
<PendingMembers />
</div>
</div>
);
}
export default AdminPage;
src/pages/Events/EventsPage.jsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import Event from "../../components/Event/Event.jsx";
import styles from "./EventsPage.module.css";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import getAllEvents from "../../utils/event/getAllEvents.js";
import getAllEvents from "../../utils/events/getAllEvents.js";
import filter from "../../utils/filter.js";
src/pages/Home/HomePage.jsx
+15 -4
View File
@@ -1,15 +1,26 @@
import styles from "./HomePage.module.css";
import Calendar from "../../components/homePage/calendar.jsx";
import EventList from "../../components/homePage/eventList.jsx";
import { useState, useEffect } from "react";
import getAllEvents from "../../utils/events/getAllEvents.js";
function HomePage() {
const [events, setEvents] = useState([]);
useEffect(() => {
(async () => {
const data = await getAllEvents();
setEvents(data.data);
}) ()
}, [])
return (
<div className={styles.allContent}>
<Calendar />
<EventList />
<Calendar events={events} />
<EventList events={events} />
</div>
);
}
export default HomePage;
export default HomePage;
src/pages/Home/HomePage.module.css
+8 -7
View File
@@ -1,13 +1,14 @@
.allContent{
display: flex;
flex-direction: row;
justify-content: center;
gap: 80px;
}
@media (max-width: 768px) {
.allContent{
display: flex;
flex-direction: column;
gap: 0px;
gap: 0;
}
}
.allContent{
display: flex;
flex-direction: row;
gap: 7%;
}
src/pages/Login/LoginPage.jsx
+6 -1
View File
@@ -10,11 +10,16 @@ function LoginPage() {
const { user, loading } = useContext(AuthContext)
const navigate = useNavigate();
useEffect(() => {
console.log("loading" + loading);
console.log("user" + user);
if (!loading && user) {
navigate("/");
}
}, [loading, user]);
}, [loading, navigate, user]);
return (
<Background>
src/pages/Profile/ProfilePage.jsx
+2 -2
View File
@@ -24,11 +24,11 @@ function ProfilePage() {
<h2> {user.name} {user.lastname} </h2>
</div>
<div className={styles.topDescription}>
<div className={styles.infoBlock}>
<div className={`${styles.infoBlock} glassBorder`}>
<p><strong>Role :</strong> {user.role}</p>
<p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
</div>
<div className={styles.infoBlock}>
<div className={`${styles.infoBlock} glassBorder`}>
<p><strong>Mail :</strong> {user.email} </p>
<p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
</div>
src/pages/Profile/ProfilePage.module.css
-3
View File
@@ -47,9 +47,7 @@
.infoBlock {
width: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
}
.eventTasks {
@@ -131,7 +129,6 @@
margin-bottom: 20px;
}
/* Desktop (1024px et plus) */
@media screen and (min-width: 1024px) {
.container {
max-width: 100%;
src/pages/Register/RegisterPage.jsx
+1 -1
View File
@@ -117,7 +117,7 @@ function RegisterPage() {
<div className={styles.logButton}>
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
<Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
<Button variant={"default"} onClick={handleSubmit}> Créer le compte </Button>
</div>
</div>
</div>
src/pages/Register/RegisterPage.module.css
+1
View File
@@ -40,4 +40,5 @@ h1 {
.inputContainer {
padding: 15px;
width: 100%;
}
src/pages/VolunteerProfile/VolunteerProfilePage.module.css
-1
View File
@@ -131,7 +131,6 @@
margin-bottom: 20px;
}
/* Desktop (1024px et plus) */
@media screen and (min-width: 1024px) {
.container {
max-width: 100%;
src/pages/eventDetail/eventDetail.jsx
+70
View File
@@ -0,0 +1,70 @@
import {useState} from "react";
import styles from "./eventDetail.module.css";
import { useParams } from "react-router";
function eventDetail() {
const params = useParams();
const id = params.id;
const [tasks, setTasks] = useState([
{ text: "Préparer les slides", registered: false },
{ text: "Réserver la salle", registered: false },
{ text: "Envoyer les invitations", registered: false },
{ text: "Tester la configuration technique", registered: false },
{ text: "Organiser le catering", registered: false },
]);
const event = {
title: "Conférence React 2025",
date: "27 Décembre 2025",
location: "Paris, France",
description: "azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop"
};
const toggleRegister = (index) => {
setTasks((prevTasks) =>
prevTasks.map((task, i) =>
i === index
? { ...task, registered: !task.registered }
: task
)
);
};
return (
<div className={styles.allContent}>
<div className={`glassCard`}>
<div className={styles.textImage}>
<img src="/public/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
<div className={styles.eventInfo}>
<h2>{event.title}</h2>
<p>Date: {event.date}</p>
<p>Lieu: {event.location}</p>
<p>Description: {event.description}</p>
</div>
</div>
<h2>Tâches</h2>
<ul className={styles.tasks}>
{tasks.map((task, index) => (
<li style={{"--i": index}} key={index}>
<div className={styles.tasksButton}>
<span><strong>{task.text}</strong></span>
<button
className={styles.registerButton}
onClick={() => toggleRegister(index)}
>
{task.registered ? "Se désinscrire" : "S’inscrire"}
</button>
</div>
</li>
))}
</ul>
</div>
</div>
);
}
export default eventDetail;
src/pages/eventDetail/eventDetail.module.css
+92
View File
@@ -0,0 +1,92 @@
.allContent{
margin: 16px 0px 16px 0px;
align-self: center;
width: 90%;
}
.textImage {
display: flex;
gap: 24px;
}
.eventImage {
width: 40%;
aspect-ratio: 16 / 9;
background-color: #e0e0e0;
border-radius: 16px;
flex-shrink: 0;
}
.eventInfo {
flex: 1;
min-width: 0;
overflow-wrap: break-word;
}
.eventInfo p {
white-space: normal;
overflow-wrap: break-word;
}
.eventImage {
width: 40%;
height: 100%;
aspect-ratio: 16 / 9;
background-color: #e0e0e0;
border-radius: 16px;
flex-shrink: 0;
}
.registerButton {
margin-left: auto;
padding: 5px 10px;
border-radius: 12px;
border: none;
cursor: pointer;
background: #019AFF;
color: white;
font-weight: 600;
}
.registerButton:hover {
opacity: 0.85;
}
.tasksButton {
display: flex;
align-items: center;
gap: 16px;
}
.tasks {
list-style: none;
padding: 0;
}
.tasks li {
margin: 16px 0px 16px 0px;
padding: 10px 20px 10px 20px;
border-radius: 20px;
border: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
animation-delay: calc(var(--i) * 0.1s);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
src/router.js
+6 -1
View File
@@ -10,6 +10,7 @@ import AdminPage from "./pages/Admin/AdminPage.jsx";
import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx";
import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx";
import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx";
import eventDetail from "./pages/eventDetail/eventDetail.jsx";
const router = createBrowserRouter([
{
@@ -59,7 +60,11 @@ const router = createBrowserRouter([
{
path: "/profile/:id",
Component: VolunteerProfilePage,
}
},
{
path: "/events/:id",
Component: eventDetail,
},
]
}
])
src/utils/date/formatDateLetter.js
+18 -4
View File
@@ -1,8 +1,22 @@
export default function formatDateLetter(d) {
export function formatDateLetter(d) {
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const [year, month, day] = d.split('-');
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
};
const [datePart, timePart] = d.split(' ');
const [year, month, day] = datePart.split('-');
const [hours, minutes] = timePart.split(':');
return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`;
}
export function formatDateLetterJS(d) {
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const [year, month, day] = d.split('-');
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
}
src/utils/date/formatTime.js
+8
View File
@@ -0,0 +1,8 @@
export default function formatTime(d) {
const date = new Date(d);
const hh = String(date.getUTCHours()).padStart(2, '0');
const min = String(date.getUTCMinutes()).padStart(2, '0');
return `${hh}:${min}`;
}
src/utils/echo/initEcho.js
+21
View File
@@ -0,0 +1,21 @@
import Echo from "laravel-echo";
import Pusher from "pusher-js";
window.Pusher = Pusher;
export default function initEcho() {
const echoInstance = new Echo({
broadcaster: import.meta.env.VITE_BROADCASTER,
key: import.meta.env.VITE_REVERB_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: Number(import.meta.env.VITE_REVERB_PORT),
forceTLS: import.meta.env.VITE_FORCE_TLS === 'true',
disableStats: import.meta.env.VITE_DISABLE_STATS === 'true',
encrypted: import.meta.env.VITE_ENCRYPTED === 'true',
cluster: import.meta.env.VITE_CLUSTER,
enabledTransports: ['ws', 'wss'],
});
window.Echo = echoInstance;
return echoInstance;
}
src/utils/echo/listeners/userCreatedListener.js
+18
View File
@@ -0,0 +1,18 @@
export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification) => {
if (userData.isAdmin || userData.role === "Gérant") {
const channelName = "users.registration";
echo.private(channelName)
.listen(".users.registration", (event) => {
const newNotification = {
id: Date.now(),
content: `Nouvelle demande d'inscription : ${event.user.name} ${event.user.lastname}`,
created_at: Date.now(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setunreadNotification(true);
});
return channelName;
}
return null;
};
src/utils/echo/listeners/userNotificationsListener.js
+47
View File
@@ -0,0 +1,47 @@
export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => {
if (!userData?.id) return null;
const channelName = `user.${userData.id}`;
return echo.private(channelName)
.listen('.event.participation.cancelled', (event) => {
const newNotification = {
id: Date.now(),
content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
created_at: Date.now(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setunreadNotification(true);
})
.listen(`.task.participation.cancelled`, (event) => {
const newNotification = {
id: Date.now(),
content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
created_at: Date.now(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setunreadNotification(true);
})
.listen('.volunteer.assigned.to.task', (event) => {
const newNotification = {
id: Date.now(),
content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`,
created_at: Date.now(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setunreadNotification(true);
})
.listen('.volunteer.unassigned.to.task', (event) => {
const newNotification = {
id: Date.now(),
content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`,
created_at: Date.now(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setunreadNotification(true);
});
};
src/utils/event/createEvent.js → src/utils/events/createEvent.js
+2 -2
View File
@@ -1,6 +1,6 @@
import getXSRFToken from "../getXSRF.js";
export default async function createEvent(name, description) {
export default async function createEvent(name, description, start, end) {
const csrfToken = await getXSRFToken();
try {
@@ -12,7 +12,7 @@ export default async function createEvent(name, description) {
'X-XSRF-TOKEN': csrfToken,
'Accept': 'application/json'
},
body: JSON.stringify({ name, description }),
body: JSON.stringify({ name, description, start, end }),
});
const data = await response.json();
src/utils/event/eventCounter.js → src/utils/events/eventCounter.js
View File
src/utils/event/getAllEvents.js → src/utils/events/getAllEvents.js
View File
src/utils/event/getEventById.js → src/utils/events/getEventById.js
View File
src/utils/searchEvents.js → src/utils/events/searchEvents.js
View File
src/utils/filter.js
+2 -2
View File
@@ -4,9 +4,9 @@ function filter(elements, filters, type) {
const dB = new Date(dateB);
if (filters.yearOrder === "asc") {
return dA - dB; // plus ancien -> plus récent
return dA - dB;
} else {
return dB - dA; // plus récent -> plus ancien
return dB - dA;
}
};
src/utils/notifications/deleteNotificationUser.js
+26
View File
@@ -0,0 +1,26 @@
import getXSRFToken from "../getXSRF.js";
export default async function deleteNotificationUser(notificationId) {
const csrfToken = await getXSRFToken();
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/delete/notification/${notificationId}`, {
method: 'DELETE',
credentials: 'include',
headers: {
'Accept': 'application/json',
'X-XSRF-TOKEN': csrfToken
}
});
if (!res.ok) {
throw new Error(`Erreur serveur : ${res.status}`);
}
const data = await res.json();
return data;
} catch (err) {
console.error('Erreur :', err);
return null;
}
}
src/utils/getUserNotifications.js → src/utils/notifications/getUserNotifications.js
+1 -1
View File
@@ -1,7 +1,7 @@
export default async function getUserNotifications() {
try {
const response = await fetch(
'http://localhost:80/api/users/1/notifications',
`http://${import.meta.env.VITE_API_URL}/api/users/notifications`,
{
method: 'GET',
credentials: 'include',
src/utils/notifications/readNotifications.js
+27
View File
@@ -0,0 +1,27 @@
import getXSRFToken from "../getXSRF.js";
export default async function readNotifications() {
const csrfToken = await getXSRFToken();
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/notifications/read`, {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json',
'X-XSRF-TOKEN': csrfToken,
'Content-Type': 'application/json',
},
});
if (!res.ok) {
throw new Error(`Erreur serveur : ${res.status}`);
}
return await res.json();
} catch (err) {
console.error('Erreur :', err);
return null;
}
}
src/utils/searchUsers.js → src/utils/users/searchUsers.js
View File