251 lines
9.4 KiB
React
251 lines
9.4 KiB
React
import {useState} from "react";
|
||
import Event from "../../components/Event/Event.jsx";
|
||
import {Link} from "react-router";
|
||
import styles from "./EventsPage.module.css";
|
||
import Filter from "../../components/Filter/Filter.jsx";
|
||
|
||
|
||
|
||
function EventsPage(){
|
||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||
const toggleFilters = () => {
|
||
setIsFilterVisible(prev => !prev);
|
||
};
|
||
|
||
const [filters, setFilters] = useState({
|
||
alphabetical: "asc",
|
||
yearOrder: "asc",
|
||
});
|
||
|
||
const [events] = useState([
|
||
{
|
||
id: 1,
|
||
name: "Marathon de la Ville",
|
||
description: "Participez au marathon annuel et soutenez les associations locales.",
|
||
image: null,
|
||
tasks: [
|
||
{
|
||
name: "Inscription des participants",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Centre sportif",
|
||
description: "Accueillir et enregistrer tous les coureurs.",
|
||
volunteers_count: 5
|
||
},
|
||
{
|
||
name: "Distribution des dossards",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle principale",
|
||
description: "Remettre les dossards et goodies aux participants.",
|
||
volunteers_count: 3
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Festival de Musique d’Été",
|
||
description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.",
|
||
image: null,
|
||
tasks: [
|
||
{
|
||
name: "Montage de la scène",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Parc central",
|
||
description: "Installer la scène, les éclairages et le son.",
|
||
volunteers_count: 6
|
||
},
|
||
{
|
||
name: "Accueil du public",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Entrée principale",
|
||
description: "Vérifier les billets et orienter les visiteurs.",
|
||
volunteers_count: 4
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Conférence Tech Innovante",
|
||
description: "Journée de conférences et workshops autour des nouvelles technologies.",
|
||
image: null,
|
||
tasks: [
|
||
{
|
||
name: "Préparation des salles",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Campus Tech",
|
||
description: "Installer les chaises, projecteurs et matériel pour les conférences.",
|
||
volunteers_count: 4
|
||
},
|
||
{
|
||
name: "Accueil des intervenants",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Hall principal",
|
||
description: "Assister les speakers et orienter vers les salles.",
|
||
volunteers_count: 2
|
||
},
|
||
{
|
||
name: "Gestion du buffet",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle de restauration",
|
||
description: "Distribuer boissons et repas aux participants.",
|
||
volunteers_count: 3
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Atelier de Jardinage Urbain",
|
||
description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
|
||
image: null,
|
||
tasks: [
|
||
{
|
||
name: "Installation du matériel",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Jardin partagé",
|
||
description: "Préparer outils et terreaux pour les participants.",
|
||
volunteers_count: 2
|
||
},
|
||
{
|
||
name: "Encadrement des participants",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Jardin partagé",
|
||
description: "Aider et conseiller sur la plantation et l’entretien.",
|
||
volunteers_count: 3
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Collecte de Sang",
|
||
description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
|
||
image: null,
|
||
tasks: [
|
||
{
|
||
name: "Accueil et enregistrement",
|
||
start: "2020-09-24 22:21:20",
|
||
end: "2020-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Enregistrer les donneurs et expliquer le processus.",
|
||
volunteers_count: 4
|
||
},
|
||
{
|
||
name: "Préparation des salles",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Installer les lits, tables et matériel médical.",
|
||
volunteers_count: 3
|
||
},
|
||
{
|
||
name: "Assistance post-don",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
|
||
volunteers_count: 2
|
||
},
|
||
{
|
||
name: "Accueil et enregistrement",
|
||
start: "2020-09-24 22:21:20",
|
||
end: "2020-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Enregistrer les donneurs et expliquer le processus.",
|
||
volunteers_count: 4
|
||
},
|
||
{
|
||
name: "Préparation des salles",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Installer les lits, tables et matériel médical.",
|
||
volunteers_count: 3
|
||
},
|
||
{
|
||
name: "Assistance post-don",
|
||
start: "2018-09-24 22:21:20",
|
||
end: "2018-09-24 22:21:20",
|
||
place: "Salle municipale",
|
||
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
|
||
volunteers_count: 2
|
||
},
|
||
]
|
||
},
|
||
]);
|
||
|
||
const compareDate = (dateA, dateB) => {
|
||
const dA = new Date(dateA);
|
||
const dB = new Date(dateB);
|
||
|
||
if (filters.yearOrder === "asc") {
|
||
return dB - dA;
|
||
} else {
|
||
return dA - dB;
|
||
}
|
||
};
|
||
|
||
const sortedEvents = [...events].sort((a, b) => {
|
||
const sortedATasks = a.tasks.sort((taskA, taskB) =>
|
||
compareDate(taskA.start, taskB.start)
|
||
);
|
||
const sortedBTasks = b.tasks.sort((taskA, taskB) =>
|
||
compareDate(taskA.start, taskB.start)
|
||
);
|
||
|
||
const timeComparison = compareDate(
|
||
sortedATasks[0].start,
|
||
sortedBTasks[0].start
|
||
);
|
||
|
||
if (timeComparison !== 0) {
|
||
return timeComparison;
|
||
}
|
||
|
||
if (filters.alphabetical !== null) {
|
||
return filters.alphabetical === "asc"
|
||
? a.name.localeCompare(b.name)
|
||
: b.name.localeCompare(a.name);
|
||
}
|
||
|
||
return 0;
|
||
});
|
||
|
||
|
||
|
||
|
||
return (
|
||
<div className={styles.eventsContainer}>
|
||
<div className={styles.eventsButtons}>
|
||
<Link
|
||
to="/event/create"
|
||
className={`${styles.createButton} glassCard`}>
|
||
+
|
||
</Link>
|
||
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
|
||
<button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
|
||
<path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
|
||
</svg>
|
||
</button>
|
||
<div className={styles.filterMenu}>
|
||
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={styles.eventsList}>
|
||
{sortedEvents.map((event, index) => (
|
||
<Event key={index} event={event} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default EventsPage; |