vuminh224/hackathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge + clean

Browse Source
This commit is contained in:
trochas
2026-01-11 20:39:36 +01:00
parent c8c98cadeb 40917f52d4
commit 6ed94c17b5
9 changed files with 309 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
front_end/src/App.css
View File

@@ -1,40 +1,52 @@
/* Variables de thème */
[data-theme='dark'] {
--tint0: #000000;
--tint1: #0b0c0e;
--tint2: #16181d;
--tint3: #21252b;
--tint4: #2c313a;
--tint5: #373d48;
--text: #FFFFFF;
--tint0: #0a0e27;
--tint1: #1a1f3a;
--tint2: #232d4a;
--tint3: #2e3a59;
--tint4: #3d4a6f;
--tint5: #4a5a85;
--text: #f0f4f8;
--text2: #000000;
--disable: #02291d;
--green-primary: #10b981;
--green-secondary: #059669;
--green-dark: #047857;
--green-A-primary: #10b98120;
--green-A-secondary: #05966920;
--green-A-dark: #04785720;
--themeButtonColor : #00AAFF;
--green-A-primary: #10b98130;
--green-A-secondary: #05966930;
--green-A-dark: #04785730;
--themeButtonColor: #00AAFF;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
--blue-accent: #3b82f6;
--purple-accent: #a78bfa;
--cyan-accent: #06b6d4;
}
[data-theme='light'] {
--tint0: #ffffff;
--tint1: #f4f1f1;
--tint2: #e8e4e3;
--tint3: #ddd6d5;
--tint4: #d2c8c6;
--tint5: #c6bab8;
--text: #000000;
--tint0: #f8fafc;
--tint1: #f1f5f9;
--tint2: #e2e8f0;
--tint3: #cbd5e1;
--tint4: #b0bac4;
--tint5: #94a3b8;
--text: #0f172a;
--text2: #FFFFFF;
--disable: #02291d;
--green-primary: #00ce89;
--green-secondary: #00a571;
--green-dark: #00825d;
--green-A-primary: #00ce8920;
--green-A-secondary: #00a57120;
--green-A-dark: #00825d20;
--themeButtonColor : #FFAA00;
--green-primary: #10b981;
--green-secondary: #059669;
--green-dark: #047857;
--green-A-primary: #10b98125;
--green-A-secondary: #05966925;
--green-A-dark: #04785725;
--themeButtonColor: #f59e0b;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
--blue-accent: #3b82f6;
--purple-accent: #a855f7;
--cyan-accent: #06b6d4;
}
/* Reset et base */
@@ -46,17 +58,18 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--tint0);
background: linear-gradient(135deg, var(--tint0) 0%, var(--tint1) 100%);
color: var(--text);
transition: background-color 0.3s ease, color 0.3s ease;
transition: background 0.4s ease, color 0.4s ease;
font-weight: 400;
line-height: 1.6;
}
.padding{
.padding {
padding: 10px
}
@@ -71,10 +84,23 @@ code {
color: var(--green-primary);
}
.App{
.App {
display: grid;
padding: 10px;
gap:10px;
padding: 20px;
gap: 24px;
max-width: 1400px;
margin: 0 auto;
}
.App h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
letter-spacing: -0.5px;
}
/* Container principal */
@@ -83,18 +109,20 @@ code {
background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
}
.composant-padding{
padding: 10px;
.composant-padding {
padding: 10px;
}
.composant-container{
background-color: var(--tint2);
border-radius: 30px;
padding: 10px;
border: 2px solid var(--tint4);
box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
.composant-container {
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 24px;
padding: 24px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Header / Navigation */
.app-header {
background-color: var(--tint1);
@@ -134,18 +162,18 @@ code {
/* Cards et containers */
.card {
background-color: var(--tint1);
background: linear-gradient(135deg, var(--tint1) 0%, var(--tint2) 100%);
border-radius: 20px;
padding: 20px;
border: 2px solid var(--green-A-secondary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
padding: 24px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
border-color: var(--green-primary);
box-shadow: 0 6px 16px var(--green-A-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--green-A-primary);
transform: translateY(-4px);
}
.card-header {
@@ -171,20 +199,21 @@ input[type="time"],
input[type="search"],
input[type="datetime-local"],
textarea {
background-color: var(--tint3);
background-color: var(--tint2);
color: var(--text);
border: 2px solid var(--tint5);
border-radius: 8px;
padding: 10px 14px;
transition: all 0.3s ease;
border: 1px solid var(--tint4);
border-radius: 12px;
padding: 12px 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 15px;
font-family: inherit;
}
input:focus,
textarea:focus {
outline: none;
border-color: var(--green-primary);
background-color: var(--tint3);
background-color: var(--tint1);
box-shadow: 0 0 0 3px var(--green-A-primary);
}
@@ -227,23 +256,29 @@ select option {
/* Buttons */
button {
color: var(--text);
background-color: var(--tint3);
border: 2px solid var(--tint5);
border-radius: 8px;
padding: 5px 10px;
background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border: 1px solid var(--tint4);
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 600;
font-size: 14px;
display: inline-block;
width: auto;
box-shadow: var(--shadow-sm);
}
button:hover {
background-color: var(--tint4);
background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
border-color: var(--green-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 20px var(--green-A-primary);
}
button:active {
transform: translateY(0);
}
button:active {
@@ -290,7 +325,7 @@ button.secondary:hover {
.deleteButton,
button.delete,
.btn-danger {
background-color: #dc2626;
background: #dc2626;
border: 2px solid #991b1b;
border-radius: 10px;
color: white;
@@ -299,7 +334,7 @@ button.delete,
.deleteButton:hover,
button.delete:hover,
.btn-danger:hover {
background-color: #b91c1c;
background: #b91c1c;
border-color: #7f1d1d;
}
@@ -307,7 +342,7 @@ button.delete:hover,
.addButton,
button.add,
.btn-success {
background-color: var(--green-primary);
background: var(--green-primary);
border: none;
border-radius: 10px;
color: white;
@@ -430,7 +465,8 @@ td {
/* Lists */
ul, ol {
ul,
ol {
color: var(--text);
padding-left: 20px;
}
@@ -547,6 +583,7 @@ input[type="radio"] {
from {
opacity: 0;
}
to {
opacity: 1;
}
@@ -557,6 +594,7 @@ input[type="radio"] {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);

2
front_end/src/components/edt.tsx
View File

@@ -170,7 +170,7 @@ export const EDT =() =>{
<div className="edt_colonnes">
<div className="top_left_loading">{loading && <Loading/>}</div>
{week_days_nums.map((num,index)=>(
<div className={`edt_colonne`}>
<div className={`edt_colonne ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
<div className={`edt_day_header ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
<div> {week_days[index]} </div>
<div className="edt_date"> {dateToString(getNextDay(week,index))} </div>

19
front_end/src/components/login.tsx
View File

@@ -1,5 +1,5 @@
import { useKeycloak } from '@react-keycloak/web'
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { Admin, Athlete, Coach, User } from '../classes';
import { useLocalData } from '../context/useLocalData';
import { loginOrRegister, postAthlete } from '../requetes';
@@ -9,10 +9,25 @@ import { Modal } from './Modal';
import './style/topBar.css';
export const Login =() =>{
const ref = useRef<HTMLDivElement | null>(null);
const {userLocal: user,setUserLocal: setUser} = useLocalData()
const { keycloak } = useKeycloak();
const [open,setOpen] = useState<boolean>(false);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
async function loginUser(){
if(keycloak.authenticated){
@@ -50,7 +65,7 @@ export const Login =() =>{
if(keycloak.authenticated){
return(
<div className='loginContainer'>
<div ref={ref} className='loginContainer'>
<button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button>
{open &&
<div className='login'>

6
front_end/src/components/object/detailSession.tsx
View File

@@ -37,10 +37,6 @@ function DetailSession({session,open,setOpen}:Props){
}
async function updateActivites(){
const coach = await getCoachOfSession(session);
if(coach!=null){
session.coach = coach;
}
const newActivites = await getSessionOfActivite(session);
if(newActivites!=null){
session.activites=newActivites;
@@ -97,7 +93,7 @@ function DetailSession({session,open,setOpen}:Props){
return(
<Modal isOpen={open} onClose={() => setOpen(false)}>
<div className="object_modal">
<div>
<h2>{session.name}</h2>
<div>{hoursToString(sDate)}</div>

11
front_end/src/components/style/createSession.css
View File

@@ -1,5 +1,8 @@
.createActivite{
background: var(--tint1);
padding: 15px;
border-radius: 15px;
.createActivite {
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 20px;
border-radius: 16px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

93
front_end/src/components/style/edt.css
View File

@@ -1,17 +1,24 @@
.edt{
background-color: var(--tint2);
border-radius: 30px;
padding: 10px;
border: 2px solid var(--tint4);
box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
.edt {
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 24px;
padding: 20px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.edt_header{
.edt:hover {
border-color: var(--green-primary);
box-shadow: 0 12px 40px var(--green-A-primary);
}
.edt_header {
justify-content: center;
display: grid;
grid-template-columns: repeat(3, 0.5fr);
padding-bottom: 10px;
gap: 5%;
padding-bottom: 16px;
gap: 12px;
margin-bottom: 12px;
}
.edt_colonnes {
@@ -24,7 +31,7 @@
width: 100%;
}
.edt_loading{
.edt_loading {
position: absolute;
inset: 0;
display: grid;
@@ -32,31 +39,43 @@
}
.edt_colonne {
background-color: var(--tint3);
border-radius: 20px;
transition: all 0.3s ease;
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint4) 100%);
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
border: 1px solid var(--tint4);
padding: 12px;
}
.edt_colonne.today {
background: linear-gradient(135deg, var(--tint1) 25%, var(--tint2) 100%);
border: 1px solid var(--green-primary);
}
.edt_day_header{
.edt_day_header {
font-size: clamp(5px, 1vw, 18px);
padding: 8px;
border-radius: 20px;
padding: 12px;
border-radius: 12px;
height: fit-content;
text-align: center;
font-size: 1em;
background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark));
font-weight: 600;
background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
font-weight: 700;
font-size: large;
color: white;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.today{
background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
.edt_day_header.today {
background: linear-gradient(135deg, var(--green-dark) 0%, var(--cyan-accent) 100%);
color: #FFFFFF;
box-shadow: 0 6px 20px var(--green-A-primary);
transform: scale(1.02);
}
.edt_day_content{
.edt_day_content {
display: flex;
flex-direction: column;
gap: 8px;
@@ -68,39 +87,39 @@
.edt_session {
font-size: clamp(1px, 8cqi, 18px);
gap: 8px;
background-color: var(--tint4);
background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
border-radius: 12px;
padding: 5%;
padding: 12px;
min-width: 0;
border-left: 3px solid var(--green-primary); /* Accent vert à gauche */
transition: all 0.3s ease;
border-left: 4px solid var(--green-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.edt_session:hover {
background-color: var(--tint2);
border-left-width: 5px;
transform: translateX(3px);
box-shadow: -2px 2px 8px var(--green-A-primary);
background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
border-left-width: 6px;
transform: translateX(4px);
box-shadow: 0 8px 16px var(--green-A-primary);
}
.edt_session:active {
background-color: var(--tint5);
transform: translateX(1px);
}
.edt_session_header{
.edt_session_header {
display: flex;
gap: 5px;
}
.edt_date{
.edt_date {
font-size: 0.75em;
font-weight: 500;
}
.edt_button_week_select{
background: linear-gradient(135deg, var(--green-primary), var( --green-secondary));
.edt_button_week_select {
background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
color: white;
height: 40px;
border-radius: 20px;
@@ -123,7 +142,7 @@
box-shadow: 0 1px 2px var(--green-A-primary);
}
.edt_session_modal{
.edt_session_modal {
background-color: var(--tint2);
padding: 10px;
border-radius: 20px;
@@ -132,14 +151,14 @@
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary);
}
.ent_activite_list{
.ent_activite_list {
padding: 10px;
background-color: var(--tint3);
border-radius: 10px;
border: 1px solid var(--green-A-primary);
}
.edt_activite_modal{
.edt_activite_modal {
background-color: var(--tint3);
padding: 10px;
border-radius: 20px;

66
front_end/src/components/style/objectList.css
View File

@@ -1,65 +1,81 @@
.list_object{
display: grid;
gap:10px;
background-color: var(--tint1);
padding: 10px;
border-radius: 20px;
gap: 12px;
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 16px;
border-radius: 16px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-md);
}
.list_object_modal{
display: grid;
gap:10px;
background-color: var(--tint1);
padding: 10px;
border-radius: 20px;
max-height: 200px;
gap: 12px;
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 16px;
border-radius: 16px;
max-height: 280px;
overflow-y: auto;
border: 1px solid var(--tint4);
}
.object {
font-size: clamp(1px, 8cqi, 18px);
gap: 8px;
background-color: var(--tint3);
background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border-radius: 12px;
padding: 10px;
padding: 12px;
min-width: 0;
border: 2px solid;
border-color: var(--tint3);
border: 1px solid var(--tint4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
}
.object:hover {
background-color: var(--tint2);
background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
border-color: var(--green-primary);
transform: translateY(-2px);
box-shadow: 0 8px 16px var(--green-A-primary);
}
.object:active {
background-color: var(--tint4);
background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
transform: translateY(0);
}
.object_header{
display: flex;
gap: 5px;
gap: 8px;
align-items: center;
font-weight: 600;
}
.object_small{
font-size: 0.75em;
opacity: 0.8;
}
.object_modal{
background-color: var(--tint2);
padding: 10px;
border-radius: 20px;
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 14px;
border-radius: 12px;
position: relative;
border: 1px solid var(--tint4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.session_modal_activite_list{
display: grid;
padding: 10px;
background-color: var(--tint3);
border-radius: 10px;
gap: 5px;
padding: 12px;
background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border-radius: 12px;
gap: 8px;
border: 1px solid var(--tint4);
}
.activiteList{
display: flex;
gap: 10px;
gap: 12px;
flex-wrap: wrap;
}

98
front_end/src/components/style/topBar.css
View File

@@ -1,18 +1,27 @@
.topBar{
.topBar {
display: flex;
justify-content: space-between;
align-items: center;
padding:15px;
background: var(--tint2);
border-radius: 30px;
height: 60px;
border: 3px solid var(--tint5);
padding: 16px 24px;
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 20px;
height: auto;
min-height: 70px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-md);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topBar:hover {
border-color: var(--green-primary);
box-shadow: 0 8px 32px var(--green-A-primary);
}
.toBarLeft{
flex: 1;
display: flex;
gap: 10px;
gap: 16px;
align-items: center;
}
@@ -27,53 +36,86 @@
.topBarRight{
flex: 1;
font-weight: 600;
}
.toBarLeft h2 {
background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
font-size: 1.5rem;
}
.topBarRight {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.loginContainer{
.loginContainer {
position: relative;
}
.login{
position:absolute;
.login {
position: absolute;
right: 0;
top: 1;
top: calc(100% + 8px);
display: grid;
gap:15px;
gap: 12px;
width: fit-content;
white-space: nowrap;
align-items: left;
background: var(--tint2) ;
padding: 10px;
border-radius: 15px;
border: 3px solid var(--tint5);
background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 16px;
border-radius: 16px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-lg);
z-index: 1000;
backdrop-filter: blur(10px);
}
.loginButton{
.loginButton {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 30px;
border-radius: 15px;
}
.ButtonTheme{
height: 40px;
width: 40px;
.ButtonTheme {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 44px;
color: var(--text);
background-color: var(--tint3);
border-radius: 15px;
font-size: 16px;
border-color: var(--tint5);
background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border: 1px solid var(--tint4);
border-radius: 12px;
font-size: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.ButtonTheme:hover{
.ButtonTheme:hover {
border-color: var(--themeButtonColor);
color: var(--themeButtonColor);
/* color: var(--themeButtonColor); */
box-shadow: 0 4px 12px rgba(0, 170, 255, 0.3);
transform: scale(1.05) rotateZ(-180deg);
}
.logo{
height: 30px;
.logo {
height: 40px;
filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3));
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo:hover {
transform: scale(1.1) rotateY(10deg);
}

30
front_end/src/requetes.tsx
View File

@@ -219,28 +219,11 @@ export async function postAthlete(athlete: Athlete):Promise<Athlete>{
export async function postSession(session: Session){
try {
/* const data = {
name: session.name,
creneau: session.creneau, // string ISO OK
duree: session.duree,
isRecurrent: session.isRecurrent,
coachId: session.coach?.id,
groupe: session.groupe ? session.groupe : undefined,
}*/
const response = await sessionService.create(session.toDTO());
session.id = response.data.id; //TODO ?
session.activites.forEach(activite => {
const data2 = {
name: activite.nom,
duree: activite.duree,
date: activite.data,
theme: activite.theme,
sessionId: session.id, //TODO
}
activiteService.create(data2);
activiteService.create(activite.toDTO());
// console.log("Session créée");
});
} catch (error) {
@@ -300,9 +283,14 @@ export async function getSessionsOfUserAPI(user:User): Promise<Session[]>{
sessionsDTO = response.data;
}
const sessions:Session[] = [];
sessionsDTO.forEach(sessionDTO => {
sessions.push(new Session(sessionDTO));
});
for (const sessionDTO of sessionsDTO) {
const session = new Session(sessionDTO);
const coach = await getCoachByIdAPI(sessionDTO.coachId);
if(coach!=null){
session.coach = coach;
}
sessions.push(session);
}
return sessions;
}catch (error) {