From 7b2b864d86e4da2ff336cfaf6c39ce2363fb3fb7 Mon Sep 17 00:00:00 2001 From: trochas Date: Tue, 6 Jan 2026 16:05:41 +0100 Subject: [PATCH] edt (et pas ent) toujours en cours --- front_end/src/App.tsx | 4 +- front_end/src/components/{ent.tsx => edt.tsx} | 44 ++++++------ front_end/src/components/style/edt.css | 70 +++++++++++++++++++ front_end/src/components/style/ent.css | 46 ------------ front_end/src/index.css | 18 ++--- 5 files changed, 106 insertions(+), 76 deletions(-) rename front_end/src/components/{ent.tsx => edt.tsx} (69%) create mode 100644 front_end/src/components/style/edt.css delete mode 100644 front_end/src/components/style/ent.css diff --git a/front_end/src/App.tsx b/front_end/src/App.tsx index e5ca1f0..d78fb61 100644 --- a/front_end/src/App.tsx +++ b/front_end/src/App.tsx @@ -4,7 +4,7 @@ import { ReactKeycloakProvider } from '@react-keycloak/web' import keycloak from './keycloak' import Login from './components/login'; import { LocalDataProvider } from './provider/LocalDataProvider'; -import ENT from './components/ent'; +import EDT from './components/edt'; import SwitchThemeColor from './components/SwitchThemeColor'; import CreateSession from './components/createSession' @@ -22,7 +22,7 @@ function App() {

Frisbyee

- + diff --git a/front_end/src/components/ent.tsx b/front_end/src/components/edt.tsx similarity index 69% rename from front_end/src/components/ent.tsx rename to front_end/src/components/edt.tsx index 5a3749c..4ebc37d 100644 --- a/front_end/src/components/ent.tsx +++ b/front_end/src/components/edt.tsx @@ -1,10 +1,10 @@ import { useEffect, useState } from "react" import { getUserTest, Session, User } from "../classes" import { useLocalData } from "../context/useLocalData" -import './style/ent.css'; +import './style/edt.css'; import {updateSessionsOfUserAPI } from "../requetes"; -export const ENT =() =>{ +export const EDT =() =>{ const {user,setUser} = useLocalData() const [sessions, setSessions] = useState([]) const [week,setWeek] = useState(getFirstDay(new Date())); @@ -78,8 +78,8 @@ export const ENT =() =>{ } function hoursToString(date:Date){ - const hh_prefix = date.getDate()<10 ? "0" : ""; - const mm_prefix = date.getMonth()+1<10 ? "0" : ""; + const hh_prefix = date.getHours()<10 ? "0" : ""; + const mm_prefix = date.getMinutes()+1<10 ? "0" : ""; const hh:String = hh_prefix+date.getHours().toString(); const mm:String = mm_prefix+date.getMinutes().toString(); return hh+"h"+mm; @@ -88,30 +88,34 @@ export const ENT =() =>{ function displaySession(session:Session){ const sDate = session.creneau; return( -
-
{sDate.getHours()+"h"+sDate.getMinutes()}
+
+
{hoursToString(sDate)}
{dateToString(sDate)} - -
{session.id}
+
) } return( -
-
- - +
+
+ +
-
+
{week_days_nums.map((num,index)=>( -
- {week_days[index]} {dateToString(getNextDay(week,index))} - {sessions.map((session,index2)=>( - session.creneau.getDay()===num && - displaySession(session) - ))} +
+
+
{week_days[index]}
+
{dateToString(getNextDay(week,index))}
+
+
+ {sessions.map((session,index2)=>( + session.creneau.getDay()===num && + displaySession(session) + ))} +
))} @@ -120,4 +124,4 @@ export const ENT =() =>{ ) } -export default ENT +export default EDT diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css new file mode 100644 index 0000000..14cc949 --- /dev/null +++ b/front_end/src/components/style/edt.css @@ -0,0 +1,70 @@ +.edt{ + justify-contedt: cedter; + background-color: var(--tint1); + border-radius: 30px; + padding: 10px; +} + +.edt_header{ + justify-contedt: cedter; + display: grid; + grid-template-columns: repeat(2, 1fr); + /* background-color: #0000FF; */ + padding-bottom: 10px; + gap: 30%; +} + +.edt_colonnes { + display: grid; + align-items: flex-start; + grid-template-columns: repeat(7, 1fr); + gap: 16px; + color: var(--text); + /* background-color: #00FF00; */ + width: 100%; +} + +.edt_colonne { + display: grid; + background-color: var(--tint3); + border-radius: 20px; +} +.edt_day_header{ + padding: 8px; + /* background-color: var(--tint2); */ + border-radius: 20px; + height: 50px; + text-align: cedter; + font-size: 1em; +} + +.edt_day_contedt{ + display: grid; + gap: 8px; + padding: 8px; + border-radius: 20px; +} + + +.edt_session { + gap: 8px; + background-color: var(--tint4); + border-radius: 12px; + padding: 8px; + height: 80px; +} + +.edt_button_week_select{ + background-color: var(--tint3); + color: var(--text); + height: 40px; + border-radius: 20px; +} + + +.edt_button{ + background-color: var(--tint3); + color: var(--text); + height: 40px; + border-radius: 20px; +} \ No newline at end of file diff --git a/front_end/src/components/style/ent.css b/front_end/src/components/style/ent.css deleted file mode 100644 index 74c3d28..0000000 --- a/front_end/src/components/style/ent.css +++ /dev/null @@ -1,46 +0,0 @@ -.ent{ - justify-content: center; - /* background-color: #FF0000; */ - padding: 10px; -} - -.ent_header{ - justify-content: center; - display: grid; - grid-template-columns: repeat(2, 1fr); - /* background-color: #0000FF; */ - padding-bottom: 10px; - gap: 30%; -} - -.ent_colonnes { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 16px; - color: var(--text); - /* background-color: #00FF00; */ - width: 100%; -} - -.ent_lines { - display: grid; - gap: 16px; - background-color: var(--tint2); - padding: 8px; - border-radius: 20px; -} - - -.ent_session { - gap: 5px; - background-color: var(--tint3); - border-radius: 20px; - padding: 8px; -} - -.ent_button{ - background-color: var(--tint3); - color: var(--text); - height: 30px; - border-radius: 20px; -} diff --git a/front_end/src/index.css b/front_end/src/index.css index a5a407b..3475b34 100644 --- a/front_end/src/index.css +++ b/front_end/src/index.css @@ -1,8 +1,9 @@ [data-theme='dark']{ - --tint1: #000000; - --tint2: #191c20; - --tint3: #282c34; - --tint4: rgb(53, 59, 72); + --tint0: #000000; /* 0% */ + --tint1: #0b0c0e; /* 5% */ + --tint2: #16181d; /* 10% */ + --tint3: #21252b; /* 15% */ + --tint4: #2c313a; /* 20% */ --text: #FFFFFF; @@ -14,10 +15,11 @@ } [data-theme='light']{ - --tint1: #FFFFFF; - --tint2: #E8E8EE; - --tint3: #D0D0DD; - --tint4: rgb(181, 181, 194); + --tint0: #FFFFFF; /* 100% */ + --tint1: #f4f1f1; /* 95% */ + --tint2: #e8e4e3; /* 90% */ + --tint3: #ddd6d5; /* 85% */ + --tint4: #d2c8c6; /* 80% */ --text: #000000; --text2:#FFFFFF;