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

barre menu en haut + ajustement style

Browse Source
This commit is contained in:
trochas
2026-01-11 01:36:32 +01:00
parent b9e67589ed
commit ecbddd3a58
10 changed files with 168 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front_end/src/App.css
View File

@@ -15,6 +15,7 @@
--green-A-primary: #10b98120;
--green-A-secondary: #05966920;
--green-A-dark: #04785720;
--themeButtonColor : #00AAFF;
}
[data-theme='light'] {
@@ -33,6 +34,7 @@
--green-A-primary: #00ce8920;
--green-A-secondary: #00a57120;
--green-A-dark: #00825d20;
--themeButtonColor : #FFAA00;
}
/* Reset et base */
@@ -69,12 +71,22 @@ code {
color: var(--green-primary);
}
.App{
display: grid;
padding: 10px;
gap:10px;
}
/* Container principal */
.app-container {
min-height: 100vh;
background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
}
.composant-padding{
padding: 10px;
}
.composant-container{
background-color: var(--tint2);
border-radius: 30px;

14
front_end/src/App.tsx
View File

@@ -11,6 +11,7 @@ import EdtCoach from './components/edt_coach'
import { Coach } from "./classes";
import RessourcePanel from './components/ressourcePanel';
import TestAPI from './components/test_api';
import TopBar from './components/topBar';
const keycloakInitOptions = {
onLoad: 'login-required',
@@ -22,13 +23,12 @@ function App() {
<ReactKeycloakProvider authClient={keycloak} /*initOptions={keycloakInitOptions}*/>
<LocalDataProvider>
<div className="App">
<SwitchThemeColor/>
<h1>Frisbyee</h1>
<Login/>
<RessourcePanel/>
<EDT/>
<CreateSession/>
<TestAPI/>
<TopBar/>
<h1>Frisbyee</h1>
<RessourcePanel/>
<EDT/>
<CreateSession/>
<TestAPI/>
</div>
</LocalDataProvider>
</ReactKeycloakProvider>

1
front_end/src/components/SwitchThemeColor.tsx
View File

@@ -1,5 +1,4 @@
import { useState,useEffect } from 'react';
import './style/SwitchThemeColor.css';
const SwitchThemeColor = () => {

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

@@ -1,49 +1,27 @@
import { useKeycloak } from '@react-keycloak/web'
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { Admin, Athlete, Coach, User } from '../classes';
import { useLocalData } from '../context/useLocalData';
import { loginOrRegister, postAthlete } from '../requetes';
import { clearAuthToken, setAuthToken } from '../api';
import { AthleteDTO } from '../classesDTO';
import { Modal } from './Modal';
import './style/topBar.css';
export const Login =() =>{
const {user,setUser} = useLocalData()
const { keycloak } = useKeycloak();
const [open,setOpen] = useState<boolean>(false);
/*useEffect(() => {
const syncAndLoadUser = async () => {
if (keycloak.authenticated && keycloak.token && keycloak.tokenParsed) {
try {
const newAthlete: Athlete = new Athlete();
newAthlete.keycloakId = keycloak.tokenParsed.sub || "";
newAthlete.email = keycloak.tokenParsed.email || "";
newAthlete.nom = keycloak.tokenParsed.family_name || "";
newAthlete.prenom = keycloak.tokenParsed.given_name || "";
setAuthToken(keycloak.token);
const athlete: Athlete = await postAthlete(newAthlete);
setUser(athlete);
} catch (error) {
console.error("Error :", error);
}
}
};
syncAndLoadUser();
}, [keycloak.authenticated, keycloak.token, setUser]);
*/
async function loginUser(){
if(keycloak.authenticated){
setAuthToken(keycloak.token);
//alert("Connexion en cours : " + keycloak.tokenParsed?.sub + " " + keycloak.tokenParsed?.realm_access?.roles);
const logedUser = await loginOrRegister(keycloak);
console.log(logedUser);
if(logedUser!==null){
setUser(logedUser);
// alert("Connexion avec succès ! " + keycloak.tokenParsed?.sub);
}
else{
alert("Erreur de connexion " + keycloak.tokenParsed?.sub + " " + keycloak.tokenParsed?.realm_access?.roles);
@@ -63,37 +41,51 @@ export const Login =() =>{
keycloak.logout()
setUser(new User());
clearAuthToken();
setOpen(false);
}
function handleOpen(): void {
setOpen(!open);
}
if(keycloak.authenticated){
return(
<div>
<div>
Etat : {keycloak.authenticated ? 'connecté' : 'non connecté'}
<div className='loginContainer'>
<button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button>
{open &&
<div className='login'>
<div>
<div>
Prenom : { user.prenom}
</div>
<div>
Nom : { user.nom}
</div>
{/* <div>Keycloak ID : { keycloak.tokenParsed?.sub}</div> */}
{user instanceof Athlete && <div>Role : Athlete</div>}
{user instanceof Coach && <div>Role : Coach</div>}
{user instanceof Admin && <div>Role : Admin</div>}
</div>
<button onClick={() => handleLogout()}>
Se déconnecter
</button>
</div>
}
</div>
{keycloak.authenticated &&
)
}
else{
return(
<div>
<div>
Keycloak ID : { keycloak.tokenParsed?.sub}
</div>
<div>
Prenom : { user.prenom}
</div>
<div>
Nom : { user.nom}
</div>
{user instanceof Athlete && <div>Role : Athlete</div>}
{user instanceof Coach && <div>Role : Coach</div>}
{user instanceof Admin && <div>Role : Admin</div>}
<button onClick={() => handleLogin()}>
Se connecter
</button>
</div>
}
<button onClick={() => handleLogin()}>
Se connecter
</button>
<button onClick={() => handleLogout()}>
Se déconnecter
</button>
</div>
)
)
}
}
export default Login

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

@@ -108,8 +108,8 @@ function DetailSession({session,open,setOpen}:Props){
Activités :
<div className="session_modal_activite_list">
{activites.map((activite,index)=>(
<div>
{activite.nom}
<div className="activiteList">
- {activite.nom}
{canEdit && (
<button className="deleteButton" onClick={() => handleDeleteActivite(activite)}>x</button>
)}

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

@@ -1,11 +0,0 @@
.ButtonTheme{
height: 35px;
width: 39px;
color: var(--text);
background-color: var(--tint3);
border-radius: 10px;
margin: 0px;
font-size: 20px;
display: inline;
border-color: var(--green-A-primary);
}

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

@@ -32,11 +32,10 @@
}
.edt_colonne {
display: grid;
background-color: var(--tint3);
border-radius: 20px;
container-type: inline-size;
transition: all 0.3s ease;
height: 100%;
}
@@ -49,6 +48,7 @@
font-size: 1em;
background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark));
font-weight: 600;
font-size: large;
}
.today{

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

@@ -52,7 +52,14 @@
}
.session_modal_activite_list{
display: grid;
padding: 10px;
background-color: var(--tint3);
border-radius: 10px;
gap: 5px;
}
.activiteList{
display: flex;
gap: 10px;
}

69
front_end/src/components/style/topBar.css Normal file
View File

@@ -0,0 +1,69 @@
.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);
}
.toBarLeft{
display: flex;
gap: 10px;
align-items: center;
}
.topBarRight{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.loginContainer{
position: relative;
}
.login{
position:absolute;
right: 0;
top: 1;
display: grid;
gap:15px;
width: fit-content;
white-space: nowrap;
align-items: left;
background: var(--tint2) ;
padding: 10px;
border-radius: 15px;
border: 3px solid var(--tint5);
}
.loginButton{
width: 120px;
height: 30px;
border-radius: 15px;
}
.ButtonTheme{
height: 40px;
width: 40px;
color: var(--text);
background-color: var(--tint3);
border-radius: 15px;
font-size: 16px;
border-color: var(--tint5);
}
.ButtonTheme:hover{
border-color: var(--themeButtonColor);
color: var(--themeButtonColor);
}
.logo{
height: 30px;
}

25
front_end/src/components/topBar.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Login from "./login"
import SwitchThemeColor from "./SwitchThemeColor"
function TopBar(){
return(
<div className="topBar">
<div className="toBarLeft">
<img className="logo" src="/Frisbyee_logo.png"/>
<h2>Frisbyee</h2>
</div>
<div className="topBarRight">
<SwitchThemeColor/>
<Login/>
</div>
</div>
)
}
export default TopBar