From ecbddd3a588c77dbe2ba94a762813f471d2b77b6 Mon Sep 17 00:00:00 2001 From: trochas Date: Sun, 11 Jan 2026 01:36:32 +0100 Subject: [PATCH] barre menu en haut + ajustement style --- front_end/src/App.css | 12 +++ front_end/src/App.tsx | 14 +-- front_end/src/components/SwitchThemeColor.tsx | 1 - front_end/src/components/login.tsx | 96 +++++++++---------- .../src/components/object/detailSession.tsx | 4 +- .../src/components/style/SwitchThemeColor.css | 11 --- front_end/src/components/style/edt.css | 4 +- front_end/src/components/style/objectList.css | 7 ++ front_end/src/components/style/topBar.css | 69 +++++++++++++ front_end/src/components/topBar.tsx | 25 +++++ 10 files changed, 168 insertions(+), 75 deletions(-) delete mode 100644 front_end/src/components/style/SwitchThemeColor.css create mode 100644 front_end/src/components/style/topBar.css create mode 100644 front_end/src/components/topBar.tsx diff --git a/front_end/src/App.css b/front_end/src/App.css index 4108493..1dffe81 100644 --- a/front_end/src/App.css +++ b/front_end/src/App.css @@ -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; diff --git a/front_end/src/App.tsx b/front_end/src/App.tsx index 5e78330..5753987 100644 --- a/front_end/src/App.tsx +++ b/front_end/src/App.tsx @@ -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() {
- -

Frisbyee

- - - - - + +

Frisbyee

+ + + +
diff --git a/front_end/src/components/SwitchThemeColor.tsx b/front_end/src/components/SwitchThemeColor.tsx index 6b92c37..913d2ed 100644 --- a/front_end/src/components/SwitchThemeColor.tsx +++ b/front_end/src/components/SwitchThemeColor.tsx @@ -1,5 +1,4 @@ import { useState,useEffect } from 'react'; -import './style/SwitchThemeColor.css'; const SwitchThemeColor = () => { diff --git a/front_end/src/components/login.tsx b/front_end/src/components/login.tsx index 8f367f0..bc68a74 100644 --- a/front_end/src/components/login.tsx +++ b/front_end/src/components/login.tsx @@ -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(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( -
-
- Etat : {keycloak.authenticated ? 'connecté' : 'non connecté'} +
+ + {open && +
+
+
+ Prenom : { user.prenom} +
+
+ Nom : { user.nom} +
+ {/*
Keycloak ID : { keycloak.tokenParsed?.sub}
*/} + {user instanceof Athlete &&
Role : Athlete
} + {user instanceof Coach &&
Role : Coach
} + {user instanceof Admin &&
Role : Admin
} + +
+ + +
+ }
- {keycloak.authenticated && + ) + } + else{ + return(
-
- Keycloak ID : { keycloak.tokenParsed?.sub} -
-
- Prenom : { user.prenom} -
-
- Nom : { user.nom} -
- {user instanceof Athlete &&
Role : Athlete
} - {user instanceof Coach &&
Role : Coach
} - {user instanceof Admin &&
Role : Admin
} - +
- } - - -
- ) + ) + } + } export default Login diff --git a/front_end/src/components/object/detailSession.tsx b/front_end/src/components/object/detailSession.tsx index c9df293..5782390 100644 --- a/front_end/src/components/object/detailSession.tsx +++ b/front_end/src/components/object/detailSession.tsx @@ -108,8 +108,8 @@ function DetailSession({session,open,setOpen}:Props){ Activités :
{activites.map((activite,index)=>( -
- {activite.nom} +
+ - {activite.nom} {canEdit && ( )} diff --git a/front_end/src/components/style/SwitchThemeColor.css b/front_end/src/components/style/SwitchThemeColor.css deleted file mode 100644 index 0779267..0000000 --- a/front_end/src/components/style/SwitchThemeColor.css +++ /dev/null @@ -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); -} diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css index 642b743..ccc46c5 100644 --- a/front_end/src/components/style/edt.css +++ b/front_end/src/components/style/edt.css @@ -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{ diff --git a/front_end/src/components/style/objectList.css b/front_end/src/components/style/objectList.css index 09028d3..bc6c3df 100644 --- a/front_end/src/components/style/objectList.css +++ b/front_end/src/components/style/objectList.css @@ -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; +} \ No newline at end of file diff --git a/front_end/src/components/style/topBar.css b/front_end/src/components/style/topBar.css new file mode 100644 index 0000000..345612c --- /dev/null +++ b/front_end/src/components/style/topBar.css @@ -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; +} \ No newline at end of file diff --git a/front_end/src/components/topBar.tsx b/front_end/src/components/topBar.tsx new file mode 100644 index 0000000..8895bd9 --- /dev/null +++ b/front_end/src/components/topBar.tsx @@ -0,0 +1,25 @@ +import Login from "./login" +import SwitchThemeColor from "./SwitchThemeColor" + +function TopBar(){ + + + + + return( +
+
+ +

Frisbyee

+
+ + +
+ + +
+
+ ) +} + +export default TopBar